@almoamendev/ngx-md3 0.6.0 → 0.7.1

package/fesm2022/almoamendev-ngx-md3.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, effect, Directive, inject, signal, computed, untracked, Injectable, InjectionToken, viewChild, NgZone, ElementRef, Component, ViewChild, isDevMode, ViewContainerRef, Injector, numberAttribute, HostListener, model, contentChild, contentChildren, PLATFORM_ID, afterNextRender, output, HostBinding, TemplateRef } from '@angular/core';
+import { input, booleanAttribute, effect, Directive, inject, signal, computed, Injectable, untracked, InjectionToken, viewChild, NgZone, ElementRef, Component, ViewChild, isDevMode, ViewContainerRef, Injector, numberAttribute, HostListener, model, contentChild, contentChildren, PLATFORM_ID, afterNextRender, output, HostBinding, TemplateRef } from '@angular/core';
 import { DOCUMENT, isPlatformBrowser, NgClass, NgTemplateOutlet } from '@angular/common';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { fromEvent, startWith, map, filter, Subscription, Subject, take, takeUntil, merge } from 'rxjs';
 import * as i1 from '@angular/router';
 import { Router, NavigationEnd, RouterLinkActive } from '@angular/router';
-import { fromEvent, startWith, map, filter, Subscription, Subject, take, takeUntil, merge } from 'rxjs';
 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';
@@ -220,12 +220,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], emphasized: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasized", required: false }] }] } });
 
-class LayoutService {
+/**
+ * The state of the window and of the document, for the whole application.
+ *
+ * This service is a singleton on purpose. A layout region can appear more than once — a page
+ * scaffold, and a contained layout inside a full screen dialog — and each one keeps its own
+ * scroll and inset state in its own {@link LayoutService}. The window size, the breakpoints,
+ * the reading direction and the color scheme belong to the document, so they live here and
+ * every layout reads the same values.
+ */
+class ViewportService {
     document = inject(DOCUMENT);
     breakpointObserver = inject(BreakpointObserver);
-    // Optional — LayoutService (and anything built on Scaffold) shouldn't
-    // hard-require the Router, only benefit from it when it's present.
-    router = inject(Router, { optional: true });
     widthQueries = {
         'compact': '(max-width: 37.499em)', // < 600
         'medium': '(min-width: 37.5em) and (max-width: 52.499em)', // 600-839
@@ -238,53 +244,6 @@ class LayoutService {
         'medium': '(min-height: 30em) and (max-height: 56.249em)',
         'expanded': '(min-height: 56.25em)'
     };
-    mainPaneSub;
-    mainPaneEl;
-    panesContainerResizeObserver;
-    panesContainerResizeListener;
-    /** Floating bars currently registered, keyed by the measured element. */
-    floatingBars = new Map();
-    /** How far the main pane must move before the scroll direction flips. Stops jitter. */
-    static scrollDirectionThreshold = 64;
-    scrollPosition = 0;
-    mainScrollTop = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mainScrollTop" }] : /* istanbul ignore next */ []));
-    mainIsScrolled = computed(() => this.mainScrollTop() > 0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mainIsScrolled" }] : /* istanbul ignore next */ []));
-    /**
-     * True while the main pane moves down, false while it moves up. A small threshold keeps
-     * a jitter from flipping the value. Components that react to scrolling — the app bar and
-     * the toolbar — read this, so they can never disagree.
-     */
-    isScrollingDown = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isScrollingDown" }] : /* istanbul ignore next */ []));
-    /**
-     * Distance, in pixels, between the viewport bottom and the bottom edge of
-     * the scaffold's .md3-panes-container — i.e. whatever the bottom scaffold
-     * bar (nav bar) currently reserves, or 0 when there is none. Overlay-based
-     * components anchored to the viewport bottom (like Snackbar) read this so
-     * they never render lower than the panes container.
-     */
-    bottomInset = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "bottomInset" }] : /* istanbul ignore next */ []));
-    /**
-     * Space a floating scaffold bar covers but does not reserve, per logical block side.
-     *
-     * A floating toolbar in a bar region leaves the layout flow, so its grid track collapses
-     * and the content flows under it. This signal reports what it covers, so the scaffold can
-     * pad the main pane and overlays can stay clear of it.
-     *
-     * A floating toolbar in a *rail* region stays in the flow and reserves its own space, so
-     * it never appears here.
-     */
-    floatingInset = signal({ blockStart: 0, blockEnd: 0 }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "floatingInset" }] : /* istanbul ignore next */ []));
-    /**
-     * The distance from the viewport bottom that a viewport-anchored overlay must keep clear.
-     * It covers both the reserved bottom bar and any floating bottom bar over it.
-     */
-    bottomSafeInset = computed(() => this.bottomInset() + this.floatingInset().blockEnd, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "bottomSafeInset" }] : /* istanbul ignore next */ []));
     viewport = toSignal(fromEvent(window, 'resize').pipe(startWith(null), map(() => ({
         width: window.innerWidth,
         height: window.innerHeight
@@ -353,27 +312,120 @@ class LayoutService {
     darkMode = signal(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "darkMode" }] : /* istanbul ignore next */ []));
     constructor() {
-        // Keep the scroll direction in step with the position. Anything that writes
-        // mainScrollTop drives it, so the app bar and the toolbar always agree.
-        effect(() => {
-            this.updateScrollDirection(this.mainScrollTop());
-        });
         effect(() => {
             const darkMode = this.darkMode();
             this.document.body.classList.toggle('md-scheme-dark', darkMode);
             this.document.body.classList.toggle('md-scheme-light', !darkMode);
         });
-        // Reset the scaffold's main pane to the top after every completed
-        // navigation — otherwise a scrolled-down list page leaves the next
-        // page's content scrolled down too, since the pane itself never
-        // remounts on route change.
+    }
+    setDirection(direction) {
+        this.document.documentElement.dir = direction;
+        this.direction.set(direction);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ViewportService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ViewportService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * The state of one layout container: what its main pane scrolls, and what its floating bars
+ * cover.
+ *
+ * The service is provided at the root, and the page scaffold uses that root instance. A
+ * contained layout — `md3-layout`, the one a full screen dialog holds — provides its own
+ * instance instead, so a toolbar inside it reads the scroll and the insets of that layout and
+ * never of the page behind it.
+ *
+ * The window size, the breakpoints, the reading direction and the color scheme belong to the
+ * document, not to a container. They live in {@link ViewportService}, and every instance of
+ * this service exposes the same signals, so an instance stays a complete view of the layout.
+ */
+class LayoutService {
+    viewportService = inject(ViewportService);
+    // Optional — LayoutService (and anything built on Scaffold) shouldn't
+    // hard-require the Router, only benefit from it when it's present.
+    router = inject(Router, { optional: true });
+    mainPaneSub;
+    mainPaneEl;
+    panesContainerResizeObserver;
+    panesContainerResizeListener;
+    /** Floating bars currently registered, keyed by the measured element. */
+    floatingBars = new Map();
+    /** How far the main pane must move before the scroll direction flips. Stops jitter. */
+    static scrollDirectionThreshold = 64;
+    scrollPosition = 0;
+    mainScrollTop = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mainScrollTop" }] : /* istanbul ignore next */ []));
+    mainIsScrolled = computed(() => this.mainScrollTop() > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mainIsScrolled" }] : /* istanbul ignore next */ []));
+    /**
+     * True while the main pane moves down, false while it moves up. A small threshold keeps
+     * a jitter from flipping the value. Components that react to scrolling — the app bar and
+     * the toolbar — read this, so they can never disagree.
+     */
+    isScrollingDown = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isScrollingDown" }] : /* istanbul ignore next */ []));
+    /**
+     * Distance, in pixels, between the bottom of the container and the bottom edge of
+     * the .md3-panes-container — i.e. whatever the bottom bar currently reserves, or 0 when
+     * there is none. Overlay-based components anchored to the bottom (like Snackbar) read
+     * this so they never render lower than the panes container.
+     */
+    bottomInset = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bottomInset" }] : /* istanbul ignore next */ []));
+    /**
+     * Space a floating bar covers but does not reserve, per logical block side.
+     *
+     * A floating toolbar in a bar region leaves the layout flow, so its grid track collapses
+     * and the content flows under it. This signal reports what it covers, so the layout can
+     * pad the main pane and overlays can stay clear of it.
+     *
+     * A floating toolbar in a *rail* region stays in the flow and reserves its own space, so
+     * it never appears here.
+     */
+    floatingInset = signal({ blockStart: 0, blockEnd: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingInset" }] : /* istanbul ignore next */ []));
+    /**
+     * The distance from the bottom that an anchored overlay must keep clear. It covers both
+     * the reserved bottom bar and any floating bottom bar over it.
+     */
+    bottomSafeInset = computed(() => this.bottomInset() + this.floatingInset().blockEnd, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bottomSafeInset" }] : /* istanbul ignore next */ []));
+    // The state of the window and of the document. It is shared by every layout, so these are
+    // the same signals on every instance of this service.
+    viewport = this.viewportService.viewport;
+    widthClass = this.viewportService.widthClass;
+    heightClass = this.viewportService.heightClass;
+    direction = this.viewportService.direction;
+    isCompact = this.viewportService.isCompact;
+    isMedium = this.viewportService.isMedium;
+    isExpanded = this.viewportService.isExpanded;
+    isLarge = this.viewportService.isLarge;
+    isExtraLarge = this.viewportService.isExtraLarge;
+    isPortrait = this.viewportService.isPortrait;
+    isLandscape = this.viewportService.isLandscape;
+    preferredNavigationMode = this.viewportService.preferredNavigationMode;
+    darkMode = this.viewportService.darkMode;
+    constructor() {
+        // Keep the scroll direction in step with the position. Anything that writes
+        // mainScrollTop drives it, so the app bar and the toolbar always agree.
+        effect(() => {
+            this.updateScrollDirection(this.mainScrollTop());
+        });
+        // Reset the main pane to the top after every completed navigation — otherwise a
+        // scrolled-down list page leaves the next page's content scrolled down too, since the
+        // pane itself never remounts on route change.
         this.router?.events
             .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed())
             .subscribe(() => this.scrollMainPaneToTop());
     }
     setDirection(direction) {
-        this.document.documentElement.dir = direction;
-        this.direction.set(direction);
+        this.viewportService.setDirection(direction);
     }
     scrollMainPaneToTop() {
         this.mainPaneEl?.scrollTo({ top: 0 });
@@ -422,7 +474,8 @@ class LayoutService {
         this.unregisterPanesContainer();
         const update = () => {
             const rect = element.getBoundingClientRect();
-            this.bottomInset.set(Math.max(0, Math.round(window.innerHeight - rect.bottom)));
+            const bottom = element.ownerDocument.defaultView?.innerHeight ?? 0;
+            this.bottomInset.set(Math.max(0, Math.round(bottom - rect.bottom)));
         };
         update();
         this.panesContainerResizeObserver = new ResizeObserver(update);
@@ -431,10 +484,10 @@ class LayoutService {
         window.addEventListener('resize', update, { passive: true });
     }
     /**
-     * Register a floating bar so the scaffold and the overlays know what it covers.
+     * Register a floating bar so the layout and the overlays know what it covers.
      *
-     * Call this for a floating toolbar in a scaffold *bar* region only. A rail region keeps
-     * the toolbar in the layout flow, so it reserves its own space and needs no inset.
+     * Call this for a floating toolbar in a *bar* region only. A rail region keeps the toolbar
+     * in the layout flow, so it reserves its space and needs no inset.
      */
     registerFloatingBar(element, side) {
         this.unregisterFloatingBar(element);
@@ -2006,15 +2059,54 @@ class Scaffold {
         this.layout.unregisterPanesContainer();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Scaffold, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: Scaffold, isStandalone: true, selector: "md3-scaffold", viewQueries: [{ propertyName: "startOutlet", first: true, predicate: ["startOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }, { propertyName: "endOutlet", first: true, predicate: ["endOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }, { propertyName: "bottomOutlet", first: true, predicate: ["bottomOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }, { propertyName: "panesContainer", first: true, predicate: ["panesContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"md3-bar-region md3-bar-region-top\">\n    <ng-content select=\"[md3-scaffold-bar=top]\"></ng-content>\n</div>\n\n<ng-content select=\"[md3-scaffold-rail=leading]\"></ng-content>\n\n<div class=\"md3-panes-container\" #panesContainer>\n    <div class=\"md3-pane md3-pane-start\">\n        <ng-content select=\"[md3-scaffold-pane=start]\"></ng-content>\n        <ng-template #startOutlet cdkPortalOutlet></ng-template>\n    </div>\n    <div class=\"md3-pane md3-pane-main\">\n        <ng-content select=\"[md3-scaffold-pane=main]\"></ng-content>\n    </div>\n    <div class=\"md3-pane md3-pane-end\">\n        <ng-content select=\"[md3-scaffold-pane=end]\"></ng-content>\n        <ng-template #endOutlet cdkPortalOutlet></ng-template>\n    </div>\n</div>\n\n<!-- Standard bottom sheets dock here, between the content and the bottom bar. The region\n     measures zero until one opens, so it reserves nothing the rest of the time. -->\n<div class=\"md3-bottom-sheet-region\">\n    <ng-template #bottomOutlet cdkPortalOutlet></ng-template>\n</div>\n\n<ng-content select=\"[md3-scaffold-rail=trailing]\"></ng-content>\n\n<div class=\"md3-bar-region md3-bar-region-bottom\">\n    <ng-content select=\"[md3-scaffold-bar=bottom]\"></ng-content>\n</div>", styles: [":host{display:grid;width:100%;height:100dvh;min-height:0em;overflow:hidden;grid-template-areas:\"top top top\" \"start content end\" \"start sheet end\" \"bottom bottom bottom\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto}:host .md3-bar-region{display:flex;flex-direction:column;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:visible;z-index:2}:host .md3-bar-region.md3-bar-region-top{grid-area:top}:host .md3-bar-region.md3-bar-region-bottom{grid-area:bottom}:host ::ng-deep [md3-scaffold-bar=top],:host ::ng-deep [md3-scaffold-bar=bottom]{min-width:0em;min-height:0em;overflow:hidden}:host ::ng-deep [md3-scaffold-rail=leading]{grid-area:start;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:3}:host ::ng-deep [md3-scaffold-rail=trailing]{grid-area:end;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:3}:host ::ng-deep [md3-scaffold-bar].md3-floating-region,:host ::ng-deep [md3-scaffold-rail].md3-floating-region{overflow:visible}:host .md3-bottom-sheet-region{grid-area:sheet;justify-self:stretch;min-width:0em;height:0em;position:relative;overflow:visible;z-index:4}:host .md3-panes-container{--background-color: rgb(var(--md-scheme-surface));--foreground-color: rgb(var(--md-scheme-on-surface));grid-area:content;min-width:0em;min-height:0em;overflow:hidden;background-color:var(--background-color);color:var(--foreground-color);display:grid;grid-template-areas:\"start main end\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr)}:host .md3-panes-container .md3-pane{justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;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}: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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: Scaffold, isStandalone: true, selector: "md3-scaffold", viewQueries: [{ propertyName: "startOutlet", first: true, predicate: ["startOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }, { propertyName: "endOutlet", first: true, predicate: ["endOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }, { propertyName: "bottomOutlet", first: true, predicate: ["bottomOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }, { propertyName: "panesContainer", first: true, predicate: ["panesContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"md3-bar-region md3-bar-region-top\">\n    <ng-content select=\"[md3-scaffold-bar=top]\"></ng-content>\n</div>\n\n<ng-content select=\"[md3-scaffold-rail=leading]\"></ng-content>\n\n<div class=\"md3-panes-container\" #panesContainer>\n    <div class=\"md3-pane md3-pane-start\">\n        <ng-content select=\"[md3-scaffold-pane=start]\"></ng-content>\n        <ng-template #startOutlet cdkPortalOutlet></ng-template>\n    </div>\n    <div class=\"md3-pane md3-pane-main\">\n        <ng-content select=\"[md3-scaffold-pane=main]\"></ng-content>\n    </div>\n    <div class=\"md3-pane md3-pane-end\">\n        <ng-content select=\"[md3-scaffold-pane=end]\"></ng-content>\n        <ng-template #endOutlet cdkPortalOutlet></ng-template>\n    </div>\n</div>\n\n<!-- Standard bottom sheets dock here, between the content and the bottom bar. The region\n     measures zero until one opens, so it reserves nothing the rest of the time. -->\n<div class=\"md3-bottom-sheet-region\">\n    <ng-template #bottomOutlet cdkPortalOutlet></ng-template>\n</div>\n\n<ng-content select=\"[md3-scaffold-rail=trailing]\"></ng-content>\n\n<div class=\"md3-bar-region md3-bar-region-bottom\">\n    <ng-content select=\"[md3-scaffold-bar=bottom]\"></ng-content>\n</div>", styles: [":host{width:100%;height:100dvh;display:grid;min-height:0em;overflow:hidden;grid-template-areas:\"top top top\" \"start content end\" \"start sheet end\" \"bottom bottom bottom\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto}:host .md3-bar-region{display:flex;flex-direction:column;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:visible;z-index:2}:host .md3-bar-region.md3-bar-region-top{grid-area:top}:host .md3-bar-region.md3-bar-region-bottom{grid-area:bottom}:host ::ng-deep [md3-scaffold-bar=top],:host ::ng-deep [md3-scaffold-bar=bottom]{min-width:0em;min-height:0em;overflow:hidden}:host ::ng-deep [md3-scaffold-rail=leading]{grid-area:start;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:3}:host ::ng-deep [md3-scaffold-rail=trailing]{grid-area:end;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:3}:host ::ng-deep [md3-scaffold-bar].md3-floating-region,:host ::ng-deep [md3-scaffold-rail].md3-floating-region{overflow:visible}:host .md3-bottom-sheet-region{grid-area:sheet;justify-self:stretch;min-width:0em;height:0em;position:relative;overflow:visible;z-index:4}:host .md3-panes-container{--background-color: rgb(var(--md-scheme-surface));--foreground-color: rgb(var(--md-scheme-on-surface));grid-area:content;min-width:0em;min-height:0em;overflow:hidden;background-color:var(--background-color);color:var(--foreground-color);display:grid;grid-template-areas:\"start main end\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr)}:host .md3-panes-container .md3-pane{justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;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}: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: Scaffold, decorators: [{
             type: Component,
             args: [{ selector: 'md3-scaffold', imports: [
                         CdkPortalOutlet,
-                    ], template: "<div class=\"md3-bar-region md3-bar-region-top\">\n    <ng-content select=\"[md3-scaffold-bar=top]\"></ng-content>\n</div>\n\n<ng-content select=\"[md3-scaffold-rail=leading]\"></ng-content>\n\n<div class=\"md3-panes-container\" #panesContainer>\n    <div class=\"md3-pane md3-pane-start\">\n        <ng-content select=\"[md3-scaffold-pane=start]\"></ng-content>\n        <ng-template #startOutlet cdkPortalOutlet></ng-template>\n    </div>\n    <div class=\"md3-pane md3-pane-main\">\n        <ng-content select=\"[md3-scaffold-pane=main]\"></ng-content>\n    </div>\n    <div class=\"md3-pane md3-pane-end\">\n        <ng-content select=\"[md3-scaffold-pane=end]\"></ng-content>\n        <ng-template #endOutlet cdkPortalOutlet></ng-template>\n    </div>\n</div>\n\n<!-- Standard bottom sheets dock here, between the content and the bottom bar. The region\n     measures zero until one opens, so it reserves nothing the rest of the time. -->\n<div class=\"md3-bottom-sheet-region\">\n    <ng-template #bottomOutlet cdkPortalOutlet></ng-template>\n</div>\n\n<ng-content select=\"[md3-scaffold-rail=trailing]\"></ng-content>\n\n<div class=\"md3-bar-region md3-bar-region-bottom\">\n    <ng-content select=\"[md3-scaffold-bar=bottom]\"></ng-content>\n</div>", styles: [":host{display:grid;width:100%;height:100dvh;min-height:0em;overflow:hidden;grid-template-areas:\"top top top\" \"start content end\" \"start sheet end\" \"bottom bottom bottom\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto}:host .md3-bar-region{display:flex;flex-direction:column;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:visible;z-index:2}:host .md3-bar-region.md3-bar-region-top{grid-area:top}:host .md3-bar-region.md3-bar-region-bottom{grid-area:bottom}:host ::ng-deep [md3-scaffold-bar=top],:host ::ng-deep [md3-scaffold-bar=bottom]{min-width:0em;min-height:0em;overflow:hidden}:host ::ng-deep [md3-scaffold-rail=leading]{grid-area:start;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:3}:host ::ng-deep [md3-scaffold-rail=trailing]{grid-area:end;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:3}:host ::ng-deep [md3-scaffold-bar].md3-floating-region,:host ::ng-deep [md3-scaffold-rail].md3-floating-region{overflow:visible}:host .md3-bottom-sheet-region{grid-area:sheet;justify-self:stretch;min-width:0em;height:0em;position:relative;overflow:visible;z-index:4}:host .md3-panes-container{--background-color: rgb(var(--md-scheme-surface));--foreground-color: rgb(var(--md-scheme-on-surface));grid-area:content;min-width:0em;min-height:0em;overflow:hidden;background-color:var(--background-color);color:var(--foreground-color);display:grid;grid-template-areas:\"start main end\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr)}:host .md3-panes-container .md3-pane{justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;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}:host .md3-panes-container .md3-pane.md3-pane-end{grid-area:end}\n"] }]
+                    ], template: "<div class=\"md3-bar-region md3-bar-region-top\">\n    <ng-content select=\"[md3-scaffold-bar=top]\"></ng-content>\n</div>\n\n<ng-content select=\"[md3-scaffold-rail=leading]\"></ng-content>\n\n<div class=\"md3-panes-container\" #panesContainer>\n    <div class=\"md3-pane md3-pane-start\">\n        <ng-content select=\"[md3-scaffold-pane=start]\"></ng-content>\n        <ng-template #startOutlet cdkPortalOutlet></ng-template>\n    </div>\n    <div class=\"md3-pane md3-pane-main\">\n        <ng-content select=\"[md3-scaffold-pane=main]\"></ng-content>\n    </div>\n    <div class=\"md3-pane md3-pane-end\">\n        <ng-content select=\"[md3-scaffold-pane=end]\"></ng-content>\n        <ng-template #endOutlet cdkPortalOutlet></ng-template>\n    </div>\n</div>\n\n<!-- Standard bottom sheets dock here, between the content and the bottom bar. The region\n     measures zero until one opens, so it reserves nothing the rest of the time. -->\n<div class=\"md3-bottom-sheet-region\">\n    <ng-template #bottomOutlet cdkPortalOutlet></ng-template>\n</div>\n\n<ng-content select=\"[md3-scaffold-rail=trailing]\"></ng-content>\n\n<div class=\"md3-bar-region md3-bar-region-bottom\">\n    <ng-content select=\"[md3-scaffold-bar=bottom]\"></ng-content>\n</div>", styles: [":host{width:100%;height:100dvh;display:grid;min-height:0em;overflow:hidden;grid-template-areas:\"top top top\" \"start content end\" \"start sheet end\" \"bottom bottom bottom\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto}:host .md3-bar-region{display:flex;flex-direction:column;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:visible;z-index:2}:host .md3-bar-region.md3-bar-region-top{grid-area:top}:host .md3-bar-region.md3-bar-region-bottom{grid-area:bottom}:host ::ng-deep [md3-scaffold-bar=top],:host ::ng-deep [md3-scaffold-bar=bottom]{min-width:0em;min-height:0em;overflow:hidden}:host ::ng-deep [md3-scaffold-rail=leading]{grid-area:start;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:3}:host ::ng-deep [md3-scaffold-rail=trailing]{grid-area:end;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:3}:host ::ng-deep [md3-scaffold-bar].md3-floating-region,:host ::ng-deep [md3-scaffold-rail].md3-floating-region{overflow:visible}:host .md3-bottom-sheet-region{grid-area:sheet;justify-self:stretch;min-width:0em;height:0em;position:relative;overflow:visible;z-index:4}:host .md3-panes-container{--background-color: rgb(var(--md-scheme-surface));--foreground-color: rgb(var(--md-scheme-on-surface));grid-area:content;min-width:0em;min-height:0em;overflow:hidden;background-color:var(--background-color);color:var(--foreground-color);display:grid;grid-template-areas:\"start main end\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr)}:host .md3-panes-container .md3-pane{justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;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}:host .md3-panes-container .md3-pane.md3-pane-end{grid-area:end}\n"] }]
         }], ctorParameters: () => [], propDecorators: { startOutlet: [{ type: i0.ViewChild, args: ['startOutlet', { ...{ read: CdkPortalOutlet }, isSignal: true }] }], endOutlet: [{ type: i0.ViewChild, args: ['endOutlet', { ...{ read: CdkPortalOutlet }, isSignal: true }] }], bottomOutlet: [{ type: i0.ViewChild, args: ['bottomOutlet', { ...{ read: CdkPortalOutlet }, isSignal: true }] }], panesContainer: [{ type: i0.ViewChild, args: ['panesContainer', { isSignal: true }] }] } });
 
+/**
+ * A layout region shell that fills its parent instead of the window.
+ *
+ * It places the same regions as `md3-scaffold` — the bar rows, the rail columns and the three
+ * panes — so the same region attributes work inside it:
+ *
+ * ```html
+ * <md3-layout>
+ *     <md3-toolbar md3-scaffold-bar="bottom" toolbar-type="floating">...</md3-toolbar>
+ *
+ *     <div md3-scaffold-pane="main">...</div>
+ * </md3-layout>
+ * ```
+ *
+ * Use it wherever a page-sized scaffold does not fit: the content of a full screen dialog, a
+ * card, a preview pane. A full screen dialog is the common one, because a toolbar needs a bar
+ * or a rail region and the dialog shell has none of its own.
+ *
+ * The layout provides its own {@link LayoutService}, so everything inside it reads the scroll
+ * position and the floating insets of *this* container. A floating toolbar therefore pads the
+ * main pane of the layout, and `scroll-action` follows the pane of the layout — never the page
+ * behind it. The window size, the breakpoints, the reading direction and the color scheme stay
+ * shared with the rest of the application.
+ */
+class Layout extends Scaffold {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Layout, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: Layout, isStandalone: true, selector: "md3-layout", providers: [
+            LayoutService,
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"md3-bar-region md3-bar-region-top\">\n    <ng-content select=\"[md3-scaffold-bar=top]\"></ng-content>\n</div>\n\n<ng-content select=\"[md3-scaffold-rail=leading]\"></ng-content>\n\n<div class=\"md3-panes-container\" #panesContainer>\n    <div class=\"md3-pane md3-pane-start\">\n        <ng-content select=\"[md3-scaffold-pane=start]\"></ng-content>\n        <ng-template #startOutlet cdkPortalOutlet></ng-template>\n    </div>\n    <div class=\"md3-pane md3-pane-main\">\n        <ng-content select=\"[md3-scaffold-pane=main]\"></ng-content>\n    </div>\n    <div class=\"md3-pane md3-pane-end\">\n        <ng-content select=\"[md3-scaffold-pane=end]\"></ng-content>\n        <ng-template #endOutlet cdkPortalOutlet></ng-template>\n    </div>\n</div>\n\n<!-- Standard bottom sheets dock here, between the content and the bottom bar. The region\n     measures zero until one opens, so it reserves nothing the rest of the time. -->\n<div class=\"md3-bottom-sheet-region\">\n    <ng-template #bottomOutlet cdkPortalOutlet></ng-template>\n</div>\n\n<ng-content select=\"[md3-scaffold-rail=trailing]\"></ng-content>\n\n<div class=\"md3-bar-region md3-bar-region-bottom\">\n    <ng-content select=\"[md3-scaffold-bar=bottom]\"></ng-content>\n</div>", styles: [":host{width:100%;height:100%;display:grid;min-height:0em;overflow:hidden;grid-template-areas:\"top top top\" \"start content end\" \"start sheet end\" \"bottom bottom bottom\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto}:host .md3-bar-region{display:flex;flex-direction:column;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:visible;z-index:2}:host .md3-bar-region.md3-bar-region-top{grid-area:top}:host .md3-bar-region.md3-bar-region-bottom{grid-area:bottom}:host ::ng-deep [md3-scaffold-bar=top],:host ::ng-deep [md3-scaffold-bar=bottom]{min-width:0em;min-height:0em;overflow:hidden}:host ::ng-deep [md3-scaffold-rail=leading]{grid-area:start;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:3}:host ::ng-deep [md3-scaffold-rail=trailing]{grid-area:end;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:3}:host ::ng-deep [md3-scaffold-bar].md3-floating-region,:host ::ng-deep [md3-scaffold-rail].md3-floating-region{overflow:visible}:host .md3-bottom-sheet-region{grid-area:sheet;justify-self:stretch;min-width:0em;height:0em;position:relative;overflow:visible;z-index:4}:host .md3-panes-container{--background-color: rgb(var(--md-scheme-surface));--foreground-color: rgb(var(--md-scheme-on-surface));grid-area:content;min-width:0em;min-height:0em;overflow:hidden;background-color:var(--background-color);color:var(--foreground-color);display:grid;grid-template-areas:\"start main end\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr)}:host .md3-panes-container .md3-pane{justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;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}: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: Layout, decorators: [{
+            type: Component,
+            args: [{ selector: 'md3-layout', imports: [
+                        CdkPortalOutlet,
+                    ], providers: [
+                        LayoutService,
+                    ], template: "<div class=\"md3-bar-region md3-bar-region-top\">\n    <ng-content select=\"[md3-scaffold-bar=top]\"></ng-content>\n</div>\n\n<ng-content select=\"[md3-scaffold-rail=leading]\"></ng-content>\n\n<div class=\"md3-panes-container\" #panesContainer>\n    <div class=\"md3-pane md3-pane-start\">\n        <ng-content select=\"[md3-scaffold-pane=start]\"></ng-content>\n        <ng-template #startOutlet cdkPortalOutlet></ng-template>\n    </div>\n    <div class=\"md3-pane md3-pane-main\">\n        <ng-content select=\"[md3-scaffold-pane=main]\"></ng-content>\n    </div>\n    <div class=\"md3-pane md3-pane-end\">\n        <ng-content select=\"[md3-scaffold-pane=end]\"></ng-content>\n        <ng-template #endOutlet cdkPortalOutlet></ng-template>\n    </div>\n</div>\n\n<!-- Standard bottom sheets dock here, between the content and the bottom bar. The region\n     measures zero until one opens, so it reserves nothing the rest of the time. -->\n<div class=\"md3-bottom-sheet-region\">\n    <ng-template #bottomOutlet cdkPortalOutlet></ng-template>\n</div>\n\n<ng-content select=\"[md3-scaffold-rail=trailing]\"></ng-content>\n\n<div class=\"md3-bar-region md3-bar-region-bottom\">\n    <ng-content select=\"[md3-scaffold-bar=bottom]\"></ng-content>\n</div>", styles: [":host{width:100%;height:100%;display:grid;min-height:0em;overflow:hidden;grid-template-areas:\"top top top\" \"start content end\" \"start sheet end\" \"bottom bottom bottom\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto}:host .md3-bar-region{display:flex;flex-direction:column;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:visible;z-index:2}:host .md3-bar-region.md3-bar-region-top{grid-area:top}:host .md3-bar-region.md3-bar-region-bottom{grid-area:bottom}:host ::ng-deep [md3-scaffold-bar=top],:host ::ng-deep [md3-scaffold-bar=bottom]{min-width:0em;min-height:0em;overflow:hidden}:host ::ng-deep [md3-scaffold-rail=leading]{grid-area:start;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:3}:host ::ng-deep [md3-scaffold-rail=trailing]{grid-area:end;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:3}:host ::ng-deep [md3-scaffold-bar].md3-floating-region,:host ::ng-deep [md3-scaffold-rail].md3-floating-region{overflow:visible}:host .md3-bottom-sheet-region{grid-area:sheet;justify-self:stretch;min-width:0em;height:0em;position:relative;overflow:visible;z-index:4}:host .md3-panes-container{--background-color: rgb(var(--md-scheme-surface));--foreground-color: rgb(var(--md-scheme-on-surface));grid-area:content;min-width:0em;min-height:0em;overflow:hidden;background-color:var(--background-color);color:var(--foreground-color);display:grid;grid-template-areas:\"start main end\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr)}:host .md3-panes-container .md3-pane{justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;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}:host .md3-panes-container .md3-pane.md3-pane-end{grid-area:end}\n"] }]
+        }] });
+
 class ScaffoldBar {
     region = input.required({ ...(ngDevMode ? { debugName: "region" } : /* istanbul ignore next */ {}), alias: 'md3-scaffold-bar' });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ScaffoldBar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -4832,69 +4924,275 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             args: [{ selector: 'md3-circular-progress-indicator', imports: [], template: "<div class=\"md3-indicator-container\" [class.md3-thickness-8dp]=\"thickness() == 8\" [class.md3-indeterminate]=\"indeterminate()\" [style.--progress]=\"progressValue()\">\n    <svg class=\"md3-circlar-indicator\">\n        <circle class=\"md3-track\" pathLength=\"100\"></circle>\n        <circle class=\"md3-active-indicator\" pathLength=\"100\"></circle>\n    </svg>\n</div>", styles: [":host{display:inline-flex}:host .md3-indicator-container{font-size:.25rem;--gap: 7;--progress: 0}:host .md3-indicator-container.md3-thickness-8dp{font-size:.5rem;--gap: 10}:host .md3-indicator-container{--indicator-color: rgb(var(--md-scheme-primary));--track-color: rgb(var(--md-scheme-primary-container));--size: calc(2.25rem + 1em) ;--stroke: 1em;--center: calc(var(--size) / 2);--radius: calc(var(--size) / 2 - var(--stroke) / 2);--track-arc: calc(100 - var(--progress));display:inline-block;width:var(--size);height:var(--size)}:host .md3-indicator-container .md3-circlar-indicator{display:block;width:var(--size);height:var(--size);shape-rendering:geometricprecision}:host .md3-indicator-container .md3-track,:host .md3-indicator-container .md3-active-indicator{fill:none;stroke-width:var(--stroke);stroke-linecap:round;cx:var(--center);cy:var(--center);r:var(--radius);transform-origin:center;transform:rotate(-90deg);transition:stroke-dasharray var(--md-motion-standard-fast-effects-duration) var(--md-motion-standard-fast-effects-easing),stroke-dashoffset var(--md-motion-standard-fast-effects-duration) var(--md-motion-standard-fast-effects-easing)}:host .md3-indicator-container .md3-track{--track-length: calc(var(--track-arc) - var(--gap) * 2);stroke:var(--track-color);stroke-dasharray:var(--track-length) calc(100 - var(--track-length));stroke-dashoffset:calc(var(--track-arc) - var(--gap))}:host .md3-indicator-container .md3-active-indicator{stroke:var(--indicator-color);stroke-dasharray:var(--progress) calc(100 - var(--progress))}:host .md3-indicator-container.md3-indeterminate{animation:container-rotate calc(var(--md-motion-standard-slow-effects-duration) * 5) linear infinite}:host .md3-indicator-container.md3-indeterminate .md3-circlar-indicator{animation:indicator-track-rotate calc(var(--md-motion-standard-slow-effects-duration) * 8) var(--md-motion-standard-slow-effects-easing) infinite}:host .md3-indicator-container.md3-indeterminate .md3-circlar-indicator .md3-track{stroke-dashoffset:92;animation:track-fill calc(var(--md-motion-standard-slow-effects-duration) * 8) var(--md-motion-standard-slow-effects-easing) infinite}:host .md3-indicator-container.md3-indeterminate .md3-circlar-indicator .md3-active-indicator{stroke-dashoffset:0;animation:indicator-fill calc(var(--md-motion-standard-slow-effects-duration) * 8) var(--md-motion-standard-slow-effects-easing) infinite}:host .md3-indicator-container.md3-indeterminate.md3-thickness-8dp .md3-circlar-indicator .md3-track{stroke-dashoffset:90;animation:track-fill-8dp calc(var(--md-motion-standard-slow-effects-duration) * 8) var(--md-motion-standard-slow-effects-easing) infinite}@keyframes container-rotate{to{transform:rotate(360deg)}}@keyframes indicator-track-rotate{0%{transform:rotate(0)}30%{transform:rotate(0)}50%{transform:rotate(180deg)}80%{transform:rotate(180deg)}to{transform:rotate(360deg)}}@keyframes track-fill{0%{stroke-dasharray:84 16;stroke-dashoffset:92}30%{stroke-dasharray:34 66;stroke-dashoffset:42}50%{stroke-dasharray:84 24;stroke-dashoffset:100}80%{stroke-dasharray:34 66;stroke-dashoffset:42}to{stroke-dasharray:84 16;stroke-dashoffset:92}}@keyframes track-fill-8dp{0%{stroke-dasharray:80 20;stroke-dashoffset:90}30%{stroke-dasharray:30 70;stroke-dashoffset:40}50%{stroke-dasharray:80 20;stroke-dashoffset:90}80%{stroke-dasharray:30 70;stroke-dashoffset:40}to{stroke-dasharray:80 20;stroke-dashoffset:90}}@keyframes indicator-fill{0%{stroke-dasharray:0 100}30%{stroke-dasharray:50 50}50%{stroke-dasharray:0 100}80%{stroke-dasharray:50 50}to{stroke-dasharray:0 100}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }] } });
 
-class AppBarLogo {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AppBarLogo, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AppBarLogo, isStandalone: true, selector: "[md3-app-bar-logo]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AppBarLogo, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[md3-app-bar-logo]',
-                }]
-        }] });
-
-class AppBar {
-    el;
-    layoutService;
-    title = input(null, { ...(ngDevMode ? { debugName: "title" } : /* istanbul ignore next */ {}), alias: 'bar-title' });
-    subtitle = input(null, { ...(ngDevMode ? { debugName: "subtitle" } : /* istanbul ignore next */ {}), alias: 'bar-subtitle' });
-    appBarType = input('small', { ...(ngDevMode ? { debugName: "appBarType" } : /* istanbul ignore next */ {}), alias: 'bar-type' });
-    appBarScrollingStyle = input('elevate', { ...(ngDevMode ? { debugName: "appBarScrollingStyle" } : /* istanbul ignore next */ {}), alias: 'scroll-style' });
-    autoHide = input(false, { ...(ngDevMode ? { debugName: "autoHide" } : /* istanbul ignore next */ {}), alias: 'auto-hide',
-        transform: booleanAttribute });
-    centerAligned = input(false, { ...(ngDevMode ? { debugName: "centerAligned" } : /* istanbul ignore next */ {}), alias: 'center-aligned',
-        transform: booleanAttribute });
-    logo = contentChild(AppBarLogo, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "logo" }] : /* istanbul ignore next */ []));
-    avatar = contentChild(Avatar, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "avatar" }] : /* istanbul ignore next */ []));
-    hasLogo = computed(() => !!this.logo(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasLogo" }] : /* istanbul ignore next */ []));
-    hasAvatar = computed(() => !!this.avatar(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasAvatar" }] : /* istanbul ignore next */ []));
-    mainIsScrolled = computed(() => this.layoutService.mainIsScrolled(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mainIsScrolled" }] : /* istanbul ignore next */ []));
-    // One source of truth. The toolbar reads the same signal, so the two bars can never
-    // disagree about which way the main pane is moving.
-    isScrollingDown = computed(() => this.layoutService.isScrollingDown(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isScrollingDown" }] : /* istanbul ignore next */ []));
-    bottomExpandedHeight = computed(() => {
-        const type = this.appBarType();
-        if (!this.hasCollapsibleBottom(type)) {
-            return 0;
+const DIALOG_DATA = new InjectionToken('MD3_DIALOG_DATA');
+const DIALOG_CONFIG = new InjectionToken('MD3_DIALOG_CONFIG');
+const DIALOG_COMPONENT = new InjectionToken('MD3_DIALOG_COMPONENT');
+const DIALOG_EXIT_ANIMATION_FALLBACK_MS = 300;
+const HIDDEN_CLASS = 'md3-dialog-hidden';
+class DialogRef {
+    cdkRef;
+    isFullScreen;
+    closed = new Subject();
+    closing = new Subject();
+    hiddenChanges = new Subject();
+    closePromise = null;
+    closeStarted = false;
+    closeSettled = false;
+    hidden = false;
+    /** Shell hosting the dialog: the regular dialog or the full screen one. */
+    dialogInstance;
+    /**
+     * Filled by DialogService after the user component is attached. Keeping the
+     * instance here lets callers imperatively update inputs when that is useful.
+     */
+    componentInstance;
+    /** Overlay hosting the dialog, useful to reach the panel and the scrim. */
+    get overlayRef() {
+        return this.cdkRef.overlayRef;
+    }
+    /** Whether the dialog started closing. Such a dialog cannot be hidden or shown anymore. */
+    get isClosing() {
+        return this.closeStarted;
+    }
+    /** Whether the dialog is currently hidden, on request or behind another dialog. */
+    get isHidden() {
+        return this.hidden;
+    }
+    constructor(cdkRef, disableCloseEvents, 
+    /** Whether this reference belongs to a full screen dialog. */
+    isFullScreen = false) {
+        this.cdkRef = cdkRef;
+        this.isFullScreen = isFullScreen;
+        // Closing always goes through this reference so the exit animation can
+        // run before the CDK disposes the overlay. Detachments triggered from
+        // the outside (navigation, scroll strategy) still settle this ref.
+        this.cdkRef.closed.pipe(take(1)).subscribe((result) => this.settle(result));
+        if (!disableCloseEvents) {
+            this.connectCloseEvents();
         }
-        this.layoutService.viewport();
-        const fontSize = this.getHostFontSize();
-        const hasSubtitle = !!this.subtitle()?.length;
-        if (type === 'medium') {
-            return (hasSubtitle ? 4.5 : 3) * fontSize;
+    }
+    /** Closes the dialog. The promise resolves once the exit animation is done. */
+    close(result) {
+        if (this.closePromise) {
+            return this.closePromise;
         }
-        return (hasSubtitle ? 5.5 : 3.5) * fontSize;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "bottomExpandedHeight" }] : /* istanbul ignore next */ []));
-    bottomCollapse = computed(() => {
-        const expandedHeight = this.bottomExpandedHeight();
-        if (!expandedHeight) {
-            return 0;
+        this.startClosing();
+        this.closePromise = this.startCloseAnimation().then(() => this.cdkRef.close(result));
+        return this.closePromise;
+    }
+    /**
+     * Hides the dialog with the closing animation while keeping it alive, so
+     * its content, form state and subscriptions survive until show() is called.
+     * The page underneath becomes usable again while the dialog waits behind it.
+     * The promise resolves once the dialog is out of sight.
+     */
+    hide() {
+        if (this.hidden || this.closeStarted) {
+            return Promise.resolve();
         }
-        return Math.min(expandedHeight, Math.max(0, this.layoutService.mainScrollTop()));
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "bottomCollapse" }] : /* istanbul ignore next */ []));
-    // button context
-    buttonContextSize = signal('small', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "buttonContextSize" }] : /* istanbul ignore next */ []));
-    constructor(el, layoutService) {
-        this.el = el;
+        this.hidden = true;
+        this.toggleHiddenState(true);
+        this.dialogInstance?.setActive(false);
+        this.hiddenChanges.next(true);
+        return this.waitForSurfaceAnimation();
+    }
+    /**
+     * Brings a hidden dialog back with the opening animation. Focus moves back
+     * into the dialog even when it was never hidden, which is what makes it
+     * usable again once the dialog above it closes.
+     */
+    show() {
+        if (this.closeStarted) {
+            return;
+        }
+        if (this.hidden) {
+            this.hidden = false;
+            this.toggleHiddenState(false);
+            this.dialogInstance?.setActive(true);
+            this.hiddenChanges.next(false);
+        }
+        this.dialogInstance?.recaptureFocus();
+    }
+    /** Emits when the dialog starts closing, before the exit animation runs. */
+    beforeClosed() {
+        return this.closing.asObservable();
+    }
+    /** Emits the new value of `isHidden` every time the dialog is hidden or shown. */
+    hiddenChanged() {
+        return this.hiddenChanges.asObservable();
+    }
+    afterClosed() {
+        return this.closed.asObservable();
+    }
+    connectCloseEvents() {
+        // The CDK config keeps `disableClose` on, so the scrim and Escape key
+        // are handled here instead and the dialog can animate out.
+        this.cdkRef.backdropClick.pipe(take(1)).subscribe(() => {
+            this.cdkRef.containerInstance._closeInteractionType = 'mouse';
+            this.close();
+        });
+        // A hidden dialog is not the one the Escape key is meant for, even
+        // though the overlay it sits in is still the one receiving the event.
+        this.cdkRef.keydownEvents.pipe(filter((event) => !this.hidden && event.key === 'Escape' && !hasModifierKey(event)), take(1)).subscribe((event) => {
+            event.preventDefault();
+            this.cdkRef.containerInstance._closeInteractionType = 'keyboard';
+            this.close();
+        });
+    }
+    toggleHiddenState(isHidden) {
+        const overlayRef = this.cdkRef.overlayRef;
+        const panel = overlayRef.overlayElement;
+        const backdrop = overlayRef.backdropElement;
+        panel.classList.toggle(HIDDEN_CLASS, isHidden);
+        backdrop?.classList.toggle(HIDDEN_CLASS, isHidden);
+        // `inert` keeps a hidden dialog out of the tab order and away from
+        // assistive technology without removing it from the DOM.
+        if (isHidden) {
+            panel.setAttribute('inert', '');
+        }
+        else {
+            panel.removeAttribute('inert');
+        }
+    }
+    startClosing() {
+        if (this.closeStarted) {
+            return;
+        }
+        this.closeStarted = true;
+        this.closing.next();
+        this.closing.complete();
+    }
+    startCloseAnimation() {
+        const overlayRef = this.cdkRef.overlayRef;
+        const wasVisible = !this.hidden;
+        overlayRef.overlayElement.classList.add('md3-dialog-closing');
+        overlayRef.backdropElement?.classList.add('md3-dialog-closing');
+        this.dialogInstance?.setActive(false);
+        // A hidden dialog already played the exit animation, so there is
+        // nothing left to transition and it can be disposed right away.
+        return wasVisible ? this.waitForSurfaceAnimation() : Promise.resolve();
+    }
+    /** Resolves when the surface finished animating, with a timeout as a safety net. */
+    waitForSurfaceAnimation() {
+        const panel = this.cdkRef.overlayRef.overlayElement;
+        const surface = this.dialogInstance?.surfaceElement ?? panel;
+        return new Promise((resolve) => {
+            let isResolved = false;
+            let timeoutId = setTimeout(done, DIALOG_EXIT_ANIMATION_FALLBACK_MS);
+            function done() {
+                if (isResolved) {
+                    return;
+                }
+                isResolved = true;
+                clearTimeout(timeoutId);
+                surface.removeEventListener('transitionend', onTransitionEnd);
+                resolve();
+            }
+            function onTransitionEnd(event) {
+                if (event.target === surface) {
+                    done();
+                }
+            }
+            surface.addEventListener('transitionend', onTransitionEnd);
+        });
+    }
+    /** Emits the result once the CDK reference is closed. Focus is restored by the container. */
+    settle(result) {
+        if (this.closeSettled) {
+            return;
+        }
+        // Covers detachments that did not go through close(), so anything
+        // waiting on beforeClosed() is still notified.
+        this.startClosing();
+        this.closeSettled = true;
+        this.hiddenChanges.complete();
+        this.closed.next(result);
+        this.closed.complete();
+    }
+}
+
+class AppBarLogo {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AppBarLogo, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AppBarLogo, isStandalone: true, selector: "[md3-app-bar-logo]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AppBarLogo, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[md3-app-bar-logo]',
+                }]
+        }] });
+
+class AppBar {
+    el;
+    layoutService;
+    // A dialog provides its configuration to everything it holds, so this is how the bar knows
+    // it is not the banner of the document.
+    inDialog = !!inject(DIALOG_CONFIG, { optional: true });
+    /**
+     * The landmark role of the bar.
+     *
+     * A page has one banner, and the app bar of the page is it. A bar inside a dialog is not
+     * the banner of the document — a banner nested in a dialog misleads a screen reader — so a
+     * bar that finds itself in one carries no role. Set this input to force either value.
+     */
+    barRole = input(null, { ...(ngDevMode ? { debugName: "barRole" } : /* istanbul ignore next */ {}), alias: 'bar-role' });
+    resolvedRole = computed(() => {
+        const role = this.barRole();
+        if (role !== null) {
+            return role === 'none' ? null : role;
+        }
+        return this.inDialog ? null : 'banner';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedRole" }] : /* istanbul ignore next */ []));
+    title = input(null, { ...(ngDevMode ? { debugName: "title" } : /* istanbul ignore next */ {}), alias: 'bar-title' });
+    subtitle = input(null, { ...(ngDevMode ? { debugName: "subtitle" } : /* istanbul ignore next */ {}), alias: 'bar-subtitle' });
+    appBarType = input('small', { ...(ngDevMode ? { debugName: "appBarType" } : /* istanbul ignore next */ {}), alias: 'bar-type' });
+    appBarScrollingStyle = input('elevate', { ...(ngDevMode ? { debugName: "appBarScrollingStyle" } : /* istanbul ignore next */ {}), alias: 'scroll-style' });
+    autoHide = input(false, { ...(ngDevMode ? { debugName: "autoHide" } : /* istanbul ignore next */ {}), alias: 'auto-hide',
+        transform: booleanAttribute });
+    centerAligned = input(false, { ...(ngDevMode ? { debugName: "centerAligned" } : /* istanbul ignore next */ {}), alias: 'center-aligned',
+        transform: booleanAttribute });
+    logo = contentChild(AppBarLogo, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "logo" }] : /* istanbul ignore next */ []));
+    avatar = contentChild(Avatar, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "avatar" }] : /* istanbul ignore next */ []));
+    hasLogo = computed(() => !!this.logo(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasLogo" }] : /* istanbul ignore next */ []));
+    hasAvatar = computed(() => !!this.avatar(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasAvatar" }] : /* istanbul ignore next */ []));
+    mainIsScrolled = computed(() => this.layoutService.mainIsScrolled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mainIsScrolled" }] : /* istanbul ignore next */ []));
+    // One source of truth. The toolbar reads the same signal, so the two bars can never
+    // disagree about which way the main pane is moving.
+    isScrollingDown = computed(() => this.layoutService.isScrollingDown(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isScrollingDown" }] : /* istanbul ignore next */ []));
+    bottomExpandedHeight = computed(() => {
+        const type = this.appBarType();
+        if (!this.hasCollapsibleBottom(type)) {
+            return 0;
+        }
+        this.layoutService.viewport();
+        const fontSize = this.getHostFontSize();
+        const hasSubtitle = !!this.subtitle()?.length;
+        if (type === 'medium') {
+            return (hasSubtitle ? 4.5 : 3) * fontSize;
+        }
+        return (hasSubtitle ? 5.5 : 3.5) * fontSize;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bottomExpandedHeight" }] : /* istanbul ignore next */ []));
+    bottomCollapse = computed(() => {
+        const expandedHeight = this.bottomExpandedHeight();
+        if (!expandedHeight) {
+            return 0;
+        }
+        return Math.min(expandedHeight, Math.max(0, this.layoutService.mainScrollTop()));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bottomCollapse" }] : /* istanbul ignore next */ []));
+    // button context
+    buttonContextSize = signal('small', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonContextSize" }] : /* istanbul ignore next */ []));
+    constructor(el, layoutService) {
+        this.el = el;
         this.layoutService = layoutService;
         effect((onCleanup) => {
             const type = 'md3-' + this.appBarType();
@@ -4948,7 +5246,7 @@ class AppBar {
         return Number.parseFloat(getComputedStyle(this.element).fontSize) || 16;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AppBar, deps: [{ token: i0.ElementRef }, { token: LayoutService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AppBar, isStandalone: true, selector: "md3-app-bar", inputs: { title: { classPropertyName: "title", publicName: "bar-title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "bar-subtitle", isSignal: true, isRequired: false, transformFunction: null }, appBarType: { classPropertyName: "appBarType", publicName: "bar-type", isSignal: true, isRequired: false, transformFunction: null }, appBarScrollingStyle: { classPropertyName: "appBarScrollingStyle", publicName: "scroll-style", isSignal: true, isRequired: false, transformFunction: null }, autoHide: { classPropertyName: "autoHide", publicName: "auto-hide", isSignal: true, isRequired: false, transformFunction: null }, centerAligned: { classPropertyName: "centerAligned", publicName: "center-aligned", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "banner" }, properties: { "class.md3-scrolled": "mainIsScrolled()", "class.md3-auto-hide": "autoHide()", "class.md3-scrolling-down": "isScrollingDown()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AppBar, isStandalone: true, selector: "md3-app-bar", inputs: { barRole: { classPropertyName: "barRole", publicName: "bar-role", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "bar-title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "bar-subtitle", isSignal: true, isRequired: false, transformFunction: null }, appBarType: { classPropertyName: "appBarType", publicName: "bar-type", isSignal: true, isRequired: false, transformFunction: null }, appBarScrollingStyle: { classPropertyName: "appBarScrollingStyle", publicName: "scroll-style", isSignal: true, isRequired: false, transformFunction: null }, autoHide: { classPropertyName: "autoHide", publicName: "auto-hide", isSignal: true, isRequired: false, transformFunction: null }, centerAligned: { classPropertyName: "centerAligned", publicName: "center-aligned", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "resolvedRole()", "class.md3-scrolled": "mainIsScrolled()", "class.md3-auto-hide": "autoHide()", "class.md3-scrolling-down": "isScrollingDown()" } }, providers: [
             {
                 provide: MD3_BUTTON_CONTEXT,
                 useExisting: AppBar,
@@ -4967,12 +5265,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                             useExisting: AppBar,
                         },
                     ], host: {
-                        role: 'banner',
+                        '[attr.role]': 'resolvedRole()',
                         '[class.md3-scrolled]': 'mainIsScrolled()',
                         '[class.md3-auto-hide]': 'autoHide()',
                         '[class.md3-scrolling-down]': 'isScrollingDown()',
                     }, template: "<div class=\"md3-app-bar-container\">\n    <div class=\"md3-app-bar-leading\">\n        <ng-content select=\"[md3-app-bar-leading]\"></ng-content>\n    </div>\n\n    @if (appBarType() == 'search') {\n        <div class=\"md3-app-bar-search\" [class.md3-center]=\"centerAligned()\">\n            <div class=\"md3-search-container\">\n                <div class=\"md3-leading-buttons\">\n                    <ng-content select=\"[md3-search-leading]\"></ng-content>\n                </div>\n                <ng-content select=\"[md3-input-element]\"></ng-content>\n                <div class=\"md3-trailing-buttons\">\n                    <ng-content select=\"[md3-search-trailing]\"></ng-content>\n                </div>\n            </div>\n        </div>\n    } @else if (hasLogo()) {\n        <div class=\"md3-app-bar-logo\" [class.md3-center]=\"centerAligned()\">\n            <ng-content select=\"[md3-app-bar-logo]\"></ng-content>\n        </div>\n    } @else if (title() || subtitle()) {\n        <div class=\"md3-app-bar-title\" [class.md3-center]=\"centerAligned()\">\n            @if (title()?.length) {\n                <div md3-type-title size=\"large\">{{ title() }}</div>\n            }\n            @if (subtitle()?.length) {\n                <div md3-type-body size=\"small\" emphasized>{{ subtitle() }}</div>\n            }\n        </div>\n    }\n\n    <div class=\"md3-app-bar-trailing\">\n        <ng-content select=\"[md3-app-bar-trailing]\"></ng-content>\n        @if (hasAvatar()) {\n            <div class=\"md3-app-bar-avatar\">\n                <ng-content select=\"[md3-avatar]\"></ng-content>\n            </div>\n        }\n    </div>\n\n    @if ((appBarType() == 'medium' || appBarType() == 'large') && (title() || subtitle())) {\n        <div class=\"md3-app-bar-bottom\" [class.md3-center]=\"centerAligned()\">\n            <div class=\"md3-app-bar-bottom-content\">\n                @if (appBarType() == 'medium') {\n                    @if (title()?.length) {\n                        <div md3-type-headline size=\"medium\">{{ title() }}</div>\n                    }\n                    @if (subtitle()?.length) {\n                        <div md3-type-title size=\"small\">{{ subtitle() }}</div>\n                    }\n                }\n                @if (appBarType() == 'large') {\n                    @if (title()?.length) {\n                        <div md3-type-display size=\"small\">{{ title() }}</div>\n                    }\n                    @if (subtitle()?.length) {\n                        <div md3-type-title size=\"medium\">{{ subtitle() }}</div>\n                    }\n                }\n            </div>\n        </div>\n    }\n</div>\n", styles: [":host{--background-color: rgb(var(--md-scheme-surface));--foreground-color: rgb(var(--md-scheme-on-surface));--search-background-color: rgb(var(--md-scheme-surface-container));--search-foreground-color: rgb(var(--md-scheme-on-surface));--foreground-secondary: rgb(var(--md-scheme-on-surface-variant));--elevation: var(--md-shadow-0dp);--app-bar-bottom-collapse: 0px;--app-bar-bottom-opacity: 1;display:block;min-height:0em;max-height:9.5em;overflow:hidden;background-color:var(--background-color);color:var(--foreground-color);box-shadow:var(--elevation);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:4em auto auto;min-height:4em;width:100%;background-color:inherit;color:inherit;transition:opacity var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-leading,:host .md3-app-bar-container .md3-app-bar-trailing{grid-row:1;z-index:1;display:inline-flex;align-items:center;gap:.25em;min-inline-size:0;block-size:4em}:host .md3-app-bar-container .md3-app-bar-leading:empty,:host .md3-app-bar-container .md3-app-bar-trailing:empty{display:none}:host .md3-app-bar-container .md3-app-bar-leading .md3-app-bar-avatar,:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading],:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-trailing],:host .md3-app-bar-container .md3-app-bar-trailing .md3-app-bar-avatar,:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-leading],:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing]{flex:0 0 auto;height:3em;min-width:3em;display:inline-flex;align-items:center;justify-content:center}:host .md3-app-bar-container .md3-app-bar-leading{grid-column:1;justify-self:start;padding-inline-start:.25em;padding-inline-end:.5em;min-width:1em}:host .md3-app-bar-container .md3-app-bar-leading:empty{display:inline-flex}:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading]{color:var(--foreground-color)}:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading] .md3-standard[md3-icon-button]{--foreground-color: var(--foreground-color)}:host .md3-app-bar-container .md3-app-bar-trailing{grid-column:3;justify-self:end;padding-inline-end:.25em}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing]{color:var(--foreground-secondary)}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing] .md3-standard[md3-icon-button]{--foreground-color: var(--foreground-secondary)}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep .md3-avatar{flex:0 0 2em}:host .md3-app-bar-container .md3-app-bar-search{grid-column:1/-1;grid-row:1;align-self:center;display:flex;justify-content:center;min-inline-size:0;height:3em;padding:0 .5em}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container{display:inline-flex;align-items:center;justify-content:center;width:50%;max-width:100%;border-radius:1.5em;background-color:var(--search-background-color);color:var(--search-foreground-color);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons,:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons{flex:0 0 1.5em;pointer-events:none;display:inline-flex;gap:.25em;padding:0 .25em}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons:empty,:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons:empty{padding:0}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons ::ng-deep [md3-search-leading],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons ::ng-deep [md3-search-trailing],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons ::ng-deep [md3-search-leading],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons ::ng-deep [md3-search-trailing]{pointer-events:all}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container ::ng-deep [md3-input-element]{flex:1 1 auto;background-color:transparent;color:var(--search-foreground-color);font-size:1em;height:100%;min-width:0em;border:none;padding:0 1.5em;margin:0 -1.5em}:host .md3-app-bar-container .md3-app-bar-search.md3-center .md3-search-container ::ng-deep [md3-input-element]{text-align:center}:host .md3-app-bar-container .md3-app-bar-logo{grid-column:2;grid-row:1;align-self:center;display:flex;justify-content:start;min-inline-size:0;overflow:hidden;height:3em}:host .md3-app-bar-container .md3-app-bar-logo.md3-center{grid-column:1/-1;justify-self:stretch;text-align:center;justify-content:center}:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep a[md3-app-bar-logo],:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep button[md3-app-bar-logo]{cursor:pointer}:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep [md3-app-bar-logo]{flex:0 1 auto;max-height:100%;max-width:100%;display:block;border:none;background:transparent;font-size:1em;text-decoration:none;padding:0;margin:0}:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep [md3-app-bar-logo]>*{display:inline-block;max-height:100%;max-width:100%;width:100%;height:100%;object-fit:contain}:host .md3-app-bar-container .md3-app-bar-title{grid-column:2;grid-row:1;align-self:center;min-inline-size:0;color:inherit;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing);transform:scale(0);opacity:0}:host .md3-app-bar-container .md3-app-bar-title:dir(ltr){transform-origin:bottom left}:host .md3-app-bar-container .md3-app-bar-title:dir(rtl){transform-origin:bottom right}:host .md3-app-bar-container .md3-app-bar-title.md3-center{grid-column:1/-1;justify-self:stretch;text-align:center;transform-origin:bottom center}:host .md3-app-bar-container .md3-app-bar-title ::ng-deep [md3-app-bar-title]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:all}:host .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: auto;grid-column:1/-1;grid-row:2;min-inline-size:0;min-block-size:0;overflow:hidden;transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-bottom:empty{display:none}:host .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content{padding-bottom:.75em;padding-inline-start:1em;padding-inline-end:.25em;opacity:var(--app-bar-bottom-opacity);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-bottom.md3-center .md3-app-bar-bottom-content{text-align:center;padding-inline:1em}:host.md3-scrolled.md3-scroll-style-elevate{--background-color: rgb(var(--md-scheme-surface-container));--search-background-color: rgb(var(--md-scheme-surface-container-highest));--elevation: var(--md-shadow-3dp)}:host.md3-scrolled.md3-scroll-style-transparent{--background-color: transparent}:host.md3-layout-medium .md3-app-bar-container .md3-app-bar-search{grid-column:2}:host.md3-layout-medium .md3-app-bar-container .md3-app-bar-search .md3-search-container{width:19.5em}:host.md3-layout-compact .md3-app-bar-container .md3-app-bar-search{grid-column:2}:host.md3-layout-compact .md3-app-bar-container .md3-app-bar-search .md3-search-container{width:100%}:host.md3-small .md3-app-bar-container .md3-app-bar-title,:host.md3-collapsed .md3-app-bar-container .md3-app-bar-title{transform:scale(1);opacity:1}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: 3em;block-size:max(0px,var(--app-bar-bottom-expanded-block-size) - var(--app-bar-bottom-collapse))}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom:has(.md3-text-title.md3-text-small){--app-bar-bottom-expanded-block-size: 4.5em}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content .md3-text-title.md3-text-small{margin-top:.285715em}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: 3.5em;block-size:max(0px,var(--app-bar-bottom-expanded-block-size) - var(--app-bar-bottom-collapse))}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom:has(.md3-text-title.md3-text-medium){--app-bar-bottom-expanded-block-size: 5.5em}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content .md3-text-title.md3-text-medium{margin-top:.5em}:host.md3-scrolling-down.md3-auto-hide{max-height:0}:host.md3-scrolling-down.md3-auto-hide .md3-app-bar-container{opacity:0}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: LayoutService }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar-title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar-subtitle", required: false }] }], appBarType: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar-type", required: false }] }], appBarScrollingStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll-style", required: false }] }], autoHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "auto-hide", required: false }] }], centerAligned: [{ type: i0.Input, args: [{ isSignal: true, alias: "center-aligned", required: false }] }], logo: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AppBarLogo), { isSignal: true }] }], avatar: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Avatar), { isSignal: true }] }] } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: LayoutService }], propDecorators: { barRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar-role", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar-title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar-subtitle", required: false }] }], appBarType: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar-type", required: false }] }], appBarScrollingStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll-style", required: false }] }], autoHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "auto-hide", required: false }] }], centerAligned: [{ type: i0.Input, args: [{ isSignal: true, alias: "center-aligned", required: false }] }], logo: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AppBarLogo), { isSignal: true }] }], avatar: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Avatar), { isSignal: true }] }] } });
 
 /**
  * Material 3 toolbar.
@@ -5341,7 +5639,7 @@ class Toolbar {
                 provide: MD3_BUTTON_CONTEXT,
                 useExisting: Toolbar,
             },
-        ], queries: [{ propertyName: "fab", first: true, predicate: FloatingActionButton, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "layoutElement", first: true, predicate: ["layout"], descendants: true, isSignal: true }, { propertyName: "containerElement", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "slotsElement", first: true, predicate: ["slots"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"md3-toolbar-layout\" #layout>\n    @if (isFloating()) {\n        <ng-content select=\"[md3-fab]\"></ng-content>\n    }\n    \n    <div class=\"md3-toolbar-container\" #container>\n        <div class=\"md3-toolbar-slots\" #slots>\n            <ng-content select=\"md3-toolbar-item\"></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [":host{--md-toolbar-size: 4em;--md-toolbar-padding: .5em;--md-toolbar-radius: var(--md-toolbar-size);--md-toolbar-shadow: var(--md-shadow-3dp);--md-toolbar-item-max-size: 20em;--md-toolbar-gap-min: .25em;--md-toolbar-gap-max: 2em;--md-toolbar-gap: clamp(var(--md-toolbar-gap-min), var(--md-toolbar-gap-free, 0px), var(--md-toolbar-gap-max));--md-toolbar-duration: var(--md-motion-expressive-default-spatial-duration);--md-toolbar-easing: var(--md-motion-expressive-default-spatial-easing);--md-toolbar-effect-duration: var(--md-motion-expressive-fast-effects-duration);--background-color: rgb(var(--md-scheme-surface-container));--foreground-color: rgb(var(--md-scheme-on-surface));display:block;position:relative;min-width:0em;min-height:0em;transition:max-height var(--md-toolbar-duration) var(--md-toolbar-easing),max-width var(--md-toolbar-duration) var(--md-toolbar-easing),opacity var(--md-toolbar-duration) var(--md-toolbar-easing)}:host .md3-toolbar-layout{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--md-toolbar-padding);width:100%;height:100%;min-width:0em;min-height:0em;transition:transform var(--md-toolbar-duration) var(--md-toolbar-easing),opacity var(--md-toolbar-duration) var(--md-toolbar-easing)}:host .md3-toolbar-layout .md3-toolbar-container{display:flex;flex-direction:row;align-items:center;min-width:0em;min-height:0em;max-width:100%;max-height:100%;border-radius:var(--md-toolbar-radius);background-color:var(--background-color);color:var(--foreground-color);box-shadow:var(--md-toolbar-shadow);overflow:hidden;pointer-events:auto;transition:max-width var(--md-toolbar-duration) var(--md-toolbar-easing),padding var(--md-toolbar-duration) var(--md-toolbar-easing),box-shadow var(--md-toolbar-effect-duration) linear,opacity var(--md-toolbar-effect-duration) linear,visibility 0s linear}:host .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots{display:flex;flex:0 1 auto;flex-direction:row;align-items:center;min-width:0em;min-height:0em}:host .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:max-width var(--md-toolbar-duration) var(--md-toolbar-easing),margin var(--md-toolbar-duration) var(--md-toolbar-easing),padding var(--md-toolbar-duration) var(--md-toolbar-easing),opacity var(--md-toolbar-effect-duration) linear,visibility 0s linear}:host.md3-fab-start ::ng-deep [md3-fab]{order:-1}:host.md3-fab-end ::ng-deep [md3-fab]{order:1}:host.md3-docked{--md-toolbar-radius: var(--md-border-radius-none);--md-toolbar-shadow: var(--md-shadow-0dp);background-color:var(--background-color)}:host.md3-docked.md3-align-start .md3-toolbar-layout .md3-toolbar-container{justify-content:start}:host.md3-docked.md3-align-center .md3-toolbar-layout .md3-toolbar-container{justify-content:center}:host.md3-docked.md3-align-end .md3-toolbar-layout .md3-toolbar-container{justify-content:end}:host.md3-docked .md3-toolbar-layout{width:100%;height:100%}:host.md3-docked .md3-toolbar-layout .md3-toolbar-container{background-color:transparent}:host.md3-floating.md3-align-start .md3-toolbar-layout{justify-content:start}:host.md3-floating.md3-align-center .md3-toolbar-layout{justify-content:center}:host.md3-floating.md3-align-end .md3-toolbar-layout{justify-content:end}:host.md3-floating .md3-toolbar-layout{position:absolute;inset:0;pointer-events:none}:host.md3-floating .md3-toolbar-layout .md3-toolbar-container{pointer-events:auto}:host.md3-floating .md3-toolbar-layout ::ng-deep [md3-fab]{pointer-events:auto}:host.md3-horizontal{max-height:var(--md-toolbar-size)}:host.md3-horizontal .md3-toolbar-layout{height:var(--md-toolbar-size);padding:0 1em}:host.md3-horizontal .md3-toolbar-layout .md3-toolbar-container{height:var(--md-toolbar-size)}:host.md3-horizontal .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item{max-width:var(--md-toolbar-item-max-size);min-width:3em}:host.md3-horizontal .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item+md3-toolbar-item{margin-inline-start:var(--md-toolbar-gap)}:host.md3-horizontal.md3-docked .md3-toolbar-layout .md3-toolbar-container{width:100%}:host.md3-horizontal.md3-floating{height:0}:host.md3-horizontal.md3-floating .md3-toolbar-layout .md3-toolbar-container{padding:0 var(--md-toolbar-padding)}:host.md3-horizontal.md3-floating.md3-region-block-end .md3-toolbar-layout{inset-block-start:auto;inset-block-end:1em}:host.md3-horizontal.md3-floating.md3-region-block-start .md3-toolbar-layout{inset-block-end:auto;inset-block-start:1em}:host.md3-vertical{max-width:var(--md-toolbar-size)}:host.md3-vertical .md3-toolbar-layout{flex-direction:column;width:var(--md-toolbar-size);padding:1em 0}:host.md3-vertical .md3-toolbar-layout .md3-toolbar-container{flex-direction:column;width:var(--md-toolbar-size)}:host.md3-vertical .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots{flex-direction:column;width:100%;height:auto}:host.md3-vertical .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item{max-height:var(--md-toolbar-item-max-size);min-height:3em}:host.md3-vertical .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item+md3-toolbar-item{margin-block-start:var(--md-toolbar-gap)}:host.md3-vertical.md3-docked .md3-toolbar-layout .md3-toolbar-container{height:100%}:host.md3-vertical.md3-floating{width:0}:host.md3-vertical.md3-floating .md3-toolbar-layout .md3-toolbar-container{padding:var(--md-toolbar-padding) 0}:host.md3-vertical.md3-floating.md3-region-inline-end .md3-toolbar-layout{inset-inline-start:auto;inset-inline-end:1em}:host.md3-vertical.md3-floating.md3-region-inline-start .md3-toolbar-layout{inset-inline-end:auto;inset-inline-start:1em}:host.md3-hidden{opacity:0;pointer-events:none}:host.md3-hidden.md3-horizontal{max-height:0em}:host.md3-hidden.md3-vertical{max-width:0em}:host.md3-hidden .md3-toolbar-layout{transform:scaleY(0)}:host.md3-collapsed{--md-toolbar-gap: 0em}:host.md3-collapsed .md3-toolbar-container .md3-toolbar-slots>::ng-deep md3-toolbar-item:not([md3-toolbar-persistent]){max-width:0em!important;max-height:0em!important;min-width:0em!important;min-height:0em!important;margin:0;padding-inline:0em;border-width:0em;opacity:0;visibility:hidden;transition:max-width var(--md-toolbar-duration) var(--md-toolbar-easing),max-height var(--md-toolbar-duration) var(--md-toolbar-easing),margin var(--md-toolbar-duration) var(--md-toolbar-easing),padding var(--md-toolbar-duration) var(--md-toolbar-easing),opacity var(--md-toolbar-effect-duration) linear,visibility 0s linear var(--md-toolbar-duration)}:host.md3-collapsed.md3-collapse-to-fab{--md-toolbar-padding: 0}:host.md3-collapsed.md3-collapse-to-fab .md3-toolbar-container{max-width:0em;opacity:0;visibility:hidden;pointer-events:none;box-shadow:var(--md-shadow-0dp);transition:max-width var(--md-toolbar-duration) var(--md-toolbar-easing),padding var(--md-toolbar-duration) var(--md-toolbar-easing),box-shadow var(--md-toolbar-effect-duration) linear,opacity var(--md-toolbar-effect-duration) linear,visibility 0s linear var(--md-toolbar-duration)}:host.md3-color-vibrant{--background-color: rgb(var(--md-scheme-primary-container));--foreground-color: rgb(var(--md-scheme-on-primary-container))}:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-icon-button].md3-standard,:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-icon-button].md3-outlined,:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-button].md3-text,:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-button].md3-outlined{--foreground-color: rgb(var(--md-scheme-on-primary-container))}:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-icon-button].md3-tonal,:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-button].md3-tonal{--background-color: rgb(var(--md-scheme-surface-container));--foreground-color: rgb(var(--md-scheme-on-surface))}\n"] });
+        ], queries: [{ propertyName: "fab", first: true, predicate: FloatingActionButton, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "layoutElement", first: true, predicate: ["layout"], descendants: true, isSignal: true }, { propertyName: "containerElement", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "slotsElement", first: true, predicate: ["slots"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"md3-toolbar-layout\" #layout>\n    @if (isFloating()) {\n        <ng-content select=\"[md3-fab]\"></ng-content>\n    }\n    \n    <div class=\"md3-toolbar-container\" #container>\n        <div class=\"md3-toolbar-slots\" #slots>\n            <ng-content select=\"md3-toolbar-item\"></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [":host{--md-toolbar-size: 4em;--md-toolbar-padding: .75em;--md-toolbar-radius: var(--md-toolbar-size);--md-toolbar-shadow: var(--md-shadow-3dp);--md-toolbar-item-max-size: 20em;--md-toolbar-gap-min: .25em;--md-toolbar-gap-max: 2em;--md-toolbar-gap: clamp(var(--md-toolbar-gap-min), var(--md-toolbar-gap-free, 0px), var(--md-toolbar-gap-max));--md-toolbar-duration: var(--md-motion-expressive-default-spatial-duration);--md-toolbar-easing: var(--md-motion-expressive-default-spatial-easing);--md-toolbar-effect-duration: var(--md-motion-expressive-fast-effects-duration);--background-color: rgb(var(--md-scheme-surface-container));--foreground-color: rgb(var(--md-scheme-on-surface));display:block;position:relative;min-width:0em;min-height:0em;transition:max-height var(--md-toolbar-duration) var(--md-toolbar-easing),max-width var(--md-toolbar-duration) var(--md-toolbar-easing),opacity var(--md-toolbar-duration) var(--md-toolbar-easing)}:host .md3-toolbar-layout{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--md-toolbar-padding);width:100%;height:100%;min-width:0em;min-height:0em;transition:transform var(--md-toolbar-duration) var(--md-toolbar-easing),opacity var(--md-toolbar-duration) var(--md-toolbar-easing)}:host .md3-toolbar-layout .md3-toolbar-container{display:flex;flex-direction:row;align-items:center;min-width:0em;min-height:0em;max-width:100%;max-height:100%;border-radius:var(--md-toolbar-radius);background-color:var(--background-color);color:var(--foreground-color);box-shadow:var(--md-toolbar-shadow);overflow:hidden;pointer-events:auto;transition:max-width var(--md-toolbar-duration) var(--md-toolbar-easing),padding var(--md-toolbar-duration) var(--md-toolbar-easing),box-shadow var(--md-toolbar-effect-duration) linear,opacity var(--md-toolbar-effect-duration) linear,visibility 0s linear}:host .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots{display:flex;flex:0 1 auto;flex-direction:row;align-items:center;min-width:0em;min-height:0em}:host .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:max-width var(--md-toolbar-duration) var(--md-toolbar-easing),margin var(--md-toolbar-duration) var(--md-toolbar-easing),padding var(--md-toolbar-duration) var(--md-toolbar-easing),opacity var(--md-toolbar-effect-duration) linear,visibility 0s linear}:host.md3-fab-start ::ng-deep [md3-fab]{order:-1}:host.md3-fab-end ::ng-deep [md3-fab]{order:1}:host.md3-docked{--md-toolbar-radius: var(--md-border-radius-none);--md-toolbar-shadow: var(--md-shadow-0dp);background-color:var(--background-color)}:host.md3-docked.md3-align-start .md3-toolbar-layout .md3-toolbar-container{justify-content:start}:host.md3-docked.md3-align-center .md3-toolbar-layout .md3-toolbar-container{justify-content:center}:host.md3-docked.md3-align-end .md3-toolbar-layout .md3-toolbar-container{justify-content:end}:host.md3-docked .md3-toolbar-layout{width:100%;height:100%}:host.md3-docked .md3-toolbar-layout .md3-toolbar-container{background-color:transparent}:host.md3-floating.md3-align-start .md3-toolbar-layout{justify-content:start}:host.md3-floating.md3-align-center .md3-toolbar-layout{justify-content:center}:host.md3-floating.md3-align-end .md3-toolbar-layout{justify-content:end}:host.md3-floating .md3-toolbar-layout{position:absolute;inset:0;pointer-events:none}:host.md3-floating .md3-toolbar-layout .md3-toolbar-container{pointer-events:auto}:host.md3-floating .md3-toolbar-layout ::ng-deep [md3-fab]{pointer-events:auto}:host.md3-horizontal{max-height:var(--md-toolbar-size)}:host.md3-horizontal .md3-toolbar-layout{height:var(--md-toolbar-size);padding:0 1em}:host.md3-horizontal .md3-toolbar-layout .md3-toolbar-container{height:var(--md-toolbar-size)}:host.md3-horizontal .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item{max-width:var(--md-toolbar-item-max-size)}:host.md3-horizontal .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item+md3-toolbar-item{margin-inline-start:var(--md-toolbar-gap)}:host.md3-horizontal.md3-docked .md3-toolbar-layout .md3-toolbar-container{width:100%}:host.md3-horizontal.md3-floating{height:0}:host.md3-horizontal.md3-floating .md3-toolbar-layout .md3-toolbar-container{padding:0 var(--md-toolbar-padding)}:host.md3-horizontal.md3-floating.md3-region-block-end .md3-toolbar-layout{inset-block-start:auto;inset-block-end:1em}:host.md3-horizontal.md3-floating.md3-region-block-start .md3-toolbar-layout{inset-block-end:auto;inset-block-start:1em}:host.md3-vertical{max-width:var(--md-toolbar-size)}:host.md3-vertical .md3-toolbar-layout{flex-direction:column;width:var(--md-toolbar-size);padding:1em 0}:host.md3-vertical .md3-toolbar-layout .md3-toolbar-container{flex-direction:column;width:var(--md-toolbar-size)}:host.md3-vertical .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots{flex-direction:column;width:100%;height:auto}:host.md3-vertical .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item{max-height:var(--md-toolbar-item-max-size);min-height:3em}:host.md3-vertical .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item+md3-toolbar-item{margin-block-start:var(--md-toolbar-gap)}:host.md3-vertical.md3-docked .md3-toolbar-layout .md3-toolbar-container{height:100%}:host.md3-vertical.md3-floating{width:0}:host.md3-vertical.md3-floating .md3-toolbar-layout .md3-toolbar-container{padding:var(--md-toolbar-padding) 0}:host.md3-vertical.md3-floating.md3-region-inline-end .md3-toolbar-layout{inset-inline-start:auto;inset-inline-end:1em}:host.md3-vertical.md3-floating.md3-region-inline-start .md3-toolbar-layout{inset-inline-end:auto;inset-inline-start:1em}:host.md3-hidden{opacity:0;pointer-events:none}:host.md3-hidden.md3-horizontal{max-height:0em}:host.md3-hidden.md3-vertical{max-width:0em}:host.md3-hidden .md3-toolbar-layout{transform:scaleY(0)}:host.md3-collapsed{--md-toolbar-gap: 0em}:host.md3-collapsed .md3-toolbar-container .md3-toolbar-slots>::ng-deep md3-toolbar-item:not([md3-toolbar-persistent]){max-width:0em!important;max-height:0em!important;min-width:0em!important;min-height:0em!important;margin:0;padding-inline:0em;border-width:0em;opacity:0;visibility:hidden;transition:max-width var(--md-toolbar-duration) var(--md-toolbar-easing),max-height var(--md-toolbar-duration) var(--md-toolbar-easing),margin var(--md-toolbar-duration) var(--md-toolbar-easing),padding var(--md-toolbar-duration) var(--md-toolbar-easing),opacity var(--md-toolbar-effect-duration) linear,visibility 0s linear var(--md-toolbar-duration)}:host.md3-collapsed.md3-collapse-to-fab{--md-toolbar-padding: 0}:host.md3-collapsed.md3-collapse-to-fab .md3-toolbar-container{max-width:0em;opacity:0;visibility:hidden;pointer-events:none;box-shadow:var(--md-shadow-0dp);transition:max-width var(--md-toolbar-duration) var(--md-toolbar-easing),padding var(--md-toolbar-duration) var(--md-toolbar-easing),box-shadow var(--md-toolbar-effect-duration) linear,opacity var(--md-toolbar-effect-duration) linear,visibility 0s linear var(--md-toolbar-duration)}:host.md3-color-vibrant{--background-color: rgb(var(--md-scheme-primary-container));--foreground-color: rgb(var(--md-scheme-on-primary-container))}:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-icon-button].md3-standard,:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-icon-button].md3-outlined,:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-button].md3-text,:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-button].md3-outlined{--foreground-color: rgb(var(--md-scheme-on-primary-container))}:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-icon-button].md3-tonal,:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-button].md3-tonal{--background-color: rgb(var(--md-scheme-surface-container));--foreground-color: rgb(var(--md-scheme-on-surface))}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Toolbar, decorators: [{
             type: Component,
@@ -5361,7 +5659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         '[class.md3-collapse-to-fab]': 'isCollapsedToFab()',
                         '(focusin)': 'onFocusIn()',
                         '(focusout)': 'onFocusOut($event)',
-                    }, template: "<div class=\"md3-toolbar-layout\" #layout>\n    @if (isFloating()) {\n        <ng-content select=\"[md3-fab]\"></ng-content>\n    }\n    \n    <div class=\"md3-toolbar-container\" #container>\n        <div class=\"md3-toolbar-slots\" #slots>\n            <ng-content select=\"md3-toolbar-item\"></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [":host{--md-toolbar-size: 4em;--md-toolbar-padding: .5em;--md-toolbar-radius: var(--md-toolbar-size);--md-toolbar-shadow: var(--md-shadow-3dp);--md-toolbar-item-max-size: 20em;--md-toolbar-gap-min: .25em;--md-toolbar-gap-max: 2em;--md-toolbar-gap: clamp(var(--md-toolbar-gap-min), var(--md-toolbar-gap-free, 0px), var(--md-toolbar-gap-max));--md-toolbar-duration: var(--md-motion-expressive-default-spatial-duration);--md-toolbar-easing: var(--md-motion-expressive-default-spatial-easing);--md-toolbar-effect-duration: var(--md-motion-expressive-fast-effects-duration);--background-color: rgb(var(--md-scheme-surface-container));--foreground-color: rgb(var(--md-scheme-on-surface));display:block;position:relative;min-width:0em;min-height:0em;transition:max-height var(--md-toolbar-duration) var(--md-toolbar-easing),max-width var(--md-toolbar-duration) var(--md-toolbar-easing),opacity var(--md-toolbar-duration) var(--md-toolbar-easing)}:host .md3-toolbar-layout{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--md-toolbar-padding);width:100%;height:100%;min-width:0em;min-height:0em;transition:transform var(--md-toolbar-duration) var(--md-toolbar-easing),opacity var(--md-toolbar-duration) var(--md-toolbar-easing)}:host .md3-toolbar-layout .md3-toolbar-container{display:flex;flex-direction:row;align-items:center;min-width:0em;min-height:0em;max-width:100%;max-height:100%;border-radius:var(--md-toolbar-radius);background-color:var(--background-color);color:var(--foreground-color);box-shadow:var(--md-toolbar-shadow);overflow:hidden;pointer-events:auto;transition:max-width var(--md-toolbar-duration) var(--md-toolbar-easing),padding var(--md-toolbar-duration) var(--md-toolbar-easing),box-shadow var(--md-toolbar-effect-duration) linear,opacity var(--md-toolbar-effect-duration) linear,visibility 0s linear}:host .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots{display:flex;flex:0 1 auto;flex-direction:row;align-items:center;min-width:0em;min-height:0em}:host .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:max-width var(--md-toolbar-duration) var(--md-toolbar-easing),margin var(--md-toolbar-duration) var(--md-toolbar-easing),padding var(--md-toolbar-duration) var(--md-toolbar-easing),opacity var(--md-toolbar-effect-duration) linear,visibility 0s linear}:host.md3-fab-start ::ng-deep [md3-fab]{order:-1}:host.md3-fab-end ::ng-deep [md3-fab]{order:1}:host.md3-docked{--md-toolbar-radius: var(--md-border-radius-none);--md-toolbar-shadow: var(--md-shadow-0dp);background-color:var(--background-color)}:host.md3-docked.md3-align-start .md3-toolbar-layout .md3-toolbar-container{justify-content:start}:host.md3-docked.md3-align-center .md3-toolbar-layout .md3-toolbar-container{justify-content:center}:host.md3-docked.md3-align-end .md3-toolbar-layout .md3-toolbar-container{justify-content:end}:host.md3-docked .md3-toolbar-layout{width:100%;height:100%}:host.md3-docked .md3-toolbar-layout .md3-toolbar-container{background-color:transparent}:host.md3-floating.md3-align-start .md3-toolbar-layout{justify-content:start}:host.md3-floating.md3-align-center .md3-toolbar-layout{justify-content:center}:host.md3-floating.md3-align-end .md3-toolbar-layout{justify-content:end}:host.md3-floating .md3-toolbar-layout{position:absolute;inset:0;pointer-events:none}:host.md3-floating .md3-toolbar-layout .md3-toolbar-container{pointer-events:auto}:host.md3-floating .md3-toolbar-layout ::ng-deep [md3-fab]{pointer-events:auto}:host.md3-horizontal{max-height:var(--md-toolbar-size)}:host.md3-horizontal .md3-toolbar-layout{height:var(--md-toolbar-size);padding:0 1em}:host.md3-horizontal .md3-toolbar-layout .md3-toolbar-container{height:var(--md-toolbar-size)}:host.md3-horizontal .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item{max-width:var(--md-toolbar-item-max-size);min-width:3em}:host.md3-horizontal .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item+md3-toolbar-item{margin-inline-start:var(--md-toolbar-gap)}:host.md3-horizontal.md3-docked .md3-toolbar-layout .md3-toolbar-container{width:100%}:host.md3-horizontal.md3-floating{height:0}:host.md3-horizontal.md3-floating .md3-toolbar-layout .md3-toolbar-container{padding:0 var(--md-toolbar-padding)}:host.md3-horizontal.md3-floating.md3-region-block-end .md3-toolbar-layout{inset-block-start:auto;inset-block-end:1em}:host.md3-horizontal.md3-floating.md3-region-block-start .md3-toolbar-layout{inset-block-end:auto;inset-block-start:1em}:host.md3-vertical{max-width:var(--md-toolbar-size)}:host.md3-vertical .md3-toolbar-layout{flex-direction:column;width:var(--md-toolbar-size);padding:1em 0}:host.md3-vertical .md3-toolbar-layout .md3-toolbar-container{flex-direction:column;width:var(--md-toolbar-size)}:host.md3-vertical .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots{flex-direction:column;width:100%;height:auto}:host.md3-vertical .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item{max-height:var(--md-toolbar-item-max-size);min-height:3em}:host.md3-vertical .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item+md3-toolbar-item{margin-block-start:var(--md-toolbar-gap)}:host.md3-vertical.md3-docked .md3-toolbar-layout .md3-toolbar-container{height:100%}:host.md3-vertical.md3-floating{width:0}:host.md3-vertical.md3-floating .md3-toolbar-layout .md3-toolbar-container{padding:var(--md-toolbar-padding) 0}:host.md3-vertical.md3-floating.md3-region-inline-end .md3-toolbar-layout{inset-inline-start:auto;inset-inline-end:1em}:host.md3-vertical.md3-floating.md3-region-inline-start .md3-toolbar-layout{inset-inline-end:auto;inset-inline-start:1em}:host.md3-hidden{opacity:0;pointer-events:none}:host.md3-hidden.md3-horizontal{max-height:0em}:host.md3-hidden.md3-vertical{max-width:0em}:host.md3-hidden .md3-toolbar-layout{transform:scaleY(0)}:host.md3-collapsed{--md-toolbar-gap: 0em}:host.md3-collapsed .md3-toolbar-container .md3-toolbar-slots>::ng-deep md3-toolbar-item:not([md3-toolbar-persistent]){max-width:0em!important;max-height:0em!important;min-width:0em!important;min-height:0em!important;margin:0;padding-inline:0em;border-width:0em;opacity:0;visibility:hidden;transition:max-width var(--md-toolbar-duration) var(--md-toolbar-easing),max-height var(--md-toolbar-duration) var(--md-toolbar-easing),margin var(--md-toolbar-duration) var(--md-toolbar-easing),padding var(--md-toolbar-duration) var(--md-toolbar-easing),opacity var(--md-toolbar-effect-duration) linear,visibility 0s linear var(--md-toolbar-duration)}:host.md3-collapsed.md3-collapse-to-fab{--md-toolbar-padding: 0}:host.md3-collapsed.md3-collapse-to-fab .md3-toolbar-container{max-width:0em;opacity:0;visibility:hidden;pointer-events:none;box-shadow:var(--md-shadow-0dp);transition:max-width var(--md-toolbar-duration) var(--md-toolbar-easing),padding var(--md-toolbar-duration) var(--md-toolbar-easing),box-shadow var(--md-toolbar-effect-duration) linear,opacity var(--md-toolbar-effect-duration) linear,visibility 0s linear var(--md-toolbar-duration)}:host.md3-color-vibrant{--background-color: rgb(var(--md-scheme-primary-container));--foreground-color: rgb(var(--md-scheme-on-primary-container))}:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-icon-button].md3-standard,:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-icon-button].md3-outlined,:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-button].md3-text,:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-button].md3-outlined{--foreground-color: rgb(var(--md-scheme-on-primary-container))}:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-icon-button].md3-tonal,:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-button].md3-tonal{--background-color: rgb(var(--md-scheme-surface-container));--foreground-color: rgb(var(--md-scheme-on-surface))}\n"] }]
+                    }, template: "<div class=\"md3-toolbar-layout\" #layout>\n    @if (isFloating()) {\n        <ng-content select=\"[md3-fab]\"></ng-content>\n    }\n    \n    <div class=\"md3-toolbar-container\" #container>\n        <div class=\"md3-toolbar-slots\" #slots>\n            <ng-content select=\"md3-toolbar-item\"></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [":host{--md-toolbar-size: 4em;--md-toolbar-padding: .75em;--md-toolbar-radius: var(--md-toolbar-size);--md-toolbar-shadow: var(--md-shadow-3dp);--md-toolbar-item-max-size: 20em;--md-toolbar-gap-min: .25em;--md-toolbar-gap-max: 2em;--md-toolbar-gap: clamp(var(--md-toolbar-gap-min), var(--md-toolbar-gap-free, 0px), var(--md-toolbar-gap-max));--md-toolbar-duration: var(--md-motion-expressive-default-spatial-duration);--md-toolbar-easing: var(--md-motion-expressive-default-spatial-easing);--md-toolbar-effect-duration: var(--md-motion-expressive-fast-effects-duration);--background-color: rgb(var(--md-scheme-surface-container));--foreground-color: rgb(var(--md-scheme-on-surface));display:block;position:relative;min-width:0em;min-height:0em;transition:max-height var(--md-toolbar-duration) var(--md-toolbar-easing),max-width var(--md-toolbar-duration) var(--md-toolbar-easing),opacity var(--md-toolbar-duration) var(--md-toolbar-easing)}:host .md3-toolbar-layout{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--md-toolbar-padding);width:100%;height:100%;min-width:0em;min-height:0em;transition:transform var(--md-toolbar-duration) var(--md-toolbar-easing),opacity var(--md-toolbar-duration) var(--md-toolbar-easing)}:host .md3-toolbar-layout .md3-toolbar-container{display:flex;flex-direction:row;align-items:center;min-width:0em;min-height:0em;max-width:100%;max-height:100%;border-radius:var(--md-toolbar-radius);background-color:var(--background-color);color:var(--foreground-color);box-shadow:var(--md-toolbar-shadow);overflow:hidden;pointer-events:auto;transition:max-width var(--md-toolbar-duration) var(--md-toolbar-easing),padding var(--md-toolbar-duration) var(--md-toolbar-easing),box-shadow var(--md-toolbar-effect-duration) linear,opacity var(--md-toolbar-effect-duration) linear,visibility 0s linear}:host .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots{display:flex;flex:0 1 auto;flex-direction:row;align-items:center;min-width:0em;min-height:0em}:host .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:max-width var(--md-toolbar-duration) var(--md-toolbar-easing),margin var(--md-toolbar-duration) var(--md-toolbar-easing),padding var(--md-toolbar-duration) var(--md-toolbar-easing),opacity var(--md-toolbar-effect-duration) linear,visibility 0s linear}:host.md3-fab-start ::ng-deep [md3-fab]{order:-1}:host.md3-fab-end ::ng-deep [md3-fab]{order:1}:host.md3-docked{--md-toolbar-radius: var(--md-border-radius-none);--md-toolbar-shadow: var(--md-shadow-0dp);background-color:var(--background-color)}:host.md3-docked.md3-align-start .md3-toolbar-layout .md3-toolbar-container{justify-content:start}:host.md3-docked.md3-align-center .md3-toolbar-layout .md3-toolbar-container{justify-content:center}:host.md3-docked.md3-align-end .md3-toolbar-layout .md3-toolbar-container{justify-content:end}:host.md3-docked .md3-toolbar-layout{width:100%;height:100%}:host.md3-docked .md3-toolbar-layout .md3-toolbar-container{background-color:transparent}:host.md3-floating.md3-align-start .md3-toolbar-layout{justify-content:start}:host.md3-floating.md3-align-center .md3-toolbar-layout{justify-content:center}:host.md3-floating.md3-align-end .md3-toolbar-layout{justify-content:end}:host.md3-floating .md3-toolbar-layout{position:absolute;inset:0;pointer-events:none}:host.md3-floating .md3-toolbar-layout .md3-toolbar-container{pointer-events:auto}:host.md3-floating .md3-toolbar-layout ::ng-deep [md3-fab]{pointer-events:auto}:host.md3-horizontal{max-height:var(--md-toolbar-size)}:host.md3-horizontal .md3-toolbar-layout{height:var(--md-toolbar-size);padding:0 1em}:host.md3-horizontal .md3-toolbar-layout .md3-toolbar-container{height:var(--md-toolbar-size)}:host.md3-horizontal .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item{max-width:var(--md-toolbar-item-max-size)}:host.md3-horizontal .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item+md3-toolbar-item{margin-inline-start:var(--md-toolbar-gap)}:host.md3-horizontal.md3-docked .md3-toolbar-layout .md3-toolbar-container{width:100%}:host.md3-horizontal.md3-floating{height:0}:host.md3-horizontal.md3-floating .md3-toolbar-layout .md3-toolbar-container{padding:0 var(--md-toolbar-padding)}:host.md3-horizontal.md3-floating.md3-region-block-end .md3-toolbar-layout{inset-block-start:auto;inset-block-end:1em}:host.md3-horizontal.md3-floating.md3-region-block-start .md3-toolbar-layout{inset-block-end:auto;inset-block-start:1em}:host.md3-vertical{max-width:var(--md-toolbar-size)}:host.md3-vertical .md3-toolbar-layout{flex-direction:column;width:var(--md-toolbar-size);padding:1em 0}:host.md3-vertical .md3-toolbar-layout .md3-toolbar-container{flex-direction:column;width:var(--md-toolbar-size)}:host.md3-vertical .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots{flex-direction:column;width:100%;height:auto}:host.md3-vertical .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item{max-height:var(--md-toolbar-item-max-size);min-height:3em}:host.md3-vertical .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item+md3-toolbar-item{margin-block-start:var(--md-toolbar-gap)}:host.md3-vertical.md3-docked .md3-toolbar-layout .md3-toolbar-container{height:100%}:host.md3-vertical.md3-floating{width:0}:host.md3-vertical.md3-floating .md3-toolbar-layout .md3-toolbar-container{padding:var(--md-toolbar-padding) 0}:host.md3-vertical.md3-floating.md3-region-inline-end .md3-toolbar-layout{inset-inline-start:auto;inset-inline-end:1em}:host.md3-vertical.md3-floating.md3-region-inline-start .md3-toolbar-layout{inset-inline-end:auto;inset-inline-start:1em}:host.md3-hidden{opacity:0;pointer-events:none}:host.md3-hidden.md3-horizontal{max-height:0em}:host.md3-hidden.md3-vertical{max-width:0em}:host.md3-hidden .md3-toolbar-layout{transform:scaleY(0)}:host.md3-collapsed{--md-toolbar-gap: 0em}:host.md3-collapsed .md3-toolbar-container .md3-toolbar-slots>::ng-deep md3-toolbar-item:not([md3-toolbar-persistent]){max-width:0em!important;max-height:0em!important;min-width:0em!important;min-height:0em!important;margin:0;padding-inline:0em;border-width:0em;opacity:0;visibility:hidden;transition:max-width var(--md-toolbar-duration) var(--md-toolbar-easing),max-height var(--md-toolbar-duration) var(--md-toolbar-easing),margin var(--md-toolbar-duration) var(--md-toolbar-easing),padding var(--md-toolbar-duration) var(--md-toolbar-easing),opacity var(--md-toolbar-effect-duration) linear,visibility 0s linear var(--md-toolbar-duration)}:host.md3-collapsed.md3-collapse-to-fab{--md-toolbar-padding: 0}:host.md3-collapsed.md3-collapse-to-fab .md3-toolbar-container{max-width:0em;opacity:0;visibility:hidden;pointer-events:none;box-shadow:var(--md-shadow-0dp);transition:max-width var(--md-toolbar-duration) var(--md-toolbar-easing),padding var(--md-toolbar-duration) var(--md-toolbar-easing),box-shadow var(--md-toolbar-effect-duration) linear,opacity var(--md-toolbar-effect-duration) linear,visibility 0s linear var(--md-toolbar-duration)}:host.md3-color-vibrant{--background-color: rgb(var(--md-scheme-primary-container));--foreground-color: rgb(var(--md-scheme-on-primary-container))}:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-icon-button].md3-standard,:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-icon-button].md3-outlined,:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-button].md3-text,:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-button].md3-outlined{--foreground-color: rgb(var(--md-scheme-on-primary-container))}:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-icon-button].md3-tonal,:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-button].md3-tonal{--background-color: rgb(var(--md-scheme-surface-container));--foreground-color: rgb(var(--md-scheme-on-surface))}\n"] }]
         }], ctorParameters: () => [], propDecorators: { toolbarType: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar-type", required: false }] }], toolbarColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar-color", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], scrollAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll-action", required: false }] }], fabPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "fab-position", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], layoutElement: [{ type: i0.ViewChild, args: ['layout', { isSignal: true }] }], containerElement: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], slotsElement: [{ type: i0.ViewChild, args: ['slots', { isSignal: true }] }], fab: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FloatingActionButton), { isSignal: true }] }] } });
 
 class ToolbarItem {
@@ -5746,193 +6044,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 }]
         }] });
 
-const DIALOG_DATA = new InjectionToken('MD3_DIALOG_DATA');
-const DIALOG_CONFIG = new InjectionToken('MD3_DIALOG_CONFIG');
-const DIALOG_COMPONENT = new InjectionToken('MD3_DIALOG_COMPONENT');
-const DIALOG_EXIT_ANIMATION_FALLBACK_MS = 300;
-const HIDDEN_CLASS = 'md3-dialog-hidden';
-class DialogRef {
-    cdkRef;
-    isFullScreen;
-    closed = new Subject();
-    closing = new Subject();
-    hiddenChanges = new Subject();
-    closePromise = null;
-    closeStarted = false;
-    closeSettled = false;
-    hidden = false;
-    /** Shell hosting the dialog: the regular dialog or the full screen one. */
-    dialogInstance;
-    /**
-     * Filled by DialogService after the user component is attached. Keeping the
-     * instance here lets callers imperatively update inputs when that is useful.
-     */
-    componentInstance;
-    /** Overlay hosting the dialog, useful to reach the panel and the scrim. */
-    get overlayRef() {
-        return this.cdkRef.overlayRef;
-    }
-    /** Whether the dialog started closing. Such a dialog cannot be hidden or shown anymore. */
-    get isClosing() {
-        return this.closeStarted;
-    }
-    /** Whether the dialog is currently hidden, on request or behind another dialog. */
-    get isHidden() {
-        return this.hidden;
-    }
-    constructor(cdkRef, disableCloseEvents, 
-    /** Whether this reference belongs to a full screen dialog. */
-    isFullScreen = false) {
-        this.cdkRef = cdkRef;
-        this.isFullScreen = isFullScreen;
-        // Closing always goes through this reference so the exit animation can
-        // run before the CDK disposes the overlay. Detachments triggered from
-        // the outside (navigation, scroll strategy) still settle this ref.
-        this.cdkRef.closed.pipe(take(1)).subscribe((result) => this.settle(result));
-        if (!disableCloseEvents) {
-            this.connectCloseEvents();
-        }
-    }
-    /** Closes the dialog. The promise resolves once the exit animation is done. */
-    close(result) {
-        if (this.closePromise) {
-            return this.closePromise;
-        }
-        this.startClosing();
-        this.closePromise = this.startCloseAnimation().then(() => this.cdkRef.close(result));
-        return this.closePromise;
-    }
-    /**
-     * Hides the dialog with the closing animation while keeping it alive, so
-     * its content, form state and subscriptions survive until show() is called.
-     * The page underneath becomes usable again while the dialog waits behind it.
-     * The promise resolves once the dialog is out of sight.
-     */
-    hide() {
-        if (this.hidden || this.closeStarted) {
-            return Promise.resolve();
-        }
-        this.hidden = true;
-        this.toggleHiddenState(true);
-        this.dialogInstance?.setActive(false);
-        this.hiddenChanges.next(true);
-        return this.waitForSurfaceAnimation();
-    }
-    /**
-     * Brings a hidden dialog back with the opening animation. Focus moves back
-     * into the dialog even when it was never hidden, which is what makes it
-     * usable again once the dialog above it closes.
-     */
-    show() {
-        if (this.closeStarted) {
-            return;
-        }
-        if (this.hidden) {
-            this.hidden = false;
-            this.toggleHiddenState(false);
-            this.dialogInstance?.setActive(true);
-            this.hiddenChanges.next(false);
-        }
-        this.dialogInstance?.recaptureFocus();
-    }
-    /** Emits when the dialog starts closing, before the exit animation runs. */
-    beforeClosed() {
-        return this.closing.asObservable();
-    }
-    /** Emits the new value of `isHidden` every time the dialog is hidden or shown. */
-    hiddenChanged() {
-        return this.hiddenChanges.asObservable();
-    }
-    afterClosed() {
-        return this.closed.asObservable();
-    }
-    connectCloseEvents() {
-        // The CDK config keeps `disableClose` on, so the scrim and Escape key
-        // are handled here instead and the dialog can animate out.
-        this.cdkRef.backdropClick.pipe(take(1)).subscribe(() => {
-            this.cdkRef.containerInstance._closeInteractionType = 'mouse';
-            this.close();
-        });
-        // A hidden dialog is not the one the Escape key is meant for, even
-        // though the overlay it sits in is still the one receiving the event.
-        this.cdkRef.keydownEvents.pipe(filter((event) => !this.hidden && event.key === 'Escape' && !hasModifierKey(event)), take(1)).subscribe((event) => {
-            event.preventDefault();
-            this.cdkRef.containerInstance._closeInteractionType = 'keyboard';
-            this.close();
-        });
-    }
-    toggleHiddenState(isHidden) {
-        const overlayRef = this.cdkRef.overlayRef;
-        const panel = overlayRef.overlayElement;
-        const backdrop = overlayRef.backdropElement;
-        panel.classList.toggle(HIDDEN_CLASS, isHidden);
-        backdrop?.classList.toggle(HIDDEN_CLASS, isHidden);
-        // `inert` keeps a hidden dialog out of the tab order and away from
-        // assistive technology without removing it from the DOM.
-        if (isHidden) {
-            panel.setAttribute('inert', '');
-        }
-        else {
-            panel.removeAttribute('inert');
-        }
-    }
-    startClosing() {
-        if (this.closeStarted) {
-            return;
-        }
-        this.closeStarted = true;
-        this.closing.next();
-        this.closing.complete();
-    }
-    startCloseAnimation() {
-        const overlayRef = this.cdkRef.overlayRef;
-        const wasVisible = !this.hidden;
-        overlayRef.overlayElement.classList.add('md3-dialog-closing');
-        overlayRef.backdropElement?.classList.add('md3-dialog-closing');
-        this.dialogInstance?.setActive(false);
-        // A hidden dialog already played the exit animation, so there is
-        // nothing left to transition and it can be disposed right away.
-        return wasVisible ? this.waitForSurfaceAnimation() : Promise.resolve();
-    }
-    /** Resolves when the surface finished animating, with a timeout as a safety net. */
-    waitForSurfaceAnimation() {
-        const panel = this.cdkRef.overlayRef.overlayElement;
-        const surface = this.dialogInstance?.surfaceElement ?? panel;
-        return new Promise((resolve) => {
-            let isResolved = false;
-            let timeoutId = setTimeout(done, DIALOG_EXIT_ANIMATION_FALLBACK_MS);
-            function done() {
-                if (isResolved) {
-                    return;
-                }
-                isResolved = true;
-                clearTimeout(timeoutId);
-                surface.removeEventListener('transitionend', onTransitionEnd);
-                resolve();
-            }
-            function onTransitionEnd(event) {
-                if (event.target === surface) {
-                    done();
-                }
-            }
-            surface.addEventListener('transitionend', onTransitionEnd);
-        });
-    }
-    /** Emits the result once the CDK reference is closed. Focus is restored by the container. */
-    settle(result) {
-        if (this.closeSettled) {
-            return;
-        }
-        // Covers detachments that did not go through close(), so anything
-        // waiting on beforeClosed() is still notified.
-        this.startClosing();
-        this.closeSettled = true;
-        this.hiddenChanges.complete();
-        this.closed.next(result);
-        this.closed.complete();
-    }
-}
-
 /**
  * Material 3 dialog shell. It extends the CDK dialog container, so focus
  * trapping, focus restoration and the ARIA attributes are handled by the CDK
@@ -5974,17 +6085,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         }], propDecorators: { surface: [{ type: i0.ViewChild, args: ['surface', { isSignal: true }] }] } });
 
 /**
- * Material 3 full screen dialog shell. It covers the viewport and lays its
- * content out like the scaffold does, with a main pane and a side sheet outlet
- * on each side, so side sheets opened while it is up land inside the dialog
- * instead of behind it.
+ * 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 }) ?? {};
@@ -5992,28 +6110,66 @@ class FullScreenDialog extends CdkDialogContainer {
         return this.surface()?.nativeElement ?? null;
     }
     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;
+        }
+        // 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();
-        // Taking the outlets over is what sends the next side sheet inside the
-        // dialog. The scaffold gets them back when this dialog is destroyed.
         if (startOutlet) {
             this.sheets.registerSideSheetOutlet('start', startOutlet);
         }
         if (endOutlet) {
             this.sheets.registerSideSheetOutlet('end', endOutlet);
         }
+        this.ownsSideSheetOutlets = !!startOutlet || !!endOutlet;
     }
     ngOnDestroy() {
-        const startOutlet = this.startOutlet();
-        const endOutlet = this.endOutlet();
-        if (startOutlet) {
-            this.sheets.unregisterSideSheetOutlet('start', startOutlet);
-        }
-        if (endOutlet) {
-            this.sheets.unregisterSideSheetOutlet('end', endOutlet);
+        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();
     }
+    /**
+     * 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 (content.tagName === 'MD3-LAYOUT') {
+            return content;
+        }
+        const root = content.firstElementChild;
+        return root?.tagName === 'MD3-LAYOUT' ? root : null;
+    }
+    checkContentLayout(layout) {
+        if (layout) {
+            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);
@@ -6026,14 +6182,14 @@ class FullScreenDialog extends CdkDialogContainer {
         this._recaptureFocus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FullScreenDialog, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: FullScreenDialog, isStandalone: true, selector: "md3-fullscreen-dialog", viewQueries: [{ propertyName: "surface", first: true, predicate: ["surface"], descendants: true, isSignal: true }, { propertyName: "startOutlet", first: true, predicate: ["startOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }, { propertyName: "endOutlet", first: true, predicate: ["endOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- The role and aria attributes live on the host element, applied by the CDK dialog container. -->\n<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\">\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)}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *{display:grid;grid-template-areas:\"header\" \"body\";grid-template-rows:auto minmax(0,1fr) auto;min-height:0;height:100%;max-height:100dvh;max-width:100dvw;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgb(var(--md-scheme-outline-variant)) transparent}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *::-webkit-scrollbar{width:.5rem;height:.5rem}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *::-webkit-scrollbar-track{background:transparent}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *>md3-dialog-body{grid-area:body;margin:0;padding:1em 1.5em;max-width:inherit;overflow-y:auto;height:auto}:host .md3-panes-container .md3-pane.md3-pane-end{grid-area:end}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
+    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\">\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)}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *{display:grid;grid-template-areas:\"header\" \"body\";grid-template-rows:auto minmax(0,1fr) auto;min-height:0;height:100%;max-height:100dvh;max-width:100dvw;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgb(var(--md-scheme-outline-variant)) transparent}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *::-webkit-scrollbar{width:.5rem;height:.5rem}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *::-webkit-scrollbar-track{background:transparent}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *>md3-dialog-body{grid-area:body;margin:0;padding:1em 1.5em;max-width:inherit;overflow-y:auto;height:auto}:host .md3-panes-container .md3-pane.md3-pane-end{grid-area:end}\n"] }]
-        }], propDecorators: { surface: [{ type: i0.ViewChild, args: ['surface', { isSignal: true }] }], startOutlet: [{ type: i0.ViewChild, args: ['startOutlet', { ...{ read: CdkPortalOutlet }, isSignal: true }] }], endOutlet: [{ type: i0.ViewChild, args: ['endOutlet', { ...{ read: CdkPortalOutlet }, isSignal: true }] }] } });
+                    ], 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';
@@ -6539,35 +6695,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             args: [{ selector: 'md3-dialog-actions', imports: [], template: "<div class=\"md3-actions\">\n    <ng-content></ng-content>\n</div>", styles: [":host{display:block;margin:1.5em}:host .md3-actions{display:flex;gap:1em;flex-direction:row-reverse}\n"] }]
         }] });
 
-/**
- * Header of a full screen dialog: a leading icon button to leave the dialog,
- * the headline, and a trailing action. It sticks to the top of the dialog while
- * the content scrolls underneath.
- */
-class FullScreenDialogHeader {
-    // context values
-    buttonContextSize = signal('small', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "buttonContextSize" }] : /* istanbul ignore next */ []));
-    buttonContextWidth = signal('default', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "buttonContextWidth" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FullScreenDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: FullScreenDialogHeader, isStandalone: true, selector: "md3-fullscreen-dialog-header", providers: [
-            {
-                provide: MD3_BUTTON_CONTEXT,
-                useExisting: FullScreenDialogHeader,
-            },
-        ], ngImport: i0, template: "<ng-content select=\"[md3-icon-button][md3-header-leading]\"></ng-content>\n<div class=\"md3-title-container\">\n    <ng-content></ng-content>\n</div>\n<div class=\"md3-actions-container\">\n    <ng-content select=\"[md3-header-trailing]\"></ng-content>\n</div>\n", styles: [":host{--foreground-color: rgb(var(--md-scheme-on-surface));position:sticky;top:0;z-index:3;grid-area:header;display:flex;align-items:center;gap:.5em;height:4em;padding:0 1em;color:var(--foreground-color);background-color:rgb(var(--md-scheme-surface))}:host ::ng-deep [md3-header-leading]:first-child{margin-inline-start:-.5em}:host .md3-title-container{flex:1 1 auto;min-width:0;color:inherit}:host .md3-title-container:first-child{padding-inline-start:.5em}:host .md3-actions-container{display:flex;flex:0 0 auto;align-items:center;gap:.5em}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FullScreenDialogHeader, decorators: [{
-            type: Component,
-            args: [{ selector: 'md3-fullscreen-dialog-header', imports: [], providers: [
-                        {
-                            provide: MD3_BUTTON_CONTEXT,
-                            useExisting: FullScreenDialogHeader,
-                        },
-                    ], template: "<ng-content select=\"[md3-icon-button][md3-header-leading]\"></ng-content>\n<div class=\"md3-title-container\">\n    <ng-content></ng-content>\n</div>\n<div class=\"md3-actions-container\">\n    <ng-content select=\"[md3-header-trailing]\"></ng-content>\n</div>\n", styles: [":host{--foreground-color: rgb(var(--md-scheme-on-surface));position:sticky;top:0;z-index:3;grid-area:header;display:flex;align-items:center;gap:.5em;height:4em;padding:0 1em;color:var(--foreground-color);background-color:rgb(var(--md-scheme-surface))}:host ::ng-deep [md3-header-leading]:first-child{margin-inline-start:-.5em}:host .md3-title-container{flex:1 1 auto;min-width:0;color:inherit}:host .md3-title-container:first-child{padding-inline-start:.5em}:host .md3-actions-container{display:flex;flex:0 0 auto;align-items:center;gap:.5em}\n"] }]
-        }] });
-
 const MENU_DATA = new InjectionToken('MD3_MENU_DATA');
 const MENU_CONFIG = new InjectionToken('MD3_MENU_CONFIG');
 const MENU_COMPONENT = new InjectionToken('MD3_MENU_COMPONENT');
@@ -7598,5 +7725,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, FullScreenDialogHeader, Grid, GridItem, IconButton, IconElement, InputElement, LayoutService, LinearProgressIndicator, List, ListItem, ListItemPrimaryAction, ListLeading, ListSlot, LoadingIndicator, MENU_COMPONENT, MENU_CONFIG, MENU_DATA, MaterialIcon, Menu, MenuGroup, MenuItem, MenuRef, MenuService, 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, 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, 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