@malva-ui/core 0.1.13 → 0.1.14

package/fesm2022/malva-ui-core-page.mjs

@@ -0,0 +1,1898 @@
+import * as i0 from '@angular/core';
+import { signal, inject, DestroyRef, computed, Injectable, InjectionToken, input, viewChild, NgZone, ElementRef, afterNextRender, afterRenderEffect, ChangeDetectionStrategy, ViewEncapsulation, Component, Directive, TemplateRef, model, output, contentChild, Injector, effect } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { mlvNextId, MlvBreakpointService, MlvStructural, MlvResizeObserverService } from '@malva-ui/cdk/utils';
+import { MlvScrollbar } from '@malva-ui/core/scrollbar';
+import { NgTemplateOutlet } from '@angular/common';
+import { MlvDrawer, MlvDrawerContent } from '@malva-ui/core/drawer';
+import { RouterLink } from '@angular/router';
+import { LucideChevronLeft, LucideChevronUp, LucidePin, LucidePinOff } from '@lucide/angular';
+import { MlvButton } from '@malva-ui/core/button';
+import { MlvLink, MlvLinkBefore } from '@malva-ui/core/link';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+/**
+ * Owns the snap progress of a page's collapsing top chrome.
+ *
+ * Progress is **scroll-scrubbed**: `main[mlvPage]` maps its scroll offset onto
+ * a 0..1 timeline (`snapRange` pixels of scroll = the full timeline), so
+ * chrome motion is proportional to scrolling instead of a time-based
+ * animation. The effective value is published as the `--mlv-page-snap` CSS
+ * custom property on the page host; elements interpolate their own state from
+ * it (see `MlvPageSnap`).
+ *
+ * Pinning distinguishes its origin:
+ * - **Manual** (chevron toggle): an explicit choice — while manually pinned
+ *   collapsed, the geometry-compensation spacer is reclaimed (`spacerScale`
+ *   tweens to 0) so no dead space remains above the content, including at the
+ *   top of the page.
+ * - **Scroll** (pin button freezing a scroll-derived state): the frozen state
+ *   is a scroll artifact — when the user returns to the top, the controller
+ *   unpins automatically and the chrome expands.
+ *
+ * `expand()` / `collapse()` drive the same manual pin imperatively; `expand()`
+ * additionally reveals every registered `MlvPageSnapRegion` on the spot, so
+ * consumers can focus a control inside chrome the scroll had collapsed.
+ *
+ * Provided by `MlvPage`. Inject optionally from header/summary components and
+ * snap directives — absence simply means "no scroll-linked behaviour".
+ */
+class MlvPageSnapController {
+    /** @private Raw scroll-derived progress, 0 (top) .. 1 (fully snapped). */
+    _scrollProgress = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_scrollProgress" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Frozen progress while pinned or after a manual toggle;
+     * `null` means the progress follows the scroll position.
+     */
+    _frozen = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_frozen" }] : /* istanbul ignore next */ []));
+    /** @private How the current frozen state was produced. */
+    _pinOrigin = null;
+    /**
+     * @private Scale applied by `MlvPage` to the geometry-compensation spacer;
+     * tweens to 0 while manually pinned collapsed (dead space reclaimed).
+     */
+    _spacerScale = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_spacerScale" }] : /* istanbul ignore next */ []));
+    /** @private Frame handles of the running tweens, per animated signal. */
+    _tweenFrames = new Map();
+    /** @private Adapter so the frozen tween can share the signal tween helper. */
+    _frozenNumber = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_frozenNumber" }] : /* istanbul ignore next */ []));
+    /** @private Cancels pending tweens when the owning page is destroyed. */
+    _destroyRef = inject(DestroyRef);
+    /** @private Snap regions that `expand()` reveals ahead of the tween. */
+    _regions = new Set();
+    /** @private Backs the `revealing` bridge flag. */
+    _revealing = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_revealing" }] : /* istanbul ignore next */ []));
+    /** Effective snap progress: 0 fully expanded, 1 fully snapped. */
+    progress = computed(() => this._frozen() ?? this._scrollProgress(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+    /** True while the chrome state is frozen and ignores scrolling. */
+    pinned = computed(() => this._frozen() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pinned" }] : /* istanbul ignore next */ []));
+    /** True once the chrome is closer to its snapped state than the open one. */
+    snapped = computed(() => this.progress() >= 0.5, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapped" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal True while `expand()` bridges its own tween: snap regions stay
+     * visible — and therefore focusable — from the call itself until the
+     * progress has left their window. Read by `MlvPageSnap`.
+     */
+    revealing = this._revealing;
+    /**
+     * Multiplier for the geometry-compensation spacer, 1 (full compensation)
+     * .. 0 (reclaimed). Consumed by `MlvPage`.
+     */
+    spacerScale = this._spacerScale;
+    constructor() {
+        this._destroyRef.onDestroy(() => {
+            for (const frame of this._tweenFrames.values()) {
+                cancelAnimationFrame(frame);
+            }
+            this._tweenFrames.clear();
+        });
+    }
+    /**
+     * @internal Registers a snap region so `expand()` can reveal it. Called by
+     * `MlvPageSnap`; the returned callback unregisters on destroy.
+     */
+    registerRegion(region) {
+        this._regions.add(region);
+        return () => {
+            this._regions.delete(region);
+        };
+    }
+    /**
+     * @internal Called by `MlvPage` on every scroll event of its viewport.
+     * A pinned controller keeps reporting the frozen value; a scroll-origin
+     * pin releases itself once the user returns to the top, where the frozen
+     * scroll artifact would only leave dead space.
+     */
+    updateFromScroll(scrollTop, snapRange) {
+        const progress = snapRange > 0 ? Math.min(Math.max(scrollTop / snapRange, 0), 1) : 0;
+        this._scrollProgress.set(progress);
+        if (this.pinned() && this._pinOrigin === 'scroll' && scrollTop <= 1) {
+            this.setPinned(false);
+        }
+    }
+    /**
+     * Pins the chrome at its current progress (`true`) or releases it back to
+     * scroll-following (`false`, animating to the scroll-derived value). A pin
+     * taken from a scroll-following state is a scroll-origin pin; pinning while
+     * already frozen by the chevron keeps the manual origin.
+     */
+    setPinned(pinned) {
+        if (pinned === this.pinned()) {
+            return;
+        }
+        if (pinned) {
+            this._cancelTween(this._frozenNumber);
+            this._pinOrigin ??= 'scroll';
+            this._frozen.set(this.progress());
+            return;
+        }
+        this._pinOrigin = null;
+        // Releasing the pin cancels a running expand tween as well.
+        this._endReveal();
+        this._animateSignal(this._spacerScale, 1);
+        this._animateFrozenTo(this._scrollProgress(), () => this._frozen.set(null));
+    }
+    /**
+     * Snaps the chrome fully open or closed (the chevron control). The result
+     * is a manual pin — otherwise the very next scroll event would undo the
+     * choice. Collapsing manually also reclaims the compensation spacer so no
+     * dead space remains above the content.
+     */
+    toggle() {
+        if (this.snapped()) {
+            this.expand();
+        }
+        else {
+            this.collapse();
+        }
+    }
+    /**
+     * Expands the chrome regardless of the scroll position and pins it there
+     * (a manual pin, like the chevron control). Every registered snap region is
+     * revealed **synchronously**, before the tween starts, so a consumer can
+     * move focus into collapsed chrome in the same task:
+     *
+     * ```ts
+     * this.snap.expand();
+     * headerTab.focus();
+     * ```
+     */
+    expand() {
+        for (const region of this._regions) {
+            region.reveal();
+        }
+        this._revealing.set(true);
+        this._pinOrigin = 'manual';
+        this._animateSignal(this._spacerScale, 1);
+        this._animateFrozenTo(0, () => this._endReveal());
+    }
+    /**
+     * Collapses the chrome regardless of the scroll position and pins it there,
+     * reclaiming the compensation spacer so no dead space remains above the
+     * content.
+     */
+    collapse() {
+        // Collapsing cancels the expand tween, so the bridge that outlived it
+        // would strand every region visible-but-scrubbed — an invisible tab stop.
+        this._endReveal();
+        this._pinOrigin = 'manual';
+        this._animateSignal(this._spacerScale, 0);
+        this._animateFrozenTo(1);
+    }
+    /**
+     * @private Ends the reveal bridge and hands every region back its own
+     * hidden state. `reveal()` writes the DOM ahead of change detection, so a
+     * bridge that opens and closes without a render in between would otherwise
+     * leave the host binding's cached value disagreeing with the element.
+     */
+    _endReveal() {
+        if (!this._revealing()) {
+            return;
+        }
+        this._revealing.set(false);
+        for (const region of this._regions) {
+            region.syncHiddenState();
+        }
+    }
+    /** @private Tweens the frozen progress via the shared signal tween. */
+    _animateFrozenTo(target, done) {
+        this._frozenNumber.set(this.progress());
+        this._frozen.set(this.progress());
+        this._animateSignal(this._frozenNumber, target, done, (value) => this._frozen.set(value));
+    }
+    /** @private rAF tween so manual state changes stay smooth. */
+    _animateSignal(target, to, done, mirror) {
+        this._cancelTween(target);
+        const from = target();
+        const reducedMotion = typeof matchMedia !== 'undefined' &&
+            matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (reducedMotion ||
+            typeof requestAnimationFrame === 'undefined' ||
+            Math.abs(to - from) < 0.001) {
+            target.set(to);
+            mirror?.(to);
+            done?.();
+            return;
+        }
+        const durationMs = 200;
+        let startTime = null;
+        const step = (now) => {
+            startTime ??= now;
+            const t = Math.min((now - startTime) / durationMs, 1);
+            const eased = 1 - (1 - t) ** 3;
+            const value = from + (to - from) * eased;
+            target.set(value);
+            mirror?.(value);
+            if (t < 1) {
+                this._tweenFrames.set(target, requestAnimationFrame(step));
+            }
+            else {
+                this._tweenFrames.delete(target);
+                done?.();
+            }
+        };
+        this._tweenFrames.set(target, requestAnimationFrame(step));
+    }
+    /** @private Stops the running tween of one signal, if any. */
+    _cancelTween(target) {
+        const frame = this._tweenFrames.get(target);
+        if (frame !== undefined) {
+            cancelAnimationFrame(frame);
+            this._tweenFrames.delete(target);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageSnapController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageSnapController });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageSnapController, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+/**
+ * Injection token provided by `main[mlvPage]` so descendants can react to the
+ * page's scroll position without knowing which element owns scrolling.
+ * Inject optionally — components keep working outside a page, just without
+ * scroll-linked behaviour.
+ */
+const MLV_PAGE_SCROLL = new InjectionToken('MLV_PAGE_SCROLL');
+
+/**
+ * Scroll offset in pixels below which the page reports itself as unscrolled.
+ * The small hysteresis avoids flicker from sub-pixel scroll positions.
+ */
+const SCROLLED_THRESHOLD = 4;
+/**
+ * Main page surface and scroll owner. Apply it to the page's native `<main>`
+ * landmark and compose headers, content grids, and feature components inside.
+ *
+ * Provides `MLV_PAGE_SCROLL` so descendants such as `mlv-page-header` and
+ * `mlv-page-summary` can react to the page's scroll position, and
+ * `MlvPageSnapController`, whose scroll-scrubbed progress it publishes as the
+ * `--mlv-page-snap` custom property (0 expanded .. 1 snapped) for descendants
+ * to interpolate their snap state from.
+ */
+class MlvPage {
+    /** Unique landmark id; set explicitly when targeting the page from a skip link. */
+    id = input(mlvNextId('mlv-page'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Selects whether the page or a consumer-owned region handles scrolling. */
+    scroll = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scroll" }] : /* istanbul ignore next */ []));
+    /** Optional maximum width for the centred inner page canvas. */
+    maxWidth = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    /** Selects the responsive inset applied around projected page content. */
+    padding = input('m', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    /** Selects the anchored rounded canvas or a completely flat surface. */
+    surface = input('anchored', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    /** Makes projected page headers sticky within this page's scroll container. */
+    stickyHeader = input(true, { ...(ngDevMode ? { debugName: "stickyHeader" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Scroll distance in pixels mapped onto the full snap timeline: scrolling
+     * this far takes the top chrome from fully expanded to fully snapped.
+     */
+    snapRange = input(96, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapRange" }] : /* istanbul ignore next */ []));
+    /** Current vertical scroll offset of the page scroll owner, in pixels. */
+    get scrollTop() {
+        return this._scrollTop.asReadonly();
+    }
+    /** True once the page has scrolled past a small hysteresis threshold. */
+    get scrolled() {
+        return this._scrolled.asReadonly();
+    }
+    /**
+     * Snap controller of this page's collapsing top chrome. Descendants inject
+     * `MlvPageSnapController` directly; a component that only *hosts* the page
+     * reaches it from outside through `viewChild(MlvPage).snap` — for instance
+     * to `expand()` the chrome before moving focus into it.
+     */
+    get snap() {
+        return this._snap;
+    }
+    /** @private Writable source behind the public `scrollTop` signal. */
+    _scrollTop = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_scrollTop" }] : /* istanbul ignore next */ []));
+    /** @private Writable source behind the public `scrolled` signal. */
+    _scrolled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_scrolled" }] : /* istanbul ignore next */ []));
+    /** @private The page-owned scrollbar whose viewport is observed. */
+    _scrollbar = viewChild.required(MlvScrollbar, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_scrollbar" }] : /* istanbul ignore next */ []));
+    /** @private Zone reference; the scroll listener runs outside the zone. */
+    _ngZone = inject(NgZone);
+    /** @private Cleans up the native scroll listener. */
+    _destroyRef = inject(DestroyRef);
+    /** @private Snap state provided to descendants and scrubbed from scroll. */
+    _snap = inject(MlvPageSnapController);
+    /** @private Host element carrying the published snap custom property. */
+    _elementRef = inject(ElementRef);
+    constructor() {
+        afterNextRender(() => {
+            const viewport = this._scrollbar().viewportElement;
+            const onScroll = () => {
+                const top = viewport.scrollTop;
+                this._scrollTop.set(top);
+                this._scrolled.set(top > SCROLLED_THRESHOLD);
+                this._snap.updateFromScroll(top, this.snapRange());
+            };
+            // Signal writes propagate through the reactivity graph without zone
+            // involvement, so the frequent listener can stay outside the zone.
+            this._ngZone.runOutsideAngular(() => {
+                viewport.addEventListener('scroll', onScroll, { passive: true });
+            });
+            this._destroyRef.onDestroy(() => {
+                viewport.removeEventListener('scroll', onScroll);
+            });
+        });
+        // Publish the effective snap progress as a CSS custom property so
+        // descendant styles can scrub their state with pure calc() interpolation,
+        // then rebalance the chrome spacer against the freshly applied progress.
+        afterRenderEffect(() => {
+            const progress = this._snap.progress();
+            // Track the spacer scale too: the reclaim tween must republish.
+            this._snap.spacerScale();
+            this._elementRef.nativeElement.style.setProperty('--mlv-page-snap', String(Math.round(progress * 1000) / 1000));
+            this._measureSnapOffset();
+        });
+        afterNextRender(() => {
+            const host = this._elementRef.nativeElement;
+            this._snapChrome = Array.from(host.querySelectorAll('.mlv-page__inner > .mlv-page-header, .mlv-page__inner > .mlv-page-summary'));
+            this._measureSnapOffset();
+            // Re-measure when chrome content itself resizes (wrapping, data).
+            if (typeof ResizeObserver !== 'undefined') {
+                const observer = new ResizeObserver(() => this._measureSnapOffset());
+                this._snapChrome.forEach((element) => observer.observe(element));
+                this._destroyRef.onDestroy(() => observer.disconnect());
+            }
+        });
+    }
+    /** @private Direct chrome children whose snapping height is compensated. */
+    _snapChrome = [];
+    /** @private Expanded (progress 0) chrome height, the compensation baseline. */
+    _snapExpandedHeight = 0;
+    /**
+     * @private Snapping shrinks in-flow chrome (the header with its projected
+     * summary row), which would shift the content and the scroll height while
+     * the user is still scrolling — a feedback loop that reads as mid-scroll
+     * jumping. The removed height is re-added as a spacer after the chrome
+     * (`--mlv-page-snap-offset`), keeping the document geometry stable so
+     * content tracks the scroll 1:1. The controller's `spacerScale` scales the
+     * spacer away while the chrome is manually pinned collapsed — a frozen
+     * chrome never changes height mid-scroll, so the spacer is pure dead space.
+     */
+    _measureSnapOffset() {
+        if (this._snapChrome.length === 0) {
+            return;
+        }
+        const total = this._snapChrome.reduce((sum, element) => sum + element.offsetHeight, 0);
+        if (this._snap.progress() <= 0.001) {
+            this._snapExpandedHeight = total;
+        }
+        const offset = Math.max(0, this._snapExpandedHeight - total) * this._snap.spacerScale();
+        this._elementRef.nativeElement.style.setProperty('--mlv-page-snap-offset', `${Math.round(offset * 100) / 100}px`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MlvPage, isStandalone: true, selector: "main[mlvPage]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, snapRange: { classPropertyName: "snapRange", publicName: "snapRange", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "-1" }, properties: { "id": "id()", "class.mlv-page--scroll-auto": "scroll() === \"auto\"", "class.mlv-page--scroll-none": "scroll() === \"none\"", "class.mlv-page--padding-none": "padding() === \"none\"", "class.mlv-page--padding-s": "padding() === \"s\"", "class.mlv-page--padding-m": "padding() === \"m\"", "class.mlv-page--padding-l": "padding() === \"l\"", "class.mlv-page--surface-anchored": "surface() === \"anchored\"", "class.mlv-page--surface-flat": "surface() === \"flat\"", "class.mlv-page--sticky-header": "stickyHeader()", "class.mlv-page--scrolled": "scrolled()", "style.--mlv-page-max-width": "maxWidth()" }, classAttribute: "mlv-page" }, providers: [
+            { provide: MLV_PAGE_SCROLL, useExisting: MlvPage },
+            MlvPageSnapController,
+        ], viewQueries: [{ propertyName: "_scrollbar", first: true, predicate: MlvScrollbar, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <mlv-scrollbar class="mlv-page__scrollbar" [disabled]="scroll() === 'none'">
+      <div class="mlv-page__inner"><ng-content /></div>
+    </mlv-scrollbar>
+  `, isInline: true, styles: ["@layer mlv.components{.mlv-page{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page *{box-sizing:border-box}.mlv-page{display:block;flex:1 1 auto;min-width:0;min-height:0;color:var(--mlv-text-primary);background:var(--mlv-background-base);outline:none;isolation:isolate;--mlv-page-surface-radius: 0rem}.mlv-page__scrollbar{width:100%;height:100%;min-height:0}.mlv-page__scrollbar .mlv-scrollbar__viewport{overflow-x:hidden;scroll-padding-top:var(--mlv-page-header-offset, 6rem);overflow-anchor:none}.mlv-page__inner{container-type:inline-size;width:100%;min-height:100%;max-width:var(--mlv-page-max-width, none);margin-inline:auto}.mlv-page--surface-anchored{--mlv-page-surface-radius: calc( var(--mlv-radius-xl) - .0625rem );border:.0625rem solid var(--mlv-border-subtle);border-bottom:0;border-radius:var(--mlv-radius-xl) var(--mlv-radius-xl) 0 0}.mlv-page--surface-flat{--mlv-page-surface-radius: 0rem;border-radius:0}.mlv-page--scroll-auto,.mlv-page--scroll-none,.mlv-page--scroll-none .mlv-page__scrollbar .mlv-scrollbar__viewport{overflow:clip}.mlv-page--padding-none .mlv-page__inner{--mlv-page-inset: 0rem;padding:0}.mlv-page--padding-s .mlv-page__inner{--mlv-page-inset: var(--mlv-spacing-1-5);padding:var(--mlv-page-inset)}.mlv-page--padding-m .mlv-page__inner{--mlv-page-inset: var(--mlv-spacing-2);padding:var(--mlv-page-inset)}.mlv-page--padding-l .mlv-page__inner{--mlv-page-inset: var(--mlv-spacing-3);padding:var(--mlv-page-inset)}.mlv-page__inner>.mlv-page-header,.mlv-page__inner>.mlv-page-summary{margin-inline:calc(-1 * var(--mlv-page-inset, 0rem))}.mlv-page__inner>.mlv-page-header{margin-top:calc(-1 * var(--mlv-page-inset, 0rem));border-radius:0}.mlv-page__inner>.mlv-page-header:first-child,.mlv-page__inner>.mlv-page-summary:first-child{border-radius:var(--mlv-page-surface-radius, 0rem) var(--mlv-page-surface-radius, 0rem) 0 0}.mlv-page__inner>.mlv-page-summary,.mlv-page__inner>.mlv-page-header:not(:has(~.mlv-page-summary)){margin-bottom:var(--mlv-page-snap-offset, 0rem)}.mlv-page--sticky-header .mlv-page-header{position:sticky;top:0;z-index:10}.mlv-page:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-page-snap--hide,.mlv-page-snap--fade{--mlv-snap-progress: clamp( 0, (var(--mlv-page-snap, 0) - var(--mlv-snap-from, 0)) * var(--mlv-snap-scale, 1), 1 )}.mlv-page-snap--fade{opacity:calc(1 - var(--mlv-snap-progress))}.mlv-page-snap--hide{max-height:calc(var(--mlv-snap-size, 3rem) * (1 - var(--mlv-snap-progress)));overflow:hidden;opacity:calc(1 - var(--mlv-snap-progress) * 1.5);transform:translateY(calc(-.5rem * var(--mlv-snap-progress)))}.mlv-page-snap--revealed{--mlv-snap-progress: 0}@media(prefers-reduced-motion:reduce){.mlv-page,.mlv-page *,.mlv-page:before,.mlv-page:after,[class^=mlv-page__],[class*=\" mlv-page__\"],[class^=mlv-page--],[class*=\" mlv-page--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"], dependencies: [{ kind: "component", type: MlvScrollbar, selector: "mlv-scrollbar", inputs: ["orientation", "scrollbarSize", "disabled", "ariaLabel", "viewportTabIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPage, decorators: [{
+            type: Component,
+            args: [{ selector: 'main[mlvPage]', template: `
+    <mlv-scrollbar class="mlv-page__scrollbar" [disabled]="scroll() === 'none'">
+      <div class="mlv-page__inner"><ng-content /></div>
+    </mlv-scrollbar>
+  `, imports: [MlvScrollbar], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        { provide: MLV_PAGE_SCROLL, useExisting: MlvPage },
+                        MlvPageSnapController,
+                    ], host: {
+                        class: 'mlv-page',
+                        '[id]': 'id()',
+                        tabindex: '-1',
+                        '[class.mlv-page--scroll-auto]': 'scroll() === "auto"',
+                        '[class.mlv-page--scroll-none]': 'scroll() === "none"',
+                        '[class.mlv-page--padding-none]': 'padding() === "none"',
+                        '[class.mlv-page--padding-s]': 'padding() === "s"',
+                        '[class.mlv-page--padding-m]': 'padding() === "m"',
+                        '[class.mlv-page--padding-l]': 'padding() === "l"',
+                        '[class.mlv-page--surface-anchored]': 'surface() === "anchored"',
+                        '[class.mlv-page--surface-flat]': 'surface() === "flat"',
+                        '[class.mlv-page--sticky-header]': 'stickyHeader()',
+                        '[class.mlv-page--scrolled]': 'scrolled()',
+                        '[style.--mlv-page-max-width]': 'maxWidth()',
+                    }, styles: ["@layer mlv.components{.mlv-page{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page *{box-sizing:border-box}.mlv-page{display:block;flex:1 1 auto;min-width:0;min-height:0;color:var(--mlv-text-primary);background:var(--mlv-background-base);outline:none;isolation:isolate;--mlv-page-surface-radius: 0rem}.mlv-page__scrollbar{width:100%;height:100%;min-height:0}.mlv-page__scrollbar .mlv-scrollbar__viewport{overflow-x:hidden;scroll-padding-top:var(--mlv-page-header-offset, 6rem);overflow-anchor:none}.mlv-page__inner{container-type:inline-size;width:100%;min-height:100%;max-width:var(--mlv-page-max-width, none);margin-inline:auto}.mlv-page--surface-anchored{--mlv-page-surface-radius: calc( var(--mlv-radius-xl) - .0625rem );border:.0625rem solid var(--mlv-border-subtle);border-bottom:0;border-radius:var(--mlv-radius-xl) var(--mlv-radius-xl) 0 0}.mlv-page--surface-flat{--mlv-page-surface-radius: 0rem;border-radius:0}.mlv-page--scroll-auto,.mlv-page--scroll-none,.mlv-page--scroll-none .mlv-page__scrollbar .mlv-scrollbar__viewport{overflow:clip}.mlv-page--padding-none .mlv-page__inner{--mlv-page-inset: 0rem;padding:0}.mlv-page--padding-s .mlv-page__inner{--mlv-page-inset: var(--mlv-spacing-1-5);padding:var(--mlv-page-inset)}.mlv-page--padding-m .mlv-page__inner{--mlv-page-inset: var(--mlv-spacing-2);padding:var(--mlv-page-inset)}.mlv-page--padding-l .mlv-page__inner{--mlv-page-inset: var(--mlv-spacing-3);padding:var(--mlv-page-inset)}.mlv-page__inner>.mlv-page-header,.mlv-page__inner>.mlv-page-summary{margin-inline:calc(-1 * var(--mlv-page-inset, 0rem))}.mlv-page__inner>.mlv-page-header{margin-top:calc(-1 * var(--mlv-page-inset, 0rem));border-radius:0}.mlv-page__inner>.mlv-page-header:first-child,.mlv-page__inner>.mlv-page-summary:first-child{border-radius:var(--mlv-page-surface-radius, 0rem) var(--mlv-page-surface-radius, 0rem) 0 0}.mlv-page__inner>.mlv-page-summary,.mlv-page__inner>.mlv-page-header:not(:has(~.mlv-page-summary)){margin-bottom:var(--mlv-page-snap-offset, 0rem)}.mlv-page--sticky-header .mlv-page-header{position:sticky;top:0;z-index:10}.mlv-page:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-page-snap--hide,.mlv-page-snap--fade{--mlv-snap-progress: clamp( 0, (var(--mlv-page-snap, 0) - var(--mlv-snap-from, 0)) * var(--mlv-snap-scale, 1), 1 )}.mlv-page-snap--fade{opacity:calc(1 - var(--mlv-snap-progress))}.mlv-page-snap--hide{max-height:calc(var(--mlv-snap-size, 3rem) * (1 - var(--mlv-snap-progress)));overflow:hidden;opacity:calc(1 - var(--mlv-snap-progress) * 1.5);transform:translateY(calc(-.5rem * var(--mlv-snap-progress)))}.mlv-page-snap--revealed{--mlv-snap-progress: 0}@media(prefers-reduced-motion:reduce){.mlv-page,.mlv-page *,.mlv-page:before,.mlv-page:after,[class^=mlv-page__],[class*=\" mlv-page__\"],[class^=mlv-page--],[class*=\" mlv-page--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], snapRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapRange", required: false }] }], _scrollbar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MlvScrollbar), { isSignal: true }] }] } });
+
+/**
+ * Shared focus contract for page chrome that the scroll timeline collapses —
+ * `MlvPageSnap` regions and `MlvPageSummary`.
+ *
+ * A fully collapsed region is `visibility: hidden` so it leaves the
+ * accessibility tree and, crucially, the tab order: a control nobody can see
+ * must not be an invisible tab stop. The state is driven by **scrolling**
+ * though, not by a user action, so hiding it unconditionally would let a
+ * scroll blur whatever the user had focused — the browser drops that focus to
+ * `<body>`, destroying the user's place in the tab order.
+ *
+ * Two exceptions therefore lift the hide:
+ * - **Focus inside the region** ({@link _revealed}) — the region steps off the
+ *   timeline and renders fully expanded for as long as it holds focus. Focus
+ *   is never relocated implicitly, and the focused control stays visible.
+ * - **`MlvPageSnapController.expand()`** — reveals every registered region up
+ *   front (see {@link reveal}) so a consumer can move focus into chrome the
+ *   scroll had collapsed.
+ *
+ * Subclasses supply {@link _elapsed} (their own end-of-window test) and bind
+ * {@link _hidden} / {@link _revealed} plus the two focus listeners in their
+ * own `host` object — the class names differ per block.
+ */
+class MlvPageSnapRegionBase {
+    /**
+     * @protected Snap state of the owning page, when rendered inside one.
+     * Absent outside `main[mlvPage]`, where nothing collapses.
+     */
+    _snapController = inject(MlvPageSnapController, {
+        optional: true,
+    });
+    /** @private Host element, for the eager reveal and the focus containment test. */
+    _regionHost = inject(ElementRef);
+    /** @private True while this region contains the active element. */
+    _focusWithin = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_focusWithin" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Holds the region at its expanded state while it has focus:
+     * a focused control has to stay visible, and a region that stays visible
+     * cannot have its focus dropped by the next scroll event.
+     */
+    _revealed = computed(() => this._focusWithin(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_revealed" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Takes the collapsed region out of the accessibility tree and
+     * the tab order — unless it holds focus, or the controller is revealing it
+     * for one.
+     */
+    _hidden = computed(() => this._elapsed() &&
+        !this._focusWithin() &&
+        !(this._snapController?.revealing() ?? false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hidden" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const unregister = this._snapController?.registerRegion(this);
+        inject(DestroyRef).onDestroy(() => unregister?.());
+    }
+    /**
+     * Reveals the region immediately, ahead of the controller's expand tween.
+     * Host bindings only flush on the next change detection pass, so the inline
+     * hide is cleared eagerly — otherwise a `focus()` issued in the same task
+     * would still be refused on a `visibility: hidden` element. The controller's
+     * `revealing` flag keeps the binding in agreement until the progress has
+     * left this region's window.
+     */
+    reveal() {
+        this._regionHost.nativeElement.style.visibility = '';
+    }
+    /**
+     * Re-applies the hidden state after the controller's reveal window closes.
+     * A reveal that opens and closes without a render in between leaves the
+     * `[style.visibility]` binding holding a value it never rewrote, so the
+     * region would stay visible — and its controls would become invisible tab
+     * stops — until something else changed.
+     */
+    syncHiddenState() {
+        this._regionHost.nativeElement.style.visibility = this._hidden()
+            ? 'hidden'
+            : '';
+    }
+    /** @protected Records that focus entered this region. */
+    _onRegionFocusIn() {
+        this._focusWithin.set(true);
+    }
+    /**
+     * @protected Releases the focus reveal only when focus actually left the
+     * region — moving between two controls inside it also fires `focusout`.
+     */
+    _onRegionFocusOut(event) {
+        const next = event.relatedTarget;
+        this._focusWithin.set(next instanceof Node && this._regionHost.nativeElement.contains(next));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageSnapRegionBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPageSnapRegionBase, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageSnapRegionBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
+
+/**
+ * Lets any element inside `main[mlvPage]` define its own state on the snap
+ * timeline. The element reads the page-level `--mlv-page-snap` progress,
+ * remaps it into its own stagger window (`snapFrom`..`snapTo`), and applies
+ * the chosen behaviour with pure CSS `calc()` interpolation — so the motion
+ * is scrubbed by scrolling, not played on a clock.
+ *
+ * A fully elapsed region is `visibility: hidden` and therefore leaves the
+ * accessibility tree and the tab order — except while it holds focus, when it
+ * reveals itself instead (`mlv-page-snap--revealed`) so that scrolling can
+ * never blur a focused control into `<body>`. See {@link MlvPageSnapRegionBase}.
+ *
+ * ```html
+ * <div mlvPageSnap="hide" [snapFrom]="0.2" [snapTo]="0.7" snapSize="3rem">…</div>
+ * ```
+ */
+class MlvPageSnap extends MlvPageSnapRegionBase {
+    /** Behaviour on the snap timeline. An empty attribute value means `hide`. */
+    mlvPageSnap = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mlvPageSnap" }] : /* istanbul ignore next */ []));
+    /** Progress at which this element starts reacting (0..1). */
+    snapFrom = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapFrom" }] : /* istanbul ignore next */ []));
+    /** Progress at which this element reaches its final state (0..1). */
+    snapTo = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapTo" }] : /* istanbul ignore next */ []));
+    /**
+     * Nominal expanded size used by the `hide` behaviour's height scrub.
+     * Must be at least the element's natural height.
+     */
+    snapSize = input('3rem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapSize" }] : /* istanbul ignore next */ []));
+    /** @protected Effective behaviour; the bare attribute defaults to `hide`. */
+    _mode = computed(() => this.mlvPageSnap() || 'hide', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_mode" }] : /* istanbul ignore next */ []));
+    /** @protected Multiplier remapping page progress into the stagger window. */
+    _scale = computed(() => 1 / Math.max(this.snapTo() - this.snapFrom(), 0.001), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_scale" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Fully elapsed once the page progress passes this element's
+     * `snapTo`; a `keep` element never elapses.
+     */
+    _elapsed = computed(() => this._mode() !== 'keep' &&
+        (this._snapController?.progress() ?? 0) >= Math.min(this.snapTo(), 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_elapsed" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageSnap, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MlvPageSnap, isStandalone: true, selector: "[mlvPageSnap]", inputs: { mlvPageSnap: { classPropertyName: "mlvPageSnap", publicName: "mlvPageSnap", isSignal: true, isRequired: false, transformFunction: null }, snapFrom: { classPropertyName: "snapFrom", publicName: "snapFrom", isSignal: true, isRequired: false, transformFunction: null }, snapTo: { classPropertyName: "snapTo", publicName: "snapTo", isSignal: true, isRequired: false, transformFunction: null }, snapSize: { classPropertyName: "snapSize", publicName: "snapSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "_onRegionFocusIn()", "focusout": "_onRegionFocusOut($event)" }, properties: { "class.mlv-page-snap--hide": "_mode() === \"hide\"", "class.mlv-page-snap--fade": "_mode() === \"fade\"", "class.mlv-page-snap--revealed": "_revealed()", "style.--mlv-snap-from": "snapFrom()", "style.--mlv-snap-scale": "_scale()", "style.--mlv-snap-size": "snapSize()", "style.visibility": "_hidden() ? \"hidden\" : null" } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageSnap, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvPageSnap]',
+                    host: {
+                        '[class.mlv-page-snap--hide]': '_mode() === "hide"',
+                        '[class.mlv-page-snap--fade]': '_mode() === "fade"',
+                        '[class.mlv-page-snap--revealed]': '_revealed()',
+                        '[style.--mlv-snap-from]': 'snapFrom()',
+                        '[style.--mlv-snap-scale]': '_scale()',
+                        '[style.--mlv-snap-size]': 'snapSize()',
+                        '[style.visibility]': '_hidden() ? "hidden" : null',
+                        '(focusin)': '_onRegionFocusIn()',
+                        '(focusout)': '_onRegionFocusOut($event)',
+                    },
+                }]
+        }], propDecorators: { mlvPageSnap: [{ type: i0.Input, args: [{ isSignal: true, alias: "mlvPageSnap", required: false }] }], snapFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapFrom", required: false }] }], snapTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapTo", required: false }] }], snapSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapSize", required: false }] }] } });
+
+/** Opaque black, used as one endpoint for automatic contrast. */
+const BLACK = { red: 0, green: 0, blue: 0, alpha: 1 };
+/** Opaque white, used as one endpoint for automatic contrast. */
+const WHITE = {
+    red: 255,
+    green: 255,
+    blue: 255,
+    alpha: 1,
+};
+/**
+ * Parses an RGB value emitted by the browser CSSOM.
+ *
+ * @param value Computed `rgb(...)` or `rgba(...)` string.
+ * @returns The normalized color, or `null` when the value is not parseable.
+ */
+function parseComputedColor(value) {
+    const normalized = value.trim().toLowerCase();
+    if (normalized === 'transparent') {
+        return { red: 0, green: 0, blue: 0, alpha: 0 };
+    }
+    const match = /^rgba?\((.*)\)$/i.exec(normalized);
+    if (!match) {
+        return null;
+    }
+    const body = match[1].trim();
+    const commaSeparated = body.includes(',');
+    let channelValues;
+    let alphaValue;
+    if (commaSeparated) {
+        const parts = body.split(',').map((part) => part.trim());
+        if (parts.length !== 3 && parts.length !== 4) {
+            return null;
+        }
+        channelValues = parts.slice(0, 3);
+        alphaValue = parts[3];
+    }
+    else {
+        const slashParts = body.split('/').map((part) => part.trim());
+        if (slashParts.length > 2) {
+            return null;
+        }
+        channelValues = slashParts[0].split(/\s+/);
+        alphaValue = slashParts[1];
+    }
+    if (channelValues.length !== 3) {
+        return null;
+    }
+    const channels = channelValues.map(_parseChannel);
+    const alpha = alphaValue === undefined ? 1 : _parseAlpha(alphaValue);
+    if (channels.some((channel) => channel === null) || alpha === null) {
+        return null;
+    }
+    return {
+        red: channels[0],
+        green: channels[1],
+        blue: channels[2],
+        alpha,
+    };
+}
+/**
+ * Composites one sRGB color over another using source-over alpha blending.
+ *
+ * @param foreground Color painted above the background.
+ * @param background Color painted below the foreground.
+ * @returns The effective blended color.
+ */
+function compositeColors(foreground, background) {
+    const alpha = foreground.alpha + background.alpha * (1 - foreground.alpha);
+    if (alpha === 0) {
+        return { red: 0, green: 0, blue: 0, alpha: 0 };
+    }
+    return {
+        red: _compositeChannel(foreground.red, background.red, foreground.alpha, background.alpha, alpha),
+        green: _compositeChannel(foreground.green, background.green, foreground.alpha, background.alpha, alpha),
+        blue: _compositeChannel(foreground.blue, background.blue, foreground.alpha, background.alpha, alpha),
+        alpha,
+    };
+}
+/**
+ * Serializes a normalized color to modern CSS RGB syntax.
+ *
+ * @param color Color to serialize.
+ * @returns A CSS `rgb(...)` value.
+ */
+function toCssColor(color) {
+    const channels = [color.red, color.green, color.blue]
+        .map(_formatNumber)
+        .join(', ');
+    if (color.alpha >= 1) {
+        return `rgb(${channels})`;
+    }
+    return `rgba(${channels}, ${_formatNumber(color.alpha)})`;
+}
+/**
+ * Computes the WCAG contrast ratio between two opaque effective colors.
+ *
+ * @param first First effective color.
+ * @param second Second effective color.
+ * @returns Contrast ratio in the inclusive range 1–21.
+ */
+function contrastRatio(first, second) {
+    const firstLuminance = _relativeLuminance(first);
+    const secondLuminance = _relativeLuminance(second);
+    const lighter = Math.max(firstLuminance, secondLuminance);
+    const darker = Math.min(firstLuminance, secondLuminance);
+    return (lighter + 0.05) / (darker + 0.05);
+}
+/**
+ * Selects the black or white endpoint with the strongest WCAG contrast.
+ *
+ * @param background Opaque effective background color.
+ * @returns An opaque CSS black or white value.
+ */
+function chooseContrastForeground(background) {
+    return contrastRatio(background, BLACK) >= contrastRatio(background, WHITE)
+        ? 'rgb(0, 0, 0)'
+        : 'rgb(255, 255, 255)';
+}
+/**
+ * Parses an RGB channel expressed as a number or percentage.
+ *
+ * @param value Serialized channel.
+ * @returns A channel in the range 0–255, or `null` when invalid.
+ */
+function _parseChannel(value) {
+    const isPercentage = value.endsWith('%');
+    const parsed = Number(isPercentage ? value.slice(0, -1) : value);
+    const channel = isPercentage ? (parsed / 100) * 255 : parsed;
+    return Number.isFinite(channel) && channel >= 0 && channel <= 255
+        ? channel
+        : null;
+}
+/**
+ * Parses an alpha channel expressed as a number or percentage.
+ *
+ * @param value Serialized alpha channel.
+ * @returns A channel in the range 0–1, or `null` when invalid.
+ */
+function _parseAlpha(value) {
+    const isPercentage = value.endsWith('%');
+    const parsed = Number(isPercentage ? value.slice(0, -1) : value);
+    const alpha = isPercentage ? parsed / 100 : parsed;
+    return Number.isFinite(alpha) && alpha >= 0 && alpha <= 1 ? alpha : null;
+}
+/**
+ * Blends one channel using source-over alpha compositing.
+ *
+ * @param foreground Foreground channel.
+ * @param background Background channel.
+ * @param foregroundAlpha Foreground alpha.
+ * @param backgroundAlpha Background alpha.
+ * @param outputAlpha Resulting alpha.
+ * @returns Blended channel.
+ */
+function _compositeChannel(foreground, background, foregroundAlpha, backgroundAlpha, outputAlpha) {
+    return ((foreground * foregroundAlpha +
+        background * backgroundAlpha * (1 - foregroundAlpha)) /
+        outputAlpha);
+}
+/**
+ * Computes WCAG relative luminance for an sRGB color.
+ *
+ * @param color Effective color.
+ * @returns Relative luminance in the range 0–1.
+ */
+function _relativeLuminance(color) {
+    const red = _linearizeChannel(color.red);
+    const green = _linearizeChannel(color.green);
+    const blue = _linearizeChannel(color.blue);
+    return 0.2126 * red + 0.7152 * green + 0.0722 * blue;
+}
+/**
+ * Converts an sRGB channel to linear light for luminance calculation.
+ *
+ * @param channel Channel in the range 0–255.
+ * @returns Linearized channel in the range 0–1.
+ */
+function _linearizeChannel(channel) {
+    const normalized = channel / 255;
+    return normalized <= 0.04045
+        ? normalized / 12.92
+        : ((normalized + 0.055) / 1.055) ** 2.4;
+}
+/**
+ * Produces a compact, stable decimal for CSS serialization.
+ *
+ * @param value Numeric value.
+ * @returns Rounded decimal without trailing zeroes.
+ */
+function _formatNumber(value) {
+    return String(Math.round(value * 1000) / 1000);
+}
+
+/** Stable opaque base matching the default page-shell chrome background. */
+const DEFAULT_SHELL_BACKGROUND = {
+    red: 23,
+    green: 23,
+    blue: 23,
+    alpha: 1,
+};
+/**
+ * Resolves a CSS color in an element's actual inheritance context.
+ * Two inherited sentinel colors distinguish a valid result from an unresolved
+ * value that silently falls back to `inherit`.
+ *
+ * @param host Element whose cascade resolves custom properties.
+ * @param value Candidate CSS color.
+ * @returns Browser-resolved sRGB channels, or `null` when unresolved.
+ */
+function resolveCssColor(host, value) {
+    const rawCandidate = value?.trim();
+    if (!rawCandidate ||
+        /^(currentcolor|inherit|initial|unset|revert|revert-layer)$/i.test(rawCandidate)) {
+        return null;
+    }
+    const view = host.ownerDocument.defaultView;
+    if (!view) {
+        return null;
+    }
+    const candidate = _resolveCustomProperties(host, rawCandidate);
+    if (!candidate) {
+        return null;
+    }
+    const first = _createColorProbe(host, 'rgb(1, 2, 3)', candidate);
+    const second = _createColorProbe(host, 'rgb(4, 5, 6)', candidate);
+    host.append(first.wrapper, second.wrapper);
+    const firstColor = parseComputedColor(view.getComputedStyle(first.probe).color);
+    const secondColor = parseComputedColor(view.getComputedStyle(second.probe).color);
+    first.wrapper.remove();
+    second.wrapper.remove();
+    return firstColor && secondColor && _colorsEqual(firstColor, secondColor)
+        ? firstColor
+        : null;
+}
+/**
+ * Resolves the visible backdrop beneath a translucent shell color.
+ * Ancestor backgrounds are composited from nearest to farthest before the
+ * stable shell default is used as the final opaque base.
+ *
+ * @param host Shell whose ancestor cascade supplies the backdrop.
+ * @returns Opaque effective backdrop.
+ */
+function resolveBackdropBackground(host) {
+    const view = host.ownerDocument.defaultView;
+    let backdrop = {
+        red: 0,
+        green: 0,
+        blue: 0,
+        alpha: 0,
+    };
+    let current = host.parentElement;
+    while (view && current) {
+        const ancestorBackground = parseComputedColor(view.getComputedStyle(current).backgroundColor);
+        if (ancestorBackground) {
+            backdrop = compositeColors(backdrop, ancestorBackground);
+            if (backdrop.alpha >= 1) {
+                return backdrop;
+            }
+        }
+        current = current.parentElement;
+    }
+    const fallback = resolveCssColor(host, 'var(--mlv-palette-neutral-900)') ??
+        DEFAULT_SHELL_BACKGROUND;
+    return compositeColors(backdrop, fallback);
+}
+/**
+ * Resolves `var(...)` references from the host's computed cascade.
+ * The browser remains responsible for the custom-property cascade; this
+ * substitution handles CSSOM implementations that do not expand variables
+ * when serializing a computed `color` value.
+ *
+ * @param host Element whose cascade owns the custom properties.
+ * @param value CSS value that may contain custom-property references.
+ * @param seen Custom properties currently being expanded, for cycle safety.
+ * @param depth Expansion depth guard.
+ * @returns Value with variables substituted, or `null` when unresolved.
+ */
+function _resolveCustomProperties(host, value, seen = new Set(), depth = 0) {
+    if (depth > 16) {
+        return null;
+    }
+    const range = _findFirstVarFunction(value);
+    if (!range) {
+        return value;
+    }
+    const content = value.slice(range.contentStart, range.contentEnd);
+    const [namePart, fallback] = _splitCustomPropertyArguments(content);
+    const name = namePart.trim();
+    if (!/^--[a-z0-9_-]+$/i.test(name)) {
+        return null;
+    }
+    const view = host.ownerDocument.defaultView;
+    let replacement = view?.getComputedStyle(host).getPropertyValue(name).trim() ?? '';
+    if (!replacement || seen.has(name)) {
+        replacement = fallback?.trim() ?? '';
+    }
+    if (!replacement) {
+        return null;
+    }
+    const nextSeen = new Set(seen);
+    nextSeen.add(name);
+    const resolvedReplacement = _resolveCustomProperties(host, replacement, nextSeen, depth + 1);
+    if (!resolvedReplacement) {
+        if (!fallback) {
+            return null;
+        }
+        const resolvedFallback = _resolveCustomProperties(host, fallback.trim(), seen, depth + 1);
+        if (!resolvedFallback) {
+            return null;
+        }
+        return _resolveCustomProperties(host, `${value.slice(0, range.start)}${resolvedFallback}${value.slice(range.end)}`, seen, depth + 1);
+    }
+    return _resolveCustomProperties(host, `${value.slice(0, range.start)}${resolvedReplacement}${value.slice(range.end)}`, seen, depth + 1);
+}
+/**
+ * Locates the first balanced CSS `var(...)` function.
+ *
+ * @param value CSS value to scan.
+ * @returns Function and content offsets, or `null` when absent/malformed.
+ */
+function _findFirstVarFunction(value) {
+    const start = value.toLowerCase().indexOf('var(');
+    if (start < 0) {
+        return null;
+    }
+    let parentheses = 1;
+    for (let index = start + 4; index < value.length; index++) {
+        if (value[index] === '(') {
+            parentheses++;
+        }
+        else if (value[index] === ')') {
+            parentheses--;
+            if (parentheses === 0) {
+                return {
+                    start,
+                    end: index + 1,
+                    contentStart: start + 4,
+                    contentEnd: index,
+                };
+            }
+        }
+    }
+    return null;
+}
+/**
+ * Splits a custom-property name from its optional top-level fallback.
+ *
+ * @param content Contents of a `var(...)` function.
+ * @returns Name and optional fallback.
+ */
+function _splitCustomPropertyArguments(content) {
+    let parentheses = 0;
+    for (let index = 0; index < content.length; index++) {
+        if (content[index] === '(') {
+            parentheses++;
+        }
+        else if (content[index] === ')') {
+            parentheses--;
+        }
+        else if (content[index] === ',' && parentheses === 0) {
+            return [content.slice(0, index), content.slice(index + 1)];
+        }
+    }
+    return [content, undefined];
+}
+/**
+ * Creates a hidden color probe and its sentinel-colored wrapper.
+ *
+ * @param host Element whose document creates the probes.
+ * @param sentinel Inherited color used to detect unresolved candidates.
+ * @param candidate Candidate assigned to the probe.
+ * @returns Wrapper and probe elements.
+ */
+function _createColorProbe(host, sentinel, candidate) {
+    const document = host.ownerDocument;
+    const wrapper = document.createElement('span');
+    const probe = document.createElement('span');
+    wrapper.setAttribute('aria-hidden', 'true');
+    wrapper.style.cssText =
+        `position:fixed;inline-size:0;block-size:0;overflow:hidden;` +
+            `visibility:hidden;pointer-events:none;color:${sentinel}`;
+    probe.style.color = candidate;
+    wrapper.append(probe);
+    return { wrapper, probe };
+}
+/**
+ * Compares two normalized colors exactly as emitted by CSSOM.
+ *
+ * @param first First resolved color.
+ * @param second Second resolved color.
+ * @returns Whether all four channels match.
+ */
+function _colorsEqual(first, second) {
+    return (first.red === second.red &&
+        first.green === second.green &&
+        first.blue === second.blue &&
+        first.alpha === second.alpha);
+}
+
+/**
+ * Application-page shell that joins global top navigation, one or two sidebars,
+ * and the Page canvas without taking ownership of their component behaviour.
+ */
+class MlvPageShell {
+    /**
+     * Optional CSS color for the shell chrome background.
+     * Browser-resolved values such as `var(--brand-color)` are supported.
+     */
+    color = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional CSS color overriding the automatically selected chrome foreground.
+     */
+    foreground = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "foreground" }] : /* istanbul ignore next */ []));
+    /** @protected Browser-resolved background applied through the host style. */
+    _resolvedBackground = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedBackground" }] : /* istanbul ignore next */ []));
+    /** @protected Browser-resolved foreground applied through the host style. */
+    _resolvedForeground = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedForeground" }] : /* istanbul ignore next */ []));
+    /** @private Native shell host used as the CSS inheritance context. */
+    _host = inject(ElementRef);
+    /** @private Angular destruction hook for frame and observer cleanup. */
+    _destroyRef = inject(DestroyRef);
+    /** @private Identifier of the pending color-resolution animation frame. */
+    _resolutionFrameId = null;
+    /** @private Watches theme and custom-property changes in the shell cascade. */
+    _mutationObserver = null;
+    constructor() {
+        afterRenderEffect(() => {
+            this.color();
+            this.foreground();
+            this._startColorObservation();
+            this._scheduleColorResolution();
+        });
+        this._destroyRef.onDestroy(() => {
+            this._mutationObserver?.disconnect();
+            const view = this._host.nativeElement.ownerDocument.defaultView;
+            if (this._resolutionFrameId !== null && view) {
+                view.cancelAnimationFrame(this._resolutionFrameId);
+            }
+        });
+    }
+    /**
+     * @private Observes the shell and its ancestors for cascade-affecting
+     * attribute changes. One observer can watch every node in the chain.
+     */
+    _startColorObservation() {
+        if (this._mutationObserver) {
+            return;
+        }
+        const host = this._host.nativeElement;
+        const view = host.ownerDocument.defaultView;
+        if (!view || typeof view.MutationObserver === 'undefined') {
+            return;
+        }
+        this._mutationObserver = new view.MutationObserver(() => {
+            this._scheduleColorResolution();
+        });
+        let current = host;
+        while (current) {
+            this._mutationObserver.observe(current, {
+                attributes: true,
+                attributeFilter: [
+                    'class',
+                    'style',
+                    'mlvtheme',
+                    'mlvTheme',
+                    'data-theme',
+                ],
+            });
+            current = current.parentElement;
+        }
+    }
+    /**
+     * @private Coalesces CSS reads and signal writes into the next render frame.
+     */
+    _scheduleColorResolution() {
+        if (this._resolutionFrameId !== null) {
+            return;
+        }
+        const view = this._host.nativeElement.ownerDocument.defaultView;
+        if (!view) {
+            return;
+        }
+        this._resolutionFrameId = view.requestAnimationFrame(() => {
+            this._resolutionFrameId = null;
+            this._resolveColors();
+        });
+    }
+    /**
+     * @private Resolves the input colors and updates the internal host variables.
+     */
+    _resolveColors() {
+        const host = this._host.nativeElement;
+        const background = resolveCssColor(host, this.color());
+        const explicitForeground = resolveCssColor(host, this.foreground());
+        this._resolvedBackground.set(background ? toCssColor(background) : null);
+        if (explicitForeground) {
+            this._resolvedForeground.set(toCssColor(explicitForeground));
+            return;
+        }
+        if (!background) {
+            this._resolvedForeground.set(null);
+            return;
+        }
+        const effectiveBackground = background.alpha < 1
+            ? compositeColors(background, resolveBackdropBackground(host))
+            : background;
+        this._resolvedForeground.set(chooseContrastForeground(effectiveBackground));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MlvPageShell, isStandalone: true, selector: "mlv-page-shell", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, foreground: { classPropertyName: "foreground", publicName: "foreground", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--mlv-page-shell-resolved-background": "_resolvedBackground()", "style.--mlv-page-shell-resolved-foreground": "_resolvedForeground()", "style.background": "_resolvedBackground()", "style.color": "_resolvedForeground()" }, classAttribute: "mlv-page-shell" }, ngImport: i0, template: "<ng-content select=\"[mlvPageTopbar]\" />\n<div class=\"mlv-page-shell__body\">\n  <ng-content select=\"[mlvPageSidebar]\" />\n  <div class=\"mlv-page-shell__content\"><ng-content /></div>\n  <ng-content select=\"[mlvPageEndSidebar], mlv-page-end-pane\" />\n</div>\n", styles: ["@layer mlv.components{.mlv-page-shell{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page-shell *{box-sizing:border-box}.mlv-page-shell{--mlv-page-shell-chrome-background: var(--mlv-palette-neutral-900);--mlv-page-shell-chrome-foreground: var(--mlv-palette-neutral-50);--mlv-page-shell-effective-background: var( --mlv-page-shell-resolved-background, var(--mlv-page-shell-chrome-background) );--mlv-page-shell-effective-foreground: var( --mlv-page-shell-resolved-foreground, var(--mlv-page-shell-chrome-foreground) );display:flex;flex-direction:column;width:100%;min-width:0;min-height:0;overflow:hidden;background:var(--mlv-page-shell-effective-background);color:var(--mlv-page-shell-effective-foreground)}.mlv-page-shell__topbar{flex:0 0 auto}.mlv-page-shell__topbar.mlv-action-bar{--mlv-action-bar-bg: var(--mlv-page-shell-effective-background);--mlv-action-bar-fg: var(--mlv-page-shell-effective-foreground);--mlv-action-bar-border: transparent;--mlv-action-bar-shadow: none;min-height:3.25rem;background:var(--mlv-page-shell-effective-background);-webkit-backdrop-filter:none;backdrop-filter:none}.mlv-page-shell__body{display:flex;flex:1 1 auto;min-width:0;min-height:0}.mlv-page-shell__body>[mlvPageSidebar]{flex:0 0 auto;min-width:0}.mlv-page-shell__body>[mlvPageSidebar]+[mlvPageSidebar]{border-inline-start:var(--mlv-stroke-width) solid color-mix(in srgb,var(--mlv-page-shell-effective-foreground) 16%,var(--mlv-page-shell-effective-background))}.mlv-page-shell__body>[mlvPageEndSidebar],.mlv-page-shell__body>mlv-page-end-pane{flex:0 0 auto;min-width:0}.mlv-page-shell__content{display:flex;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.mlv-page-shell__content>.mlv-page{height:100%}.mlv-page-shell__sidebar{flex:0 0 auto;min-height:0}.mlv-page-shell__topbar .mlv-form-control-wrapper,.mlv-page-shell__sidebar .mlv-form-control-wrapper{--container-background-color: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 10%, var(--mlv-page-shell-effective-background) );--container-border-color: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 30%, var(--mlv-page-shell-effective-background) );--container-side-content-color: var( --mlv-page-shell-effective-foreground );--container-action-color: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 78%, var(--mlv-page-shell-effective-background) );--mlv-text-primary: var(--mlv-page-shell-effective-foreground);--mlv-text-secondary: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 78%, var(--mlv-page-shell-effective-background) );--mlv-text-tertiary: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 60%, var(--mlv-page-shell-effective-background) );--mlv-border-focus: var(--mlv-page-shell-effective-foreground)}.mlv-page-shell__topbar .mlv-form-control-wrapper.mlv-form-control-wrapper--state-default:hover,.mlv-page-shell__sidebar .mlv-form-control-wrapper.mlv-form-control-wrapper--state-default:hover{--container-border-color: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 40%, var(--mlv-page-shell-effective-background) )}.mlv-page-shell__topbar .mlv-form-control-wrapper.mlv-form-control-wrapper--focused,.mlv-page-shell__sidebar .mlv-form-control-wrapper.mlv-form-control-wrapper--focused{--container-border-color: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 50%, var(--mlv-page-shell-effective-background) )}.mlv-page-shell__sidebar.mlv-sidebar--offcanvas{width:0;min-width:0;overflow:visible}.mlv-page-shell__sidebar.mlv-sidebar{--mlv-sidebar-border-width: 0rem;--mlv-text-secondary: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 78%, var(--mlv-page-shell-effective-background) );--mlv-text-primary: var(--mlv-page-shell-effective-foreground);--mlv-text-action: var(--mlv-page-shell-effective-foreground);--mlv-background-neutral-1: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 8%, var(--mlv-page-shell-effective-background) );--mlv-background-neutral-1-hover: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 8%, var(--mlv-page-shell-effective-background) );--mlv-background-neutral-1-active: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 12%, var(--mlv-page-shell-effective-background) );--mlv-border-focus: var(--mlv-page-shell-effective-foreground);--mlv-sidebar-hover-bg: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 8%, var(--mlv-page-shell-effective-background) );--mlv-sidebar-active-bg: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 12%, var(--mlv-page-shell-effective-background) );--mlv-sidebar-rail-color: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 24%, var(--mlv-page-shell-effective-background) );--mlv-text-on-selected: var(--mlv-page-shell-effective-foreground);--mlv-background-selected: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 12%, var(--mlv-page-shell-effective-background) );--mlv-background-selected-hover: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 8%, var(--mlv-page-shell-effective-background) );height:100%;border:0;border-radius:0;box-shadow:none;background:transparent}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageShell, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-page-shell', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-page-shell',
+                        '[style.--mlv-page-shell-resolved-background]': '_resolvedBackground()',
+                        '[style.--mlv-page-shell-resolved-foreground]': '_resolvedForeground()',
+                        '[style.background]': '_resolvedBackground()',
+                        '[style.color]': '_resolvedForeground()',
+                    }, template: "<ng-content select=\"[mlvPageTopbar]\" />\n<div class=\"mlv-page-shell__body\">\n  <ng-content select=\"[mlvPageSidebar]\" />\n  <div class=\"mlv-page-shell__content\"><ng-content /></div>\n  <ng-content select=\"[mlvPageEndSidebar], mlv-page-end-pane\" />\n</div>\n", styles: ["@layer mlv.components{.mlv-page-shell{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page-shell *{box-sizing:border-box}.mlv-page-shell{--mlv-page-shell-chrome-background: var(--mlv-palette-neutral-900);--mlv-page-shell-chrome-foreground: var(--mlv-palette-neutral-50);--mlv-page-shell-effective-background: var( --mlv-page-shell-resolved-background, var(--mlv-page-shell-chrome-background) );--mlv-page-shell-effective-foreground: var( --mlv-page-shell-resolved-foreground, var(--mlv-page-shell-chrome-foreground) );display:flex;flex-direction:column;width:100%;min-width:0;min-height:0;overflow:hidden;background:var(--mlv-page-shell-effective-background);color:var(--mlv-page-shell-effective-foreground)}.mlv-page-shell__topbar{flex:0 0 auto}.mlv-page-shell__topbar.mlv-action-bar{--mlv-action-bar-bg: var(--mlv-page-shell-effective-background);--mlv-action-bar-fg: var(--mlv-page-shell-effective-foreground);--mlv-action-bar-border: transparent;--mlv-action-bar-shadow: none;min-height:3.25rem;background:var(--mlv-page-shell-effective-background);-webkit-backdrop-filter:none;backdrop-filter:none}.mlv-page-shell__body{display:flex;flex:1 1 auto;min-width:0;min-height:0}.mlv-page-shell__body>[mlvPageSidebar]{flex:0 0 auto;min-width:0}.mlv-page-shell__body>[mlvPageSidebar]+[mlvPageSidebar]{border-inline-start:var(--mlv-stroke-width) solid color-mix(in srgb,var(--mlv-page-shell-effective-foreground) 16%,var(--mlv-page-shell-effective-background))}.mlv-page-shell__body>[mlvPageEndSidebar],.mlv-page-shell__body>mlv-page-end-pane{flex:0 0 auto;min-width:0}.mlv-page-shell__content{display:flex;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.mlv-page-shell__content>.mlv-page{height:100%}.mlv-page-shell__sidebar{flex:0 0 auto;min-height:0}.mlv-page-shell__topbar .mlv-form-control-wrapper,.mlv-page-shell__sidebar .mlv-form-control-wrapper{--container-background-color: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 10%, var(--mlv-page-shell-effective-background) );--container-border-color: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 30%, var(--mlv-page-shell-effective-background) );--container-side-content-color: var( --mlv-page-shell-effective-foreground );--container-action-color: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 78%, var(--mlv-page-shell-effective-background) );--mlv-text-primary: var(--mlv-page-shell-effective-foreground);--mlv-text-secondary: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 78%, var(--mlv-page-shell-effective-background) );--mlv-text-tertiary: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 60%, var(--mlv-page-shell-effective-background) );--mlv-border-focus: var(--mlv-page-shell-effective-foreground)}.mlv-page-shell__topbar .mlv-form-control-wrapper.mlv-form-control-wrapper--state-default:hover,.mlv-page-shell__sidebar .mlv-form-control-wrapper.mlv-form-control-wrapper--state-default:hover{--container-border-color: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 40%, var(--mlv-page-shell-effective-background) )}.mlv-page-shell__topbar .mlv-form-control-wrapper.mlv-form-control-wrapper--focused,.mlv-page-shell__sidebar .mlv-form-control-wrapper.mlv-form-control-wrapper--focused{--container-border-color: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 50%, var(--mlv-page-shell-effective-background) )}.mlv-page-shell__sidebar.mlv-sidebar--offcanvas{width:0;min-width:0;overflow:visible}.mlv-page-shell__sidebar.mlv-sidebar{--mlv-sidebar-border-width: 0rem;--mlv-text-secondary: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 78%, var(--mlv-page-shell-effective-background) );--mlv-text-primary: var(--mlv-page-shell-effective-foreground);--mlv-text-action: var(--mlv-page-shell-effective-foreground);--mlv-background-neutral-1: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 8%, var(--mlv-page-shell-effective-background) );--mlv-background-neutral-1-hover: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 8%, var(--mlv-page-shell-effective-background) );--mlv-background-neutral-1-active: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 12%, var(--mlv-page-shell-effective-background) );--mlv-border-focus: var(--mlv-page-shell-effective-foreground);--mlv-sidebar-hover-bg: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 8%, var(--mlv-page-shell-effective-background) );--mlv-sidebar-active-bg: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 12%, var(--mlv-page-shell-effective-background) );--mlv-sidebar-rail-color: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 24%, var(--mlv-page-shell-effective-background) );--mlv-text-on-selected: var(--mlv-page-shell-effective-foreground);--mlv-background-selected: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 12%, var(--mlv-page-shell-effective-background) );--mlv-background-selected-hover: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 8%, var(--mlv-page-shell-effective-background) );height:100%;border:0;border-radius:0;box-shadow:none;background:transparent}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], foreground: [{ type: i0.Input, args: [{ isSignal: true, alias: "foreground", required: false }] }] } });
+
+/** Marks the global top-navigation element projected into `mlv-page-shell`. */
+class MlvPageTopbar {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageTopbar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPageTopbar, isStandalone: true, selector: "[mlvPageTopbar]", host: { classAttribute: "mlv-page-shell__topbar" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageTopbar, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvPageTopbar]',
+                    host: { class: 'mlv-page-shell__topbar' },
+                }]
+        }] });
+/** Marks the primary navigation sidebar projected into `mlv-page-shell`. */
+class MlvPageSidebar {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageSidebar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPageSidebar, isStandalone: true, selector: "[mlvPageSidebar]", host: { classAttribute: "mlv-page-shell__sidebar" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageSidebar, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvPageSidebar]',
+                    host: { class: 'mlv-page-shell__sidebar' },
+                }]
+        }] });
+/** Marks an optional second, trailing sidebar projected into `mlv-page-shell`. */
+class MlvPageEndSidebar {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageEndSidebar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPageEndSidebar, isStandalone: true, selector: "[mlvPageEndSidebar]", host: { classAttribute: "mlv-page-shell__sidebar mlv-page-shell__sidebar--end" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageEndSidebar, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvPageEndSidebar]',
+                    host: {
+                        class: 'mlv-page-shell__sidebar mlv-page-shell__sidebar--end',
+                    },
+                }]
+        }] });
+
+/** Owns the single template rendered by a responsive Page end pane. */
+class MlvPageEndPaneContent {
+    /** Template projected into either the inline aside or compact Drawer. */
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageEndPaneContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPageEndPaneContent, isStandalone: true, selector: "ng-template[mlvPageEndPaneContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageEndPaneContent, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[mlvPageEndPaneContent]' }]
+        }] });
+
+/**
+ * Responsive trailing Page pane that renders one content template inline or
+ * in a modal Drawer while preserving one logical open and focus lifecycle.
+ */
+class MlvPageEndPane {
+    /** Two-way bindable logical open state shared by both renderers. */
+    opened = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
+    /** Inline pane width and compact Drawer size. */
+    width = input('20rem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** Breakpoint below which the pane renders in a modal Drawer. */
+    collapseBelow = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapseBelow" }] : /* istanbul ignore next */ []));
+    /** Accessible name applied to the active aside or dialog surface. */
+    ariaLabel = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Whether a compact Drawer's backdrop click closes the logical pane. */
+    closeOnBackdropClick = input(true, { ...(ngDevMode ? { debugName: "closeOnBackdropClick" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Whether Escape closes the logical pane in compact Drawer mode. */
+    closeOnEscape = input(true, { ...(ngDevMode ? { debugName: "closeOnEscape" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Initial focus strategy used by the compact Drawer renderer. */
+    initialFocus = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialFocus" }] : /* istanbul ignore next */ []));
+    /** Emitted once for each logical false-to-true open transition. */
+    afterOpened = output();
+    /** Emitted once after a logical close's active renderer is gone. */
+    afterClosed = output();
+    /** Stable id referenced by every Page end-pane trigger. */
+    panelId = mlvNextId('mlv-page-end-pane');
+    /** @protected Single content template shared by both renderers. */
+    _content = contentChild.required(MlvPageEndPaneContent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_content" }] : /* istanbul ignore next */ []));
+    /** @protected Whether the configured breakpoint currently selects Drawer rendering. */
+    _compact = computed(() => {
+        const breakpoint = this.collapseBelow();
+        return breakpoint !== null && this._breakpoints.isDown(breakpoint)();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_compact" }] : /* istanbul ignore next */ []));
+    /** @protected Width reserved in Page Shell only for an open inline pane. */
+    _hostWidth = computed(() => this.opened() && !this._compact() ? this.width() : '0px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hostWidth" }] : /* istanbul ignore next */ []));
+    /** @private Shared viewport breakpoint state. */
+    _breakpoints = inject(MlvBreakpointService);
+    /** @private Injector used to finish inline closes after the renderer is removed. */
+    _injector = inject(Injector);
+    /** @private Logical state observed during the preceding effect pass. */
+    _previousOpened = false;
+    /** @private Element focused immediately before the current logical open. */
+    _restoreTarget = null;
+    /** @private Whether a real logical close is waiting for renderer disposal. */
+    _closePending = false;
+    constructor() {
+        effect(() => {
+            const opened = this.opened();
+            if (opened === this._previousOpened) {
+                return;
+            }
+            this._previousOpened = opened;
+            if (opened) {
+                this._closePending = false;
+                this._restoreTarget = document.activeElement;
+                this.afterOpened.emit();
+                return;
+            }
+            this._closePending = true;
+            if (!this._compact()) {
+                this._scheduleInlineCloseCompletion();
+            }
+        });
+    }
+    /** Opens the logical pane. */
+    open() {
+        this.opened.set(true);
+    }
+    /** Closes the logical pane and waits for its active renderer to disappear. */
+    close() {
+        if (!this.opened()) {
+            return;
+        }
+        this._closePending = true;
+        this.opened.set(false);
+    }
+    /** Toggles the logical pane open state. */
+    toggle() {
+        if (this.opened()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    /** @protected Synchronizes internal Drawer dismissal with the logical model. */
+    _onDrawerOpenedChange(opened) {
+        if (!opened && this.opened()) {
+            this.close();
+        }
+    }
+    /** @protected Completes a pending logical close after the Drawer is disposed. */
+    _onDrawerDisposed() {
+        this._completeClose();
+    }
+    /** @private Defers inline completion until Angular removes the aside view. */
+    _scheduleInlineCloseCompletion() {
+        afterNextRender(() => this._completeClose(), {
+            injector: this._injector,
+        });
+    }
+    /** @private Restores focus and emits one close event for a real logical close. */
+    _completeClose() {
+        if (!this._closePending) {
+            return;
+        }
+        this._closePending = false;
+        const restoreTarget = this._restoreTarget;
+        this._restoreTarget = null;
+        if (restoreTarget?.isConnected) {
+            restoreTarget.focus();
+        }
+        this.afterClosed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageEndPane, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvPageEndPane, isStandalone: true, selector: "mlv-page-end-pane", inputs: { opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, collapseBelow: { classPropertyName: "collapseBelow", publicName: "collapseBelow", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange", afterOpened: "afterOpened", afterClosed: "afterClosed" }, host: { properties: { "class.mlv-page-end-pane--overlay": "_compact()", "attr.id": "panelId", "style.--mlv-page-end-pane-width": "_hostWidth()" }, classAttribute: "mlv-page-end-pane" }, queries: [{ propertyName: "_content", first: true, predicate: MlvPageEndPaneContent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (_compact()) {\n<mlv-drawer\n  [opened]=\"opened()\"\n  position=\"right\"\n  [size]=\"width()\"\n  [ariaLabel]=\"ariaLabel()\"\n  [closeOnBackdropClick]=\"closeOnBackdropClick()\"\n  [closeOnEscape]=\"closeOnEscape()\"\n  [initialFocus]=\"initialFocus()\"\n  [restoreFocus]=\"false\"\n  (openedChange)=\"_onDrawerOpenedChange($event)\"\n  (afterClosed)=\"_onDrawerDisposed()\"\n>\n  <ng-template mlvDrawerContent>\n    <ng-container [ngTemplateOutlet]=\"_content().templateRef\" />\n  </ng-template>\n</mlv-drawer>\n} @else if (opened()) {\n<aside class=\"mlv-page-end-pane__surface\" [attr.aria-label]=\"ariaLabel()\">\n  <ng-container [ngTemplateOutlet]=\"_content().templateRef\" />\n</aside>\n}\n", styles: ["@layer mlv.components{.mlv-page-end-pane{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page-end-pane *{box-sizing:border-box}.mlv-page-end-pane{display:flex;flex:0 0 var(--mlv-page-end-pane-width);width:var(--mlv-page-end-pane-width);min-width:0;min-height:0}.mlv-page-end-pane--overlay{flex-basis:0;width:0;overflow:visible}.mlv-page-end-pane__surface{width:100%;min-width:0;min-height:0;overflow:auto;background:var(--mlv-background-base);border-inline-start:var(--mlv-stroke-width) solid var(--mlv-border-subtle)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MlvDrawer, selector: "mlv-drawer", inputs: ["position", "ariaLabel", "ariaLabelledBy", "size", "resizable", "snapPoints", "defaultSnap", "minSize", "maxSize"] }, { kind: "directive", type: MlvDrawerContent, selector: "[mlvDrawerContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageEndPane, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-page-end-pane', imports: [NgTemplateOutlet, MlvDrawer, MlvDrawerContent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-page-end-pane',
+                        '[class.mlv-page-end-pane--overlay]': '_compact()',
+                        '[attr.id]': 'panelId',
+                        '[style.--mlv-page-end-pane-width]': '_hostWidth()',
+                    }, template: "@if (_compact()) {\n<mlv-drawer\n  [opened]=\"opened()\"\n  position=\"right\"\n  [size]=\"width()\"\n  [ariaLabel]=\"ariaLabel()\"\n  [closeOnBackdropClick]=\"closeOnBackdropClick()\"\n  [closeOnEscape]=\"closeOnEscape()\"\n  [initialFocus]=\"initialFocus()\"\n  [restoreFocus]=\"false\"\n  (openedChange)=\"_onDrawerOpenedChange($event)\"\n  (afterClosed)=\"_onDrawerDisposed()\"\n>\n  <ng-template mlvDrawerContent>\n    <ng-container [ngTemplateOutlet]=\"_content().templateRef\" />\n  </ng-template>\n</mlv-drawer>\n} @else if (opened()) {\n<aside class=\"mlv-page-end-pane__surface\" [attr.aria-label]=\"ariaLabel()\">\n  <ng-container [ngTemplateOutlet]=\"_content().templateRef\" />\n</aside>\n}\n", styles: ["@layer mlv.components{.mlv-page-end-pane{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page-end-pane *{box-sizing:border-box}.mlv-page-end-pane{display:flex;flex:0 0 var(--mlv-page-end-pane-width);width:var(--mlv-page-end-pane-width);min-width:0;min-height:0}.mlv-page-end-pane--overlay{flex-basis:0;width:0;overflow:visible}.mlv-page-end-pane__surface{width:100%;min-width:0;min-height:0;overflow:auto;background:var(--mlv-background-base);border-inline-start:var(--mlv-stroke-width) solid var(--mlv-border-subtle)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], collapseBelow: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseBelow", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], initialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocus", required: false }] }], afterOpened: [{ type: i0.Output, args: ["afterOpened"] }], afterClosed: [{ type: i0.Output, args: ["afterClosed"] }], _content: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvPageEndPaneContent), { isSignal: true }] }] } });
+
+/** Native-button trigger that toggles and describes a Page end pane. */
+class MlvPageEndPaneTrigger {
+    /** Page end pane controlled by this native button. */
+    mlvPageEndPaneTrigger = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mlvPageEndPaneTrigger" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageEndPaneTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MlvPageEndPaneTrigger, isStandalone: true, selector: "button[mlvPageEndPaneTrigger]", inputs: { mlvPageEndPaneTrigger: { classPropertyName: "mlvPageEndPaneTrigger", publicName: "mlvPageEndPaneTrigger", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "mlvPageEndPaneTrigger().toggle()" }, properties: { "attr.aria-expanded": "mlvPageEndPaneTrigger().opened()", "attr.aria-controls": "mlvPageEndPaneTrigger().panelId" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageEndPaneTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[mlvPageEndPaneTrigger]',
+                    host: {
+                        '(click)': 'mlvPageEndPaneTrigger().toggle()',
+                        '[attr.aria-expanded]': 'mlvPageEndPaneTrigger().opened()',
+                        '[attr.aria-controls]': 'mlvPageEndPaneTrigger().panelId',
+                    },
+                }]
+        }], propDecorators: { mlvPageEndPaneTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "mlvPageEndPaneTrigger", required: true }] }] } });
+
+/** Marks the breadcrumb template rendered at the start of a page header. */
+class MlvPageBreadcrumb extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageBreadcrumb, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPageBreadcrumb, isStandalone: true, selector: "[mlvPageBreadcrumb]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageBreadcrumb, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvPageBreadcrumb]' }]
+        }] });
+/** Marks the decorative leading icon beside the page title. */
+class MlvPageHeaderIcon extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageHeaderIcon, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPageHeaderIcon, isStandalone: true, selector: "[mlvPageHeaderIcon]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageHeaderIcon, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvPageHeaderIcon]' }]
+        }] });
+/** Marks the page title template. Consumers should project one semantic `<h1>`. */
+class MlvPageTitle extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageTitle, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPageTitle, isStandalone: true, selector: "[mlvPageTitle]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageTitle, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvPageTitle]' }]
+        }] });
+/**
+ * Marks inline status content rendered directly after the page title,
+ * such as draft/live badges or an unsaved-changes indicator.
+ */
+class MlvPageHeaderStatus extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageHeaderStatus, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPageHeaderStatus, isStandalone: true, selector: "[mlvPageHeaderStatus]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageHeaderStatus, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvPageHeaderStatus]' }]
+        }] });
+/** Marks the primary actions rendered after the page title. */
+class MlvPageHeaderActions extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageHeaderActions, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPageHeaderActions, isStandalone: true, selector: "[mlvPageHeaderActions]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageHeaderActions, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvPageHeaderActions]' }]
+        }] });
+/** Marks supporting descriptive content below the title row. */
+class MlvPageHeaderDescription extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageHeaderDescription, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPageHeaderDescription, isStandalone: true, selector: "[mlvPageHeaderDescription]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageHeaderDescription, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvPageHeaderDescription]' }]
+        }] });
+/** Marks page metadata such as ownership, visibility, or last-updated time. */
+class MlvPageHeaderMeta extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageHeaderMeta, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPageHeaderMeta, isStandalone: true, selector: "[mlvPageHeaderMeta]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageHeaderMeta, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvPageHeaderMeta]' }]
+        }] });
+/** Marks navigation tabs rendered at the bottom of the header. */
+class MlvPageHeaderTabs extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageHeaderTabs, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPageHeaderTabs, isStandalone: true, selector: "[mlvPageHeaderTabs]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageHeaderTabs, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvPageHeaderTabs]' }]
+        }] });
+/** Marks actions aligned to the trailing edge of the page-tabs row. */
+class MlvPageHeaderTabsActions extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageHeaderTabsActions, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPageHeaderTabsActions, isStandalone: true, selector: "[mlvPageHeaderTabsActions]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageHeaderTabsActions, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvPageHeaderTabsActions]' }]
+        }] });
+
+/**
+ * Structured page heading with optional breadcrumb, actions, status, metadata,
+ * and tabs. `size="s"` renders the compact record-editor header.
+ *
+ * Inside `main[mlvPage]` the header participates in the scroll-scrubbed snap
+ * timeline (`--mlv-page-snap`): the title interpolates down one type scale and
+ * the breadcrumb and tabs rows collapse, each over its own stagger window.
+ * With `snapControls`, chevron/pin controls float on the header's bottom edge
+ * — always visible while the header is sticky. The chevron snaps the chrome
+ * open/closed; the pin freezes the current state regardless of scrolling.
+ */
+class MlvPageHeader {
+    /** Optional router destination for the built-in back link. */
+    back = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "back" }] : /* istanbul ignore next */ []));
+    /** Accessible and visible text for the built-in back link. */
+    backLabel = input('Back', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "backLabel" }] : /* istanbul ignore next */ []));
+    /** Makes this header sticky independently of the containing page. */
+    sticky = input(false, { ...(ngDevMode ? { debugName: "sticky" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Visual scale. `'m'` is the default hero header; `'s'` is the compact
+     * single-row variant for record-editor pages, with a smaller title scale.
+     */
+    size = input('m', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Aligns the tabs row to the start (default) or centers it. */
+    tabsAlign = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabsAlign" }] : /* istanbul ignore next */ []));
+    /**
+     * Shows the floating chevron/pin snap controls on the header's bottom edge.
+     * Requires the header to be inside `main[mlvPage]`.
+     */
+    snapControls = input(false, { ...(ngDevMode ? { debugName: "snapControls" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Accessible label for the chevron snap-toggle control. */
+    toggleLabel = input('Toggle header', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggleLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the pin control. */
+    pinLabel = input('Pin header state', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pinLabel" }] : /* istanbul ignore next */ []));
+    /** Emits when the built-in back link is activated. */
+    backClick = output();
+    /** @protected Breadcrumb template projected via `[mlvPageBreadcrumb]`. */
+    _breadcrumbRef = contentChild(MlvPageBreadcrumb, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_breadcrumbRef" }] : /* istanbul ignore next */ []));
+    /** @protected Decorative leading icon projected via `[mlvPageHeaderIcon]`. */
+    _iconRef = contentChild(MlvPageHeaderIcon, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_iconRef" }] : /* istanbul ignore next */ []));
+    /** @protected Page title template projected via `[mlvPageTitle]`. */
+    _titleRef = contentChild(MlvPageTitle, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_titleRef" }] : /* istanbul ignore next */ []));
+    /** @protected Inline status content projected via `[mlvPageHeaderStatus]`. */
+    _statusRef = contentChild(MlvPageHeaderStatus, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_statusRef" }] : /* istanbul ignore next */ []));
+    /** @protected Header actions projected via `[mlvPageHeaderActions]`. */
+    _actionsRef = contentChild(MlvPageHeaderActions, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_actionsRef" }] : /* istanbul ignore next */ []));
+    /** @protected Description projected via `[mlvPageHeaderDescription]`. */
+    _descriptionRef = contentChild(MlvPageHeaderDescription, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_descriptionRef" }] : /* istanbul ignore next */ []));
+    /** @protected Metadata projected via `[mlvPageHeaderMeta]`. */
+    _metaRef = contentChild(MlvPageHeaderMeta, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_metaRef" }] : /* istanbul ignore next */ []));
+    /** @protected Tabs projected via `[mlvPageHeaderTabs]`. */
+    _tabsRef = contentChild(MlvPageHeaderTabs, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_tabsRef" }] : /* istanbul ignore next */ []));
+    /** @protected Trailing tabs-row actions projected via `[mlvPageHeaderTabsActions]`. */
+    _tabsActionsRef = contentChild(MlvPageHeaderTabsActions, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_tabsActionsRef" }] : /* istanbul ignore next */ []));
+    /** @private Scroll state of the owning page, when rendered inside one. */
+    _pageScroll = inject(MLV_PAGE_SCROLL, { optional: true });
+    /** @private Snap controller of the owning page, when rendered inside one. */
+    _snap = inject(MlvPageSnapController, { optional: true });
+    /** @protected Controller behind the floating controls, when enabled. */
+    _controls = computed(() => this.snapControls() && this._snap ? this._snap : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_controls" }] : /* istanbul ignore next */ []));
+    /** @protected True while the chrome is closer to snapped than expanded. */
+    _snapped = computed(() => this._snap?.snapped() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_snapped" }] : /* istanbul ignore next */ []));
+    /** @protected True while the snap state is frozen against scrolling. */
+    _pinned = computed(() => this._snap?.pinned() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_pinned" }] : /* istanbul ignore next */ []));
+    /** @protected True while the owning page is scrolled away from the top. */
+    _scrolled = computed(() => this._snap
+        ? this._snap.progress() > 0.02
+        : (this._pageScroll?.scrolled() ?? false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_scrolled" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvPageHeader, isStandalone: true, selector: "mlv-page-header", inputs: { back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabsAlign: { classPropertyName: "tabsAlign", publicName: "tabsAlign", isSignal: true, isRequired: false, transformFunction: null }, snapControls: { classPropertyName: "snapControls", publicName: "snapControls", isSignal: true, isRequired: false, transformFunction: null }, toggleLabel: { classPropertyName: "toggleLabel", publicName: "toggleLabel", isSignal: true, isRequired: false, transformFunction: null }, pinLabel: { classPropertyName: "pinLabel", publicName: "pinLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backClick: "backClick" }, host: { properties: { "class.mlv-page-header--sticky": "sticky()", "class.mlv-page-header--size-s": "size() === \"s\"", "class.mlv-page-header--tabs-center": "tabsAlign() === \"center\"", "class.mlv-page-header--scrolled": "_scrolled()" }, classAttribute: "mlv-page-header" }, queries: [{ propertyName: "_breadcrumbRef", first: true, predicate: MlvPageBreadcrumb, descendants: true, isSignal: true }, { propertyName: "_iconRef", first: true, predicate: MlvPageHeaderIcon, descendants: true, isSignal: true }, { propertyName: "_titleRef", first: true, predicate: MlvPageTitle, descendants: true, isSignal: true }, { propertyName: "_statusRef", first: true, predicate: MlvPageHeaderStatus, descendants: true, isSignal: true }, { propertyName: "_actionsRef", first: true, predicate: MlvPageHeaderActions, descendants: true, isSignal: true }, { propertyName: "_descriptionRef", first: true, predicate: MlvPageHeaderDescription, descendants: true, isSignal: true }, { propertyName: "_metaRef", first: true, predicate: MlvPageHeaderMeta, descendants: true, isSignal: true }, { propertyName: "_tabsRef", first: true, predicate: MlvPageHeaderTabs, descendants: true, isSignal: true }, { propertyName: "_tabsActionsRef", first: true, predicate: MlvPageHeaderTabsActions, descendants: true, isSignal: true }], ngImport: i0, template: "@if (_breadcrumbRef()?.templateRef; as breadcrumbTpl) {\n<div\n  class=\"mlv-page-header__breadcrumb\"\n  mlvPageSnap=\"hide\"\n  [snapFrom]=\"0\"\n  [snapTo]=\"0.5\"\n  snapSize=\"3rem\"\n>\n  <ng-template [ngTemplateOutlet]=\"breadcrumbTpl\" />\n</div>\n} @if (back(); as backTarget) {\n<a\n  mlvLink\n  class=\"mlv-page-header__back\"\n  variant=\"subtle\"\n  [routerLink]=\"backTarget\"\n  (click)=\"backClick.emit($event)\"\n>\n  <ng-template mlvLinkBefore>\n    <svg lucideChevronLeft [size]=\"16\" aria-hidden=\"true\" />\n  </ng-template>\n  {{ backLabel() }}\n</a>\n}\n\n<div class=\"mlv-page-header__title-row\">\n  @if (_iconRef()?.templateRef; as iconTpl) {\n  <span class=\"mlv-page-header__icon\" aria-hidden=\"true\">\n    <ng-template [ngTemplateOutlet]=\"iconTpl\" />\n  </span>\n  } @if (_titleRef()?.templateRef; as titleTpl) {\n  <div class=\"mlv-page-header__title\">\n    <ng-template [ngTemplateOutlet]=\"titleTpl\" />\n  </div>\n  } @if (_statusRef()?.templateRef; as statusTpl) {\n  <div class=\"mlv-page-header__status\">\n    <ng-template [ngTemplateOutlet]=\"statusTpl\" />\n  </div>\n  }\n  <span class=\"mlv-page-header__spacer\" aria-hidden=\"true\"></span>\n  @if (_actionsRef()?.templateRef; as actionsTpl) {\n  <div class=\"mlv-page-header__actions\">\n    <ng-template [ngTemplateOutlet]=\"actionsTpl\" />\n  </div>\n  }\n</div>\n\n@if (_descriptionRef()?.templateRef; as descriptionTpl) {\n<div class=\"mlv-page-header__description\">\n  <ng-template [ngTemplateOutlet]=\"descriptionTpl\" />\n</div>\n} @if (_metaRef()?.templateRef; as metaTpl) {\n<div class=\"mlv-page-header__meta\">\n  <ng-template [ngTemplateOutlet]=\"metaTpl\" />\n</div>\n} @if (_tabsRef()?.templateRef || _tabsActionsRef()?.templateRef) {\n<div\n  class=\"mlv-page-header__tabs-row\"\n  mlvPageSnap=\"hide\"\n  [snapFrom]=\"0.3\"\n  [snapTo]=\"0.85\"\n  snapSize=\"5rem\"\n>\n  @if (_tabsRef()?.templateRef; as tabsTpl) {\n  <div class=\"mlv-page-header__tabs\">\n    <ng-template [ngTemplateOutlet]=\"tabsTpl\" />\n  </div>\n  }\n  <span class=\"mlv-page-header__spacer\" aria-hidden=\"true\"></span>\n  @if (_tabsActionsRef()?.templateRef; as tabsActionsTpl) {\n  <div class=\"mlv-page-header__tabs-actions\">\n    <ng-template [ngTemplateOutlet]=\"tabsActionsTpl\" />\n  </div>\n  }\n</div>\n}\n\n<!-- A projected summary strip renders as the chrome's bottom row, sharing\n     this header's single glass surface. -->\n<ng-content select=\"mlv-page-summary\" />\n\n@if (_controls(); as snap) {\n<div class=\"mlv-page-header__snap-controls\">\n  <button\n    mlvButton\n    type=\"button\"\n    variant=\"outlined\"\n    shape=\"circle\"\n    mlvDensity=\"tight\"\n    class=\"mlv-page-header__snap-toggle\"\n    [attr.aria-label]=\"toggleLabel()\"\n    [attr.aria-expanded]=\"!_snapped()\"\n    (click)=\"snap.toggle()\"\n  >\n    <svg lucideChevronUp [size]=\"12\" aria-hidden=\"true\" />\n  </button>\n  <button\n    mlvButton\n    type=\"button\"\n    variant=\"outlined\"\n    shape=\"circle\"\n    mlvDensity=\"tight\"\n    class=\"mlv-page-header__snap-pin\"\n    [class.mlv-page-header__snap-pin--active]=\"_pinned()\"\n    [attr.aria-label]=\"pinLabel()\"\n    [attr.aria-pressed]=\"_pinned()\"\n    (click)=\"snap.setPinned(!_pinned())\"\n  >\n    @if (_pinned()) {\n    <svg lucidePinOff [size]=\"12\" aria-hidden=\"true\" />\n    } @else {\n    <svg lucidePin [size]=\"12\" aria-hidden=\"true\" />\n    }\n  </button>\n</div>\n}\n", styles: ["@layer mlv.components{.mlv-page-header{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page-header *{box-sizing:border-box}.mlv-page-header{--mlv-page-header-snap: clamp(0, var(--mlv-page-snap, 0), 1);--mlv-page-chrome-bg: color-mix( in srgb, var(--mlv-elevation-bg-3), transparent 50% );--mlv-page-chrome-border: var(--mlv-border-subtle);position:relative;display:flex;flex-direction:column;gap:var(--mlv-spacing-2);min-width:0;background-color:var(--mlv-page-chrome-bg);border-bottom:.0625rem solid var(--mlv-page-chrome-border);border-radius:var(--mlv-radius-l) var(--mlv-radius-l) 0 0;backdrop-filter:blur(1.25rem);-webkit-backdrop-filter:blur(1.25rem);padding:var(--mlv-spacing-2) max(var(--mlv-page-inset, 0rem),var(--mlv-spacing-3));box-shadow:var(--mlv-shadow-raised);transition:box-shadow var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-page-header--sticky{position:sticky;top:0;z-index:10}.mlv-page-header--scrolled{box-shadow:var(--mlv-shadow-floating)}.mlv-page-header__breadcrumb,.mlv-page-header__description,.mlv-page-header__meta,.mlv-page-header__tabs,.mlv-page-header__title{min-width:0}.mlv-page-header__back{align-self:flex-start}.mlv-page-header__title-row,.mlv-page-header__tabs-row{display:flex;align-items:center;gap:var(--mlv-spacing-3);min-width:0}.mlv-page-header__title-row{min-height:var(--mlv-height-l)}.mlv-page-header__icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;color:var(--mlv-text-secondary)}.mlv-page-header__title h1{margin:0;font-size:calc(var(--mlv-typography-heading-h2-size) + (var(--mlv-typography-heading-h4-size) - var(--mlv-typography-heading-h2-size)) * var(--mlv-page-header-snap));line-height:calc(var(--mlv-typography-heading-h2-line-height) + (var(--mlv-typography-heading-h4-line-height) - var(--mlv-typography-heading-h2-line-height)) * var(--mlv-page-header-snap));letter-spacing:var(--mlv-typography-heading-h2-letter-spacing)}.mlv-page-header__spacer{flex:1 1 auto}.mlv-page-header__actions,.mlv-page-header__tabs-actions{display:flex;flex:0 0 auto;align-items:center;gap:var(--mlv-spacing-2)}.mlv-page-header__actions button,.mlv-page-header__actions a,.mlv-page-header__tabs-actions button,.mlv-page-header__tabs-actions a{white-space:nowrap}.mlv-page-header__description{max-width:48rem;color:var(--mlv-text-secondary);font-size:var(--mlv-typography-body-m-size);line-height:var(--mlv-typography-body-m-line-height)}.mlv-page-header__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mlv-spacing-2);color:var(--mlv-text-secondary);font-size:var(--mlv-typography-body-s-size);line-height:var(--mlv-typography-body-s-line-height)}.mlv-page-header__tabs-row{margin-bottom:calc(0rem - var(--mlv-spacing-2))}.mlv-page-header__tabs{flex:1 1 auto;overflow:hidden}.mlv-page-header__tabs>.mlv-tab-group{width:100%}.mlv-page-header__status{display:inline-flex;flex:0 0 auto;flex-wrap:wrap;align-items:center;gap:var(--mlv-spacing-1)}.mlv-page-header__snap-controls{position:absolute;bottom:0;left:50%;z-index:1;display:flex;gap:var(--mlv-spacing-1);transform:translate(-50%,50%)}.mlv-page-header__snap-toggle,.mlv-page-header__snap-pin{background:var(--mlv-background-raised);box-shadow:var(--mlv-shadow-raised)}.mlv-page-header__snap-toggle svg{rotate:calc(180deg * var(--mlv-page-header-snap))}.mlv-page-header__snap-pin--active{color:var(--mlv-text-action);border-color:var(--mlv-border-focus)}.mlv-page-header--tabs-center .mlv-page-header__tabs-row{justify-content:center}.mlv-page-header--tabs-center .mlv-page-header__tabs-row .mlv-page-header__spacer{flex:0 0 0}.mlv-page-header--tabs-center .mlv-page-header__tabs{flex:0 1 auto}.mlv-page-header--tabs-center .mlv-page-header__tabs>.mlv-tab-group{width:auto}.mlv-page-header--size-s{gap:var(--mlv-spacing-1)}.mlv-page-header--size-s .mlv-page-header__title-row{min-height:var(--mlv-height-m)}.mlv-page-header--size-s .mlv-page-header__title h1{font-size:calc(var(--mlv-typography-heading-h4-size) + (var(--mlv-typography-heading-h6-size) - var(--mlv-typography-heading-h4-size)) * var(--mlv-page-header-snap));line-height:calc(var(--mlv-typography-heading-h4-line-height) + (var(--mlv-typography-heading-h6-line-height) - var(--mlv-typography-heading-h4-line-height)) * var(--mlv-page-header-snap));letter-spacing:var(--mlv-letter-spacing-normal)}.mlv-page-header--size-s .mlv-page-header__description{font-size:var(--mlv-typography-body-s-size);line-height:var(--mlv-typography-body-s-line-height)}.mlv-page-header>.mlv-page-summary{position:static;z-index:auto;margin-inline:calc(-1*max(var(--mlv-page-inset, 0rem),var(--mlv-spacing-3)));background:transparent;border-bottom:none;backdrop-filter:none;-webkit-backdrop-filter:none}@container (max-width: 40rem){.mlv-page-header__title-row{flex-wrap:wrap;row-gap:var(--mlv-spacing-1)}.mlv-page-header__title-row .mlv-page-header__spacer{display:none}.mlv-page-header__actions{flex:1 1 100%;flex-wrap:wrap;justify-content:flex-start}}@media(prefers-reduced-motion:reduce){.mlv-page-header,.mlv-page-header *,.mlv-page-header:before,.mlv-page-header:after,[class^=mlv-page-header__],[class*=\" mlv-page-header__\"],[class^=mlv-page-header--],[class*=\" mlv-page-header--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucidePin, selector: "svg[lucidePin]" }, { kind: "component", type: LucidePinOff, selector: "svg[lucidePinOff]" }, { kind: "component", type: MlvButton, selector: "button[mlvButton], a[mlvButton]", inputs: ["variant", "shape", "disabled", "loading", "selected"] }, { kind: "component", type: MlvLink, selector: "a[mlvLink]", inputs: ["variant", "disabled"] }, { kind: "directive", type: MlvLinkBefore, selector: "[mlvLinkBefore]" }, { kind: "directive", type: MlvPageSnap, selector: "[mlvPageSnap]", inputs: ["mlvPageSnap", "snapFrom", "snapTo", "snapSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageHeader, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-page-header', imports: [
+                        NgTemplateOutlet,
+                        RouterLink,
+                        LucideChevronLeft,
+                        LucideChevronUp,
+                        LucidePin,
+                        LucidePinOff,
+                        MlvButton,
+                        MlvLink,
+                        MlvLinkBefore,
+                        MlvPageSnap,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-page-header',
+                        '[class.mlv-page-header--sticky]': 'sticky()',
+                        '[class.mlv-page-header--size-s]': 'size() === "s"',
+                        '[class.mlv-page-header--tabs-center]': 'tabsAlign() === "center"',
+                        '[class.mlv-page-header--scrolled]': '_scrolled()',
+                    }, template: "@if (_breadcrumbRef()?.templateRef; as breadcrumbTpl) {\n<div\n  class=\"mlv-page-header__breadcrumb\"\n  mlvPageSnap=\"hide\"\n  [snapFrom]=\"0\"\n  [snapTo]=\"0.5\"\n  snapSize=\"3rem\"\n>\n  <ng-template [ngTemplateOutlet]=\"breadcrumbTpl\" />\n</div>\n} @if (back(); as backTarget) {\n<a\n  mlvLink\n  class=\"mlv-page-header__back\"\n  variant=\"subtle\"\n  [routerLink]=\"backTarget\"\n  (click)=\"backClick.emit($event)\"\n>\n  <ng-template mlvLinkBefore>\n    <svg lucideChevronLeft [size]=\"16\" aria-hidden=\"true\" />\n  </ng-template>\n  {{ backLabel() }}\n</a>\n}\n\n<div class=\"mlv-page-header__title-row\">\n  @if (_iconRef()?.templateRef; as iconTpl) {\n  <span class=\"mlv-page-header__icon\" aria-hidden=\"true\">\n    <ng-template [ngTemplateOutlet]=\"iconTpl\" />\n  </span>\n  } @if (_titleRef()?.templateRef; as titleTpl) {\n  <div class=\"mlv-page-header__title\">\n    <ng-template [ngTemplateOutlet]=\"titleTpl\" />\n  </div>\n  } @if (_statusRef()?.templateRef; as statusTpl) {\n  <div class=\"mlv-page-header__status\">\n    <ng-template [ngTemplateOutlet]=\"statusTpl\" />\n  </div>\n  }\n  <span class=\"mlv-page-header__spacer\" aria-hidden=\"true\"></span>\n  @if (_actionsRef()?.templateRef; as actionsTpl) {\n  <div class=\"mlv-page-header__actions\">\n    <ng-template [ngTemplateOutlet]=\"actionsTpl\" />\n  </div>\n  }\n</div>\n\n@if (_descriptionRef()?.templateRef; as descriptionTpl) {\n<div class=\"mlv-page-header__description\">\n  <ng-template [ngTemplateOutlet]=\"descriptionTpl\" />\n</div>\n} @if (_metaRef()?.templateRef; as metaTpl) {\n<div class=\"mlv-page-header__meta\">\n  <ng-template [ngTemplateOutlet]=\"metaTpl\" />\n</div>\n} @if (_tabsRef()?.templateRef || _tabsActionsRef()?.templateRef) {\n<div\n  class=\"mlv-page-header__tabs-row\"\n  mlvPageSnap=\"hide\"\n  [snapFrom]=\"0.3\"\n  [snapTo]=\"0.85\"\n  snapSize=\"5rem\"\n>\n  @if (_tabsRef()?.templateRef; as tabsTpl) {\n  <div class=\"mlv-page-header__tabs\">\n    <ng-template [ngTemplateOutlet]=\"tabsTpl\" />\n  </div>\n  }\n  <span class=\"mlv-page-header__spacer\" aria-hidden=\"true\"></span>\n  @if (_tabsActionsRef()?.templateRef; as tabsActionsTpl) {\n  <div class=\"mlv-page-header__tabs-actions\">\n    <ng-template [ngTemplateOutlet]=\"tabsActionsTpl\" />\n  </div>\n  }\n</div>\n}\n\n<!-- A projected summary strip renders as the chrome's bottom row, sharing\n     this header's single glass surface. -->\n<ng-content select=\"mlv-page-summary\" />\n\n@if (_controls(); as snap) {\n<div class=\"mlv-page-header__snap-controls\">\n  <button\n    mlvButton\n    type=\"button\"\n    variant=\"outlined\"\n    shape=\"circle\"\n    mlvDensity=\"tight\"\n    class=\"mlv-page-header__snap-toggle\"\n    [attr.aria-label]=\"toggleLabel()\"\n    [attr.aria-expanded]=\"!_snapped()\"\n    (click)=\"snap.toggle()\"\n  >\n    <svg lucideChevronUp [size]=\"12\" aria-hidden=\"true\" />\n  </button>\n  <button\n    mlvButton\n    type=\"button\"\n    variant=\"outlined\"\n    shape=\"circle\"\n    mlvDensity=\"tight\"\n    class=\"mlv-page-header__snap-pin\"\n    [class.mlv-page-header__snap-pin--active]=\"_pinned()\"\n    [attr.aria-label]=\"pinLabel()\"\n    [attr.aria-pressed]=\"_pinned()\"\n    (click)=\"snap.setPinned(!_pinned())\"\n  >\n    @if (_pinned()) {\n    <svg lucidePinOff [size]=\"12\" aria-hidden=\"true\" />\n    } @else {\n    <svg lucidePin [size]=\"12\" aria-hidden=\"true\" />\n    }\n  </button>\n</div>\n}\n", styles: ["@layer mlv.components{.mlv-page-header{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page-header *{box-sizing:border-box}.mlv-page-header{--mlv-page-header-snap: clamp(0, var(--mlv-page-snap, 0), 1);--mlv-page-chrome-bg: color-mix( in srgb, var(--mlv-elevation-bg-3), transparent 50% );--mlv-page-chrome-border: var(--mlv-border-subtle);position:relative;display:flex;flex-direction:column;gap:var(--mlv-spacing-2);min-width:0;background-color:var(--mlv-page-chrome-bg);border-bottom:.0625rem solid var(--mlv-page-chrome-border);border-radius:var(--mlv-radius-l) var(--mlv-radius-l) 0 0;backdrop-filter:blur(1.25rem);-webkit-backdrop-filter:blur(1.25rem);padding:var(--mlv-spacing-2) max(var(--mlv-page-inset, 0rem),var(--mlv-spacing-3));box-shadow:var(--mlv-shadow-raised);transition:box-shadow var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-page-header--sticky{position:sticky;top:0;z-index:10}.mlv-page-header--scrolled{box-shadow:var(--mlv-shadow-floating)}.mlv-page-header__breadcrumb,.mlv-page-header__description,.mlv-page-header__meta,.mlv-page-header__tabs,.mlv-page-header__title{min-width:0}.mlv-page-header__back{align-self:flex-start}.mlv-page-header__title-row,.mlv-page-header__tabs-row{display:flex;align-items:center;gap:var(--mlv-spacing-3);min-width:0}.mlv-page-header__title-row{min-height:var(--mlv-height-l)}.mlv-page-header__icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;color:var(--mlv-text-secondary)}.mlv-page-header__title h1{margin:0;font-size:calc(var(--mlv-typography-heading-h2-size) + (var(--mlv-typography-heading-h4-size) - var(--mlv-typography-heading-h2-size)) * var(--mlv-page-header-snap));line-height:calc(var(--mlv-typography-heading-h2-line-height) + (var(--mlv-typography-heading-h4-line-height) - var(--mlv-typography-heading-h2-line-height)) * var(--mlv-page-header-snap));letter-spacing:var(--mlv-typography-heading-h2-letter-spacing)}.mlv-page-header__spacer{flex:1 1 auto}.mlv-page-header__actions,.mlv-page-header__tabs-actions{display:flex;flex:0 0 auto;align-items:center;gap:var(--mlv-spacing-2)}.mlv-page-header__actions button,.mlv-page-header__actions a,.mlv-page-header__tabs-actions button,.mlv-page-header__tabs-actions a{white-space:nowrap}.mlv-page-header__description{max-width:48rem;color:var(--mlv-text-secondary);font-size:var(--mlv-typography-body-m-size);line-height:var(--mlv-typography-body-m-line-height)}.mlv-page-header__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mlv-spacing-2);color:var(--mlv-text-secondary);font-size:var(--mlv-typography-body-s-size);line-height:var(--mlv-typography-body-s-line-height)}.mlv-page-header__tabs-row{margin-bottom:calc(0rem - var(--mlv-spacing-2))}.mlv-page-header__tabs{flex:1 1 auto;overflow:hidden}.mlv-page-header__tabs>.mlv-tab-group{width:100%}.mlv-page-header__status{display:inline-flex;flex:0 0 auto;flex-wrap:wrap;align-items:center;gap:var(--mlv-spacing-1)}.mlv-page-header__snap-controls{position:absolute;bottom:0;left:50%;z-index:1;display:flex;gap:var(--mlv-spacing-1);transform:translate(-50%,50%)}.mlv-page-header__snap-toggle,.mlv-page-header__snap-pin{background:var(--mlv-background-raised);box-shadow:var(--mlv-shadow-raised)}.mlv-page-header__snap-toggle svg{rotate:calc(180deg * var(--mlv-page-header-snap))}.mlv-page-header__snap-pin--active{color:var(--mlv-text-action);border-color:var(--mlv-border-focus)}.mlv-page-header--tabs-center .mlv-page-header__tabs-row{justify-content:center}.mlv-page-header--tabs-center .mlv-page-header__tabs-row .mlv-page-header__spacer{flex:0 0 0}.mlv-page-header--tabs-center .mlv-page-header__tabs{flex:0 1 auto}.mlv-page-header--tabs-center .mlv-page-header__tabs>.mlv-tab-group{width:auto}.mlv-page-header--size-s{gap:var(--mlv-spacing-1)}.mlv-page-header--size-s .mlv-page-header__title-row{min-height:var(--mlv-height-m)}.mlv-page-header--size-s .mlv-page-header__title h1{font-size:calc(var(--mlv-typography-heading-h4-size) + (var(--mlv-typography-heading-h6-size) - var(--mlv-typography-heading-h4-size)) * var(--mlv-page-header-snap));line-height:calc(var(--mlv-typography-heading-h4-line-height) + (var(--mlv-typography-heading-h6-line-height) - var(--mlv-typography-heading-h4-line-height)) * var(--mlv-page-header-snap));letter-spacing:var(--mlv-letter-spacing-normal)}.mlv-page-header--size-s .mlv-page-header__description{font-size:var(--mlv-typography-body-s-size);line-height:var(--mlv-typography-body-s-line-height)}.mlv-page-header>.mlv-page-summary{position:static;z-index:auto;margin-inline:calc(-1*max(var(--mlv-page-inset, 0rem),var(--mlv-spacing-3)));background:transparent;border-bottom:none;backdrop-filter:none;-webkit-backdrop-filter:none}@container (max-width: 40rem){.mlv-page-header__title-row{flex-wrap:wrap;row-gap:var(--mlv-spacing-1)}.mlv-page-header__title-row .mlv-page-header__spacer{display:none}.mlv-page-header__actions{flex:1 1 100%;flex-wrap:wrap;justify-content:flex-start}}@media(prefers-reduced-motion:reduce){.mlv-page-header,.mlv-page-header *,.mlv-page-header:before,.mlv-page-header:after,[class^=mlv-page-header__],[class*=\" mlv-page-header__\"],[class^=mlv-page-header--],[class*=\" mlv-page-header--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"] }]
+        }], propDecorators: { back: [{ type: i0.Input, args: [{ isSignal: true, alias: "back", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabsAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabsAlign", required: false }] }], snapControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapControls", required: false }] }], toggleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleLabel", required: false }] }], pinLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinLabel", required: false }] }], backClick: [{ type: i0.Output, args: ["backClick"] }], _breadcrumbRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvPageBreadcrumb), { isSignal: true }] }], _iconRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvPageHeaderIcon), { isSignal: true }] }], _titleRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvPageTitle), { isSignal: true }] }], _statusRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvPageHeaderStatus), { isSignal: true }] }], _actionsRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvPageHeaderActions), { isSignal: true }] }], _descriptionRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvPageHeaderDescription), { isSignal: true }] }], _metaRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvPageHeaderMeta), { isSignal: true }] }], _tabsRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvPageHeaderTabs), { isSignal: true }] }], _tabsActionsRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvPageHeaderTabsActions), { isSignal: true }] }] } });
+
+/** Marks content rendered in the complementary page-aside landmark. */
+class MlvPageAside extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageAside, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPageAside, isStandalone: true, selector: "[mlvPageAside]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageAside, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvPageAside]' }]
+        }] });
+
+/** Responsive main-content and complementary-aside grid. */
+class MlvPageContent {
+    /** Places the complementary column before or after the main content. */
+    asidePlacement = input('end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "asidePlacement" }] : /* istanbul ignore next */ []));
+    /** Preferred width of the complementary column while rendered inline. */
+    asideWidth = input('20rem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "asideWidth" }] : /* istanbul ignore next */ []));
+    /** Keeps the complementary column visible while the page scrolls. */
+    asideSticky = input(true, { ...(ngDevMode ? { debugName: "asideSticky" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Selects the spacing between the main and complementary columns. */
+    gap = input('m', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+    /** Container width in CSS pixels below which the columns stack. */
+    stackBelow = input(1024, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stackBelow" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the complementary `<aside>` landmark. */
+    asideLabel = input('Related content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "asideLabel" }] : /* istanbul ignore next */ []));
+    /** @protected Optional complementary content projected via `[mlvPageAside]`. */
+    _asideRef = contentChild(MlvPageAside, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_asideRef" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Whether complementary content is actually projected.
+     *
+     * The grid only reserves the aside track while this is `true`, so a consumer
+     * that projects no `[mlvPageAside]` keeps the full inline size for its main
+     * column instead of silently losing `asideWidth` to an empty track.
+     */
+    _hasAside = computed(() => !!this._asideRef()?.templateRef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasAside" }] : /* istanbul ignore next */ []));
+    /** @private Host element observed so responsiveness follows available content width. */
+    _elementRef = inject((ElementRef));
+    /** @private Shared observer used to measure the page-content container. */
+    _resizeObserver = inject(MlvResizeObserverService);
+    /** @private Destroy scope for the resize-observer subscription. */
+    _destroyRef = inject(DestroyRef);
+    /** @private Latest measured inline size in CSS pixels. */
+    _containerWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []));
+    /** @protected Whether the current container is narrower than `stackBelow`. */
+    _stacked = computed(() => {
+        const width = this._containerWidth();
+        return width > 0 && width < this.stackBelow();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_stacked" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this._resizeObserver
+            .observe(this._elementRef)
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((entries) => {
+            const width = entries[entries.length - 1]?.contentRect.width;
+            if (width !== undefined)
+                this._containerWidth.set(width);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvPageContent, isStandalone: true, selector: "mlv-page-content", inputs: { asidePlacement: { classPropertyName: "asidePlacement", publicName: "asidePlacement", isSignal: true, isRequired: false, transformFunction: null }, asideWidth: { classPropertyName: "asideWidth", publicName: "asideWidth", isSignal: true, isRequired: false, transformFunction: null }, asideSticky: { classPropertyName: "asideSticky", publicName: "asideSticky", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, stackBelow: { classPropertyName: "stackBelow", publicName: "stackBelow", isSignal: true, isRequired: false, transformFunction: null }, asideLabel: { classPropertyName: "asideLabel", publicName: "asideLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mlv-page-content--aside-start": "asidePlacement() === \"start\"", "class.mlv-page-content--aside-end": "asidePlacement() === \"end\"", "class.mlv-page-content--aside-sticky": "asideSticky()", "class.mlv-page-content--gap-s": "gap() === \"s\"", "class.mlv-page-content--gap-m": "gap() === \"m\"", "class.mlv-page-content--gap-l": "gap() === \"l\"", "class.mlv-page-content--stacked": "_stacked()", "class.mlv-page-content--has-aside": "_hasAside()", "style.--mlv-page-aside-width": "asideWidth()" }, classAttribute: "mlv-page-content" }, queries: [{ propertyName: "_asideRef", first: true, predicate: MlvPageAside, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mlv-page-content__main\"><ng-content /></div>\n\n@if (_asideRef()?.templateRef; as asideTpl) {\n<aside class=\"mlv-page-content__aside\" [attr.aria-label]=\"asideLabel()\">\n  <ng-template [ngTemplateOutlet]=\"asideTpl\" />\n</aside>\n}\n", styles: ["@layer mlv.components{.mlv-page-content{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page-content *{box-sizing:border-box}.mlv-page-content{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:\"main\";align-items:start;min-width:0;padding-top:var(--mlv-spacing-2)}.mlv-page-content--gap-s{gap:var(--mlv-spacing-2)}.mlv-page-content--gap-m{gap:var(--mlv-spacing-4)}.mlv-page-content--gap-l{gap:var(--mlv-spacing-6)}.mlv-page-content--has-aside:not(.mlv-page-content--stacked){grid-template-columns:minmax(0,1fr) minmax(0,var(--mlv-page-aside-width, 20rem));grid-template-areas:\"main aside\"}.mlv-page-content--has-aside:not(.mlv-page-content--stacked).mlv-page-content--aside-start{grid-template-columns:minmax(0,var(--mlv-page-aside-width, 20rem)) minmax(0,1fr);grid-template-areas:\"aside main\"}.mlv-page-content__main{grid-area:main;min-width:0}.mlv-page-content__aside{grid-area:aside;min-width:0}.mlv-page-content--aside-sticky .mlv-page-content__aside{position:sticky;top:var(--mlv-page-aside-offset, var(--mlv-spacing-4))}.mlv-page-content--stacked{grid-template-columns:minmax(0,1fr);grid-template-areas:\"main\"}.mlv-page-content--stacked.mlv-page-content--has-aside{grid-template-areas:\"main\" \"aside\"}.mlv-page-content--stacked.mlv-page-content--has-aside.mlv-page-content--aside-start{grid-template-areas:\"aside\" \"main\"}.mlv-page-content--stacked .mlv-page-content__aside{position:static}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageContent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-page-content', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-page-content',
+                        '[class.mlv-page-content--aside-start]': 'asidePlacement() === "start"',
+                        '[class.mlv-page-content--aside-end]': 'asidePlacement() === "end"',
+                        '[class.mlv-page-content--aside-sticky]': 'asideSticky()',
+                        '[class.mlv-page-content--gap-s]': 'gap() === "s"',
+                        '[class.mlv-page-content--gap-m]': 'gap() === "m"',
+                        '[class.mlv-page-content--gap-l]': 'gap() === "l"',
+                        '[class.mlv-page-content--stacked]': '_stacked()',
+                        '[class.mlv-page-content--has-aside]': '_hasAside()',
+                        '[style.--mlv-page-aside-width]': 'asideWidth()',
+                    }, template: "<div class=\"mlv-page-content__main\"><ng-content /></div>\n\n@if (_asideRef()?.templateRef; as asideTpl) {\n<aside class=\"mlv-page-content__aside\" [attr.aria-label]=\"asideLabel()\">\n  <ng-template [ngTemplateOutlet]=\"asideTpl\" />\n</aside>\n}\n", styles: ["@layer mlv.components{.mlv-page-content{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page-content *{box-sizing:border-box}.mlv-page-content{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:\"main\";align-items:start;min-width:0;padding-top:var(--mlv-spacing-2)}.mlv-page-content--gap-s{gap:var(--mlv-spacing-2)}.mlv-page-content--gap-m{gap:var(--mlv-spacing-4)}.mlv-page-content--gap-l{gap:var(--mlv-spacing-6)}.mlv-page-content--has-aside:not(.mlv-page-content--stacked){grid-template-columns:minmax(0,1fr) minmax(0,var(--mlv-page-aside-width, 20rem));grid-template-areas:\"main aside\"}.mlv-page-content--has-aside:not(.mlv-page-content--stacked).mlv-page-content--aside-start{grid-template-columns:minmax(0,var(--mlv-page-aside-width, 20rem)) minmax(0,1fr);grid-template-areas:\"aside main\"}.mlv-page-content__main{grid-area:main;min-width:0}.mlv-page-content__aside{grid-area:aside;min-width:0}.mlv-page-content--aside-sticky .mlv-page-content__aside{position:sticky;top:var(--mlv-page-aside-offset, var(--mlv-spacing-4))}.mlv-page-content--stacked{grid-template-columns:minmax(0,1fr);grid-template-areas:\"main\"}.mlv-page-content--stacked.mlv-page-content--has-aside{grid-template-areas:\"main\" \"aside\"}.mlv-page-content--stacked.mlv-page-content--has-aside.mlv-page-content--aside-start{grid-template-areas:\"aside\" \"main\"}.mlv-page-content--stacked .mlv-page-content__aside{position:static}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { asidePlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "asidePlacement", required: false }] }], asideWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "asideWidth", required: false }] }], asideSticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "asideSticky", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], stackBelow: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackBelow", required: false }] }], asideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "asideLabel", required: false }] }], _asideRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvPageAside), { isSignal: true }] }] } });
+
+/**
+ * Key-facts strip rendered under a page header. Projects
+ * `mlv-page-summary-item` children in a wrapping row.
+ *
+ * Inside `main[mlvPage]` the strip participates in the scroll-scrubbed snap
+ * timeline: its height and opacity are interpolated from the page-level
+ * `--mlv-page-snap` progress over the `snapFrom`..`snapTo` stagger window.
+ * Collapse/expand and pinning are controlled by the header's snap controls
+ * (`mlv-page-header[snapControls]`) through `MlvPageSnapController` — the
+ * strip itself is purely presentational.
+ *
+ * A fully collapsed strip is `visibility: hidden` and therefore leaves the
+ * accessibility tree and the tab order — except while it holds focus, when it
+ * reveals itself instead (`mlv-page-summary--revealed`) so that scrolling can
+ * never blur a focused control into `<body>`. See {@link MlvPageSnapRegionBase}.
+ */
+class MlvPageSummary extends MlvPageSnapRegionBase {
+    /** Accessible name for the facts region. */
+    summaryLabel = input('Page summary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "summaryLabel" }] : /* istanbul ignore next */ []));
+    /** Progress at which the strip starts collapsing (0..1). */
+    snapFrom = input(0.1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapFrom" }] : /* istanbul ignore next */ []));
+    /** Progress at which the strip is fully collapsed (0..1). */
+    snapTo = input(0.95, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapTo" }] : /* istanbul ignore next */ []));
+    /** @protected Multiplier remapping page progress into the stagger window. */
+    _scale = computed(() => 1 / Math.max(this.snapTo() - this.snapFrom(), 0.001), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_scale" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected True once the strip has fully collapsed; unless it holds
+     * focus, that also removes it from the accessibility tree and tab order.
+     */
+    _elapsed = computed(() => (this._snapController?.progress() ?? 0) >= Math.min(this.snapTo(), 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_elapsed" }] : /* istanbul ignore next */ []));
+    /** @protected Natural height of the items row, driving the height scrub. */
+    _measuredHeight = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_measuredHeight" }] : /* istanbul ignore next */ []));
+    /** @private The measured items row. */
+    _items = viewChild.required('items', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        const resizeObserver = inject(MlvResizeObserverService);
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            const itemsEl = this._items().nativeElement;
+            // offsetHeight includes the row's own padding, matching the host
+            // max-height the scrub interpolates against.
+            this._measuredHeight.set(itemsEl.offsetHeight);
+            const subscription = resizeObserver.observe(itemsEl).subscribe(() => {
+                if (itemsEl.offsetHeight > 0) {
+                    this._measuredHeight.set(itemsEl.offsetHeight);
+                }
+            });
+            destroyRef.onDestroy(() => subscription.unsubscribe());
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageSummary, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MlvPageSummary, isStandalone: true, selector: "mlv-page-summary", inputs: { summaryLabel: { classPropertyName: "summaryLabel", publicName: "summaryLabel", isSignal: true, isRequired: false, transformFunction: null }, snapFrom: { classPropertyName: "snapFrom", publicName: "snapFrom", isSignal: true, isRequired: false, transformFunction: null }, snapTo: { classPropertyName: "snapTo", publicName: "snapTo", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "_onRegionFocusIn()", "focusout": "_onRegionFocusOut($event)" }, properties: { "class.mlv-page-summary--snapped": "_elapsed()", "class.mlv-page-summary--revealed": "_revealed()", "style.--mlv-snap-from": "snapFrom()", "style.--mlv-snap-scale": "_scale()", "style.--mlv-page-summary-size": "_measuredHeight()", "style.visibility": "_hidden() ? \"hidden\" : null" }, classAttribute: "mlv-page-summary" }, viewQueries: [{ propertyName: "_items", first: true, predicate: ["items"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<div
+    #items
+    class="mlv-page-summary__items"
+    role="group"
+    [attr.aria-label]="summaryLabel()"
+  >
+    <ng-content />
+  </div>`, isInline: true, styles: ["@layer mlv.components{.mlv-page-summary{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page-summary *{box-sizing:border-box}.mlv-page-summary{--mlv-page-summary-snap: clamp( 0, (var(--mlv-page-snap, 0) - var(--mlv-snap-from, .1)) * var(--mlv-snap-scale, 1.18), 1 );position:relative;z-index:9;display:block;min-width:0;max-height:calc(var(--mlv-page-summary-size, 480) * 1px * (1 - var(--mlv-page-summary-snap)));overflow:hidden;background-color:var(--mlv-page-chrome-bg, color-mix(in srgb, var(--mlv-elevation-bg-3), transparent 50%));border-bottom:.0625rem solid var(--mlv-page-chrome-border, var(--mlv-border-subtle));backdrop-filter:blur(1.25rem);-webkit-backdrop-filter:blur(1.25rem);opacity:calc(1 - var(--mlv-page-summary-snap) * 1.25)}.mlv-page-summary--revealed{--mlv-page-summary-snap: 0}.mlv-page-summary__items{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--mlv-spacing-2) var(--mlv-spacing-4);padding:var(--mlv-spacing-2) max(var(--mlv-page-inset, 0rem),var(--mlv-spacing-3)) var(--mlv-spacing-4)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageSummary, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-page-summary', template: `<div
+    #items
+    class="mlv-page-summary__items"
+    role="group"
+    [attr.aria-label]="summaryLabel()"
+  >
+    <ng-content />
+  </div>`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-page-summary',
+                        '[class.mlv-page-summary--snapped]': '_elapsed()',
+                        '[class.mlv-page-summary--revealed]': '_revealed()',
+                        '[style.--mlv-snap-from]': 'snapFrom()',
+                        '[style.--mlv-snap-scale]': '_scale()',
+                        '[style.--mlv-page-summary-size]': '_measuredHeight()',
+                        '[style.visibility]': '_hidden() ? "hidden" : null',
+                        '(focusin)': '_onRegionFocusIn()',
+                        '(focusout)': '_onRegionFocusOut($event)',
+                    }, styles: ["@layer mlv.components{.mlv-page-summary{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page-summary *{box-sizing:border-box}.mlv-page-summary{--mlv-page-summary-snap: clamp( 0, (var(--mlv-page-snap, 0) - var(--mlv-snap-from, .1)) * var(--mlv-snap-scale, 1.18), 1 );position:relative;z-index:9;display:block;min-width:0;max-height:calc(var(--mlv-page-summary-size, 480) * 1px * (1 - var(--mlv-page-summary-snap)));overflow:hidden;background-color:var(--mlv-page-chrome-bg, color-mix(in srgb, var(--mlv-elevation-bg-3), transparent 50%));border-bottom:.0625rem solid var(--mlv-page-chrome-border, var(--mlv-border-subtle));backdrop-filter:blur(1.25rem);-webkit-backdrop-filter:blur(1.25rem);opacity:calc(1 - var(--mlv-page-summary-snap) * 1.25)}.mlv-page-summary--revealed{--mlv-page-summary-snap: 0}.mlv-page-summary__items{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--mlv-spacing-2) var(--mlv-spacing-4);padding:var(--mlv-spacing-2) max(var(--mlv-page-inset, 0rem),var(--mlv-spacing-3)) var(--mlv-spacing-4)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { summaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryLabel", required: false }] }], snapFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapFrom", required: false }] }], snapTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapTo", required: false }] }], _items: [{ type: i0.ViewChild, args: ['items', { isSignal: true }] }] } });
+
+/**
+ * One labelled key fact inside `mlv-page-summary`. The label renders above
+ * the projected value content.
+ */
+class MlvPageSummaryItem {
+    /** Visible label describing the projected value. */
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageSummaryItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MlvPageSummaryItem, isStandalone: true, selector: "mlv-page-summary-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "mlv-page-summary-item" }, ngImport: i0, template: `
+    <span class="mlv-page-summary-item__label">{{ label() }}</span>
+    <div class="mlv-page-summary-item__value"><ng-content /></div>
+  `, isInline: true, styles: ["@layer mlv.components{.mlv-page-summary-item{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page-summary-item *{box-sizing:border-box}.mlv-page-summary-item{display:flex;flex:1 1 10rem;flex-direction:column;gap:var(--mlv-spacing-0-5);min-width:0}.mlv-page-summary-item__label{color:var(--mlv-text-secondary);font-size:var(--mlv-typography-body-s-size);line-height:var(--mlv-typography-body-s-line-height)}.mlv-page-summary-item__value{overflow:hidden;color:var(--mlv-text-primary);font-size:var(--mlv-typography-body-m-size);line-height:var(--mlv-typography-body-m-line-height);text-overflow:ellipsis;white-space:nowrap}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageSummaryItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-page-summary-item', template: `
+    <span class="mlv-page-summary-item__label">{{ label() }}</span>
+    <div class="mlv-page-summary-item__value"><ng-content /></div>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-page-summary-item',
+                    }, styles: ["@layer mlv.components{.mlv-page-summary-item{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page-summary-item *{box-sizing:border-box}.mlv-page-summary-item{display:flex;flex:1 1 10rem;flex-direction:column;gap:var(--mlv-spacing-0-5);min-width:0}.mlv-page-summary-item__label{color:var(--mlv-text-secondary);font-size:var(--mlv-typography-body-s-size);line-height:var(--mlv-typography-body-s-line-height)}.mlv-page-summary-item__value{overflow:hidden;color:var(--mlv-text-primary);font-size:var(--mlv-typography-body-m-size);line-height:var(--mlv-typography-body-m-line-height);text-overflow:ellipsis;white-space:nowrap}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
+
+/**
+ * Custom property published on `document.documentElement` while at least one
+ * sticky dock is on screen. Viewport-anchored overlays — most importantly the
+ * bottom toast positions — read it so they never render underneath the dock.
+ */
+const DOCK_HEIGHT_PROPERTY = '--mlv-page-dock-height';
+/**
+ * @internal Heights contributed by the sticky docks currently alive, keyed by
+ * the owning component. Two pages can be mounted at once (a route transition,
+ * a page inside a dialog), so the published value is the tallest contribution
+ * rather than whichever dock rendered last.
+ */
+const stickyDockHeights = new Map();
+/**
+ * @internal Republishes {@link DOCK_HEIGHT_PROPERTY} after a contribution
+ * changed. Passing `null` withdraws the owner's contribution; the property is
+ * removed entirely once the last sticky dock is gone, so a page without a dock
+ * never leaves a stale offset behind.
+ */
+function publishStickyDockHeight(owner, height) {
+    // The teardown path also runs during server rendering, where there is no
+    // document to publish to.
+    if (typeof document === 'undefined') {
+        return;
+    }
+    if (height === null) {
+        stickyDockHeights.delete(owner);
+    }
+    else {
+        stickyDockHeights.set(owner, height);
+    }
+    const root = document.documentElement;
+    if (stickyDockHeights.size === 0) {
+        root.style.removeProperty(DOCK_HEIGHT_PROPERTY);
+        return;
+    }
+    const tallest = Math.max(...stickyDockHeights.values());
+    root.style.setProperty(DOCK_HEIGHT_PROPERTY, `${Math.round(tallest * 100) / 100}px`);
+}
+/**
+ * Bottom action bar for workflow pages. Projects content marked with
+ * `[mlvPageDockStart]`, `[mlvPageDockCenter]`, and `[mlvPageDockEnd]` into a
+ * three-region row and, by default, sticks to the bottom edge of the owning
+ * page's scroll area. Typical composition: pending-change status at the
+ * start, a floating tool cluster in the center, and discard/schedule/save/
+ * publish actions at the end.
+ *
+ * `appearance="floating"` drops the dock's own glass surface — whatever floats
+ * inside it, e.g. a pill action bar, brings its own — and replaces it with the
+ * `mlvFloatingContainer` recipe from `@malva-ui/cdk/floating-container`: a
+ * gradient-masked backdrop plus safe-area block-end padding, so content fades
+ * out beneath the actions instead of scrolling straight into them. Override
+ * the backdrop fill with `--mlv-page-dock-backdrop` (defaults to
+ * `--mlv-background-base`).
+ *
+ * The dock derives its full-bleed margins from the inherited
+ * `--mlv-page-inset`, so the geometry survives a wrapper element (a `<form>`,
+ * a `<section>`) between the page canvas and the dock, and collapses to zero
+ * outside a page.
+ *
+ * While `sticky`, the dock publishes its measured height as
+ * `--mlv-page-dock-height` on `document.documentElement`; bottom-anchored
+ * toasts offset themselves by it so they are never covered by the dock.
+ */
+class MlvPageDock {
+    /** Keeps the dock attached to the bottom edge of the page scroll area. */
+    sticky = input(true, { ...(ngDevMode ? { debugName: "sticky" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Solid bar with a top border, or a floating gradient-masked backdrop. */
+    appearance = input('bar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    /** @private Host element whose border-box height is published. */
+    _host = inject(ElementRef);
+    /** @private Shared resize observation used to track the dock's height. */
+    _resizeObserver = inject(MlvResizeObserverService);
+    /** @private Withdraws this dock's height contribution on teardown. */
+    _destroyRef = inject(DestroyRef);
+    /**
+     * @private Latest measured border-box height of the dock, in pixels. Only
+     * written in a browser — during server rendering it stays at 0 and nothing
+     * is published.
+     */
+    _measuredHeight = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_measuredHeight" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // `afterNextRender` / `afterRenderEffect` never run on the server, so the
+        // document is only touched in a browser.
+        afterNextRender(() => {
+            this._measuredHeight.set(this._host.nativeElement.offsetHeight);
+            this._resizeObserver
+                .observe(this._host)
+                .pipe(takeUntilDestroyed(this._destroyRef))
+                .subscribe(() => {
+                this._measuredHeight.set(this._host.nativeElement.offsetHeight);
+            });
+        });
+        afterRenderEffect(() => {
+            // A non-sticky dock scrolls away with the content, so it never covers a
+            // viewport-anchored overlay and must not reserve space for one.
+            const height = this.sticky() ? this._measuredHeight() : null;
+            publishStickyDockHeight(this, height);
+        });
+        this._destroyRef.onDestroy(() => publishStickyDockHeight(this, null));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageDock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MlvPageDock, isStandalone: true, selector: "mlv-page-dock", inputs: { sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mlv-page-dock--sticky": "sticky()", "class.mlv-page-dock--floating": "appearance() === \"floating\"" }, classAttribute: "mlv-page-dock" }, ngImport: i0, template: `
+    <ng-content select="[mlvPageDockStart]" />
+    <ng-content select="[mlvPageDockCenter]" />
+    <ng-content select="[mlvPageDockEnd]" />
+  `, isInline: true, styles: ["@layer mlv.components{.mlv-page-dock{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page-dock *{box-sizing:border-box}.mlv-page-dock{position:relative;display:grid;grid-template-columns:1fr minmax(0,auto) 1fr;align-items:center;gap:var(--mlv-spacing-2);min-width:0;margin-inline:calc(-1 * var(--mlv-page-inset, 0rem));margin-bottom:calc(-1 * var(--mlv-page-inset, 0rem));padding:var(--mlv-spacing-1-5) max(var(--mlv-page-inset, 0rem),var(--mlv-spacing-3));background-color:var(--mlv-page-chrome-bg, color-mix(in srgb, var(--mlv-elevation-bg-3), transparent 50%));border-top:.0625rem solid var(--mlv-page-chrome-border, var(--mlv-border-subtle));backdrop-filter:blur(1.25rem);-webkit-backdrop-filter:blur(1.25rem)}.mlv-page-dock button,.mlv-page-dock a{white-space:nowrap}.mlv-page-dock--sticky{position:sticky;bottom:0;z-index:10}.mlv-page-dock--floating:before{content:\"\";position:absolute;inset:-2.5rem 0 0;z-index:-1;background:var(--mlv-page-dock-backdrop, var(--mlv-background-base));-webkit-mask-image:linear-gradient(180deg,transparent,black 2.5rem);mask-image:linear-gradient(180deg,transparent,black 2.5rem);pointer-events:none}.mlv-page-dock--floating{padding-block-end:max(var(--mlv-spacing-1-5),env(safe-area-inset-bottom));isolation:isolate;background:transparent;border-top:none;backdrop-filter:none;-webkit-backdrop-filter:none}.mlv-page-dock__start,.mlv-page-dock__center,.mlv-page-dock__end{flex-wrap:wrap}.mlv-page-dock__start{display:flex;align-items:center;gap:var(--mlv-spacing-2);min-width:0;color:var(--mlv-text-secondary);font-size:var(--mlv-typography-body-s-size);line-height:var(--mlv-typography-body-s-line-height)}.mlv-page-dock__center{display:flex;grid-column:2;align-items:center;gap:var(--mlv-spacing-1);min-width:0}.mlv-page-dock__end{display:flex;grid-column:3;align-items:center;justify-content:flex-end;gap:var(--mlv-spacing-2)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageDock, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-page-dock', template: `
+    <ng-content select="[mlvPageDockStart]" />
+    <ng-content select="[mlvPageDockCenter]" />
+    <ng-content select="[mlvPageDockEnd]" />
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-page-dock',
+                        '[class.mlv-page-dock--sticky]': 'sticky()',
+                        '[class.mlv-page-dock--floating]': 'appearance() === "floating"',
+                    }, styles: ["@layer mlv.components{.mlv-page-dock{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page-dock *{box-sizing:border-box}.mlv-page-dock{position:relative;display:grid;grid-template-columns:1fr minmax(0,auto) 1fr;align-items:center;gap:var(--mlv-spacing-2);min-width:0;margin-inline:calc(-1 * var(--mlv-page-inset, 0rem));margin-bottom:calc(-1 * var(--mlv-page-inset, 0rem));padding:var(--mlv-spacing-1-5) max(var(--mlv-page-inset, 0rem),var(--mlv-spacing-3));background-color:var(--mlv-page-chrome-bg, color-mix(in srgb, var(--mlv-elevation-bg-3), transparent 50%));border-top:.0625rem solid var(--mlv-page-chrome-border, var(--mlv-border-subtle));backdrop-filter:blur(1.25rem);-webkit-backdrop-filter:blur(1.25rem)}.mlv-page-dock button,.mlv-page-dock a{white-space:nowrap}.mlv-page-dock--sticky{position:sticky;bottom:0;z-index:10}.mlv-page-dock--floating:before{content:\"\";position:absolute;inset:-2.5rem 0 0;z-index:-1;background:var(--mlv-page-dock-backdrop, var(--mlv-background-base));-webkit-mask-image:linear-gradient(180deg,transparent,black 2.5rem);mask-image:linear-gradient(180deg,transparent,black 2.5rem);pointer-events:none}.mlv-page-dock--floating{padding-block-end:max(var(--mlv-spacing-1-5),env(safe-area-inset-bottom));isolation:isolate;background:transparent;border-top:none;backdrop-filter:none;-webkit-backdrop-filter:none}.mlv-page-dock__start,.mlv-page-dock__center,.mlv-page-dock__end{flex-wrap:wrap}.mlv-page-dock__start{display:flex;align-items:center;gap:var(--mlv-spacing-2);min-width:0;color:var(--mlv-text-secondary);font-size:var(--mlv-typography-body-s-size);line-height:var(--mlv-typography-body-s-line-height)}.mlv-page-dock__center{display:flex;grid-column:2;align-items:center;gap:var(--mlv-spacing-1);min-width:0}.mlv-page-dock__end{display:flex;grid-column:3;align-items:center;justify-content:flex-end;gap:var(--mlv-spacing-2)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }] } });
+
+/** Marks leading dock content, typically pending-change status text. */
+class MlvPageDockStart {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageDockStart, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPageDockStart, isStandalone: true, selector: "[mlvPageDockStart]", host: { classAttribute: "mlv-page-dock__start" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageDockStart, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvPageDockStart]',
+                    host: { class: 'mlv-page-dock__start' },
+                }]
+        }] });
+/** Marks the centered dock content, typically a floating tool cluster. */
+class MlvPageDockCenter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageDockCenter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPageDockCenter, isStandalone: true, selector: "[mlvPageDockCenter]", host: { classAttribute: "mlv-page-dock__center" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageDockCenter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvPageDockCenter]',
+                    host: { class: 'mlv-page-dock__center' },
+                }]
+        }] });
+/** Marks trailing dock content, typically the primary workflow actions. */
+class MlvPageDockEnd {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageDockEnd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPageDockEnd, isStandalone: true, selector: "[mlvPageDockEnd]", host: { classAttribute: "mlv-page-dock__end" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageDockEnd, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvPageDockEnd]',
+                    host: { class: 'mlv-page-dock__end' },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MLV_PAGE_SCROLL, MlvPage, MlvPageAside, MlvPageBreadcrumb, MlvPageContent, MlvPageDock, MlvPageDockCenter, MlvPageDockEnd, MlvPageDockStart, MlvPageEndPane, MlvPageEndPaneContent, MlvPageEndPaneTrigger, MlvPageEndSidebar, MlvPageHeader, MlvPageHeaderActions, MlvPageHeaderDescription, MlvPageHeaderIcon, MlvPageHeaderMeta, MlvPageHeaderStatus, MlvPageHeaderTabs, MlvPageHeaderTabsActions, MlvPageShell, MlvPageSidebar, MlvPageSnap, MlvPageSnapController, MlvPageSnapRegionBase, MlvPageSummary, MlvPageSummaryItem, MlvPageTitle, MlvPageTopbar };
+//# sourceMappingURL=malva-ui-core-page.mjs.map