@almoamendev/ngx-md3 0.5.5 → 0.7.0

package/fesm2022/almoamendev-ngx-md3.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, effect, Directive, inject, signal, computed, 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,23 +244,6 @@ class LayoutService {
         'medium': '(min-height: 30em) and (max-height: 56.249em)',
         'expanded': '(min-height: 56.25em)'
     };
-    mainPaneSub;
-    mainPaneEl;
-    panesContainerResizeObserver;
-    panesContainerResizeListener;
-    mainScrollTop = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mainScrollTop" }] : /* istanbul ignore next */ []));
-    mainIsScrolled = computed(() => this.mainScrollTop() > 0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mainIsScrolled" }] : /* 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 */ []));
     viewport = toSignal(fromEvent(window, 'resize').pipe(startWith(null), map(() => ({
         width: window.innerWidth,
         height: window.innerHeight
@@ -328,21 +317,120 @@ class LayoutService {
             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 });
         this.mainScrollTop.set(0);
+        this.resetScrollDirection();
     }
     registerMainPane(element) {
         this.mainPaneSub?.unsubscribe();
@@ -365,12 +453,29 @@ class LayoutService {
             this.mainPaneEl = undefined;
         }
         this.mainScrollTop.set(0);
+        this.resetScrollDirection();
+    }
+    resetScrollDirection() {
+        this.scrollPosition = 0;
+        this.isScrollingDown.set(false);
+    }
+    updateScrollDirection(scrollTop) {
+        if (scrollTop === this.scrollPosition) {
+            return;
+        }
+        const offset = scrollTop - this.scrollPosition;
+        if (Math.abs(offset) <= LayoutService.scrollDirectionThreshold) {
+            return;
+        }
+        this.isScrollingDown.set(offset > 0);
+        this.scrollPosition = scrollTop;
     }
     registerPanesContainer(element) {
         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);
@@ -378,6 +483,67 @@ class LayoutService {
         this.panesContainerResizeListener = update;
         window.addEventListener('resize', update, { passive: true });
     }
+    /**
+     * Register a floating bar so the layout and the overlays know what it covers.
+     *
+     * 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);
+        const observer = new ResizeObserver(() => this.measureFloatingBars());
+        observer.observe(element);
+        this.floatingBars.set(element, { side, observer });
+        this.measureFloatingBars();
+    }
+    unregisterFloatingBar(element) {
+        const entry = this.floatingBars.get(element);
+        if (!entry) {
+            return;
+        }
+        entry.observer.disconnect();
+        this.floatingBars.delete(element);
+        this.measureFloatingBars();
+    }
+    measureFloatingBars() {
+        let blockStart = 0;
+        let blockEnd = 0;
+        for (const [element, entry] of this.floatingBars) {
+            const size = this.measureBlockSize(element);
+            if (entry.side === 'blockStart') {
+                blockStart = Math.max(blockStart, size);
+            }
+            else {
+                blockEnd = Math.max(blockEnd, size);
+            }
+        }
+        // Read the current value untracked. A component registers its floating bar from an
+        // effect, so a tracked read would make that effect depend on the signal that the same
+        // run writes. The cleanup measures an empty map and writes 0, the body measures the bar
+        // and writes its size, and the effect dirties itself again on every run. That loop never
+        // settles, and change detection never finishes.
+        const current = untracked(this.floatingInset);
+        // Only write on a real change. The main pane padding reads this value, and padding
+        // changes the panes container size, which fires the observer again.
+        if (current.blockStart === blockStart && current.blockEnd === blockEnd) {
+            return;
+        }
+        this.floatingInset.set({ blockStart, blockEnd });
+    }
+    /**
+     * `offsetHeight` ignores transforms. So a toolbar that scrolling has hidden or collapsed
+     * still reports its expanded size, and the content padding never moves while the user
+     * scrolls.
+     */
+    measureBlockSize(element) {
+        if (typeof getComputedStyle === 'undefined') {
+            return element.offsetHeight || 0;
+        }
+        const styles = getComputedStyle(element);
+        const start = Number.parseFloat(styles.marginBlockStart) || 0;
+        const end = Number.parseFloat(styles.marginBlockEnd) || 0;
+        return Math.max(0, Math.round(element.offsetHeight + start + end));
+    }
     unregisterPanesContainer() {
         this.panesContainerResizeObserver?.disconnect();
         this.panesContainerResizeObserver = undefined;
@@ -1847,6 +2013,18 @@ class Scaffold {
     sheets = inject(SheetsService);
     bottomSheets = inject(BottomSheetService);
     layout = inject(LayoutService);
+    el = inject(ElementRef);
+    constructor() {
+        // Publish what a floating bar covers but does not reserve. The main pane pads itself
+        // by these values, and the fallback is 0, so a layout without a floating bar is
+        // unchanged. A page that needs full-bleed content sets them back to 0 on itself.
+        effect(() => {
+            const inset = this.layout.floatingInset();
+            const host = this.el.nativeElement;
+            host.style.setProperty('--md-scaffold-floating-inset-block-start', `${inset.blockStart}px`);
+            host.style.setProperty('--md-scaffold-floating-inset-block-end', `${inset.blockEnd}px`);
+        });
+    }
     ngAfterViewInit() {
         const startOutlet = this.startOutlet();
         const endOutlet = this.endOutlet();
@@ -1881,14 +2059,53 @@ 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: "<ng-content select=\"[md3-scaffold-bar=top]\"></ng-content>\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<ng-content select=\"[md3-scaffold-bar=bottom]\"></ng-content>", 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 ::ng-deep [md3-scaffold-bar=top]{grid-area:top;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:2}: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=bottom]{grid-area:bottom;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:2}: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: "<ng-content select=\"[md3-scaffold-bar=top]\"></ng-content>\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<ng-content select=\"[md3-scaffold-bar=bottom]\"></ng-content>", 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 ::ng-deep [md3-scaffold-bar=top]{grid-area:top;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:2}: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=bottom]{grid-area:bottom;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:2}: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"] }]
-        }], 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 }] }] } });
+                    ], 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' });
@@ -4707,125 +4924,316 @@ 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 */ []));
-    isScrollingDown = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isScrollingDown" }] : /* istanbul ignore next */ []));
-    scrollPosition = 0;
-    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;
-        this.scrollPosition = this.layoutService.mainScrollTop();
-        effect((onCleanup) => {
-            const type = 'md3-' + this.appBarType();
-            this.element.classList.add(type);
-            onCleanup(() => {
-                this.element.classList.remove(type);
-            });
-        });
-        effect((onCleanup) => {
-            const scrollingStyle = 'md3-scroll-style-' + this.appBarScrollingStyle();
-            this.element.classList.add(scrollingStyle);
-            onCleanup(() => {
-                this.element.classList.remove(scrollingStyle);
-            });
-        });
-        effect((onCleanup) => {
-            const width = 'md3-layout-' + this.layoutService.widthClass();
-            this.element.classList.add(width);
-            onCleanup(() => {
-                this.element.classList.remove(width);
-            });
-        });
-        effect(() => {
-            this.updateScrollDirection(this.layoutService.mainScrollTop());
-        });
-        effect(() => {
-            const collapse = this.bottomCollapse();
-            const expandedHeight = this.bottomExpandedHeight();
-            this.element.style.setProperty('--app-bar-bottom-collapse', `${collapse}px`);
-            this.element.style.setProperty('--app-bar-bottom-opacity', this.getBottomOpacity(collapse, expandedHeight).toString());
-            this.element.classList.toggle('md3-collapsed', this.isBottomCollapsed(collapse, expandedHeight));
-        });
-    }
-    get element() {
-        return this.el.nativeElement;
+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;
     }
-    getBottomOpacity(collapse, expandedHeight) {
-        if (!expandedHeight) {
-            return 1;
-        }
-        return Math.max(0, Math.min(1, 1 - (collapse / expandedHeight)));
+    /** Whether the dialog started closing. Such a dialog cannot be hidden or shown anymore. */
+    get isClosing() {
+        return this.closeStarted;
     }
-    isBottomCollapsed(collapse, expandedHeight) {
-        return expandedHeight > 0 && collapse >= expandedHeight;
+    /** Whether the dialog is currently hidden, on request or behind another dialog. */
+    get isHidden() {
+        return this.hidden;
     }
-    updateScrollDirection(scrollTop) {
-        if (scrollTop === this.scrollPosition) {
-            return;
-        }
-        const defaultBarHeight = this.getHostFontSize() * 4;
-        const scrollOffset = scrollTop - this.scrollPosition;
-        if (Math.abs(scrollOffset) <= defaultBarHeight) {
-            return;
-        }
-        this.isScrollingDown.set(scrollOffset > 0);
-        this.scrollPosition = scrollTop;
+    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();
+    }
+}
+
+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();
+            this.element.classList.add(type);
+            onCleanup(() => {
+                this.element.classList.remove(type);
+            });
+        });
+        effect((onCleanup) => {
+            const scrollingStyle = 'md3-scroll-style-' + this.appBarScrollingStyle();
+            this.element.classList.add(scrollingStyle);
+            onCleanup(() => {
+                this.element.classList.remove(scrollingStyle);
+            });
+        });
+        effect((onCleanup) => {
+            const width = 'md3-layout-' + this.layoutService.widthClass();
+            this.element.classList.add(width);
+            onCleanup(() => {
+                this.element.classList.remove(width);
+            });
+        });
+        effect(() => {
+            const collapse = this.bottomCollapse();
+            const expandedHeight = this.bottomExpandedHeight();
+            this.element.style.setProperty('--app-bar-bottom-collapse', `${collapse}px`);
+            this.element.style.setProperty('--app-bar-bottom-opacity', this.getBottomOpacity(collapse, expandedHeight).toString());
+            this.element.classList.toggle('md3-collapsed', this.isBottomCollapsed(collapse, expandedHeight));
+        });
+    }
+    get element() {
+        return this.el.nativeElement;
+    }
+    getBottomOpacity(collapse, expandedHeight) {
+        if (!expandedHeight) {
+            return 1;
+        }
+        return Math.max(0, Math.min(1, 1 - (collapse / expandedHeight)));
+    }
+    isBottomCollapsed(collapse, expandedHeight) {
+        return expandedHeight > 0 && collapse >= expandedHeight;
     }
     hasCollapsibleBottom(type) {
         return (type === 'medium' || type === 'large') &&
@@ -4835,34 +5243,435 @@ class AppBar {
         if (typeof getComputedStyle === 'undefined') {
             return 16;
         }
-        return Number.parseFloat(getComputedStyle(this.element).fontSize) || 16;
+        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: { 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,
+            },
+        ], queries: [{ propertyName: "logo", first: true, predicate: AppBarLogo, descendants: true, isSignal: true }, { propertyName: "avatar", first: true, predicate: Avatar, descendants: true, isSignal: true }], ngImport: i0, 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"], dependencies: [{ kind: "directive", type: TypeHeadline, selector: "md3-type-headline, [md3-type-headline]", inputs: ["size", "color", "emphasized"] }, { kind: "directive", type: TypeTitle, selector: "md3-type-title, [md3-type-title]", inputs: ["size", "color", "emphasized"] }, { kind: "directive", type: TypeDisplay, selector: "md3-type-display, [md3-type-display]", inputs: ["size", "color", "emphasized"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AppBar, decorators: [{
+            type: Component,
+            args: [{ selector: 'md3-app-bar', imports: [
+                        TypeHeadline,
+                        TypeTitle,
+                        TypeDisplay,
+                    ], providers: [
+                        {
+                            provide: MD3_BUTTON_CONTEXT,
+                            useExisting: AppBar,
+                        },
+                    ], host: {
+                        '[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: { 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.
+ *
+ * The toolbar holds the actions of the current page. Put it in a scaffold region, and the
+ * region decides where it goes:
+ *
+ * ```html
+ * <md3-toolbar md3-scaffold-bar="bottom" toolbar-type="floating" scroll-action="collapse">
+ *     <md3-toolbar-item><button md3-icon-button>...</button></md3-toolbar-item>
+ *     <md3-toolbar-item md3-toolbar-persistent><button md3-icon-button>...</button></md3-toolbar-item>
+ *     <button md3-fab>...</button>
+ * </md3-toolbar>
+ * ```
+ *
+ * Every action goes inside an `md3-toolbar-item`. The toolbar projects that element only. A FAB is
+ * the one exception: it sits beside the container, and a floating toolbar takes it.
+ *
+ * A **floating** toolbar in a *bar* region leaves the layout flow, so the content passes
+ * behind it. The scaffold pads the main pane by the height it covers. In a *rail* region it
+ * stays in the flow and reserves its own space, so no padding is necessary.
+ *
+ * A **docked** toolbar fills its region. The specification allows it in a bar region only.
+ *
+ * Group actions with `md3-button-group`. The toolbar has one slots region, and it keeps the
+ * authored order. The space between the items follows the free space of the container, between
+ * `--md-toolbar-gap-min` and `--md-toolbar-gap-max`.
+ */
+class Toolbar {
+    el = inject(ElementRef);
+    layout = inject(LayoutService);
+    // The scaffold region directives sit on this same host element, so `self` is correct.
+    scaffoldBar = inject(ScaffoldBar, { optional: true, self: true });
+    scaffoldRail = inject(ScaffoldRail, { optional: true, self: true });
+    toolbarType = input('floating', { ...(ngDevMode ? { debugName: "toolbarType" } : /* istanbul ignore next */ {}), alias: 'toolbar-type' });
+    toolbarColor = input('standard', { ...(ngDevMode ? { debugName: "toolbarColor" } : /* istanbul ignore next */ {}), alias: 'toolbar-color' });
+    /**
+     * Leave this unset to follow the region. A rail region gives `vertical`, and every other
+     * placement gives `horizontal`. Read `effectiveOrientation` for the resolved value.
+     */
+    orientation = input(null, { ...(ngDevMode ? { debugName: "orientation" } : /* istanbul ignore next */ {}), alias: 'orientation' });
+    alignment = input('center', { ...(ngDevMode ? { debugName: "alignment" } : /* istanbul ignore next */ {}), alias: 'alignment' });
+    scrollAction = input('none', { ...(ngDevMode ? { debugName: "scrollAction" } : /* istanbul ignore next */ {}), alias: 'scroll-action' });
+    fabPosition = input('end', { ...(ngDevMode ? { debugName: "fabPosition" } : /* istanbul ignore next */ {}), alias: 'fab-position' });
+    /** The collapse state. Scrolling writes to it, and you can read or set it yourself. */
+    expanded = model(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    layoutElement = viewChild('layout', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layoutElement" }] : /* istanbul ignore next */ []));
+    containerElement = viewChild('container', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerElement" }] : /* istanbul ignore next */ []));
+    slotsElement = viewChild('slots', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slotsElement" }] : /* istanbul ignore next */ []));
+    fab = contentChild(FloatingActionButton, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fab" }] : /* istanbul ignore next */ []));
+    /** Set from the DOM, because `md3-toolbar-persistent` is a plain attribute, not a directive. */
+    hasPersistentItem = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasPersistentItem" }] : /* istanbul ignore next */ []));
+    hasFocusWithin = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasFocusWithin" }] : /* istanbul ignore next */ []));
+    persistentObserver;
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /** The last published free space, to keep an unchanged measurement from writing to the DOM. */
+    lastGap = -1;
+    isFloating = computed(() => this.toolbarType() === 'floating', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFloating" }] : /* istanbul ignore next */ []));
+    effectiveOrientation = computed(() => {
+        return this.orientation() ?? (this.scaffoldRail ? 'vertical' : 'horizontal');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveOrientation" }] : /* istanbul ignore next */ []));
+    /** The logical side of the scaffold region, or null outside a scaffold. */
+    region = computed(() => {
+        if (this.scaffoldBar) {
+            return this.scaffoldBar.region() === 'top' ? 'blockStart' : 'blockEnd';
+        }
+        if (this.scaffoldRail) {
+            return this.scaffoldRail.region() === 'leading' ? 'inlineStart' : 'inlineEnd';
+        }
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "region" }] : /* istanbul ignore next */ []));
+    isBarRegion = computed(() => !!this.scaffoldBar, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isBarRegion" }] : /* istanbul ignore next */ []));
+    isRailRegion = computed(() => !!this.scaffoldRail, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRailRegion" }] : /* istanbul ignore next */ []));
+    /** A floating toolbar inside a scaffold region needs the region to stop clipping it. */
+    isFloatingRegion = computed(() => {
+        return this.isFloating() && (this.isBarRegion() || this.isRailRegion());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFloatingRegion" }] : /* istanbul ignore next */ []));
+    /** Only a floating bar covers content it does not reserve. Everything else reserves its space. */
+    coversContent = computed(() => this.isFloating() && this.isBarRegion(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "coversContent" }] : /* istanbul ignore next */ []));
+    /** Something must survive a collapse, or a collapse is just a hide. */
+    canCollapse = computed(() => (!!this.fab() && this.isFloating()) || this.hasPersistentItem(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canCollapse" }] : /* istanbul ignore next */ []));
+    /** With a FAB and no marked item, a collapse takes the container away and the FAB stays alone. */
+    collapsesToFab = computed(() => !!this.fab() && this.isFloating() && !this.hasPersistentItem(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsesToFab" }] : /* istanbul ignore next */ []));
+    /** A vertical toolbar never reacts to scrolling, and a docked one never collapses. */
+    resolvedScrollAction = computed(() => {
+        const action = this.scrollAction();
+        if (action === 'none' || this.effectiveOrientation() === 'vertical') {
+            return 'none';
+        }
+        if (action === 'collapse' && (!this.isFloating() || !this.canCollapse())) {
+            return 'hide';
+        }
+        return action;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedScrollAction" }] : /* istanbul ignore next */ []));
+    isHidden = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []));
+    isCollapsed = computed(() => {
+        return this.resolvedScrollAction() === 'collapse' && !this.expanded();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+    /**
+     * The collapsed state in which the FAB stays alone.
+     *
+     * This is the state, not the capability. A FAB by itself must never take the container
+     * away, because a toolbar that does not collapse keeps its items at all times.
+     */
+    isCollapsedToFab = computed(() => this.isCollapsed() && this.collapsesToFab(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCollapsedToFab" }] : /* istanbul ignore next */ []));
+    // button context — the container is 4em high, so the buttons inside it are small.
+    buttonContextSize = signal('small', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonContextSize" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            if (this.isFloating()) {
+                this.element.classList.add('md3-floating');
+                this.element.classList.remove('md3-docked');
+            }
+            else {
+                this.element.classList.add('md3-docked');
+                this.element.classList.remove('md3-floating');
+            }
+        });
+        effect((onCleanup) => {
+            const orientation = 'md3-' + this.effectiveOrientation();
+            this.element.classList.add(orientation);
+            onCleanup(() => this.element.classList.remove(orientation));
+        });
+        effect((onCleanup) => {
+            const color = 'md3-color-' + this.toolbarColor();
+            this.element.classList.add(color);
+            onCleanup(() => this.element.classList.remove(color));
+        });
+        effect((onCleanup) => {
+            const alignment = 'md3-align-' + this.alignment();
+            this.element.classList.add(alignment);
+            onCleanup(() => this.element.classList.remove(alignment));
+        });
+        effect((onCleanup) => {
+            const position = 'md3-fab-' + this.fabPosition();
+            this.element.classList.add(position);
+            onCleanup(() => this.element.classList.remove(position));
+        });
+        effect((onCleanup) => {
+            const region = this.region();
+            if (!region) {
+                return;
+            }
+            const name = 'md3-region-' + region.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase());
+            this.element.classList.add(name);
+            onCleanup(() => this.element.classList.remove(name));
+        });
+        // Report what a floating bar covers, so the scaffold can pad the main pane and the
+        // overlays can stay above it.
+        effect((onCleanup) => {
+            if (!this.coversContent()) {
+                return;
+            }
+            const region = this.region();
+            if (region !== 'blockStart' && region !== 'blockEnd') {
+                return;
+            }
+            const element = this.layoutElement()?.nativeElement;
+            if (!element) {
+                return;
+            }
+            this.layout.registerFloatingBar(element, region);
+            onCleanup(() => this.layout.unregisterFloatingBar(element));
+        });
+        effect(() => {
+            this.updateScrollState();
+        });
+        effect(() => {
+            const element = this.layoutElement()?.nativeElement;
+            if (element) {
+                this.watchPersistentItems(element);
+            }
+        });
+        // Measure again when the region gives the toolbar a different amount of space, and when
+        // the items themselves change size or number.
+        effect((onCleanup) => {
+            if (!this.isBrowser) {
+                return;
+            }
+            // Read the state that changes the geometry, so a new orientation or a collapse
+            // measures again without a resize.
+            this.effectiveOrientation();
+            this.isCollapsed();
+            this.isCollapsedToFab();
+            const layout = this.layoutElement()?.nativeElement;
+            const slots = this.slotsElement()?.nativeElement;
+            if (!layout || !slots) {
+                return;
+            }
+            // The observer reports the first size as soon as it starts, so no separate initial
+            // measurement is necessary.
+            const observer = new ResizeObserver(() => this.measureGap());
+            observer.observe(this.element);
+            observer.observe(layout);
+            observer.observe(slots);
+            onCleanup(() => observer.disconnect());
+        });
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            effect(() => this.checkConfiguration());
+        }
+    }
+    ngOnDestroy() {
+        // The registration effect owns its own cleanup, so it unregisters the exact element
+        // it measured.
+        this.persistentObserver?.disconnect();
+        this.persistentObserver = undefined;
+    }
+    get element() {
+        return this.el.nativeElement;
+    }
+    onFocusIn() {
+        this.hasFocusWithin.set(true);
+    }
+    onFocusOut(event) {
+        const next = event.relatedTarget;
+        if (next && this.element.contains(next)) {
+            return;
+        }
+        this.hasFocusWithin.set(false);
+    }
+    updateScrollState() {
+        const action = this.resolvedScrollAction();
+        if (action === 'none') {
+            this.isHidden.set(false);
+            this.expanded.set(true);
+            return;
+        }
+        // Keep the toolbar reachable while it holds the focus. A keyboard or screen-reader
+        // user must never lose the control they are on.
+        if (this.hasFocusWithin()) {
+            this.isHidden.set(false);
+            this.expanded.set(true);
+            return;
+        }
+        const away = this.layout.mainIsScrolled() && this.layout.isScrollingDown();
+        this.isHidden.set(action === 'hide' && away);
+        this.expanded.set(action === 'hide' ? true : !away);
+    }
+    /**
+     * Divide the free space of the container between the gaps.
+     *
+     * The measurement starts from the host, because the host holds the space the region gives
+     * the toolbar. A floating container is only as wide as its content, so reading the container
+     * itself would feed the gap back into the measurement and the value would never settle.
+     */
+    measureGap() {
+        const layout = this.layoutElement()?.nativeElement;
+        const container = this.containerElement()?.nativeElement;
+        const slots = this.slotsElement()?.nativeElement;
+        if (!layout || !container || !slots) {
+            return;
+        }
+        const vertical = this.effectiveOrientation() === 'vertical';
+        const items = Array.from(slots.children);
+        const extents = items.map((item) => this.extent(item, vertical));
+        // A collapsed item keeps its box but loses its size, and it must not keep a gap either.
+        const visible = extents.filter((extent) => extent > 0.5).length;
+        if (visible < 2) {
+            this.publishGap(0);
+            return;
+        }
+        const content = extents.reduce((sum, extent) => sum + extent, 0);
+        const free = this.contentExtent(this.element, vertical)
+            - this.paddingExtent(layout, vertical)
+            - this.siblingExtent(layout, container, vertical)
+            - this.paddingExtent(container, vertical)
+            - content;
+        this.publishGap(free / (visible - 1));
+    }
+    publishGap(gap) {
+        // Round down, so a fraction of a pixel never pushes the last item past the container.
+        const value = Math.max(0, Math.floor(gap * 100) / 100);
+        if (value === this.lastGap) {
+            return;
+        }
+        this.lastGap = value;
+        this.element.style.setProperty('--md-toolbar-gap-free', `${value}px`);
+    }
+    extent(element, vertical) {
+        const rect = element.getBoundingClientRect();
+        return vertical ? rect.height : rect.width;
+    }
+    contentExtent(element, vertical) {
+        const size = vertical ? element.clientHeight : element.clientWidth;
+        return Math.max(0, size - this.paddingExtent(element, vertical));
+    }
+    paddingExtent(element, vertical) {
+        const style = getComputedStyle(element);
+        const start = parseFloat(vertical ? style.paddingTop : style.paddingLeft) || 0;
+        const end = parseFloat(vertical ? style.paddingBottom : style.paddingRight) || 0;
+        return start + end;
+    }
+    /** What the other children of the layout take, the flex gap that separates them included. */
+    siblingExtent(layout, container, vertical) {
+        const style = getComputedStyle(layout);
+        const gap = parseFloat(vertical ? style.rowGap : style.columnGap) || 0;
+        return Array.from(layout.children)
+            .filter((child) => child !== container)
+            .reduce((sum, child) => sum + this.extent(child, vertical) + gap, 0);
+    }
+    watchPersistentItems(element) {
+        this.persistentObserver?.disconnect();
+        const update = () => {
+            this.hasPersistentItem.set(!!element.querySelector('.md3-toolbar-slots [md3-toolbar-persistent]'));
+        };
+        update();
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.persistentObserver = new MutationObserver(update);
+        this.persistentObserver.observe(element, {
+            childList: true,
+            subtree: true,
+            attributeFilter: ['md3-toolbar-persistent'],
+        });
+    }
+    checkConfiguration() {
+        const explicit = this.orientation();
+        const orientation = this.effectiveOrientation();
+        if (this.isRailRegion() && !this.isFloating()) {
+            this.warn('a docked toolbar needs the full window width, so it belongs in a scaffold bar region, not a rail.');
+        }
+        if (explicit === 'horizontal' && this.isRailRegion()) {
+            this.warn('a horizontal toolbar does not fit a scaffold rail region. Move it to a bar region, or drop the orientation input.');
+        }
+        if (explicit === 'vertical' && this.isBarRegion()) {
+            this.warn('a vertical toolbar does not fit a scaffold bar region. Move it to a rail region, or drop the orientation input.');
+        }
+        if (this.scrollAction() !== 'none' && orientation === 'vertical') {
+            this.warn('a vertical toolbar ignores scroll-action.');
+        }
+        if (this.scrollAction() === 'collapse' && this.isFloating() && !this.canCollapse()) {
+            this.warn('scroll-action="collapse" needs a FAB, or one item with the md3-toolbar-persistent attribute. The toolbar will hide instead.');
+        }
+        if (this.scrollAction() === 'collapse' && !this.isFloating()) {
+            this.warn('a docked toolbar cannot collapse to a FAB. The toolbar will hide instead.');
+        }
     }
-    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: [
+    warn(message) {
+        console.warn(`[md3-toolbar] ${message}`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Toolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Toolbar, isStandalone: true, selector: "md3-toolbar", inputs: { toolbarType: { classPropertyName: "toolbarType", publicName: "toolbar-type", isSignal: true, isRequired: false, transformFunction: null }, toolbarColor: { classPropertyName: "toolbarColor", publicName: "toolbar-color", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, scrollAction: { classPropertyName: "scrollAction", publicName: "scroll-action", isSignal: true, isRequired: false, transformFunction: null }, fabPosition: { classPropertyName: "fabPosition", publicName: "fab-position", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { attributes: { "role": "toolbar" }, listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut($event)" }, properties: { "attr.aria-orientation": "effectiveOrientation()", "class.md3-floating-region": "isFloatingRegion()", "class.md3-bar-region": "isBarRegion()", "class.md3-rail-region": "isRailRegion()", "class.md3-hidden": "isHidden()", "class.md3-collapsed": "isCollapsed()", "class.md3-collapse-to-fab": "isCollapsedToFab()" } }, providers: [
             {
                 provide: MD3_BUTTON_CONTEXT,
-                useExisting: AppBar,
+                useExisting: Toolbar,
             },
-        ], queries: [{ propertyName: "logo", first: true, predicate: AppBarLogo, descendants: true, isSignal: true }, { propertyName: "avatar", first: true, predicate: Avatar, descendants: true, isSignal: true }], ngImport: i0, 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"], dependencies: [{ kind: "directive", type: TypeHeadline, selector: "md3-type-headline, [md3-type-headline]", inputs: ["size", "color", "emphasized"] }, { kind: "directive", type: TypeTitle, selector: "md3-type-title, [md3-type-title]", inputs: ["size", "color", "emphasized"] }, { kind: "directive", type: TypeDisplay, selector: "md3-type-display, [md3-type-display]", inputs: ["size", "color", "emphasized"] }] });
+        ], 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"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AppBar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Toolbar, decorators: [{
             type: Component,
-            args: [{ selector: 'md3-app-bar', imports: [
-                        TypeHeadline,
-                        TypeTitle,
-                        TypeDisplay,
-                    ], providers: [
+            args: [{ selector: 'md3-toolbar', providers: [
                         {
                             provide: MD3_BUTTON_CONTEXT,
-                            useExisting: AppBar,
+                            useExisting: Toolbar,
                         },
                     ], host: {
-                        role: 'banner',
-                        '[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 }] }] } });
+                        'role': 'toolbar',
+                        '[attr.aria-orientation]': 'effectiveOrientation()',
+                        '[class.md3-floating-region]': 'isFloatingRegion()',
+                        '[class.md3-bar-region]': 'isBarRegion()',
+                        '[class.md3-rail-region]': 'isRailRegion()',
+                        '[class.md3-hidden]': 'isHidden()',
+                        '[class.md3-collapsed]': 'isCollapsed()',
+                        '[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"] }]
+        }], 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 {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ToolbarItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: ToolbarItem, isStandalone: true, selector: "md3-toolbar-item", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ToolbarItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'md3-toolbar-item',
+                }]
+        }] });
 
 class NavigationItem {
     el = inject((ElementRef));
@@ -5235,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
@@ -5463,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 }) ?? {};
@@ -5481,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);
@@ -5515,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';
@@ -6028,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');
@@ -6880,7 +7518,7 @@ class Snackbar {
     constructor(el) {
         this.el = el;
         effect(() => {
-            const inset = this.layout.bottomInset() + (this.config.bottomOffset ?? 0);
+            const inset = this.layout.bottomSafeInset() + (this.config.bottomOffset ?? 0);
             this.el.nativeElement.style.setProperty('--md3-snackbar-bottom-inset', `${inset}px`);
         });
         effect(() => {
@@ -7087,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, 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