@malva-ui/core 0.1.12

package/esm2022/page/lib/page-dock/page-dock.js

@@ -0,0 +1,128 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, ViewEncapsulation, afterNextRender, afterRenderEffect, inject, input, signal, } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MlvResizeObserverService } from '@malva-ui/cdk/utils';
+import * as i0 from "@angular/core";
+/**
+ * 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.
+ */
+export 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: [".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: [".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 }] }] } });
+//# sourceMappingURL=page-dock.js.map

package/esm2022/page/lib/page-dock/page-dock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-dock.js","sourceRoot":"","sources":["../../../../../../../libs/core/page/src/lib/page-dock/page-dock.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,UAAU,EACV,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,iBAAiB,EACjB,MAAM,EACN,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;;AAK/D;;;;GAIG;AACH,MAAM,oBAAoB,GAAG,wBAAwB,CAAC;AAEtD;;;;;GAKG;AACH,MAAM,iBAAiB,GAAG,IAAI,GAAG,EAAkB,CAAC;AAEpD;;;;;GAKG;AACH,SAAS,uBAAuB,CAAC,KAAa,EAAE,MAAqB;IACnE,yEAAyE;IACzE,0BAA0B;IAC1B,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACpC,OAAO;IACT,CAAC;IAED,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;QACpB,iBAAiB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC;SAAM,CAAC;QACN,iBAAiB,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IACvC,CAAC;IAED,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;IACtC,IAAI,iBAAiB,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;QACjC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;QAChD,OAAO;IACT,CAAC;IAED,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,iBAAiB,CAAC,MAAM,EAAE,CAAC,CAAC;IACxD,IAAI,CAAC,KAAK,CAAC,WAAW,CACpB,oBAAoB,EACpB,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC,GAAG,GAAG,IAAI,CACvC,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAiBH,MAAM,OAAO,WAAW;IACtB,0EAA0E;IACjE,MAAM,GAAG,KAAK,CAAwB,IAAI,8EACjD,SAAS,EAAE,qBAAqB,GAChC,CAAC;IAEH,2EAA2E;IAClE,UAAU,GAAG,KAAK,CAAwB,KAAK;mFAAC,CAAC;IAE1D,kEAAkE;IACjD,KAAK,GAAG,MAAM,CAA0B,UAAU,CAAC,CAAC;IAErE,0EAA0E;IACzD,eAAe,GAAG,MAAM,CAAC,wBAAwB,CAAC,CAAC;IAEpE,sEAAsE;IACrD,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAElD;;;;OAIG;IACc,eAAe,GAAG,MAAM,CAAC,CAAC;wFAAC,CAAC;IAE7C;QACE,0EAA0E;QAC1E,yCAAyC;QACzC,eAAe,CAAC,GAAG,EAAE;YACnB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;YAChE,IAAI,CAAC,eAAe;iBACjB,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;iBACnB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;iBAC1C,SAAS,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;YAClE,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;QAEH,iBAAiB,CAAC,GAAG,EAAE;YACrB,wEAAwE;YACxE,gEAAgE;YAChE,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAC7D,uBAAuB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;QACxC,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,uBAAuB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;IACxE,CAAC;uGA9CU,WAAW;2FAAX,WAAW,+fAdZ;;;;GAIT;;2FAUU,WAAW;kBAhBvB,SAAS;+BACE,eAAe,YACf;;;;GAIT,iBAEc,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,QACzC;wBACJ,KAAK,EAAE,eAAe;wBACtB,+BAA+B,EAAE,UAAU;wBAC3C,iCAAiC,EAAE,6BAA6B;qBACjE","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  ViewEncapsulation,\n  afterNextRender,\n  afterRenderEffect,\n  inject,\n  input,\n  signal,\n} from '@angular/core';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { MlvResizeObserverService } from '@malva-ui/cdk/utils';\n\n/** Visual treatment of the dock surface. */\nexport type MlvPageDockAppearance = 'bar' | 'floating';\n\n/**\n * Custom property published on `document.documentElement` while at least one\n * sticky dock is on screen. Viewport-anchored overlays — most importantly the\n * bottom toast positions — read it so they never render underneath the dock.\n */\nconst DOCK_HEIGHT_PROPERTY = '--mlv-page-dock-height';\n\n/**\n * @internal Heights contributed by the sticky docks currently alive, keyed by\n * the owning component. Two pages can be mounted at once (a route transition,\n * a page inside a dialog), so the published value is the tallest contribution\n * rather than whichever dock rendered last.\n */\nconst stickyDockHeights = new Map<object, number>();\n\n/**\n * @internal Republishes {@link DOCK_HEIGHT_PROPERTY} after a contribution\n * changed. Passing `null` withdraws the owner's contribution; the property is\n * removed entirely once the last sticky dock is gone, so a page without a dock\n * never leaves a stale offset behind.\n */\nfunction publishStickyDockHeight(owner: object, height: number | null): void {\n  // The teardown path also runs during server rendering, where there is no\n  // document to publish to.\n  if (typeof document === 'undefined') {\n    return;\n  }\n\n  if (height === null) {\n    stickyDockHeights.delete(owner);\n  } else {\n    stickyDockHeights.set(owner, height);\n  }\n\n  const root = document.documentElement;\n  if (stickyDockHeights.size === 0) {\n    root.style.removeProperty(DOCK_HEIGHT_PROPERTY);\n    return;\n  }\n\n  const tallest = Math.max(...stickyDockHeights.values());\n  root.style.setProperty(\n    DOCK_HEIGHT_PROPERTY,\n    `${Math.round(tallest * 100) / 100}px`,\n  );\n}\n\n/**\n * Bottom action bar for workflow pages. Projects content marked with\n * `[mlvPageDockStart]`, `[mlvPageDockCenter]`, and `[mlvPageDockEnd]` into a\n * three-region row and, by default, sticks to the bottom edge of the owning\n * page's scroll area. Typical composition: pending-change status at the\n * start, a floating tool cluster in the center, and discard/schedule/save/\n * publish actions at the end.\n *\n * `appearance=\"floating\"` drops the dock's own glass surface — whatever floats\n * inside it, e.g. a pill action bar, brings its own — and replaces it with the\n * `mlvFloatingContainer` recipe from `@malva-ui/cdk/floating-container`: a\n * gradient-masked backdrop plus safe-area block-end padding, so content fades\n * out beneath the actions instead of scrolling straight into them. Override\n * the backdrop fill with `--mlv-page-dock-backdrop` (defaults to\n * `--mlv-background-base`).\n *\n * The dock derives its full-bleed margins from the inherited\n * `--mlv-page-inset`, so the geometry survives a wrapper element (a `<form>`,\n * a `<section>`) between the page canvas and the dock, and collapses to zero\n * outside a page.\n *\n * While `sticky`, the dock publishes its measured height as\n * `--mlv-page-dock-height` on `document.documentElement`; bottom-anchored\n * toasts offset themselves by it so they are never covered by the dock.\n */\n@Component({\n  selector: 'mlv-page-dock',\n  template: `\n    <ng-content select=\"[mlvPageDockStart]\" />\n    <ng-content select=\"[mlvPageDockCenter]\" />\n    <ng-content select=\"[mlvPageDockEnd]\" />\n  `,\n  styleUrl: './page-dock.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'mlv-page-dock',\n    '[class.mlv-page-dock--sticky]': 'sticky()',\n    '[class.mlv-page-dock--floating]': 'appearance() === \"floating\"',\n  },\n})\nexport class MlvPageDock {\n  /** Keeps the dock attached to the bottom edge of the page scroll area. */\n  readonly sticky = input<boolean, BooleanInput>(true, {\n    transform: coerceBooleanProperty,\n  });\n\n  /** Solid bar with a top border, or a floating gradient-masked backdrop. */\n  readonly appearance = input<MlvPageDockAppearance>('bar');\n\n  /** @private Host element whose border-box height is published. */\n  private readonly _host = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  /** @private Shared resize observation used to track the dock's height. */\n  private readonly _resizeObserver = inject(MlvResizeObserverService);\n\n  /** @private Withdraws this dock's height contribution on teardown. */\n  private readonly _destroyRef = inject(DestroyRef);\n\n  /**\n   * @private Latest measured border-box height of the dock, in pixels. Only\n   * written in a browser — during server rendering it stays at 0 and nothing\n   * is published.\n   */\n  private readonly _measuredHeight = signal(0);\n\n  constructor() {\n    // `afterNextRender` / `afterRenderEffect` never run on the server, so the\n    // document is only touched in a browser.\n    afterNextRender(() => {\n      this._measuredHeight.set(this._host.nativeElement.offsetHeight);\n      this._resizeObserver\n        .observe(this._host)\n        .pipe(takeUntilDestroyed(this._destroyRef))\n        .subscribe(() => {\n          this._measuredHeight.set(this._host.nativeElement.offsetHeight);\n        });\n    });\n\n    afterRenderEffect(() => {\n      // A non-sticky dock scrolls away with the content, so it never covers a\n      // viewport-anchored overlay and must not reserve space for one.\n      const height = this.sticky() ? this._measuredHeight() : null;\n      publishStickyDockHeight(this, height);\n    });\n\n    this._destroyRef.onDestroy(() => publishStickyDockHeight(this, null));\n  }\n}\n"]}

package/esm2022/page/lib/page-dock/page-dock.slots.js

@@ -0,0 +1,39 @@
+import { Directive } from '@angular/core';
+import * as i0 from "@angular/core";
+/** Marks leading dock content, typically pending-change status text. */
+export 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. */
+export 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. */
+export 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' },
+                }]
+        }] });
+//# sourceMappingURL=page-dock.slots.js.map

package/esm2022/page/lib/page-dock/page-dock.slots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-dock.slots.js","sourceRoot":"","sources":["../../../../../../../libs/core/page/src/lib/page-dock/page-dock.slots.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;AAE1C,wEAAwE;AAKxE,MAAM,OAAO,gBAAgB;uGAAhB,gBAAgB;2FAAhB,gBAAgB;;2FAAhB,gBAAgB;kBAJ5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,IAAI,EAAE,EAAE,KAAK,EAAE,sBAAsB,EAAE;iBACxC;;AAGD,0EAA0E;AAK1E,MAAM,OAAO,iBAAiB;uGAAjB,iBAAiB;2FAAjB,iBAAiB;;2FAAjB,iBAAiB;kBAJ7B,SAAS;mBAAC;oBACT,QAAQ,EAAE,qBAAqB;oBAC/B,IAAI,EAAE,EAAE,KAAK,EAAE,uBAAuB,EAAE;iBACzC;;AAGD,2EAA2E;AAK3E,MAAM,OAAO,cAAc;uGAAd,cAAc;2FAAd,cAAc;;2FAAd,cAAc;kBAJ1B,SAAS;mBAAC;oBACT,QAAQ,EAAE,kBAAkB;oBAC5B,IAAI,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE;iBACtC","sourcesContent":["import { Directive } from '@angular/core';\n\n/** Marks leading dock content, typically pending-change status text. */\n@Directive({\n  selector: '[mlvPageDockStart]',\n  host: { class: 'mlv-page-dock__start' },\n})\nexport class MlvPageDockStart {}\n\n/** Marks the centered dock content, typically a floating tool cluster. */\n@Directive({\n  selector: '[mlvPageDockCenter]',\n  host: { class: 'mlv-page-dock__center' },\n})\nexport class MlvPageDockCenter {}\n\n/** Marks trailing dock content, typically the primary workflow actions. */\n@Directive({\n  selector: '[mlvPageDockEnd]',\n  host: { class: 'mlv-page-dock__end' },\n})\nexport class MlvPageDockEnd {}\n"]}

package/esm2022/page/lib/page-header/page-header.directives.js

@@ -0,0 +1,88 @@
+import { Directive } from '@angular/core';
+import { MlvStructural } from '@malva-ui/cdk/utils';
+import * as i0 from "@angular/core";
+/** Marks the breadcrumb template rendered at the start of a page header. */
+export 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. */
+export 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>`. */
+export 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.
+ */
+export 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. */
+export 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. */
+export 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. */
+export 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. */
+export 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. */
+export 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]' }]
+        }] });
+//# sourceMappingURL=page-header.directives.js.map

package/esm2022/page/lib/page-header/page-header.directives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.directives.js","sourceRoot":"","sources":["../../../../../../../libs/core/page/src/lib/page-header/page-header.directives.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;;AAEpD,4EAA4E;AAE5E,MAAM,OAAO,iBAAkB,SAAQ,aAAa;uGAAvC,iBAAiB;2FAAjB,iBAAiB;;2FAAjB,iBAAiB;kBAD7B,SAAS;mBAAC,EAAE,QAAQ,EAAE,qBAAqB,EAAE;;AAG9C,+DAA+D;AAE/D,MAAM,OAAO,iBAAkB,SAAQ,aAAa;uGAAvC,iBAAiB;2FAAjB,iBAAiB;;2FAAjB,iBAAiB;kBAD7B,SAAS;mBAAC,EAAE,QAAQ,EAAE,qBAAqB,EAAE;;AAG9C,mFAAmF;AAEnF,MAAM,OAAO,YAAa,SAAQ,aAAa;uGAAlC,YAAY;2FAAZ,YAAY;;2FAAZ,YAAY;kBADxB,SAAS;mBAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE;;AAGzC;;;GAGG;AAEH,MAAM,OAAO,mBAAoB,SAAQ,aAAa;uGAAzC,mBAAmB;2FAAnB,mBAAmB;;2FAAnB,mBAAmB;kBAD/B,SAAS;mBAAC,EAAE,QAAQ,EAAE,uBAAuB,EAAE;;AAGhD,+DAA+D;AAE/D,MAAM,OAAO,oBAAqB,SAAQ,aAAa;uGAA1C,oBAAoB;2FAApB,oBAAoB;;2FAApB,oBAAoB;kBADhC,SAAS;mBAAC,EAAE,QAAQ,EAAE,wBAAwB,EAAE;;AAGjD,gEAAgE;AAEhE,MAAM,OAAO,wBAAyB,SAAQ,aAAa;uGAA9C,wBAAwB;2FAAxB,wBAAwB;;2FAAxB,wBAAwB;kBADpC,SAAS;mBAAC,EAAE,QAAQ,EAAE,4BAA4B,EAAE;;AAGrD,+EAA+E;AAE/E,MAAM,OAAO,iBAAkB,SAAQ,aAAa;uGAAvC,iBAAiB;2FAAjB,iBAAiB;;2FAAjB,iBAAiB;kBAD7B,SAAS;mBAAC,EAAE,QAAQ,EAAE,qBAAqB,EAAE;;AAG9C,kEAAkE;AAElE,MAAM,OAAO,iBAAkB,SAAQ,aAAa;uGAAvC,iBAAiB;2FAAjB,iBAAiB;;2FAAjB,iBAAiB;kBAD7B,SAAS;mBAAC,EAAE,QAAQ,EAAE,qBAAqB,EAAE;;AAG9C,uEAAuE;AAEvE,MAAM,OAAO,wBAAyB,SAAQ,aAAa;uGAA9C,wBAAwB;2FAAxB,wBAAwB;;2FAAxB,wBAAwB;kBADpC,SAAS;mBAAC,EAAE,QAAQ,EAAE,4BAA4B,EAAE","sourcesContent":["import { Directive } from '@angular/core';\nimport { MlvStructural } from '@malva-ui/cdk/utils';\n\n/** Marks the breadcrumb template rendered at the start of a page header. */\n@Directive({ selector: '[mlvPageBreadcrumb]' })\nexport class MlvPageBreadcrumb extends MlvStructural {}\n\n/** Marks the decorative leading icon beside the page title. */\n@Directive({ selector: '[mlvPageHeaderIcon]' })\nexport class MlvPageHeaderIcon extends MlvStructural {}\n\n/** Marks the page title template. Consumers should project one semantic `<h1>`. */\n@Directive({ selector: '[mlvPageTitle]' })\nexport class MlvPageTitle extends MlvStructural {}\n\n/**\n * Marks inline status content rendered directly after the page title,\n * such as draft/live badges or an unsaved-changes indicator.\n */\n@Directive({ selector: '[mlvPageHeaderStatus]' })\nexport class MlvPageHeaderStatus extends MlvStructural {}\n\n/** Marks the primary actions rendered after the page title. */\n@Directive({ selector: '[mlvPageHeaderActions]' })\nexport class MlvPageHeaderActions extends MlvStructural {}\n\n/** Marks supporting descriptive content below the title row. */\n@Directive({ selector: '[mlvPageHeaderDescription]' })\nexport class MlvPageHeaderDescription extends MlvStructural {}\n\n/** Marks page metadata such as ownership, visibility, or last-updated time. */\n@Directive({ selector: '[mlvPageHeaderMeta]' })\nexport class MlvPageHeaderMeta extends MlvStructural {}\n\n/** Marks navigation tabs rendered at the bottom of the header. */\n@Directive({ selector: '[mlvPageHeaderTabs]' })\nexport class MlvPageHeaderTabs extends MlvStructural {}\n\n/** Marks actions aligned to the trailing edge of the page-tabs row. */\n@Directive({ selector: '[mlvPageHeaderTabsActions]' })\nexport class MlvPageHeaderTabsActions extends MlvStructural {}\n"]}

package/esm2022/page/lib/page-header/page-header.js

@@ -0,0 +1,124 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, contentChild, inject, input, output, } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+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 { MlvPageSnapController } from '../page/page-snap-controller';
+import { MlvPageSnap } from '../page/page-snap.directive';
+import { MLV_PAGE_SCROLL } from '../page/page-scroll.token';
+import { MlvPageBreadcrumb, MlvPageHeaderActions, MlvPageHeaderDescription, MlvPageHeaderIcon, MlvPageHeaderMeta, MlvPageHeaderStatus, MlvPageHeaderTabsActions, MlvPageHeaderTabs, MlvPageTitle, } from './page-header.directives';
+import * as i0 from "@angular/core";
+/**
+ * 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.
+ */
+export 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: [".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"] }, { 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: [".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 }] }] } });
+//# sourceMappingURL=page-header.js.map

package/esm2022/page/lib/page-header/page-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.js","sourceRoot":"","sources":["../../../../../../../libs/core/page/src/lib/page-header/page-header.ts","../../../../../../../libs/core/page/src/lib/page-header/page-header.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,iBAAiB,EACjB,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,SAAS,EACT,YAAY,GACb,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EACL,iBAAiB,EACjB,oBAAoB,EACpB,wBAAwB,EACxB,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACnB,wBAAwB,EACxB,iBAAiB,EACjB,YAAY,GACb,MAAM,0BAA0B,CAAC;;AAQlC;;;;;;;;;;GAUG;AA2BH,MAAM,OAAO,aAAa;IACxB,8DAA8D;IACrD,IAAI,GAAG,KAAK,CAA2B,IAAI;6EAAC,CAAC;IAEtD,8DAA8D;IACrD,SAAS,GAAG,KAAK,CAAC,MAAM;kFAAC,CAAC;IAEnC,qEAAqE;IAC5D,MAAM,GAAG,KAAK,CAAwB,KAAK,8EAClD,SAAS,EAAE,qBAAqB,GAChC,CAAC;IAEH;;;OAGG;IACM,IAAI,GAAG,KAAK,CAAoB,GAAG;6EAAC,CAAC;IAE9C,gEAAgE;IACvD,SAAS,GAAG,KAAK,CAAyB,OAAO;kFAAC,CAAC;IAE5D;;;OAGG;IACM,YAAY,GAAG,KAAK,CAAwB,KAAK,oFACxD,SAAS,EAAE,qBAAqB,GAChC,CAAC;IAEH,4DAA4D;IACnD,WAAW,GAAG,KAAK,CAAC,eAAe;oFAAC,CAAC;IAE9C,4CAA4C;IACnC,QAAQ,GAAG,KAAK,CAAC,kBAAkB;iFAAC,CAAC;IAE9C,sDAAsD;IAC7C,SAAS,GAAG,MAAM,EAAc,CAAC;IAE1C,0EAA0E;IACvD,cAAc,GAAG,YAAY,CAAC,iBAAiB;uFAAC,CAAC;IAEpE,8EAA8E;IAC3D,QAAQ,GAAG,YAAY,CAAC,iBAAiB;iFAAC,CAAC;IAE9D,qEAAqE;IAClD,SAAS,GAAG,YAAY,CAAC,YAAY;kFAAC,CAAC;IAE1D,8EAA8E;IAC3D,UAAU,GAAG,YAAY,CAAC,mBAAmB;mFAAC,CAAC;IAElE,wEAAwE;IACrD,WAAW,GAAG,YAAY,CAAC,oBAAoB;oFAAC,CAAC;IAEpE,yEAAyE;IACtD,eAAe,GAAG,YAAY,CAAC,wBAAwB;wFAAC,CAAC;IAE5E,+DAA+D;IAC5C,QAAQ,GAAG,YAAY,CAAC,iBAAiB;iFAAC,CAAC;IAE9D,2DAA2D;IACxC,QAAQ,GAAG,YAAY,CAAC,iBAAiB;iFAAC,CAAC;IAE9D,uFAAuF;IACpE,eAAe,GAAG,YAAY,CAAC,wBAAwB;wFAAC,CAAC;IAE5E,0EAA0E;IACzD,WAAW,GAAG,MAAM,CAAC,eAAe,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAE3E,6EAA6E;IAC5D,KAAK,GAAG,MAAM,CAAC,qBAAqB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAE3E,wEAAwE;IACrD,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC3C,IAAI,CAAC,YAAY,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;kFACtD,CAAC;IAEF,2EAA2E;IACxD,QAAQ,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,KAAK;iFAAC,CAAC;IAE7E,wEAAwE;IACrD,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,KAAK;gFAAC,CAAC;IAE3E,2EAA2E;IACxD,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC3C,IAAI,CAAC,KAAK;QACR,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,IAAI;QAC9B,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,IAAI,KAAK,CAAC;kFAC5C,CAAC;uGAvFS,aAAa;2FAAb,aAAa,k8CAuCyB,iBAAiB,2FAGvB,iBAAiB,4FAGhB,YAAY,6FAGX,mBAAmB,8FAGlB,oBAAoB,kGAGhB,wBAAwB,2FAG/B,iBAAiB,2FAGjB,iBAAiB,kGAGV,wBAAwB,gEC/I5E,g4GAoHA,q1KD3DI,gBAAgB,oJAChB,UAAU,kPACV,iBAAiB,mEACjB,eAAe,iEACf,SAAS,2DACT,YAAY,8DACZ,SAAS,iIACT,OAAO,wFACP,aAAa,4DACb,WAAW;;2FAcF,aAAa;kBA1BzB,SAAS;+BACE,iBAAiB,WAClB;wBACP,gBAAgB;wBAChB,UAAU;wBACV,iBAAiB;wBACjB,eAAe;wBACf,SAAS;wBACT,YAAY;wBACZ,SAAS;wBACT,OAAO;wBACP,aAAa;wBACb,WAAW;qBACZ,iBAGc,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,QACzC;wBACJ,KAAK,EAAE,iBAAiB;wBACxB,iCAAiC,EAAE,UAAU;wBAC7C,iCAAiC,EAAE,gBAAgB;wBACnD,sCAAsC,EAAE,0BAA0B;wBAClE,mCAAmC,EAAE,aAAa;qBACnD;w5BAyCgD,iBAAiB,0FAGvB,iBAAiB,2FAGhB,YAAY,4FAGX,mBAAmB,6FAGlB,oBAAoB,iGAGhB,wBAAwB,0FAG/B,iBAAiB,0FAGjB,iBAAiB,iGAGV,wBAAwB","sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  contentChild,\n  inject,\n  input,\n  output,\n} from '@angular/core';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { RouterLink } from '@angular/router';\nimport {\n  LucideChevronLeft,\n  LucideChevronUp,\n  LucidePin,\n  LucidePinOff,\n} from '@lucide/angular';\nimport { MlvButton } from '@malva-ui/core/button';\nimport { MlvLink, MlvLinkBefore } from '@malva-ui/core/link';\nimport { MlvPageSnapController } from '../page/page-snap-controller';\nimport { MlvPageSnap } from '../page/page-snap.directive';\nimport { MLV_PAGE_SCROLL } from '../page/page-scroll.token';\nimport {\n  MlvPageBreadcrumb,\n  MlvPageHeaderActions,\n  MlvPageHeaderDescription,\n  MlvPageHeaderIcon,\n  MlvPageHeaderMeta,\n  MlvPageHeaderStatus,\n  MlvPageHeaderTabsActions,\n  MlvPageHeaderTabs,\n  MlvPageTitle,\n} from './page-header.directives';\n\n/** Visual scale of the page header. */\nexport type MlvPageHeaderSize = 'm' | 's';\n\n/** Horizontal alignment of the tabs row inside the page header. */\nexport type MlvPageHeaderTabsAlign = 'start' | 'center';\n\n/**\n * Structured page heading with optional breadcrumb, actions, status, metadata,\n * and tabs. `size=\"s\"` renders the compact record-editor header.\n *\n * Inside `main[mlvPage]` the header participates in the scroll-scrubbed snap\n * timeline (`--mlv-page-snap`): the title interpolates down one type scale and\n * the breadcrumb and tabs rows collapse, each over its own stagger window.\n * With `snapControls`, chevron/pin controls float on the header's bottom edge\n * — always visible while the header is sticky. The chevron snaps the chrome\n * open/closed; the pin freezes the current state regardless of scrolling.\n */\n@Component({\n  selector: 'mlv-page-header',\n  imports: [\n    NgTemplateOutlet,\n    RouterLink,\n    LucideChevronLeft,\n    LucideChevronUp,\n    LucidePin,\n    LucidePinOff,\n    MlvButton,\n    MlvLink,\n    MlvLinkBefore,\n    MlvPageSnap,\n  ],\n  templateUrl: './page-header.html',\n  styleUrl: './page-header.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'mlv-page-header',\n    '[class.mlv-page-header--sticky]': 'sticky()',\n    '[class.mlv-page-header--size-s]': 'size() === \"s\"',\n    '[class.mlv-page-header--tabs-center]': 'tabsAlign() === \"center\"',\n    '[class.mlv-page-header--scrolled]': '_scrolled()',\n  },\n})\nexport class MlvPageHeader {\n  /** Optional router destination for the built-in back link. */\n  readonly back = input<string | string[] | null>(null);\n\n  /** Accessible and visible text for the built-in back link. */\n  readonly backLabel = input('Back');\n\n  /** Makes this header sticky independently of the containing page. */\n  readonly sticky = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * Visual scale. `'m'` is the default hero header; `'s'` is the compact\n   * single-row variant for record-editor pages, with a smaller title scale.\n   */\n  readonly size = input<MlvPageHeaderSize>('m');\n\n  /** Aligns the tabs row to the start (default) or centers it. */\n  readonly tabsAlign = input<MlvPageHeaderTabsAlign>('start');\n\n  /**\n   * Shows the floating chevron/pin snap controls on the header's bottom edge.\n   * Requires the header to be inside `main[mlvPage]`.\n   */\n  readonly snapControls = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /** Accessible label for the chevron snap-toggle control. */\n  readonly toggleLabel = input('Toggle header');\n\n  /** Accessible label for the pin control. */\n  readonly pinLabel = input('Pin header state');\n\n  /** Emits when the built-in back link is activated. */\n  readonly backClick = output<MouseEvent>();\n\n  /** @protected Breadcrumb template projected via `[mlvPageBreadcrumb]`. */\n  protected readonly _breadcrumbRef = contentChild(MlvPageBreadcrumb);\n\n  /** @protected Decorative leading icon projected via `[mlvPageHeaderIcon]`. */\n  protected readonly _iconRef = contentChild(MlvPageHeaderIcon);\n\n  /** @protected Page title template projected via `[mlvPageTitle]`. */\n  protected readonly _titleRef = contentChild(MlvPageTitle);\n\n  /** @protected Inline status content projected via `[mlvPageHeaderStatus]`. */\n  protected readonly _statusRef = contentChild(MlvPageHeaderStatus);\n\n  /** @protected Header actions projected via `[mlvPageHeaderActions]`. */\n  protected readonly _actionsRef = contentChild(MlvPageHeaderActions);\n\n  /** @protected Description projected via `[mlvPageHeaderDescription]`. */\n  protected readonly _descriptionRef = contentChild(MlvPageHeaderDescription);\n\n  /** @protected Metadata projected via `[mlvPageHeaderMeta]`. */\n  protected readonly _metaRef = contentChild(MlvPageHeaderMeta);\n\n  /** @protected Tabs projected via `[mlvPageHeaderTabs]`. */\n  protected readonly _tabsRef = contentChild(MlvPageHeaderTabs);\n\n  /** @protected Trailing tabs-row actions projected via `[mlvPageHeaderTabsActions]`. */\n  protected readonly _tabsActionsRef = contentChild(MlvPageHeaderTabsActions);\n\n  /** @private Scroll state of the owning page, when rendered inside one. */\n  private readonly _pageScroll = inject(MLV_PAGE_SCROLL, { optional: true });\n\n  /** @private Snap controller of the owning page, when rendered inside one. */\n  private readonly _snap = inject(MlvPageSnapController, { optional: true });\n\n  /** @protected Controller behind the floating controls, when enabled. */\n  protected readonly _controls = computed(() =>\n    this.snapControls() && this._snap ? this._snap : null,\n  );\n\n  /** @protected True while the chrome is closer to snapped than expanded. */\n  protected readonly _snapped = computed(() => this._snap?.snapped() ?? false);\n\n  /** @protected True while the snap state is frozen against scrolling. */\n  protected readonly _pinned = computed(() => this._snap?.pinned() ?? false);\n\n  /** @protected True while the owning page is scrolled away from the top. */\n  protected readonly _scrolled = computed(() =>\n    this._snap\n      ? this._snap.progress() > 0.02\n      : (this._pageScroll?.scrolled() ?? false),\n  );\n}\n","@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"]}