forty-cdk 0.2.0 → 0.3.0

package/fesm2022/forty-cdk-navigation-menu.mjs

@@ -0,0 +1,1145 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, model, input, booleanAttribute, signal, linkedSignal, DestroyRef, computed, Directive, afterNextRender, effect, PLATFORM_ID } from '@angular/core';
+import { createDefaults, injectTextDirection, Collection, createDebouncedAction, injectDismissableLayer, nextEnabledHandle, hostId, registerHandle, reflectDisabled, resolveListNavigation } from 'forty-cdk/core';
+import { isPlatformBrowser } from '@angular/common';
+
+const FOR_NAVIGATION_MENU_CONTEXT = new InjectionToken('FOR_NAVIGATION_MENU_CONTEXT');
+const FOR_NAVIGATION_MENU_ITEM_CONTEXT = new InjectionToken('FOR_NAVIGATION_MENU_ITEM_CONTEXT');
+function injectNavigationMenuContext(piece) {
+    const ctx = inject(FOR_NAVIGATION_MENU_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/navigation-menu] ${piece} must be used inside a [forNavigationMenu] element. ` +
+            "If it is declared inside an ng-template, DI resolves at the template's declaration site — " +
+            'not where it is stamped (e.g. via ngTemplateOutlet) — so declare the template inside the ' +
+            '[forNavigationMenu] root.');
+    }
+    return ctx;
+}
+function injectNavigationMenuItemContext(piece) {
+    const ctx = inject(FOR_NAVIGATION_MENU_ITEM_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/navigation-menu] ${piece} must be used inside a [forNavigationMenuItem] element. ` +
+            "If it is declared inside an ng-template, DI resolves at the template's declaration site — " +
+            'not where it is stamped (e.g. via ngTemplateOutlet) — so declare the template inside the ' +
+            '[forNavigationMenuItem] root.');
+    }
+    return ctx;
+}
+
+/**
+ * Library fallback for navigation menu defaults, read at the root injector when no
+ * consumer has called `provideForNavigationMenuDefaults`. Exported for the shared defaults
+ * contract spec; not re-exported from the primitive's public entry.
+ */
+const FOR_NAVIGATION_MENU_FALLBACK_DEFAULTS = {
+    delayDuration: 200,
+    closeDelay: 150,
+    skipDelayDuration: 300,
+};
+const { token, provideDefaults } = createDefaults('FOR_NAVIGATION_MENU_DEFAULTS', FOR_NAVIGATION_MENU_FALLBACK_DEFAULTS);
+/** Token holding the resolved navigation-menu defaults for the current scope. */
+const FOR_NAVIGATION_MENU_DEFAULTS = token;
+/**
+ * Configures forty-cdk navigation-menu defaults for this injector scope.
+ * Partial overrides inherit unspecified keys from the parent scope (or
+ * library defaults at the root).
+ */
+function provideForNavigationMenuDefaults(defaults = {}) {
+    return provideDefaults(defaults);
+}
+
+/**
+ * Headless implementation of the
+ * [WAI-ARIA Disclosure Navigation Menu pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/).
+ *
+ * Despite the name, this is a `<nav>` of disclosures — NOT an ARIA `menu`.
+ * Triggers are buttons with `aria-expanded`, content is regular landmarks
+ * with links inside; Tab moves through links; Escape closes the open item
+ * and returns focus to its trigger.
+ *
+ * One item is open at a time. Selection is exposed as `value` (the open
+ * item's id, or `''` when nothing is open). The `model()` change emitter
+ * fires only on internal transitions, never on consumer writes.
+ *
+ * Submenús anidados están fuera de scope para v1.
+ *
+ * @example
+ * ```html
+ * <nav forNavigationMenu aria-label="Main">
+ *   <ul forNavigationMenuList>
+ *     <li forNavigationMenuItem value="products">
+ *       <button forNavigationMenuTrigger>Products</button>
+ *       @if (products.isOpen()) {
+ *         <div forNavigationMenuContent>…</div>
+ *       }
+ *     </li>
+ *   </ul>
+ * </nav>
+ * ```
+ */
+class ForNavigationMenu {
+    #host = inject(ElementRef);
+    #defaults = inject(FOR_NAVIGATION_MENU_DEFAULTS);
+    /**
+     * Two-way bindable. The id of the open item, or `''` for none. The
+     * `model()` change emitter (`(valueChange)`) fires only on internal
+     * transitions (trigger click, hover delay, Escape, outside click), never
+     * on consumer writes via `[(value)]`.
+     */
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /**
+     * Writing direction. When unset (default `null`), the inherited ambient
+     * direction is resolved from the nearest ancestor carrying a `dir` attribute
+     * (or `<html dir>`), defaulting to `'ltr'`. An explicit `[dir]` always wins.
+     * The resolved value is reflected to the host `dir` attribute and swaps
+     * ArrowLeft / ArrowRight semantics in RTL.
+     */
+    _dirInput = input(null, { ...(ngDevMode ? { debugName: "_dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
+    dir = injectTextDirection(this._dirInput);
+    loop = input(true, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Manual `aria-label` for the surrounding `<nav>`. Use this when no visible
+     * label element exists; otherwise prefer pointing `aria-labelledby` at one.
+     * A `null` (default) or empty value emits no attribute.
+     */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * ms before a hover opens an item. Default `200`. The default is read from
+     * `provideForNavigationMenuDefaults` for the surrounding scope.
+     */
+    delayDuration = input(this.#defaults.delayDuration, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "delayDuration" }] : /* istanbul ignore next */ []));
+    /**
+     * ms before an item closes after hover leaves. Default `150`. The default
+     * is read from `provideForNavigationMenuDefaults` for the surrounding
+     * scope.
+     */
+    closeDelay = input(this.#defaults.closeDelay, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
+    /**
+     * ms after a peer item closed during which the next open is instant.
+     * Keeps fluid hover-across-triggers feeling responsive. Default `300`.
+     * The default is read from `provideForNavigationMenuDefaults` for the
+     * surrounding scope.
+     */
+    skipDelayDuration = input(this.#defaults.skipDelayDuration, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skipDelayDuration" }] : /* istanbul ignore next */ []));
+    #triggers = new Collection();
+    #contents = new Collection();
+    #viewport = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#viewport" }] : /* istanbul ignore next */ []));
+    /**
+     * Previously open `value`, tracked so consumers can read the most recent
+     * open value before the current one.
+     *
+     * `linkedSignal` is the canonical replacement for `effect()` writing to a
+     * signal: each time `value()` changes, computation runs with the new
+     * source plus the prior `{ source, value }` and returns the *previous*
+     * source as the new value.
+     *
+     * Note: `data-motion` no longer derives from a single `previousValue`
+     * (it could only remember one leaving panel). Per-panel frozen motion is
+     * tracked in `#motion` instead, so several panels can leave at once during
+     * overlapping `animate.leave` transitions without losing their direction.
+     */
+    previousValue = linkedSignal({ ...(ngDevMode ? { debugName: "previousValue" } : /* istanbul ignore next */ {}), source: () => this.value(),
+        computation: (_current, prev) => prev?.source ?? '' });
+    /**
+     * Frozen `data-motion` per mounted panel `value`. Recorded imperatively at
+     * each `open()` / `close()` transition — the entering panel and the panel
+     * that just started leaving — and left untouched for panels that began
+     * leaving in an earlier transition, so their direction stays stable for as
+     * long as `animate.leave` keeps them mounted. Cleared when a panel
+     * unmounts (`unregisterContent`) or re-enters as the current value.
+     *
+     * Backed by a `signal` holding an immutable `Map` so `motionFor` stays a
+     * pure, pull-based read — no state is propagated from an `effect()`.
+     */
+    #motion = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#motion" }] : /* istanbul ignore next */ []));
+    /** The value a pending hover-open is queued for (so a same-trigger leave can cancel it). */
+    #pendingOpenValue = null;
+    #openAction = createDebouncedAction(() => {
+        const value = this.#pendingOpenValue;
+        this.#pendingOpenValue = null;
+        if (value !== null) {
+            this.open(value);
+        }
+    });
+    #closeAction = createDebouncedAction(() => this.close());
+    #skipDelayTimer = null;
+    #skipDelayActive = false;
+    #dismiss = injectDismissableLayer();
+    constructor() {
+        inject(DestroyRef).onDestroy(() => {
+            this.#cancelPending();
+            this.#cancelSkipDelay();
+            this.#dismiss.deactivate();
+        });
+    }
+    isOpen(value) {
+        return value !== '' && this.value() === value;
+    }
+    toggle(value) {
+        if (this.disabled())
+            return;
+        if (this.value() === value) {
+            this.close();
+        }
+        else {
+            this.open(value);
+        }
+    }
+    open(value) {
+        if (this.disabled() || value === '')
+            return;
+        this.#cancelPending();
+        if (this.value() === value)
+            return;
+        this.#recordMotion(this.value(), value);
+        this.value.set(value);
+        this.#dismiss.activate({
+            onEscapeKeyDown: () => {
+                const current = this.value();
+                this.close();
+                const trigger = current ? this.triggerHostFor(current) : null;
+                trigger?.focus();
+            },
+            onPointerDownOutside: () => this.close(),
+        });
+    }
+    close() {
+        this.#cancelPending();
+        if (this.value() === '')
+            return;
+        this.#recordMotion(this.value(), '');
+        this.value.set('');
+        this.#dismiss.deactivate();
+        this.#startSkipDelay();
+    }
+    scheduleOpen(value, reason) {
+        if (this.disabled() || value === '')
+            return;
+        this.#closeAction.cancel();
+        this.#clearOpenTimer();
+        if (this.value() === value)
+            return;
+        if (reason === 'click' || reason === 'keyboard') {
+            this.open(value);
+            return;
+        }
+        this.#pendingOpenValue = value;
+        this.#openAction.schedule(this.#skipDelayActive ? 0 : this.delayDuration());
+    }
+    scheduleClose(reason, value) {
+        if (reason === 'click' || reason === 'keyboard') {
+            this.#clearOpenTimer();
+            this.#closeAction.cancel();
+            this.close();
+            return;
+        }
+        if (this.#openAction.isPending()) {
+            // A hover-open is queued. If it is for the trigger we are leaving, cancel
+            // it so a quick hover-then-leave on a closed trigger doesn't open after
+            // the pointer is gone. If it is for a sibling (hover-across), leave it so
+            // that pending open takes over.
+            if (value !== undefined && this.#pendingOpenValue === value) {
+                this.#clearOpenTimer();
+            }
+            return;
+        }
+        this.#closeAction.cancel();
+        if (this.value() === '')
+            return;
+        this.#closeAction.schedule(this.closeDelay());
+    }
+    cancelPending() {
+        this.#cancelPending();
+    }
+    /**
+     * APG: moving focus out of the navigation closes any open dropdown. Fires
+     * when Tab/Shift+Tab walks past the last/first focusable inside the nav,
+     * or when something else steals focus. The dismissable layer already
+     * handles Escape and outside pointerdown; this covers the keyboard-tab
+     * case the layer can't see.
+     */
+    onFocusOut(event) {
+        if (this.value() === '') {
+            return;
+        }
+        const next = event.relatedTarget;
+        // `null` means focus is leaving the document (e.g. browser chrome) or
+        // moving to a non-focusable area — both qualify as "outside the nav".
+        if (next && this.#host.nativeElement.contains(next)) {
+            return;
+        }
+        this.close();
+    }
+    navigate(currentTrigger, action) {
+        if (this.disabled())
+            return;
+        const target = nextEnabledHandle(this.#triggers.items(), currentTrigger, action, {
+            loop: this.loop(),
+        });
+        target?.host.focus();
+    }
+    focusTrigger(value) {
+        this.triggerHostFor(value)?.focus();
+    }
+    registerTrigger(handle) {
+        this.#triggers.register(handle);
+    }
+    unregisterTrigger(handle) {
+        this.#triggers.unregister(handle);
+    }
+    registerContent(handle) {
+        this.#contents.register(handle);
+    }
+    unregisterContent(handle) {
+        this.#contents.unregister(handle);
+        this.#clearMotion(handle.value());
+    }
+    registerViewport(handle) {
+        this.#viewport.set(handle);
+    }
+    unregisterViewport(handle) {
+        if (this.#viewport() === handle) {
+            this.#viewport.set(null);
+        }
+    }
+    viewport = this.#viewport.asReadonly();
+    contentIdFor(value) {
+        for (const c of this.#contents.items()) {
+            if (c.value() === value) {
+                return c.id();
+            }
+        }
+        return null;
+    }
+    triggerIdFor(value) {
+        for (const t of this.#triggers.items()) {
+            if (t.value() === value) {
+                return t.id();
+            }
+        }
+        return null;
+    }
+    triggerHostFor(value) {
+        for (const t of this.#triggers.items()) {
+            if (t.value() === value) {
+                return t.host;
+            }
+        }
+        return null;
+    }
+    /** Layout-oriented selectors for indicator positioning. */
+    activeTriggerHost = computed(() => {
+        const v = this.value();
+        if (v === '')
+            return null;
+        for (const t of this.#triggers.items()) {
+            if (t.value() === v)
+                return t.host;
+        }
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeTriggerHost" }] : /* istanbul ignore next */ []));
+    /** Currently-active content's host element, if mounted. */
+    activeContentHost = computed(() => {
+        const v = this.value();
+        if (v === '')
+            return null;
+        for (const c of this.#contents.items()) {
+            if (c.value() === v)
+                return c.host;
+        }
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeContentHost" }] : /* istanbul ignore next */ []));
+    /**
+     * `data-motion` direction for the content with the given `value`.
+     *
+     * Sets the slide direction by index comparison: when the user
+     * moves rightward from A (index 0) to B (index 2), the entering panel
+     * slides in from the end side (`from-end`) and the leaving panel slides
+     * out to the start side (`to-start`) — both shift in the same logical
+     * direction, like a horizontal carousel advancing.
+     *
+     * - The currently-entering content (`value === this.value()`) reflects
+     *   `from-start` / `from-end` based on which side the previous trigger
+     *   sat on relative to it.
+     * - A leaving content reflects the `to-start` / `to-end` direction frozen
+     *   at the transition that started its exit, based on which side the
+     *   then-new trigger sat on relative to it. The direction stays stable for
+     *   as long as the panel is mounted, even across later transitions.
+     * - Anything else (and first open / last close, where there is no peer
+     *   to compare against) returns `null` so the host binding emits no
+     *   attribute.
+     *
+     * "Start" and "end" are logical: index 0 in DOM order is "start", which
+     * maps to the visual right in `dir="rtl"`. Consumers can author the
+     * keyframes once with logical CSS (e.g. `inset-inline-start`) and it
+     * flips automatically.
+     *
+     * The currently-entering panel is computed live against `previousValue()`;
+     * every other (leaving) panel reads its frozen direction from `#motion`,
+     * recorded at the transition that started its exit. This keeps a leaving
+     * panel's direction stable across later, overlapping transitions instead
+     * of dropping to `null` once `previousValue` advances past it.
+     */
+    motionFor(value) {
+        if (value === '')
+            return null;
+        if (value === this.value()) {
+            return this.#enterMotion(this.previousValue(), value);
+        }
+        return this.#motion().get(value) ?? null;
+    }
+    /**
+     * Record the frozen motion for a `from` → `to` transition: the entering
+     * `to` panel and the leaving `from` panel. Existing entries for other
+     * still-leaving panels are preserved so overlapping exits keep their
+     * direction. `to`'s own stale leaving entry is dropped (it is re-entering).
+     */
+    #recordMotion(from, to) {
+        const next = new Map(this.#motion());
+        if (to !== '') {
+            const enter = this.#enterMotion(from, to);
+            if (enter === null)
+                next.delete(to);
+            else
+                next.set(to, enter);
+        }
+        if (from !== '') {
+            const leave = this.#leaveMotion(from, to);
+            if (leave === null)
+                next.delete(from);
+            else
+                next.set(from, leave);
+        }
+        this.#motion.set(next);
+    }
+    #clearMotion(value) {
+        if (!this.#motion().has(value))
+            return;
+        const next = new Map(this.#motion());
+        next.delete(value);
+        this.#motion.set(next);
+    }
+    /** Entering direction for `to` given the panel `from` it replaced. */
+    #enterMotion(from, to) {
+        if (from === '' || from === to)
+            return null;
+        const fromIndex = this.#triggerIndexFor(from);
+        const toIndex = this.#triggerIndexFor(to);
+        if (fromIndex < 0 || toIndex < 0)
+            return null;
+        if (fromIndex < toIndex)
+            return 'from-end';
+        if (fromIndex > toIndex)
+            return 'from-start';
+        return null;
+    }
+    /** Leaving direction for `from` given the panel `to` that replaced it. */
+    #leaveMotion(from, to) {
+        if (to === '' || to === from)
+            return null;
+        const fromIndex = this.#triggerIndexFor(from);
+        const toIndex = this.#triggerIndexFor(to);
+        if (fromIndex < 0 || toIndex < 0)
+            return null;
+        if (toIndex > fromIndex)
+            return 'to-start';
+        if (toIndex < fromIndex)
+            return 'to-end';
+        return null;
+    }
+    #triggerIndexFor(value) {
+        const triggers = this.#triggers.items();
+        for (let i = 0; i < triggers.length; i++) {
+            if (triggers[i].value() === value)
+                return i;
+        }
+        return -1;
+    }
+    #cancelPending() {
+        this.#clearOpenTimer();
+        this.#closeAction.cancel();
+    }
+    #clearOpenTimer() {
+        this.#openAction.cancel();
+        this.#pendingOpenValue = null;
+    }
+    #startSkipDelay() {
+        this.#cancelSkipDelay();
+        this.#skipDelayActive = true;
+        this.#skipDelayTimer = setTimeout(() => {
+            this.#skipDelayTimer = null;
+            this.#skipDelayActive = false;
+        }, Math.max(0, this.skipDelayDuration()));
+    }
+    #cancelSkipDelay() {
+        if (this.#skipDelayTimer !== null) {
+            clearTimeout(this.#skipDelayTimer);
+            this.#skipDelayTimer = null;
+        }
+        this.#skipDelayActive = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForNavigationMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForNavigationMenu, isStandalone: true, selector: "[forNavigationMenu]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, _dirInput: { classPropertyName: "_dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, delayDuration: { classPropertyName: "delayDuration", publicName: "delayDuration", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, skipDelayDuration: { classPropertyName: "skipDelayDuration", publicName: "skipDelayDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "attr.aria-label": "ariaLabel() || null", "attr.data-state": "value() === \"\" ? \"closed\" : \"open\"", "attr.data-orientation": "orientation()", "attr.data-disabled": "disabled() ? \"\" : null", "attr.dir": "dir()" } }, providers: [{ provide: FOR_NAVIGATION_MENU_CONTEXT, useExisting: ForNavigationMenu }], exportAs: ["forNavigationMenu"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForNavigationMenu, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forNavigationMenu]',
+                    exportAs: 'forNavigationMenu',
+                    host: {
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.data-state]': 'value() === "" ? "closed" : "open"',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '[attr.dir]': 'dir()',
+                        '(focusout)': 'onFocusOut($event)',
+                    },
+                    providers: [{ provide: FOR_NAVIGATION_MENU_CONTEXT, useExisting: ForNavigationMenu }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], _dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], delayDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "delayDuration", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], skipDelayDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipDelayDuration", required: false }] }] } });
+
+/**
+ * Wrapper around the row / column of items. Carries `data-orientation` so
+ * the consumer can flip CSS layout. No semantic role — this is a layout
+ * helper, not a `menubar` (the disclosure pattern doesn't use one).
+ */
+class ForNavigationMenuList {
+    ctx = injectNavigationMenuContext('ForNavigationMenuList');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForNavigationMenuList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForNavigationMenuList, isStandalone: true, selector: "[forNavigationMenuList]", host: { properties: { "attr.data-orientation": "ctx.orientation()" } }, exportAs: ["forNavigationMenuList"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForNavigationMenuList, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forNavigationMenuList]',
+                    exportAs: 'forNavigationMenuList',
+                    host: {
+                        '[attr.data-orientation]': 'ctx.orientation()',
+                    },
+                }]
+        }] });
+
+/**
+ * Wrapper around one trigger + its content. Owns the item's `value` (the
+ * id used to coordinate which item is open) and its disabled state, then
+ * exposes them downstream so the trigger and content can share a single
+ * source of truth.
+ */
+class ForNavigationMenuItem {
+    #ctx = injectNavigationMenuContext('ForNavigationMenuItem');
+    /** Identifier matched against the menu's `value`. Required. */
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Per-item disabled (in addition to the menu-level `disabled`). */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    state = computed(() => (this.#ctx.isOpen(this.value()) ? 'open' : 'closed'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForNavigationMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForNavigationMenuItem, isStandalone: true, selector: "[forNavigationMenuItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-state": "state()", "attr.data-disabled": "disabled() ? \"\" : null" } }, providers: [
+            {
+                provide: FOR_NAVIGATION_MENU_ITEM_CONTEXT,
+                useExisting: ForNavigationMenuItem,
+            },
+        ], exportAs: ["forNavigationMenuItem"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForNavigationMenuItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forNavigationMenuItem]',
+                    exportAs: 'forNavigationMenuItem',
+                    host: {
+                        '[attr.data-state]': 'state()',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                    },
+                    providers: [
+                        {
+                            provide: FOR_NAVIGATION_MENU_ITEM_CONTEXT,
+                            useExisting: ForNavigationMenuItem,
+                        },
+                    ],
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Disclosure trigger. Apply on `<button>`. Hover / click open the paired
+ * `[forNavigationMenuContent]`; arrow keys move focus across siblings;
+ * ArrowDown (horizontal) / ArrowRight (vertical) open; Escape closes;
+ * Enter / Space toggle.
+ *
+ * Per the APG disclosure-navigation pattern this does NOT open on plain
+ * focus: Tabbing across the trigger row must not auto-expand panels, and a
+ * programmatic return-focus (e.g. after Escape) must not synchronously
+ * re-open the panel that just closed.
+ */
+class ForNavigationMenuTrigger {
+    menu = injectNavigationMenuContext('ForNavigationMenuTrigger');
+    #item = injectNavigationMenuItemContext('ForNavigationMenuTrigger');
+    #host = inject(ElementRef);
+    id = hostId('for-navigation-menu-trigger');
+    value = this.#item.value;
+    disabled = this.#item.disabled;
+    isOpen = computed(() => this.menu.isOpen(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    contentId = computed(() => this.menu.contentIdFor(this.value()) ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const handle = {
+            host: this.#host.nativeElement,
+            value: this.value,
+            disabled: this.disabled,
+            id: this.id,
+        };
+        // Defer registration so the parent's `triggerIdFor` / `contentIdFor` /
+        // `triggerHostFor` lookups can read `handle.value()` without hitting the
+        // not-yet-bound `input.required` throw on the owning `[forNavigationMenuItem]`.
+        // `unregisterTrigger` is reference-based, so destroy-before-register is a
+        // safe no-op.
+        registerHandle(handle, (h) => this.menu.registerTrigger(h), (h) => this.menu.unregisterTrigger(h), 'afterNextRender');
+        reflectDisabled(this.disabled);
+    }
+    onClick() {
+        if (this.disabled())
+            return;
+        this.menu.toggle(this.value());
+    }
+    onPointerEnter() {
+        if (this.disabled())
+            return;
+        this.menu.scheduleOpen(this.value(), 'hover');
+    }
+    onPointerLeave() {
+        if (this.disabled())
+            return;
+        this.menu.scheduleClose('hover', this.value());
+    }
+    onKeyDown(event) {
+        if (this.disabled())
+            return;
+        // Activation: Enter / Space toggle the disclosure.
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.menu.toggle(this.value());
+            return;
+        }
+        if (event.key === 'Escape' && this.isOpen()) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.menu.close();
+            this.#host.nativeElement.focus();
+            return;
+        }
+        // Cross-axis arrow opens, main-axis arrows navigate.
+        const orientation = this.menu.orientation();
+        const action = resolveListNavigation(event, {
+            orientation,
+            dir: this.menu.dir(),
+        });
+        if (action) {
+            event.preventDefault();
+            this.menu.navigate(this.#host.nativeElement, action);
+            return;
+        }
+        // ArrowDown (horizontal) / ArrowRight (vertical) opens the disclosure.
+        const openKey = orientation === 'horizontal' ? 'ArrowDown' : 'ArrowRight';
+        if (event.key === openKey) {
+            event.preventDefault();
+            this.menu.scheduleOpen(this.value(), 'keyboard');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForNavigationMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForNavigationMenuTrigger, isStandalone: true, selector: "[forNavigationMenuTrigger]", host: { attributes: { "type": "button" }, listeners: { "click": "onClick()", "pointerenter": "onPointerEnter()", "pointerleave": "onPointerLeave()", "keydown": "onKeyDown($event)" }, properties: { "id": "id()", "attr.aria-expanded": "isOpen() ? \"true\" : \"false\"", "attr.aria-controls": "isOpen() ? contentId() : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.data-disabled": "disabled() ? \"\" : null" } }, exportAs: ["forNavigationMenuTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForNavigationMenuTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forNavigationMenuTrigger]',
+                    exportAs: 'forNavigationMenuTrigger',
+                    host: {
+                        type: 'button',
+                        '[id]': 'id()',
+                        '[attr.aria-expanded]': 'isOpen() ? "true" : "false"',
+                        '[attr.aria-controls]': 'isOpen() ? contentId() : null',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.data-state]': 'isOpen() ? "open" : "closed"',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '(click)': 'onClick()',
+                        '(pointerenter)': 'onPointerEnter()',
+                        '(pointerleave)': 'onPointerLeave()',
+                        '(keydown)': 'onKeyDown($event)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * The disclosure panel for a navigation-menu item. Mounted via `@if`
+ * (consumer drives it from `forNavigationMenu.value()` or
+ * `forNavigationMenuItem`'s state) so animations work natively.
+ *
+ * Carries `aria-labelledby` pointing at the trigger and reflects
+ * `data-state` for CSS hooks. No focus management is imposed — content
+ * is a regular landmark; Tab moves through links inside, then out to the
+ * next focusable element after the wrapper.
+ *
+ * When a `[forNavigationMenuViewport]` is present in the menu, the host
+ * element re-parents itself into the viewport on mount so all active
+ * panels share a single animated surface (mega-menu pattern). The viewport
+ * owns the ordering: each panel is inserted in its trigger's document
+ * order, never simply appended in mount order. So during an overlapping
+ * A→B transition — where the leaving A is still mounted (its
+ * `animate.leave` keeps it around) while B enters — the viewport's child
+ * order is deterministic and always matches trigger order: the panel whose
+ * trigger comes first in the DOM is the first child, irrespective of which
+ * panel mounted last. Cross-fade / slide carousels can therefore author
+ * their stacking against trigger order (pair it with `data-motion`). The
+ * directive does not undo the re-parent on destroy: the consumer's `@if`
+ * is destroying the element anyway, and Angular's renderer removes nodes
+ * by their actual current parent.
+ *
+ * `data-motion` is reflected (`from-start | from-end | to-start | to-end`)
+ * for CSS keyframes that slide the entering and leaving panels together
+ * during a transition.
+ */
+class ForNavigationMenuContent {
+    menu = injectNavigationMenuContext('ForNavigationMenuContent');
+    #item = injectNavigationMenuItemContext('ForNavigationMenuContent');
+    #host = inject(ElementRef).nativeElement;
+    id = hostId('for-navigation-menu-content');
+    value = this.#item.value;
+    triggerId = computed(() => this.menu.triggerIdFor(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
+    motion = computed(() => this.menu.motionFor(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "motion" }] : /* istanbul ignore next */ []));
+    #mounted = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#mounted" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const handle = {
+            host: this.#host,
+            value: this.value,
+            id: this.id,
+        };
+        // Defer registration so the parent's lookups can read `handle.value()`
+        // without hitting the not-yet-bound `input.required` throw on the owning
+        // `[forNavigationMenuItem]`. `unregisterContent` is reference-based, so
+        // destroy-before-register is a safe no-op.
+        registerHandle(handle, (h) => this.menu.registerContent(h), (h) => this.menu.unregisterContent(h), 'afterNextRender');
+        // Defer the re-parent until after the embedded view is attached to its
+        // template anchor — Angular inserts root nodes AFTER directive
+        // constructors run, so an `appendChild` here would be undone. Running
+        // it in `afterNextRender` happens before browser paint, so the move is
+        // not visible. The viewport owns ordering: it inserts this panel in its
+        // trigger's document order, so an overlapping A→B transition keeps a
+        // deterministic child order regardless of which panel mounted last.
+        afterNextRender(() => {
+            this.#reparent();
+            this.#mounted.set(true);
+        });
+        // Re-parent (and re-order) the panel reactively once mounted.
+        // `triggerHostFor` reads the menu's trigger collection, so this re-runs
+        // whenever this panel's trigger registers or unregisters — closing the
+        // race where the trigger registers AFTER the content (both defer to
+        // `afterNextRender`). Until the trigger is known the panel sorts last;
+        // once it registers the viewport re-orders it into trigger document
+        // order. The re-parent is a DOM side effect on the imperative viewport
+        // handle (no signal writes), and it waits for `#mounted` so it never runs
+        // before `afterNextRender` has attached the panel under the viewport.
+        //
+        // Note: the trigger collection is backed by a `MutationObserver`, and this
+        // very `appendChild` re-parent mutates the observed subtree, so the
+        // collection can re-notify and re-run this effect a second time. That extra
+        // pass is EXPECTED and harmless — `insertPanel` / `#reorder` are idempotent
+        // (a node already in its target slot is left untouched), so the re-run is a
+        // no-op. Do not "fix" the idempotency away to suppress it: the convergence
+        // it guarantees is what makes the registration race self-heal.
+        effect(() => {
+            if (!this.#mounted())
+                return;
+            this.#reparent();
+        });
+    }
+    #reparent() {
+        const viewport = this.menu.viewport();
+        if (!viewport)
+            return;
+        viewport.insertPanel(this.#host, this.menu.triggerHostFor(this.value()));
+    }
+    onEscape(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const v = this.value();
+        this.menu.close();
+        this.menu.focusTrigger(v);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForNavigationMenuContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForNavigationMenuContent, isStandalone: true, selector: "[forNavigationMenuContent]", host: { listeners: { "pointerenter": "menu.cancelPending()", "pointerleave": "menu.scheduleClose(\"hover\")", "keydown.escape": "onEscape($any($event))" }, properties: { "id": "id()", "attr.aria-labelledby": "triggerId()", "attr.data-state": "menu.isOpen(value()) ? \"open\" : \"closed\"", "attr.data-motion": "motion()" } }, exportAs: ["forNavigationMenuContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForNavigationMenuContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forNavigationMenuContent]',
+                    exportAs: 'forNavigationMenuContent',
+                    host: {
+                        '[id]': 'id()',
+                        '[attr.aria-labelledby]': 'triggerId()',
+                        '[attr.data-state]': 'menu.isOpen(value()) ? "open" : "closed"',
+                        '[attr.data-motion]': 'motion()',
+                        '(pointerenter)': 'menu.cancelPending()',
+                        '(pointerleave)': 'menu.scheduleClose("hover")',
+                        '(keydown.escape)': 'onEscape($any($event))',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Decorative marker for links inside a navigation-menu content. Reflects
+ * `data-active` for CSS hooks (the consumer flips it based on the
+ * router's current URL — the directive doesn't know about routing).
+ *
+ * Apply on `<a>`.
+ */
+class ForNavigationMenuLink {
+    /** When true, this link points at the current page. Reflects `aria-current`. */
+    active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Value forwarded to `aria-current` when `active` is true. Defaults to
+     * `'page'` (the most common case for top-level navigation).
+     */
+    ariaCurrent = input('page', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaCurrent" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForNavigationMenuLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForNavigationMenuLink, isStandalone: true, selector: "[forNavigationMenuLink]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, ariaCurrent: { classPropertyName: "ariaCurrent", publicName: "ariaCurrent", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-active": "active() ? \"\" : null", "attr.aria-current": "active() ? ariaCurrent() : null" } }, exportAs: ["forNavigationMenuLink"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForNavigationMenuLink, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forNavigationMenuLink]',
+                    exportAs: 'forNavigationMenuLink',
+                    host: {
+                        '[attr.data-active]': 'active() ? "" : null',
+                        '[attr.aria-current]': 'active() ? ariaCurrent() : null',
+                    },
+                }]
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], ariaCurrent: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaCurrent", required: false }] }] } });
+
+/**
+ * Optional visual indicator (underline, pill) that follows the active
+ * trigger. Computes geometry from the trigger's position relative to
+ * `[forNavigationMenuList]` and exposes it via CSS custom properties:
+ *
+ * - `--for-navigation-menu-indicator-x` — horizontal offset (px)
+ * - `--for-navigation-menu-indicator-y` — vertical offset (px)
+ * - `--for-navigation-menu-indicator-width` — trigger width (px)
+ * - `--for-navigation-menu-indicator-height` — trigger height (px)
+ *
+ * Drive `transform` / `width` / `height` from these in CSS. The directive
+ * is decorative — set `aria-hidden="true"` on the host element if
+ * needed.
+ *
+ * Geometry is re-measured reactively, not on every render: a `ResizeObserver`
+ * (browser-only) watches the active trigger and the surrounding list and bumps
+ * a measure-tick signal, and the offset / size are recomputed only when the
+ * active trigger changes or one of those boxes resizes. `afterNextRender`
+ * covers the initial measure once the host is in the DOM.
+ */
+class ForNavigationMenuIndicator {
+    menu = injectNavigationMenuContext('ForNavigationMenuIndicator');
+    #host = inject(ElementRef).nativeElement;
+    #isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    #measureTick = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#measureTick" }] : /* istanbul ignore next */ []));
+    #geometry = computed(() => {
+        // Depend on the manual tick so ResizeObserver callbacks invalidate the
+        // geometry, and on the active trigger so a trigger switch re-measures.
+        this.#measureTick();
+        const trigger = this.menu.activeTriggerHost();
+        const list = this.#host.parentElement;
+        if (!trigger || !list) {
+            return { x: 0, y: 0, width: 0, height: 0 };
+        }
+        const tr = trigger.getBoundingClientRect();
+        const lr = list.getBoundingClientRect();
+        return { x: tr.left - lr.left, y: tr.top - lr.top, width: tr.width, height: tr.height };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#geometry" }] : /* istanbul ignore next */ []));
+    x = computed(() => this.#geometry().x, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "x" }] : /* istanbul ignore next */ []));
+    y = computed(() => this.#geometry().y, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "y" }] : /* istanbul ignore next */ []));
+    width = computed(() => this.#geometry().width, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    height = computed(() => this.#geometry().height, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    state = computed(() => (this.menu.activeTriggerHost() ? 'visible' : 'hidden'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Initial measure once the host (and its list parent) are attached.
+        afterNextRender(() => this.#measureTick.update((t) => t + 1));
+        if (this.#isBrowser && typeof ResizeObserver !== 'undefined') {
+            const ro = new ResizeObserver(() => this.#measureTick.update((t) => t + 1));
+            const list = this.#host.parentElement;
+            if (list) {
+                ro.observe(list);
+            }
+            // Follow the active trigger: observe it for size changes and re-measure
+            // on every switch. Pure side effect on the imperative ResizeObserver — no
+            // signal writes from this effect.
+            let observed = null;
+            effect(() => {
+                const active = this.menu.activeTriggerHost();
+                if (observed && observed !== active) {
+                    ro.unobserve(observed);
+                    observed = null;
+                }
+                if (active && active !== observed) {
+                    ro.observe(active);
+                    observed = active;
+                }
+            });
+            inject(DestroyRef).onDestroy(() => ro.disconnect());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForNavigationMenuIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForNavigationMenuIndicator, isStandalone: true, selector: "[forNavigationMenuIndicator]", host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-state": "state()", "attr.data-orientation": "menu.orientation()", "style.--for-navigation-menu-indicator-x.px": "x()", "style.--for-navigation-menu-indicator-y.px": "y()", "style.--for-navigation-menu-indicator-width.px": "width()", "style.--for-navigation-menu-indicator-height.px": "height()" } }, exportAs: ["forNavigationMenuIndicator"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForNavigationMenuIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forNavigationMenuIndicator]',
+                    exportAs: 'forNavigationMenuIndicator',
+                    host: {
+                        'aria-hidden': 'true',
+                        '[attr.data-state]': 'state()',
+                        '[attr.data-orientation]': 'menu.orientation()',
+                        '[style.--for-navigation-menu-indicator-x.px]': 'x()',
+                        '[style.--for-navigation-menu-indicator-y.px]': 'y()',
+                        '[style.--for-navigation-menu-indicator-width.px]': 'width()',
+                        '[style.--for-navigation-menu-indicator-height.px]': 'height()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Optional shared surface for mega-menu style navigation. When present,
+ * `[forNavigationMenuContent]` re-parents itself into this host on mount,
+ * so all active content panels live inside a single visual container that
+ * can animate width/height between trigger groups.
+ *
+ * The viewport exposes the active content's natural size as CSS custom
+ * properties:
+ *
+ * - `--for-navigation-menu-viewport-width` (px)
+ * - `--for-navigation-menu-viewport-height` (px)
+ *
+ * Drive `width` / `height` from these in CSS to get fluid resize between
+ * panels. The directive is a real interactive surface (it hosts the
+ * focusable content), so `aria-hidden="false"` is reflected explicitly to
+ * counteract any wrapper that defaults to hidden.
+ *
+ * Two `[forNavigationMenuContent]` panels can briefly co-exist inside the
+ * viewport during a transition — the leaving panel stays mounted as long
+ * as the consumer's `@if` keeps it around (e.g. `animate.leave`), so the
+ * consumer can cross-fade or slide. Mount lifecycle stays with the
+ * consumer's template; this directive only re-parents and measures.
+ *
+ * The viewport owns panel ordering: panels are inserted in their triggers'
+ * document order, never simply appended in mount order. So during an
+ * overlapping A→B transition the panel whose trigger comes first in the DOM
+ * is always the first child of the viewport, regardless of which panel
+ * mounted last — giving cross-fade / slide carousels a deterministic axis
+ * to author against (pair this with the `data-motion` hook on Content).
+ *
+ * Measurement always tracks the active panel: the ResizeObserver follows
+ * `activeContentHost()`, so a non-active panel kept mounted by
+ * `animate.leave` is intentionally no longer measured (its size must not
+ * drive the viewport box mid-transition). The exposed
+ * `--for-navigation-menu-viewport-*` variables therefore reflect the
+ * entering panel as soon as it becomes active.
+ *
+ * **Avoid a measurement feedback loop.** The exposed
+ * `--for-navigation-menu-viewport-width` / `-height` are measured from the
+ * *active content panel*, never from the viewport host's own box — but the
+ * ResizeObserver does also observe the host (so a surrounding column resize is
+ * picked up). Do **not** drive the host's own measured dimension from these
+ * variables (e.g. `width: var(--for-navigation-menu-viewport-width)` applied to
+ * the viewport host) and then nest the measured panel such that the host's box
+ * constrains the panel's: that would let a measure-tick's CSS output feed back
+ * into the next observation. Drive `width` / `height` from the variables on a
+ * wrapper or transition them on the host without coupling them back to the
+ * measured child's size. The measure-tick read path itself is safe — the
+ * observer only bumps a counter, and the geometry is read in a `computed`, not
+ * written from the same notification.
+ *
+ * @example
+ * ```html
+ * <nav forNavigationMenu [(value)]="open">
+ *   <ul forNavigationMenuList>…</ul>
+ *   <div forNavigationMenuViewport></div>
+ * </nav>
+ * ```
+ */
+class ForNavigationMenuViewport {
+    menu = injectNavigationMenuContext('ForNavigationMenuViewport');
+    host = inject(ElementRef).nativeElement;
+    #measureTick = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#measureTick" }] : /* istanbul ignore next */ []));
+    width = computed(() => this.#measureSize().width, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    height = computed(() => this.#measureSize().height, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    state = computed(() => (this.menu.value() ? 'open' : 'closed'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    #isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    // Tracked panels in insertion order, each with its last known trigger host.
+    // Ordering resolves a trigger's document position from this list rather than
+    // a DOM `aria-labelledby` → `getElementById` round-trip, which silently
+    // returns `null` while a trigger's registration races its content's (both
+    // defer to `afterNextRender`) and degrades ordering to mount order. The
+    // content re-invokes `insertPanel` once its trigger registers, so the list
+    // and the resulting DOM order self-heal. Insertion order is preserved so
+    // panels whose trigger is not yet known keep a stable relative position
+    // (sorted to the end) instead of thrashing as siblings re-insert.
+    #panels = [];
+    constructor() {
+        const handle = {
+            host: this.host,
+            insertPanel: (panel, triggerHost) => this.#insertPanel(panel, triggerHost),
+        };
+        registerHandle(handle, (h) => this.menu.registerViewport(h), (h) => this.menu.unregisterViewport(h));
+        // Track the active content's natural size via ResizeObserver so layout
+        // mutations between renders (e.g. async content load, viewport host
+        // resize from a surrounding column) flow into the exposed CSS variables.
+        // Browser-only API; on SSR / very old runtimes we simply skip the
+        // observation and the `width`/`height` computed signals still settle on
+        // first read because they pull from `getBoundingClientRect` directly.
+        if (this.#isBrowser && typeof ResizeObserver !== 'undefined') {
+            const ro = new ResizeObserver(() => this.#measureTick.update((t) => t + 1));
+            // Always observe the viewport host itself so layout changes that affect
+            // its own box (e.g. the surrounding column resizing) are picked up.
+            ro.observe(this.host);
+            // Switch which content child is being observed whenever the active
+            // panel changes. Pure side effect on the imperative ResizeObserver —
+            // no signal writes from this effect, so the host bindings on
+            // `width`/`height` settle within the same CD pass that the active
+            // content changed in (no CLAUDE.md "state in effects" exception
+            // needed here).
+            let observed = null;
+            effect(() => {
+                const active = this.menu.activeContentHost();
+                if (observed && observed !== active) {
+                    ro.unobserve(observed);
+                    observed = null;
+                }
+                if (active && active !== observed) {
+                    ro.observe(active);
+                    observed = active;
+                }
+            });
+            inject(DestroyRef).onDestroy(() => ro.disconnect());
+        }
+    }
+    #insertPanel(panel, triggerHost) {
+        const existing = this.#panels.find((p) => p.panel === panel);
+        if (existing) {
+            existing.triggerHost = triggerHost;
+        }
+        else {
+            this.#panels.push({ panel, triggerHost });
+        }
+        this.#reorder();
+    }
+    // Reconcile the viewport's children to a single deterministic order: panels
+    // whose trigger host is known come first, sorted by the trigger's document
+    // position; panels whose trigger is not yet known follow, in insertion
+    // order. Computing one total order (rather than inserting each panel
+    // relative to the others) makes the result independent of the order in
+    // which panels call `insertPanel`, so a registration race converges instead
+    // of thrashing. Nodes already in their target slot are left untouched, so
+    // re-running this never disturbs an unaffected panel mid-animation.
+    #reorder() {
+        this.#prunePanels();
+        const ordered = [...this.#panels].sort((a, b) => {
+            if (a.triggerHost && b.triggerHost) {
+                if (a.triggerHost === b.triggerHost)
+                    return 0;
+                const rel = a.triggerHost.compareDocumentPosition(b.triggerHost);
+                if ((rel & Node.DOCUMENT_POSITION_FOLLOWING) !== 0)
+                    return -1;
+                if ((rel & Node.DOCUMENT_POSITION_PRECEDING) !== 0)
+                    return 1;
+                return 0;
+            }
+            if (a.triggerHost)
+                return -1;
+            if (b.triggerHost)
+                return 1;
+            return 0;
+        });
+        // Reconcile against the host's live children by index: walk the target
+        // order, and whenever the child currently at position `i` is not the panel
+        // that belongs there, move it in. Moving into the already-correct slot is
+        // a no-op, so an unaffected panel is never disturbed mid-animation. Using
+        // the live child at `i` as the reference (rather than a not-yet-inserted
+        // sibling) keeps every `insertBefore` valid on the first re-parent too.
+        for (let i = 0; i < ordered.length; i++) {
+            const panel = ordered[i].panel;
+            const current = this.host.children[i] ?? null;
+            if (current !== panel) {
+                this.host.insertBefore(panel, current);
+            }
+        }
+    }
+    // Drop panels the consumer's `@if` already destroyed so the tracking list
+    // does not leak detached nodes across mount/unmount cycles. A freshly
+    // mounted panel still sits under its `[forNavigationMenuItem]` (connected,
+    // pending its first re-parent) and must be kept.
+    #prunePanels() {
+        for (let i = this.#panels.length - 1; i >= 0; i--) {
+            if (!this.#panels[i].panel.isConnected) {
+                this.#panels.splice(i, 1);
+            }
+        }
+    }
+    #measureSize() {
+        // Depend on the manual tick so RO callbacks invalidate the computed.
+        this.#measureTick();
+        const active = this.menu.activeContentHost();
+        if (!active)
+            return { width: 0, height: 0 };
+        const r = active.getBoundingClientRect();
+        return { width: r.width, height: r.height };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForNavigationMenuViewport, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForNavigationMenuViewport, isStandalone: true, selector: "[forNavigationMenuViewport]", host: { attributes: { "aria-hidden": "false" }, properties: { "attr.data-state": "state()", "attr.data-orientation": "menu.orientation()", "style.--for-navigation-menu-viewport-width.px": "width()", "style.--for-navigation-menu-viewport-height.px": "height()" } }, exportAs: ["forNavigationMenuViewport"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForNavigationMenuViewport, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forNavigationMenuViewport]',
+                    exportAs: 'forNavigationMenuViewport',
+                    host: {
+                        'aria-hidden': 'false',
+                        '[attr.data-state]': 'state()',
+                        '[attr.data-orientation]': 'menu.orientation()',
+                        '[style.--for-navigation-menu-viewport-width.px]': 'width()',
+                        '[style.--for-navigation-menu-viewport-height.px]': 'height()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FOR_NAVIGATION_MENU_CONTEXT, FOR_NAVIGATION_MENU_DEFAULTS, FOR_NAVIGATION_MENU_ITEM_CONTEXT, ForNavigationMenu, ForNavigationMenuContent, ForNavigationMenuIndicator, ForNavigationMenuItem, ForNavigationMenuLink, ForNavigationMenuList, ForNavigationMenuTrigger, ForNavigationMenuViewport, provideForNavigationMenuDefaults };
+//# sourceMappingURL=forty-cdk-navigation-menu.mjs.map