@malva-ui/core 0.1.12 → 0.1.14

package/types/malva-ui-core-page.d.ts

@@ -0,0 +1,799 @@
+import * as _angular_core from '@angular/core';
+import { Signal, InjectionToken, TemplateRef } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { MlvOverlayInitialFocus } from '@malva-ui/cdk/overlay';
+import { MlvBreakpoint, MlvStructural } from '@malva-ui/cdk/utils';
+
+/**
+ * A region of the page chrome that collapses on the snap timeline and can be
+ * revealed ahead of it. Implemented by `MlvPageSnap`, which registers itself
+ * with the controller so `expand()` can make collapsed chrome focusable.
+ */
+interface MlvPageSnapRegion {
+    /**
+     * Reveals the region immediately, before any tween runs, so a `focus()`
+     * issued in the same task is not refused on hidden chrome.
+     */
+    reveal(): void;
+    /**
+     * Re-applies the region's own hidden state to the DOM. Called when the
+     * reveal window ends, because a reveal that never round-tripped through
+     * change detection leaves the host binding holding a stale value.
+     */
+    syncHiddenState(): void;
+}
+/**
+ * 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".
+ */
+declare class MlvPageSnapController {
+    /** @private Raw scroll-derived progress, 0 (top) .. 1 (fully snapped). */
+    private readonly _scrollProgress;
+    /**
+     * @private Frozen progress while pinned or after a manual toggle;
+     * `null` means the progress follows the scroll position.
+     */
+    private readonly _frozen;
+    /** @private How the current frozen state was produced. */
+    private _pinOrigin;
+    /**
+     * @private Scale applied by `MlvPage` to the geometry-compensation spacer;
+     * tweens to 0 while manually pinned collapsed (dead space reclaimed).
+     */
+    private readonly _spacerScale;
+    /** @private Frame handles of the running tweens, per animated signal. */
+    private readonly _tweenFrames;
+    /** @private Adapter so the frozen tween can share the signal tween helper. */
+    private readonly _frozenNumber;
+    /** @private Cancels pending tweens when the owning page is destroyed. */
+    private readonly _destroyRef;
+    /** @private Snap regions that `expand()` reveals ahead of the tween. */
+    private readonly _regions;
+    /** @private Backs the `revealing` bridge flag. */
+    private readonly _revealing;
+    /** Effective snap progress: 0 fully expanded, 1 fully snapped. */
+    readonly progress: Signal<number>;
+    /** True while the chrome state is frozen and ignores scrolling. */
+    readonly pinned: Signal<boolean>;
+    /** True once the chrome is closer to its snapped state than the open one. */
+    readonly snapped: Signal<boolean>;
+    /**
+     * @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`.
+     */
+    readonly revealing: Signal<boolean>;
+    /**
+     * Multiplier for the geometry-compensation spacer, 1 (full compensation)
+     * .. 0 (reclaimed). Consumed by `MlvPage`.
+     */
+    readonly spacerScale: Signal<number>;
+    constructor();
+    /**
+     * @internal Registers a snap region so `expand()` can reveal it. Called by
+     * `MlvPageSnap`; the returned callback unregisters on destroy.
+     */
+    registerRegion(region: MlvPageSnapRegion): () => void;
+    /**
+     * @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: number, snapRange: number): void;
+    /**
+     * 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: boolean): void;
+    /**
+     * 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(): void;
+    /**
+     * 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(): void;
+    /**
+     * 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(): void;
+    /**
+     * @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.
+     */
+    private _endReveal;
+    /** @private Tweens the frozen progress via the shared signal tween. */
+    private _animateFrozenTo;
+    /** @private rAF tween so manual state changes stay smooth. */
+    private _animateSignal;
+    /** @private Stops the running tween of one signal, if any. */
+    private _cancelTween;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageSnapController, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<MlvPageSnapController>;
+}
+
+/**
+ * Scroll state of the owning page's scroll container, exposed to descendants
+ * such as `mlv-page-header` and `mlv-page-summary` for scroll-linked
+ * behaviour (sticky snap shadows, auto-collapsing summary strips).
+ */
+interface MlvPageScrollState {
+    /** Current vertical scroll offset of the page scroll owner, in pixels. */
+    readonly scrollTop: Signal<number>;
+    /** True once the page has scrolled past a small hysteresis threshold. */
+    readonly scrolled: Signal<boolean>;
+}
+/**
+ * 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.
+ */
+declare const MLV_PAGE_SCROLL: InjectionToken<MlvPageScrollState>;
+
+/** Controls which element owns vertical page scrolling. */
+type MlvPageScroll = 'auto' | 'none';
+/** Controls the inset around projected page content. */
+type MlvPagePadding = 'none' | 's' | 'm' | 'l';
+/** Controls whether the page uses the anchored application-canvas treatment. */
+type MlvPageSurface = 'anchored' | 'flat';
+/**
+ * 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.
+ */
+declare class MlvPage implements MlvPageScrollState {
+    /** Unique landmark id; set explicitly when targeting the page from a skip link. */
+    readonly id: _angular_core.InputSignal<string>;
+    /** Selects whether the page or a consumer-owned region handles scrolling. */
+    readonly scroll: _angular_core.InputSignal<MlvPageScroll>;
+    /** Optional maximum width for the centred inner page canvas. */
+    readonly maxWidth: _angular_core.InputSignal<string | null>;
+    /** Selects the responsive inset applied around projected page content. */
+    readonly padding: _angular_core.InputSignal<MlvPagePadding>;
+    /** Selects the anchored rounded canvas or a completely flat surface. */
+    readonly surface: _angular_core.InputSignal<MlvPageSurface>;
+    /** Makes projected page headers sticky within this page's scroll container. */
+    readonly stickyHeader: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Scroll distance in pixels mapped onto the full snap timeline: scrolling
+     * this far takes the top chrome from fully expanded to fully snapped.
+     */
+    readonly snapRange: _angular_core.InputSignal<number>;
+    /** Current vertical scroll offset of the page scroll owner, in pixels. */
+    get scrollTop(): MlvPageScrollState['scrollTop'];
+    /** True once the page has scrolled past a small hysteresis threshold. */
+    get scrolled(): MlvPageScrollState['scrolled'];
+    /**
+     * 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(): MlvPageSnapController;
+    /** @private Writable source behind the public `scrollTop` signal. */
+    private readonly _scrollTop;
+    /** @private Writable source behind the public `scrolled` signal. */
+    private readonly _scrolled;
+    /** @private The page-owned scrollbar whose viewport is observed. */
+    private readonly _scrollbar;
+    /** @private Zone reference; the scroll listener runs outside the zone. */
+    private readonly _ngZone;
+    /** @private Cleans up the native scroll listener. */
+    private readonly _destroyRef;
+    /** @private Snap state provided to descendants and scrubbed from scroll. */
+    private readonly _snap;
+    /** @private Host element carrying the published snap custom property. */
+    private readonly _elementRef;
+    constructor();
+    /** @private Direct chrome children whose snapping height is compensated. */
+    private _snapChrome;
+    /** @private Expanded (progress 0) chrome height, the compensation baseline. */
+    private _snapExpandedHeight;
+    /**
+     * @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.
+     */
+    private _measureSnapOffset;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPage, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvPage, "main[mlvPage]", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "scroll": { "alias": "scroll"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "snapRange": { "alias": "snapRange"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * 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.
+ */
+declare abstract class MlvPageSnapRegionBase implements MlvPageSnapRegion {
+    /**
+     * @protected Snap state of the owning page, when rendered inside one.
+     * Absent outside `main[mlvPage]`, where nothing collapses.
+     */
+    protected readonly _snapController: MlvPageSnapController | null;
+    /** @private Host element, for the eager reveal and the focus containment test. */
+    private readonly _regionHost;
+    /** @private True while this region contains the active element. */
+    private readonly _focusWithin;
+    /**
+     * @protected True once the timeline has fully elapsed this region's own
+     * window — the collapse the exceptions above opt out of.
+     */
+    protected abstract readonly _elapsed: Signal<boolean>;
+    /**
+     * @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.
+     */
+    protected readonly _revealed: Signal<boolean>;
+    /**
+     * @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.
+     */
+    protected readonly _hidden: Signal<boolean>;
+    constructor();
+    /**
+     * 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(): void;
+    /**
+     * 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(): void;
+    /** @protected Records that focus entered this region. */
+    protected _onRegionFocusIn(): void;
+    /**
+     * @protected Releases the focus reveal only when focus actually left the
+     * region — moving between two controls inside it also fires `focusout`.
+     */
+    protected _onRegionFocusOut(event: FocusEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageSnapRegionBase, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvPageSnapRegionBase, never, never, {}, {}, never, never, true, never>;
+}
+
+/** How an element behaves while the page chrome snaps. */
+type MlvPageSnapMode = 'hide' | 'fade' | 'keep';
+/**
+ * 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>
+ * ```
+ */
+declare class MlvPageSnap extends MlvPageSnapRegionBase {
+    /** Behaviour on the snap timeline. An empty attribute value means `hide`. */
+    readonly mlvPageSnap: _angular_core.InputSignal<"" | MlvPageSnapMode>;
+    /** Progress at which this element starts reacting (0..1). */
+    readonly snapFrom: _angular_core.InputSignal<number>;
+    /** Progress at which this element reaches its final state (0..1). */
+    readonly snapTo: _angular_core.InputSignal<number>;
+    /**
+     * Nominal expanded size used by the `hide` behaviour's height scrub.
+     * Must be at least the element's natural height.
+     */
+    readonly snapSize: _angular_core.InputSignal<string>;
+    /** @protected Effective behaviour; the bare attribute defaults to `hide`. */
+    protected readonly _mode: _angular_core.Signal<MlvPageSnapMode>;
+    /** @protected Multiplier remapping page progress into the stagger window. */
+    protected readonly _scale: _angular_core.Signal<number>;
+    /**
+     * @protected Fully elapsed once the page progress passes this element's
+     * `snapTo`; a `keep` element never elapses.
+     */
+    protected readonly _elapsed: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageSnap, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvPageSnap, "[mlvPageSnap]", never, { "mlvPageSnap": { "alias": "mlvPageSnap"; "required": false; "isSignal": true; }; "snapFrom": { "alias": "snapFrom"; "required": false; "isSignal": true; }; "snapTo": { "alias": "snapTo"; "required": false; "isSignal": true; }; "snapSize": { "alias": "snapSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Application-page shell that joins global top navigation, one or two sidebars,
+ * and the Page canvas without taking ownership of their component behaviour.
+ */
+declare class MlvPageShell {
+    /**
+     * Optional CSS color for the shell chrome background.
+     * Browser-resolved values such as `var(--brand-color)` are supported.
+     */
+    readonly color: _angular_core.InputSignal<string | null>;
+    /**
+     * Optional CSS color overriding the automatically selected chrome foreground.
+     */
+    readonly foreground: _angular_core.InputSignal<string | null>;
+    /** @protected Browser-resolved background applied through the host style. */
+    protected readonly _resolvedBackground: _angular_core.WritableSignal<string | null>;
+    /** @protected Browser-resolved foreground applied through the host style. */
+    protected readonly _resolvedForeground: _angular_core.WritableSignal<string | null>;
+    /** @private Native shell host used as the CSS inheritance context. */
+    private readonly _host;
+    /** @private Angular destruction hook for frame and observer cleanup. */
+    private readonly _destroyRef;
+    /** @private Identifier of the pending color-resolution animation frame. */
+    private _resolutionFrameId;
+    /** @private Watches theme and custom-property changes in the shell cascade. */
+    private _mutationObserver;
+    constructor();
+    /**
+     * @private Observes the shell and its ancestors for cascade-affecting
+     * attribute changes. One observer can watch every node in the chain.
+     */
+    private _startColorObservation;
+    /**
+     * @private Coalesces CSS reads and signal writes into the next render frame.
+     */
+    private _scheduleColorResolution;
+    /**
+     * @private Resolves the input colors and updates the internal host variables.
+     */
+    private _resolveColors;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageShell, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvPageShell, "mlv-page-shell", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "foreground": { "alias": "foreground"; "required": false; "isSignal": true; }; }, {}, never, ["[mlvPageTopbar]", "[mlvPageSidebar]", "*", "[mlvPageEndSidebar], mlv-page-end-pane"], true, never>;
+}
+
+/** Marks the global top-navigation element projected into `mlv-page-shell`. */
+declare class MlvPageTopbar {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageTopbar, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvPageTopbar, "[mlvPageTopbar]", never, {}, {}, never, never, true, never>;
+}
+/** Marks the primary navigation sidebar projected into `mlv-page-shell`. */
+declare class MlvPageSidebar {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageSidebar, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvPageSidebar, "[mlvPageSidebar]", never, {}, {}, never, never, true, never>;
+}
+/** Marks an optional second, trailing sidebar projected into `mlv-page-shell`. */
+declare class MlvPageEndSidebar {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageEndSidebar, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvPageEndSidebar, "[mlvPageEndSidebar]", never, {}, {}, never, never, true, never>;
+}
+
+/** Owns the single template rendered by a responsive Page end pane. */
+declare class MlvPageEndPaneContent {
+    /** Template projected into either the inline aside or compact Drawer. */
+    readonly templateRef: TemplateRef<unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageEndPaneContent, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvPageEndPaneContent, "ng-template[mlvPageEndPaneContent]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Responsive trailing Page pane that renders one content template inline or
+ * in a modal Drawer while preserving one logical open and focus lifecycle.
+ */
+declare class MlvPageEndPane {
+    /** Two-way bindable logical open state shared by both renderers. */
+    readonly opened: _angular_core.ModelSignal<boolean>;
+    /** Inline pane width and compact Drawer size. */
+    readonly width: _angular_core.InputSignal<string>;
+    /** Breakpoint below which the pane renders in a modal Drawer. */
+    readonly collapseBelow: _angular_core.InputSignal<MlvBreakpoint | null>;
+    /** Accessible name applied to the active aside or dialog surface. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Whether a compact Drawer's backdrop click closes the logical pane. */
+    readonly closeOnBackdropClick: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Whether Escape closes the logical pane in compact Drawer mode. */
+    readonly closeOnEscape: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Initial focus strategy used by the compact Drawer renderer. */
+    readonly initialFocus: _angular_core.InputSignal<MlvOverlayInitialFocus>;
+    /** Emitted once for each logical false-to-true open transition. */
+    readonly afterOpened: _angular_core.OutputEmitterRef<void>;
+    /** Emitted once after a logical close's active renderer is gone. */
+    readonly afterClosed: _angular_core.OutputEmitterRef<void>;
+    /** Stable id referenced by every Page end-pane trigger. */
+    readonly panelId: string;
+    /** @protected Single content template shared by both renderers. */
+    protected readonly _content: _angular_core.Signal<MlvPageEndPaneContent>;
+    /** @protected Whether the configured breakpoint currently selects Drawer rendering. */
+    protected readonly _compact: _angular_core.Signal<boolean>;
+    /** @protected Width reserved in Page Shell only for an open inline pane. */
+    protected readonly _hostWidth: _angular_core.Signal<string>;
+    /** @private Shared viewport breakpoint state. */
+    private readonly _breakpoints;
+    /** @private Injector used to finish inline closes after the renderer is removed. */
+    private readonly _injector;
+    /** @private Logical state observed during the preceding effect pass. */
+    private _previousOpened;
+    /** @private Element focused immediately before the current logical open. */
+    private _restoreTarget;
+    /** @private Whether a real logical close is waiting for renderer disposal. */
+    private _closePending;
+    constructor();
+    /** Opens the logical pane. */
+    open(): void;
+    /** Closes the logical pane and waits for its active renderer to disappear. */
+    close(): void;
+    /** Toggles the logical pane open state. */
+    toggle(): void;
+    /** @protected Synchronizes internal Drawer dismissal with the logical model. */
+    protected _onDrawerOpenedChange(opened: boolean): void;
+    /** @protected Completes a pending logical close after the Drawer is disposed. */
+    protected _onDrawerDisposed(): void;
+    /** @private Defers inline completion until Angular removes the aside view. */
+    private _scheduleInlineCloseCompletion;
+    /** @private Restores focus and emits one close event for a real logical close. */
+    private _completeClose;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageEndPane, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvPageEndPane, "mlv-page-end-pane", never, { "opened": { "alias": "opened"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "collapseBelow": { "alias": "collapseBelow"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "initialFocus": { "alias": "initialFocus"; "required": false; "isSignal": true; }; }, { "opened": "openedChange"; "afterOpened": "afterOpened"; "afterClosed": "afterClosed"; }, ["_content"], never, true, never>;
+}
+
+/** Native-button trigger that toggles and describes a Page end pane. */
+declare class MlvPageEndPaneTrigger {
+    /** Page end pane controlled by this native button. */
+    readonly mlvPageEndPaneTrigger: _angular_core.InputSignal<MlvPageEndPane>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageEndPaneTrigger, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvPageEndPaneTrigger, "button[mlvPageEndPaneTrigger]", never, { "mlvPageEndPaneTrigger": { "alias": "mlvPageEndPaneTrigger"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Marks the breadcrumb template rendered at the start of a page header. */
+declare class MlvPageBreadcrumb extends MlvStructural {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageBreadcrumb, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvPageBreadcrumb, "[mlvPageBreadcrumb]", never, {}, {}, never, never, true, never>;
+}
+/** Marks the decorative leading icon beside the page title. */
+declare class MlvPageHeaderIcon extends MlvStructural {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageHeaderIcon, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvPageHeaderIcon, "[mlvPageHeaderIcon]", never, {}, {}, never, never, true, never>;
+}
+/** Marks the page title template. Consumers should project one semantic `<h1>`. */
+declare class MlvPageTitle extends MlvStructural {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageTitle, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvPageTitle, "[mlvPageTitle]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Marks inline status content rendered directly after the page title,
+ * such as draft/live badges or an unsaved-changes indicator.
+ */
+declare class MlvPageHeaderStatus extends MlvStructural {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageHeaderStatus, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvPageHeaderStatus, "[mlvPageHeaderStatus]", never, {}, {}, never, never, true, never>;
+}
+/** Marks the primary actions rendered after the page title. */
+declare class MlvPageHeaderActions extends MlvStructural {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageHeaderActions, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvPageHeaderActions, "[mlvPageHeaderActions]", never, {}, {}, never, never, true, never>;
+}
+/** Marks supporting descriptive content below the title row. */
+declare class MlvPageHeaderDescription extends MlvStructural {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageHeaderDescription, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvPageHeaderDescription, "[mlvPageHeaderDescription]", never, {}, {}, never, never, true, never>;
+}
+/** Marks page metadata such as ownership, visibility, or last-updated time. */
+declare class MlvPageHeaderMeta extends MlvStructural {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageHeaderMeta, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvPageHeaderMeta, "[mlvPageHeaderMeta]", never, {}, {}, never, never, true, never>;
+}
+/** Marks navigation tabs rendered at the bottom of the header. */
+declare class MlvPageHeaderTabs extends MlvStructural {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageHeaderTabs, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvPageHeaderTabs, "[mlvPageHeaderTabs]", never, {}, {}, never, never, true, never>;
+}
+/** Marks actions aligned to the trailing edge of the page-tabs row. */
+declare class MlvPageHeaderTabsActions extends MlvStructural {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageHeaderTabsActions, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvPageHeaderTabsActions, "[mlvPageHeaderTabsActions]", never, {}, {}, never, never, true, never>;
+}
+
+/** Visual scale of the page header. */
+type MlvPageHeaderSize = 'm' | 's';
+/** Horizontal alignment of the tabs row inside the page header. */
+type MlvPageHeaderTabsAlign = 'start' | 'center';
+/**
+ * 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.
+ */
+declare class MlvPageHeader {
+    /** Optional router destination for the built-in back link. */
+    readonly back: _angular_core.InputSignal<string | string[] | null>;
+    /** Accessible and visible text for the built-in back link. */
+    readonly backLabel: _angular_core.InputSignal<string>;
+    /** Makes this header sticky independently of the containing page. */
+    readonly sticky: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Visual scale. `'m'` is the default hero header; `'s'` is the compact
+     * single-row variant for record-editor pages, with a smaller title scale.
+     */
+    readonly size: _angular_core.InputSignal<MlvPageHeaderSize>;
+    /** Aligns the tabs row to the start (default) or centers it. */
+    readonly tabsAlign: _angular_core.InputSignal<MlvPageHeaderTabsAlign>;
+    /**
+     * Shows the floating chevron/pin snap controls on the header's bottom edge.
+     * Requires the header to be inside `main[mlvPage]`.
+     */
+    readonly snapControls: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Accessible label for the chevron snap-toggle control. */
+    readonly toggleLabel: _angular_core.InputSignal<string>;
+    /** Accessible label for the pin control. */
+    readonly pinLabel: _angular_core.InputSignal<string>;
+    /** Emits when the built-in back link is activated. */
+    readonly backClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    /** @protected Breadcrumb template projected via `[mlvPageBreadcrumb]`. */
+    protected readonly _breadcrumbRef: _angular_core.Signal<MlvPageBreadcrumb | undefined>;
+    /** @protected Decorative leading icon projected via `[mlvPageHeaderIcon]`. */
+    protected readonly _iconRef: _angular_core.Signal<MlvPageHeaderIcon | undefined>;
+    /** @protected Page title template projected via `[mlvPageTitle]`. */
+    protected readonly _titleRef: _angular_core.Signal<MlvPageTitle | undefined>;
+    /** @protected Inline status content projected via `[mlvPageHeaderStatus]`. */
+    protected readonly _statusRef: _angular_core.Signal<MlvPageHeaderStatus | undefined>;
+    /** @protected Header actions projected via `[mlvPageHeaderActions]`. */
+    protected readonly _actionsRef: _angular_core.Signal<MlvPageHeaderActions | undefined>;
+    /** @protected Description projected via `[mlvPageHeaderDescription]`. */
+    protected readonly _descriptionRef: _angular_core.Signal<MlvPageHeaderDescription | undefined>;
+    /** @protected Metadata projected via `[mlvPageHeaderMeta]`. */
+    protected readonly _metaRef: _angular_core.Signal<MlvPageHeaderMeta | undefined>;
+    /** @protected Tabs projected via `[mlvPageHeaderTabs]`. */
+    protected readonly _tabsRef: _angular_core.Signal<MlvPageHeaderTabs | undefined>;
+    /** @protected Trailing tabs-row actions projected via `[mlvPageHeaderTabsActions]`. */
+    protected readonly _tabsActionsRef: _angular_core.Signal<MlvPageHeaderTabsActions | undefined>;
+    /** @private Scroll state of the owning page, when rendered inside one. */
+    private readonly _pageScroll;
+    /** @private Snap controller of the owning page, when rendered inside one. */
+    private readonly _snap;
+    /** @protected Controller behind the floating controls, when enabled. */
+    protected readonly _controls: _angular_core.Signal<MlvPageSnapController | null>;
+    /** @protected True while the chrome is closer to snapped than expanded. */
+    protected readonly _snapped: _angular_core.Signal<boolean>;
+    /** @protected True while the snap state is frozen against scrolling. */
+    protected readonly _pinned: _angular_core.Signal<boolean>;
+    /** @protected True while the owning page is scrolled away from the top. */
+    protected readonly _scrolled: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvPageHeader, "mlv-page-header", never, { "back": { "alias": "back"; "required": false; "isSignal": true; }; "backLabel": { "alias": "backLabel"; "required": false; "isSignal": true; }; "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "tabsAlign": { "alias": "tabsAlign"; "required": false; "isSignal": true; }; "snapControls": { "alias": "snapControls"; "required": false; "isSignal": true; }; "toggleLabel": { "alias": "toggleLabel"; "required": false; "isSignal": true; }; "pinLabel": { "alias": "pinLabel"; "required": false; "isSignal": true; }; }, { "backClick": "backClick"; }, ["_breadcrumbRef", "_iconRef", "_titleRef", "_statusRef", "_actionsRef", "_descriptionRef", "_metaRef", "_tabsRef", "_tabsActionsRef"], ["mlv-page-summary"], true, never>;
+}
+
+/** Marks content rendered in the complementary page-aside landmark. */
+declare class MlvPageAside extends MlvStructural {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageAside, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvPageAside, "[mlvPageAside]", never, {}, {}, never, never, true, never>;
+}
+
+/** Placement of the complementary page column. */
+type MlvPageAsidePlacement = 'start' | 'end';
+/** Spacing between the main page column and its complementary aside. */
+type MlvPageContentGap = 's' | 'm' | 'l';
+/** Responsive main-content and complementary-aside grid. */
+declare class MlvPageContent {
+    /** Places the complementary column before or after the main content. */
+    readonly asidePlacement: _angular_core.InputSignal<MlvPageAsidePlacement>;
+    /** Preferred width of the complementary column while rendered inline. */
+    readonly asideWidth: _angular_core.InputSignal<string>;
+    /** Keeps the complementary column visible while the page scrolls. */
+    readonly asideSticky: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Selects the spacing between the main and complementary columns. */
+    readonly gap: _angular_core.InputSignal<MlvPageContentGap>;
+    /** Container width in CSS pixels below which the columns stack. */
+    readonly stackBelow: _angular_core.InputSignal<number>;
+    /** Accessible name for the complementary `<aside>` landmark. */
+    readonly asideLabel: _angular_core.InputSignal<string>;
+    /** @protected Optional complementary content projected via `[mlvPageAside]`. */
+    protected readonly _asideRef: _angular_core.Signal<MlvPageAside | undefined>;
+    /**
+     * @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.
+     */
+    protected readonly _hasAside: _angular_core.Signal<boolean>;
+    /** @private Host element observed so responsiveness follows available content width. */
+    private readonly _elementRef;
+    /** @private Shared observer used to measure the page-content container. */
+    private readonly _resizeObserver;
+    /** @private Destroy scope for the resize-observer subscription. */
+    private readonly _destroyRef;
+    /** @private Latest measured inline size in CSS pixels. */
+    private readonly _containerWidth;
+    /** @protected Whether the current container is narrower than `stackBelow`. */
+    protected readonly _stacked: _angular_core.Signal<boolean>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageContent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvPageContent, "mlv-page-content", never, { "asidePlacement": { "alias": "asidePlacement"; "required": false; "isSignal": true; }; "asideWidth": { "alias": "asideWidth"; "required": false; "isSignal": true; }; "asideSticky": { "alias": "asideSticky"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "stackBelow": { "alias": "stackBelow"; "required": false; "isSignal": true; }; "asideLabel": { "alias": "asideLabel"; "required": false; "isSignal": true; }; }, {}, ["_asideRef"], ["*"], true, never>;
+}
+
+/**
+ * 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}.
+ */
+declare class MlvPageSummary extends MlvPageSnapRegionBase {
+    /** Accessible name for the facts region. */
+    readonly summaryLabel: _angular_core.InputSignal<string>;
+    /** Progress at which the strip starts collapsing (0..1). */
+    readonly snapFrom: _angular_core.InputSignal<number>;
+    /** Progress at which the strip is fully collapsed (0..1). */
+    readonly snapTo: _angular_core.InputSignal<number>;
+    /** @protected Multiplier remapping page progress into the stagger window. */
+    protected readonly _scale: _angular_core.Signal<number>;
+    /**
+     * @protected True once the strip has fully collapsed; unless it holds
+     * focus, that also removes it from the accessibility tree and tab order.
+     */
+    protected readonly _elapsed: _angular_core.Signal<boolean>;
+    /** @protected Natural height of the items row, driving the height scrub. */
+    protected readonly _measuredHeight: _angular_core.WritableSignal<number | null>;
+    /** @private The measured items row. */
+    private readonly _items;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageSummary, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvPageSummary, "mlv-page-summary", never, { "summaryLabel": { "alias": "summaryLabel"; "required": false; "isSignal": true; }; "snapFrom": { "alias": "snapFrom"; "required": false; "isSignal": true; }; "snapTo": { "alias": "snapTo"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * One labelled key fact inside `mlv-page-summary`. The label renders above
+ * the projected value content.
+ */
+declare class MlvPageSummaryItem {
+    /** Visible label describing the projected value. */
+    readonly label: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageSummaryItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvPageSummaryItem, "mlv-page-summary-item", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/** Visual treatment of the dock surface. */
+type MlvPageDockAppearance = 'bar' | 'floating';
+/**
+ * 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.
+ */
+declare class MlvPageDock {
+    /** Keeps the dock attached to the bottom edge of the page scroll area. */
+    readonly sticky: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Solid bar with a top border, or a floating gradient-masked backdrop. */
+    readonly appearance: _angular_core.InputSignal<MlvPageDockAppearance>;
+    /** @private Host element whose border-box height is published. */
+    private readonly _host;
+    /** @private Shared resize observation used to track the dock's height. */
+    private readonly _resizeObserver;
+    /** @private Withdraws this dock's height contribution on teardown. */
+    private readonly _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.
+     */
+    private readonly _measuredHeight;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageDock, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvPageDock, "mlv-page-dock", never, { "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, {}, never, ["[mlvPageDockStart]", "[mlvPageDockCenter]", "[mlvPageDockEnd]"], true, never>;
+}
+
+/** Marks leading dock content, typically pending-change status text. */
+declare class MlvPageDockStart {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageDockStart, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvPageDockStart, "[mlvPageDockStart]", never, {}, {}, never, never, true, never>;
+}
+/** Marks the centered dock content, typically a floating tool cluster. */
+declare class MlvPageDockCenter {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageDockCenter, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvPageDockCenter, "[mlvPageDockCenter]", never, {}, {}, never, never, true, never>;
+}
+/** Marks trailing dock content, typically the primary workflow actions. */
+declare class MlvPageDockEnd {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvPageDockEnd, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvPageDockEnd, "[mlvPageDockEnd]", never, {}, {}, never, never, true, never>;
+}
+
+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 };
+export type { MlvPageAsidePlacement, MlvPageContentGap, MlvPageDockAppearance, MlvPageHeaderSize, MlvPageHeaderTabsAlign, MlvPagePadding, MlvPageScroll, MlvPageScrollState, MlvPageSnapMode, MlvPageSnapRegion, MlvPageSurface };