@almoamendev/ngx-md3 0.5.4 → 0.6.0

package/fesm2022/almoamendev-ngx-md3.mjs

@@ -1,5 +1,5 @@
 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, untracked, Injectable, InjectionToken, viewChild, NgZone, ElementRef, Component, ViewChild, isDevMode, ViewContainerRef, Injector, numberAttribute, HostListener, model, contentChild, contentChildren, PLATFORM_ID, afterNextRender, output, HostBinding, TemplateRef } from '@angular/core';
 import { DOCUMENT, isPlatformBrowser, NgClass, NgTemplateOutlet } from '@angular/common';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -242,10 +242,22 @@ class LayoutService {
     mainPaneEl;
     panesContainerResizeObserver;
     panesContainerResizeListener;
+    /** Floating bars currently registered, keyed by the measured element. */
+    floatingBars = new Map();
+    /** How far the main pane must move before the scroll direction flips. Stops jitter. */
+    static scrollDirectionThreshold = 64;
+    scrollPosition = 0;
     mainScrollTop = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "mainScrollTop" }] : /* istanbul ignore next */ []));
     mainIsScrolled = computed(() => this.mainScrollTop() > 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "mainIsScrolled" }] : /* istanbul ignore next */ []));
+    /**
+     * True while the main pane moves down, false while it moves up. A small threshold keeps
+     * a jitter from flipping the value. Components that react to scrolling — the app bar and
+     * the toolbar — read this, so they can never disagree.
+     */
+    isScrollingDown = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isScrollingDown" }] : /* istanbul ignore next */ []));
     /**
      * Distance, in pixels, between the viewport bottom and the bottom edge of
      * the scaffold's .md3-panes-container — i.e. whatever the bottom scaffold
@@ -255,6 +267,24 @@ class LayoutService {
      */
     bottomInset = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "bottomInset" }] : /* istanbul ignore next */ []));
+    /**
+     * Space a floating scaffold bar covers but does not reserve, per logical block side.
+     *
+     * A floating toolbar in a bar region leaves the layout flow, so its grid track collapses
+     * and the content flows under it. This signal reports what it covers, so the scaffold can
+     * pad the main pane and overlays can stay clear of it.
+     *
+     * A floating toolbar in a *rail* region stays in the flow and reserves its own space, so
+     * it never appears here.
+     */
+    floatingInset = signal({ blockStart: 0, blockEnd: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingInset" }] : /* istanbul ignore next */ []));
+    /**
+     * The distance from the viewport bottom that a viewport-anchored overlay must keep clear.
+     * It covers both the reserved bottom bar and any floating bottom bar over it.
+     */
+    bottomSafeInset = computed(() => this.bottomInset() + this.floatingInset().blockEnd, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bottomSafeInset" }] : /* istanbul ignore next */ []));
     viewport = toSignal(fromEvent(window, 'resize').pipe(startWith(null), map(() => ({
         width: window.innerWidth,
         height: window.innerHeight
@@ -323,6 +353,11 @@ class LayoutService {
     darkMode = signal(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "darkMode" }] : /* istanbul ignore next */ []));
     constructor() {
+        // Keep the scroll direction in step with the position. Anything that writes
+        // mainScrollTop drives it, so the app bar and the toolbar always agree.
+        effect(() => {
+            this.updateScrollDirection(this.mainScrollTop());
+        });
         effect(() => {
             const darkMode = this.darkMode();
             this.document.body.classList.toggle('md-scheme-dark', darkMode);
@@ -343,6 +378,7 @@ class LayoutService {
     scrollMainPaneToTop() {
         this.mainPaneEl?.scrollTo({ top: 0 });
         this.mainScrollTop.set(0);
+        this.resetScrollDirection();
     }
     registerMainPane(element) {
         this.mainPaneSub?.unsubscribe();
@@ -365,6 +401,22 @@ 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();
@@ -378,6 +430,67 @@ class LayoutService {
         this.panesContainerResizeListener = update;
         window.addEventListener('resize', update, { passive: true });
     }
+    /**
+     * Register a floating bar so the scaffold and the overlays know what it covers.
+     *
+     * Call this for a floating toolbar in a scaffold *bar* region only. A rail region keeps
+     * the toolbar in the layout flow, so it reserves its own space and needs no inset.
+     */
+    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 +1960,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 +2006,14 @@ 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{display:grid;width:100%;height:100dvh;min-height:0em;overflow:hidden;grid-template-areas:\"top top top\" \"start content end\" \"start sheet end\" \"bottom bottom bottom\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto}:host .md3-bar-region{display:flex;flex-direction:column;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:visible;z-index:2}:host .md3-bar-region.md3-bar-region-top{grid-area:top}:host .md3-bar-region.md3-bar-region-bottom{grid-area:bottom}:host ::ng-deep [md3-scaffold-bar=top],:host ::ng-deep [md3-scaffold-bar=bottom]{min-width:0em;min-height:0em;overflow:hidden}:host ::ng-deep [md3-scaffold-rail=leading]{grid-area:start;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:3}:host ::ng-deep [md3-scaffold-rail=trailing]{grid-area:end;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:3}:host ::ng-deep [md3-scaffold-bar].md3-floating-region,:host ::ng-deep [md3-scaffold-rail].md3-floating-region{overflow:visible}:host .md3-bottom-sheet-region{grid-area:sheet;justify-self:stretch;min-width:0em;height:0em;position:relative;overflow:visible;z-index:4}:host .md3-panes-container{--background-color: rgb(var(--md-scheme-surface));--foreground-color: rgb(var(--md-scheme-on-surface));grid-area:content;min-width:0em;min-height:0em;overflow:hidden;background-color:var(--background-color);color:var(--foreground-color);display:grid;grid-template-areas:\"start main end\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr)}:host .md3-panes-container .md3-pane{justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;height:100%;overflow:hidden}:host .md3-panes-container .md3-pane.md3-pane-start{grid-area:start}:host .md3-panes-container .md3-pane.md3-pane-main{position:relative;grid-area:main;z-index:1}:host .md3-panes-container .md3-pane.md3-pane-end{grid-area:end}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
 }
 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{display:grid;width:100%;height:100dvh;min-height:0em;overflow:hidden;grid-template-areas:\"top top top\" \"start content end\" \"start sheet end\" \"bottom bottom bottom\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto}:host .md3-bar-region{display:flex;flex-direction:column;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:visible;z-index:2}:host .md3-bar-region.md3-bar-region-top{grid-area:top}:host .md3-bar-region.md3-bar-region-bottom{grid-area:bottom}:host ::ng-deep [md3-scaffold-bar=top],:host ::ng-deep [md3-scaffold-bar=bottom]{min-width:0em;min-height:0em;overflow:hidden}:host ::ng-deep [md3-scaffold-rail=leading]{grid-area:start;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:3}:host ::ng-deep [md3-scaffold-rail=trailing]{grid-area:end;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:3}:host ::ng-deep [md3-scaffold-bar].md3-floating-region,:host ::ng-deep [md3-scaffold-rail].md3-floating-region{overflow:visible}:host .md3-bottom-sheet-region{grid-area:sheet;justify-self:stretch;min-width:0em;height:0em;position:relative;overflow:visible;z-index:4}:host .md3-panes-container{--background-color: rgb(var(--md-scheme-surface));--foreground-color: rgb(var(--md-scheme-on-surface));grid-area:content;min-width:0em;min-height:0em;overflow:hidden;background-color:var(--background-color);color:var(--foreground-color);display:grid;grid-template-areas:\"start main end\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr)}:host .md3-panes-container .md3-pane{justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;height:100%;overflow:hidden}:host .md3-panes-container .md3-pane.md3-pane-start{grid-area:start}:host .md3-panes-container .md3-pane.md3-pane-main{position:relative;grid-area:main;z-index:1}:host .md3-panes-container .md3-pane.md3-pane-end{grid-area:end}\n"] }]
+        }], 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 }] }] } });
 
 class ScaffoldBar {
     region = input.required({ ...(ngDevMode ? { debugName: "region" } : /* istanbul ignore next */ {}), alias: 'md3-scaffold-bar' });
@@ -4739,9 +4864,10 @@ class AppBar {
     ...(ngDevMode ? [{ debugName: "hasAvatar" }] : /* istanbul ignore next */ []));
     mainIsScrolled = computed(() => this.layoutService.mainIsScrolled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "mainIsScrolled" }] : /* istanbul ignore next */ []));
-    isScrollingDown = signal(false, /* @ts-ignore */
+    // 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 */ []));
-    scrollPosition = 0;
     bottomExpandedHeight = computed(() => {
         const type = this.appBarType();
         if (!this.hasCollapsibleBottom(type)) {
@@ -4770,7 +4896,6 @@ class AppBar {
     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);
@@ -4792,9 +4917,6 @@ class AppBar {
                 this.element.classList.remove(width);
             });
         });
-        effect(() => {
-            this.updateScrollDirection(this.layoutService.mainScrollTop());
-        });
         effect(() => {
             const collapse = this.bottomCollapse();
             const expandedHeight = this.bottomExpandedHeight();
@@ -4815,18 +4937,6 @@ class AppBar {
     isBottomCollapsed(collapse, expandedHeight) {
         return expandedHeight > 0 && collapse >= expandedHeight;
     }
-    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;
-    }
     hasCollapsibleBottom(type) {
         return (type === 'medium' || type === 'large') &&
             (!!this.title()?.length || !!this.subtitle()?.length);
@@ -4864,6 +4974,407 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                     }, 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 }] }] } });
 
+/**
+ * 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.');
+        }
+    }
+    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: Toolbar,
+            },
+        ], queries: [{ propertyName: "fab", first: true, predicate: FloatingActionButton, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "layoutElement", first: true, predicate: ["layout"], descendants: true, isSignal: true }, { propertyName: "containerElement", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "slotsElement", first: true, predicate: ["slots"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"md3-toolbar-layout\" #layout>\n    @if (isFloating()) {\n        <ng-content select=\"[md3-fab]\"></ng-content>\n    }\n    \n    <div class=\"md3-toolbar-container\" #container>\n        <div class=\"md3-toolbar-slots\" #slots>\n            <ng-content select=\"md3-toolbar-item\"></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [":host{--md-toolbar-size: 4em;--md-toolbar-padding: .5em;--md-toolbar-radius: var(--md-toolbar-size);--md-toolbar-shadow: var(--md-shadow-3dp);--md-toolbar-item-max-size: 20em;--md-toolbar-gap-min: .25em;--md-toolbar-gap-max: 2em;--md-toolbar-gap: clamp(var(--md-toolbar-gap-min), var(--md-toolbar-gap-free, 0px), var(--md-toolbar-gap-max));--md-toolbar-duration: var(--md-motion-expressive-default-spatial-duration);--md-toolbar-easing: var(--md-motion-expressive-default-spatial-easing);--md-toolbar-effect-duration: var(--md-motion-expressive-fast-effects-duration);--background-color: rgb(var(--md-scheme-surface-container));--foreground-color: rgb(var(--md-scheme-on-surface));display:block;position:relative;min-width:0em;min-height:0em;transition:max-height var(--md-toolbar-duration) var(--md-toolbar-easing),max-width var(--md-toolbar-duration) var(--md-toolbar-easing),opacity var(--md-toolbar-duration) var(--md-toolbar-easing)}:host .md3-toolbar-layout{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--md-toolbar-padding);width:100%;height:100%;min-width:0em;min-height:0em;transition:transform var(--md-toolbar-duration) var(--md-toolbar-easing),opacity var(--md-toolbar-duration) var(--md-toolbar-easing)}:host .md3-toolbar-layout .md3-toolbar-container{display:flex;flex-direction:row;align-items:center;min-width:0em;min-height:0em;max-width:100%;max-height:100%;border-radius:var(--md-toolbar-radius);background-color:var(--background-color);color:var(--foreground-color);box-shadow:var(--md-toolbar-shadow);overflow:hidden;pointer-events:auto;transition:max-width var(--md-toolbar-duration) var(--md-toolbar-easing),padding var(--md-toolbar-duration) var(--md-toolbar-easing),box-shadow var(--md-toolbar-effect-duration) linear,opacity var(--md-toolbar-effect-duration) linear,visibility 0s linear}:host .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots{display:flex;flex:0 1 auto;flex-direction:row;align-items:center;min-width:0em;min-height:0em}:host .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:max-width var(--md-toolbar-duration) var(--md-toolbar-easing),margin var(--md-toolbar-duration) var(--md-toolbar-easing),padding var(--md-toolbar-duration) var(--md-toolbar-easing),opacity var(--md-toolbar-effect-duration) linear,visibility 0s linear}:host.md3-fab-start ::ng-deep [md3-fab]{order:-1}:host.md3-fab-end ::ng-deep [md3-fab]{order:1}:host.md3-docked{--md-toolbar-radius: var(--md-border-radius-none);--md-toolbar-shadow: var(--md-shadow-0dp);background-color:var(--background-color)}:host.md3-docked.md3-align-start .md3-toolbar-layout .md3-toolbar-container{justify-content:start}:host.md3-docked.md3-align-center .md3-toolbar-layout .md3-toolbar-container{justify-content:center}:host.md3-docked.md3-align-end .md3-toolbar-layout .md3-toolbar-container{justify-content:end}:host.md3-docked .md3-toolbar-layout{width:100%;height:100%}:host.md3-docked .md3-toolbar-layout .md3-toolbar-container{background-color:transparent}:host.md3-floating.md3-align-start .md3-toolbar-layout{justify-content:start}:host.md3-floating.md3-align-center .md3-toolbar-layout{justify-content:center}:host.md3-floating.md3-align-end .md3-toolbar-layout{justify-content:end}:host.md3-floating .md3-toolbar-layout{position:absolute;inset:0;pointer-events:none}:host.md3-floating .md3-toolbar-layout .md3-toolbar-container{pointer-events:auto}:host.md3-floating .md3-toolbar-layout ::ng-deep [md3-fab]{pointer-events:auto}:host.md3-horizontal{max-height:var(--md-toolbar-size)}:host.md3-horizontal .md3-toolbar-layout{height:var(--md-toolbar-size);padding:0 1em}:host.md3-horizontal .md3-toolbar-layout .md3-toolbar-container{height:var(--md-toolbar-size)}:host.md3-horizontal .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item{max-width:var(--md-toolbar-item-max-size);min-width:3em}:host.md3-horizontal .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item+md3-toolbar-item{margin-inline-start:var(--md-toolbar-gap)}:host.md3-horizontal.md3-docked .md3-toolbar-layout .md3-toolbar-container{width:100%}:host.md3-horizontal.md3-floating{height:0}:host.md3-horizontal.md3-floating .md3-toolbar-layout .md3-toolbar-container{padding:0 var(--md-toolbar-padding)}:host.md3-horizontal.md3-floating.md3-region-block-end .md3-toolbar-layout{inset-block-start:auto;inset-block-end:1em}:host.md3-horizontal.md3-floating.md3-region-block-start .md3-toolbar-layout{inset-block-end:auto;inset-block-start:1em}:host.md3-vertical{max-width:var(--md-toolbar-size)}:host.md3-vertical .md3-toolbar-layout{flex-direction:column;width:var(--md-toolbar-size);padding:1em 0}:host.md3-vertical .md3-toolbar-layout .md3-toolbar-container{flex-direction:column;width:var(--md-toolbar-size)}:host.md3-vertical .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots{flex-direction:column;width:100%;height:auto}:host.md3-vertical .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item{max-height:var(--md-toolbar-item-max-size);min-height:3em}:host.md3-vertical .md3-toolbar-layout .md3-toolbar-container .md3-toolbar-slots ::ng-deep>md3-toolbar-item+md3-toolbar-item{margin-block-start:var(--md-toolbar-gap)}:host.md3-vertical.md3-docked .md3-toolbar-layout .md3-toolbar-container{height:100%}:host.md3-vertical.md3-floating{width:0}:host.md3-vertical.md3-floating .md3-toolbar-layout .md3-toolbar-container{padding:var(--md-toolbar-padding) 0}:host.md3-vertical.md3-floating.md3-region-inline-end .md3-toolbar-layout{inset-inline-start:auto;inset-inline-end:1em}:host.md3-vertical.md3-floating.md3-region-inline-start .md3-toolbar-layout{inset-inline-end:auto;inset-inline-start:1em}:host.md3-hidden{opacity:0;pointer-events:none}:host.md3-hidden.md3-horizontal{max-height:0em}:host.md3-hidden.md3-vertical{max-width:0em}:host.md3-hidden .md3-toolbar-layout{transform:scaleY(0)}:host.md3-collapsed{--md-toolbar-gap: 0em}:host.md3-collapsed .md3-toolbar-container .md3-toolbar-slots>::ng-deep md3-toolbar-item:not([md3-toolbar-persistent]){max-width:0em!important;max-height:0em!important;min-width:0em!important;min-height:0em!important;margin:0;padding-inline:0em;border-width:0em;opacity:0;visibility:hidden;transition:max-width var(--md-toolbar-duration) var(--md-toolbar-easing),max-height var(--md-toolbar-duration) var(--md-toolbar-easing),margin var(--md-toolbar-duration) var(--md-toolbar-easing),padding var(--md-toolbar-duration) var(--md-toolbar-easing),opacity var(--md-toolbar-effect-duration) linear,visibility 0s linear var(--md-toolbar-duration)}:host.md3-collapsed.md3-collapse-to-fab{--md-toolbar-padding: 0}:host.md3-collapsed.md3-collapse-to-fab .md3-toolbar-container{max-width:0em;opacity:0;visibility:hidden;pointer-events:none;box-shadow:var(--md-shadow-0dp);transition:max-width var(--md-toolbar-duration) var(--md-toolbar-easing),padding var(--md-toolbar-duration) var(--md-toolbar-easing),box-shadow var(--md-toolbar-effect-duration) linear,opacity var(--md-toolbar-effect-duration) linear,visibility 0s linear var(--md-toolbar-duration)}:host.md3-color-vibrant{--background-color: rgb(var(--md-scheme-primary-container));--foreground-color: rgb(var(--md-scheme-on-primary-container))}:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-icon-button].md3-standard,:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-icon-button].md3-outlined,:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-button].md3-text,:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-button].md3-outlined{--foreground-color: rgb(var(--md-scheme-on-primary-container))}:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-icon-button].md3-tonal,:host.md3-color-vibrant ::ng-deep .md3-toolbar-slots md3-toolbar-item [md3-button].md3-tonal{--background-color: rgb(var(--md-scheme-surface-container));--foreground-color: rgb(var(--md-scheme-on-surface))}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Toolbar, decorators: [{
+            type: Component,
+            args: [{ selector: 'md3-toolbar', providers: [
+                        {
+                            provide: MD3_BUTTON_CONTEXT,
+                            useExisting: Toolbar,
+                        },
+                    ], host: {
+                        '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));
     routerLinkActive = inject(RouterLinkActive);
@@ -5515,13 +6026,13 @@ 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%;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgb(var(--md-scheme-outline-variant)) transparent}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *::-webkit-scrollbar{width:.5rem;height:.5rem}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *::-webkit-scrollbar-track{background:transparent}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *>md3-dialog-body{grid-area:body;margin:0;padding:1em 1.5em;overflow-y:visible;height:auto}:host .md3-panes-container .md3-pane.md3-pane-end{grid-area:end}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
+    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"] }] });
 }
 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%;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgb(var(--md-scheme-outline-variant)) transparent}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *::-webkit-scrollbar{width:.5rem;height:.5rem}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *::-webkit-scrollbar-track{background:transparent}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *>md3-dialog-body{grid-area:body;margin:0;padding:1em 1.5em;overflow-y:visible;height:auto}:host .md3-panes-container .md3-pane.md3-pane-end{grid-area:end}\n"] }]
+                    ], 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 }] }] } });
 
 const PANEL_CLASS = 'md3-dialog-panel';
@@ -6880,7 +7391,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 +7598,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, FullScreenDialogHeader, Grid, GridItem, IconButton, IconElement, InputElement, LayoutService, LinearProgressIndicator, List, ListItem, ListItemPrimaryAction, ListLeading, ListSlot, LoadingIndicator, MENU_COMPONENT, MENU_CONFIG, MENU_DATA, MaterialIcon, Menu, MenuGroup, MenuItem, MenuRef, MenuService, ModalBottomSheetRef, NavigationBar, NavigationGroup, NavigationItem, NavigationRail, RadioButton, SIDE_SHEET_COMPONENT, SIDE_SHEET_CONFIG, SIDE_SHEET_DATA, SNACKBAR_ACTION_LABEL, SNACKBAR_CONFIG, SNACKBAR_MESSAGE, Scaffold, ScaffoldBar, ScaffoldPane, ScaffoldRail, SheetsService, SideSheetActions, SideSheetBody, SideSheetHeader, SideSheetRef, Slider, Snackbar, SnackbarRef, SnackbarService, SplitButton, StandardBottomSheetRef, StateComponent, SupportingText, Switch, TextField, Toolbar, ToolbarItem, TypeBody, TypeDisplay, TypeHeadline, TypeLabel, TypeTitle, buildGeometry, clampIndex, indexForScrollOffset, multiBrowseStrategy, parseCarouselAspectRatio, resolveItemGeometry, resolveState, scrollOffsetForIndex, sizeBandFor };
 //# sourceMappingURL=almoamendev-ngx-md3.mjs.map