@malva-ui/core 0.1.12 → 0.1.14

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

@@ -0,0 +1,2540 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, signal, inject, DestroyRef, NgZone, ElementRef, input, output, ViewContainerRef, afterRenderEffect, Renderer2, effect, Directive, computed, Injector, viewChild, forwardRef, runInInjectionContext, ChangeDetectionStrategy, ViewEncapsulation, Component, TemplateRef, contentChildren, contentChild, untracked, HostAttributeToken } from '@angular/core';
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import { RIGHT_ARROW, UP_ARROW, DOWN_ARROW, LEFT_ARROW } from '@angular/cdk/keycodes';
+import { MlvPopupService, SUBMENU_POSITIONS, MENU_POSITIONS, MlvPopup, MlvPopupContent } from '@malva-ui/core/popup';
+import { MlvListItem, MlvList } from '@malva-ui/core/list';
+import { MlvLoader } from '@malva-ui/core/loader';
+import { MlvRtlService, mlvNextId } from '@malva-ui/cdk/utils';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { NgTemplateOutlet } from '@angular/common';
+import { MlvDataSource } from '@malva-ui/cdk/data-source';
+
+/** Injection token for the nearest `mlv-menu` item registry. */
+const MLV_MENU_ITEM_REGISTRY = new InjectionToken('MLV_MENU_ITEM_REGISTRY');
+/** Signal-backed ordered item registry used by `mlv-menu`. */
+class MlvMenuItemRegistryStore {
+    _items = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+    _mutationObserver = null;
+    _observedContainer = null;
+    items = this._items.asReadonly();
+    register(item) {
+        this._items.update((items) => items.includes(item) ? items : [...items, item]);
+        this._syncObservedContainer();
+        this._resyncItems();
+    }
+    unregister(item) {
+        this._items.update((items) => {
+            const nextItems = items.filter((candidate) => candidate !== item);
+            return nextItems.length === items.length ? items : nextItems;
+        });
+        this._syncObservedContainer();
+        this._resyncItems();
+    }
+    resync() {
+        this._syncObservedContainer();
+        this._resyncItems();
+    }
+    syncOrder(items) {
+        this._items.update((currentItems) => {
+            const orderedItems = items.filter((item) => currentItems.includes(item));
+            const unorderedItems = currentItems.filter((item) => !orderedItems.includes(item));
+            const nextItems = [
+                ...orderedItems,
+                ...[...unorderedItems].sort(mlvCompareMenuItemsByDomOrder),
+            ];
+            return mlvMenuItemsMatchOrder(currentItems, nextItems)
+                ? currentItems
+                : nextItems;
+        });
+        this._syncObservedContainer();
+    }
+    _syncObservedContainer() {
+        const nextContainer = mlvGetSharedMenuContainer(this._items());
+        if (nextContainer === this._observedContainer) {
+            return;
+        }
+        this._mutationObserver?.disconnect();
+        this._observedContainer = nextContainer;
+        if (!nextContainer) {
+            this._mutationObserver = null;
+            return;
+        }
+        this._mutationObserver = new MutationObserver(() => this._resyncItems());
+        this._mutationObserver.observe(nextContainer, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    _resyncItems() {
+        this._items.update((items) => {
+            if (items.length < 2) {
+                return items;
+            }
+            const nextItems = [...items].sort(mlvCompareMenuItemsByDomOrder);
+            return mlvMenuItemsMatchOrder(items, nextItems) ? items : nextItems;
+        });
+    }
+}
+function mlvCompareMenuItemsByDomOrder(a, b) {
+    const aEl = a._elementRef?.nativeElement;
+    const bEl = b._elementRef?.nativeElement;
+    if (!aEl || !bEl || aEl === bEl) {
+        return 0;
+    }
+    const panelContainer = mlvGetSharedMenuItemContainer(aEl, bEl, '[role="menu"]');
+    if (panelContainer) {
+        return mlvCompareWithinContainer(panelContainer, '[role="menuitem"]', aEl, bEl);
+    }
+    const hostContainer = mlvGetSharedMenuItemContainer(aEl, bEl, 'mlv-menu');
+    if (hostContainer) {
+        return mlvCompareWithinContainer(hostContainer, 'mlv-list-item[mlvMenuItem]', aEl, bEl);
+    }
+    const position = aEl.compareDocumentPosition(bEl);
+    if (position & Node.DOCUMENT_POSITION_DISCONNECTED) {
+        return 0;
+    }
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+        return -1;
+    if (position & Node.DOCUMENT_POSITION_PRECEDING)
+        return 1;
+    return 0;
+}
+function mlvGetSharedMenuContainer(items) {
+    const containers = items
+        .map((item) => item._elementRef?.nativeElement)
+        .filter((element) => element instanceof HTMLElement)
+        .map((element) => element.closest('[role="menu"]') ?? element.closest('mlv-menu'))
+        .filter((container) => container instanceof HTMLElement);
+    if (containers.length === 0) {
+        return null;
+    }
+    const [firstContainer, ...restContainers] = containers;
+    return restContainers.every((container) => container === firstContainer)
+        ? firstContainer
+        : null;
+}
+function mlvMenuItemsMatchOrder(currentItems, nextItems) {
+    return currentItems.every((item, index) => item === nextItems[index]);
+}
+function mlvGetSharedMenuItemContainer(aEl, bEl, selector) {
+    const aContainer = mlvAsHtmlElement(aEl.closest(selector));
+    const bContainer = mlvAsHtmlElement(bEl.closest(selector));
+    return aContainer && aContainer === bContainer ? aContainer : null;
+}
+function mlvAsHtmlElement(element) {
+    return element instanceof HTMLElement ? element : null;
+}
+function mlvCompareWithinContainer(container, itemSelector, aEl, bEl) {
+    const orderedItems = Array.from(container.querySelectorAll(itemSelector));
+    const aIndex = orderedItems.indexOf(aEl);
+    const bIndex = orderedItems.indexOf(bEl);
+    if (aIndex === -1 || bIndex === -1 || aIndex === bIndex) {
+        return 0;
+    }
+    return aIndex < bIndex ? -1 : 1;
+}
+
+/** Injection token for the parent menu. */
+const MENU_TOKEN = new InjectionToken('MENU_TOKEN');
+/** Internal injector token for generated menu-row submenu behaviour. */
+const MLV_MENU_DATA_ITEM = new InjectionToken('MLV_MENU_DATA_ITEM');
+
+/** Injection token for the nearest `mlv-menubar` item registry. */
+const MLV_MENUBAR_ITEM_REGISTRY = new InjectionToken('MLV_MENUBAR_ITEM_REGISTRY');
+/** Signal-backed ordered item registry used by `mlv-menubar`. */
+class MlvMenubarItemRegistryStore {
+    _items = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+    _mutationObserver = null;
+    _observedContainer = null;
+    items = this._items.asReadonly();
+    register(item) {
+        this._items.update((items) => items.includes(item) ? items : [...items, item]);
+        this._syncObservedContainer();
+        this._resyncItems();
+    }
+    unregister(item) {
+        this._items.update((items) => {
+            const nextItems = items.filter((candidate) => candidate !== item);
+            return nextItems.length === items.length ? items : nextItems;
+        });
+        this._syncObservedContainer();
+        this._resyncItems();
+    }
+    resync() {
+        this._syncObservedContainer();
+        this._resyncItems();
+    }
+    syncOrder(items) {
+        this._items.update((currentItems) => {
+            const orderedItems = items.filter((item) => currentItems.includes(item));
+            const unorderedItems = currentItems.filter((item) => !orderedItems.includes(item));
+            const nextItems = [
+                ...orderedItems,
+                ...[...unorderedItems].sort(mlvCompareMenubarItemsByDomOrder),
+            ];
+            return mlvMenubarItemsMatchOrder(currentItems, nextItems)
+                ? currentItems
+                : nextItems;
+        });
+        this._syncObservedContainer();
+    }
+    _syncObservedContainer() {
+        const nextContainer = mlvGetSharedMenubarContainer(this._items());
+        if (nextContainer === this._observedContainer) {
+            return;
+        }
+        this._mutationObserver?.disconnect();
+        this._observedContainer = nextContainer;
+        if (!nextContainer) {
+            this._mutationObserver = null;
+            return;
+        }
+        this._mutationObserver = new MutationObserver(() => this._resyncItems());
+        this._mutationObserver.observe(nextContainer, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    _resyncItems() {
+        this._items.update((items) => {
+            if (items.length < 2) {
+                return items;
+            }
+            const nextItems = [...items].sort(mlvCompareMenubarItemsByDomOrder);
+            return mlvMenubarItemsMatchOrder(items, nextItems) ? items : nextItems;
+        });
+    }
+}
+function mlvCompareMenubarItemsByDomOrder(a, b) {
+    const aEl = a._elementRef?.nativeElement;
+    const bEl = b._elementRef?.nativeElement;
+    if (!aEl || !bEl || aEl === bEl) {
+        return 0;
+    }
+    const position = aEl.compareDocumentPosition(bEl);
+    if (position & Node.DOCUMENT_POSITION_DISCONNECTED) {
+        return 0;
+    }
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+        return -1;
+    if (position & Node.DOCUMENT_POSITION_PRECEDING)
+        return 1;
+    return 0;
+}
+function mlvGetSharedMenubarContainer(items) {
+    const containers = items
+        .map((item) => item._elementRef?.nativeElement.closest('mlv-menubar'))
+        .filter((container) => container instanceof HTMLElement);
+    if (containers.length === 0) {
+        return null;
+    }
+    const [firstContainer, ...restContainers] = containers;
+    return restContainers.every((container) => container === firstContainer)
+        ? firstContainer
+        : null;
+}
+function mlvMenubarItemsMatchOrder(currentItems, nextItems) {
+    return currentItems.every((item, index) => item === nextItems[index]);
+}
+
+/**
+ * Minimum horizontal travel, in CSS pixels, that counts as aiming at the submenu.
+ *
+ * Without it a purely vertical move qualifies: `deltaX === 0` is not "away from"
+ * the submenu, and the cone between the panel's top and bottom corners is very
+ * wide when measured from the far side of the item, so sliding straight down the
+ * item column read as heading toward the panel and kept cancelling the close.
+ *
+ * Small enough that a genuine diagonal still registers on the first move, large
+ * enough that jitter along one axis does not.
+ */
+const MIN_HORIZONTAL_PROGRESS = 2;
+/** Returns whether the current pointer trajectory is heading into a submenu. */
+function isCursorHeadingToSubmenu(currentX, currentY, state) {
+    const { lastX, lastY, submenuRect, side } = state;
+    const deltaX = currentX - lastX;
+    const progress = side === 'right' ? deltaX : -deltaX;
+    if (progress < MIN_HORIZONTAL_PROGRESS)
+        return false;
+    const edgeX = side === 'right' ? submenuRect.left : submenuRect.right;
+    const edgeDelta = edgeX - lastX;
+    if (Math.abs(edgeDelta) < 1)
+        return true;
+    const currentSlope = (currentY - lastY) / edgeDelta;
+    const topSlope = (submenuRect.top - lastY) / edgeDelta;
+    const bottomSlope = (submenuRect.bottom - lastY) / edgeDelta;
+    return (currentSlope >= Math.min(topSlope, bottomSlope) &&
+        currentSlope <= Math.max(topSlope, bottomSlope));
+}
+
+/**
+ * Owns the common popup, focus restoration, and submenu hover-intent lifecycle
+ * used by explicit and data-generated menu triggers.
+ */
+class MlvMenuOverlayController {
+    _config;
+    /** Whether the controlled menu overlay is currently open. */
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    _popupService;
+    _ngZone;
+    _destroyRef = inject(DestroyRef);
+    _overlayRef = null;
+    _openSubscriptions = [];
+    _triangleState = null;
+    _closeTimer = null;
+    _mousemoveCleanup = null;
+    _destroyed = false;
+    constructor(_config, dependencies) {
+        this._config = _config;
+        this._popupService = dependencies?.popupService ?? inject(MlvPopupService);
+        this._ngZone = dependencies?.ngZone ?? inject(NgZone);
+        this._destroyRef.onDestroy(() => this.destroy());
+    }
+    /** Opens the menu overlay unless it is already open or disabled. */
+    open() {
+        if (this._destroyed || this.isOpen() || this._config.isDisabled())
+            return;
+        const menu = this._config.getMenu();
+        const popup = menu._popup();
+        const isSubmenu = this._config.isSubmenu();
+        const isMenubarChild = this._config.isMenubarChild;
+        const positions = isSubmenu ? SUBMENU_POSITIONS : MENU_POSITIONS;
+        menu.registerParentMenu(isSubmenu ? this._config.parentMenu : null);
+        menu.registerMenubarController(isMenubarChild && this._config.menubar
+            ? {
+                openNextItemMenu: () => this._config.menubar?.openAdjacentItemMenu(this._config.getMenubarItem(), 1),
+                openPreviousItemMenu: () => this._config.menubar?.openAdjacentItemMenu(this._config.getMenubarItem(), -1),
+            }
+            : null);
+        popup.animationState.set('idle');
+        this._overlayRef = this._popupService.open({
+            origin: this._config.origin,
+            template: popup.popupTemplate(),
+            vcr: this._config.vcr,
+            positions,
+            hasBackdrop: !isSubmenu && !isMenubarChild,
+            dismissExcludeElements: isMenubarChild && this._config.menubar
+                ? [this._config.menubar.hostElement]
+                : undefined,
+            onClose: () => {
+                this._overlayRef = null;
+                this.isOpen.set(false);
+                popup.animationState.set('idle');
+                popup.opened.set(false);
+                menu._isOpen.set(false);
+                this._openSubscriptions.forEach((subscription) => subscription.unsubscribe());
+                this._openSubscriptions = [];
+                this._triangleState = null;
+                this._removeMousemoveListener();
+                this._config.onClosed?.();
+                if (isMenubarChild) {
+                    this._config.menubar?.notifyItemClosed(this._config.getMenubarItem());
+                }
+            },
+            onRequestClose: () => menu.close(),
+            onPositionChange: (change) => popup.updateArrowFromPosition(change.connectionPair),
+        });
+        popup.opened.set(true);
+        menu._isOpen.set(true);
+        this.isOpen.set(true);
+        this._config.onOpened?.();
+        if (isMenubarChild) {
+            this._config.menubar?.notifyItemOpened(this._config.getMenubarItem());
+        }
+        const leaveSubscription = popup.leaveAnimationDone$.subscribe(() => {
+            this._overlayRef?.close();
+        });
+        this._openSubscriptions.push(leaveSubscription);
+        const closedSubscription = menu.closed.subscribe(() => {
+            this._restoreFocusToTrigger();
+            if (this._overlayRef) {
+                popup.animationState.set('leave');
+            }
+        });
+        this._openSubscriptions.push(closedSubscription);
+        queueMicrotask(() => popup.beginEnterAnimation());
+        if (isSubmenu) {
+            this._setupSubmenuTracking();
+        }
+    }
+    /** Closes the menu overlay when it is open. */
+    close() {
+        if (!this.isOpen())
+            return;
+        this._closeOverlay();
+    }
+    /** Toggles the controlled menu overlay. */
+    toggle() {
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    /** Opens the menu and focuses its first enabled item. */
+    openWithFirstItemFocused() {
+        this.open();
+        if (this.isOpen()) {
+            setTimeout(() => this._config.getMenu().focusFirstItem(), 0);
+        }
+    }
+    /** Opens the menu and focuses its last enabled item. */
+    openWithLastItemFocused() {
+        this.open();
+        if (this.isOpen()) {
+            setTimeout(() => this._config.getMenu().focusLastItem(), 0);
+        }
+    }
+    /** Handles pointer entry for menubar and submenu triggers. */
+    onMouseEnter() {
+        if (this._config.isMenubarChild) {
+            if (this._config.isDisabled())
+                return;
+            this._config.menubar?.onItemPointerEnter(this._config.getMenubarItem());
+            return;
+        }
+        if (!this._config.isSubmenu() || this._config.isDisabled())
+            return;
+        this._clearCloseTimer();
+        if (!this.isOpen()) {
+            this.open();
+        }
+    }
+    /** Handles pointer exit for submenu triggers using triangle intent. */
+    onMouseLeave(event) {
+        if (!this._config.isSubmenu())
+            return;
+        if (this._triangleState?.cursorEnteredSubmenu) {
+            const overlayElement = this._overlayRef?.overlayRef.overlayElement;
+            const entered = event.relatedTarget;
+            const intoSubmenu = entered instanceof Node && !!overlayElement?.contains(entered);
+            if (!intoSubmenu)
+                this._scheduleClose();
+            return;
+        }
+        if (this._triangleState) {
+            const heading = isCursorHeadingToSubmenu(event.clientX, event.clientY, this._triangleState);
+            if (heading)
+                return;
+        }
+        this._scheduleClose();
+    }
+    /** Cleans up listeners and disposes the controlled overlay. */
+    destroy() {
+        if (this._destroyed)
+            return;
+        this._destroyed = true;
+        this._clearCloseTimer();
+        this._removeMousemoveListener();
+        this._overlayRef?.close();
+        this._overlayRef = null;
+    }
+    _restoreFocusToTrigger() {
+        const overlayElement = this._overlayRef?.overlayRef.overlayElement;
+        const active = document.activeElement;
+        if (overlayElement && active && overlayElement.contains(active)) {
+            this._config.origin.nativeElement.focus();
+        }
+    }
+    _closeOverlay() {
+        if (!this._overlayRef)
+            return;
+        this._config.getMenu()._popup().animationState.set('leave');
+    }
+    _setupSubmenuTracking() {
+        setTimeout(() => {
+            if (this._destroyed || !this._overlayRef || !this.isOpen())
+                return;
+            const overlayElement = this._overlayRef.overlayRef.overlayElement;
+            this._triangleState = {
+                lastX: 0,
+                lastY: 0,
+                submenuRect: overlayElement.getBoundingClientRect(),
+                side: 'right',
+                cursorEnteredSubmenu: false,
+            };
+            this._installMousemoveListener();
+            this._installSubmenuOverlayListeners(overlayElement);
+        }, 0);
+    }
+    _installSubmenuOverlayListeners(overlayElement) {
+        const onEnter = () => {
+            if (this._triangleState) {
+                this._triangleState.cursorEnteredSubmenu = true;
+            }
+            this._clearCloseTimer();
+            this._removeMousemoveListener();
+        };
+        const onLeave = () => this._scheduleClose();
+        this._ngZone.runOutsideAngular(() => {
+            overlayElement.addEventListener('mouseenter', onEnter);
+            overlayElement.addEventListener('mouseleave', onLeave);
+        });
+        this._openSubscriptions.push({
+            unsubscribe: () => {
+                overlayElement.removeEventListener('mouseenter', onEnter);
+                overlayElement.removeEventListener('mouseleave', onLeave);
+            },
+        });
+    }
+    _installMousemoveListener() {
+        this._removeMousemoveListener();
+        const handler = (event) => {
+            if (!this._triangleState || !this.isOpen())
+                return;
+            if (this._triangleState.cursorEnteredSubmenu)
+                return;
+            if (this._config.origin.nativeElement.contains(event.target)) {
+                this._clearCloseTimer();
+                return;
+            }
+            if (this._isPointerOnSiblingItem(event.target)) {
+                this._ngZone.run(() => this._config.requestClose?.() ?? this.close());
+                return;
+            }
+            const { clientX, clientY } = event;
+            const state = this._triangleState;
+            const heading = isCursorHeadingToSubmenu(clientX, clientY, state);
+            state.lastX = clientX;
+            state.lastY = clientY;
+            if (heading) {
+                this._clearCloseTimer();
+            }
+            else if (this._overlayRef) {
+                state.submenuRect =
+                    this._overlayRef.overlayRef.overlayElement.getBoundingClientRect();
+                if (!isCursorHeadingToSubmenu(clientX, clientY, state)) {
+                    this._scheduleClose();
+                }
+            }
+        };
+        this._ngZone.runOutsideAngular(() => {
+            document.addEventListener('mousemove', handler, true);
+            this._mousemoveCleanup = () => document.removeEventListener('mousemove', handler, true);
+        });
+    }
+    _isPointerOnSiblingItem(target) {
+        if (!(target instanceof Element))
+            return false;
+        const item = target.closest('[role="menuitem"]');
+        if (!item || item === this._config.origin.nativeElement)
+            return false;
+        const panel = this._config.origin.nativeElement.closest('[role="menu"]');
+        return !!panel?.contains(item);
+    }
+    _removeMousemoveListener() {
+        if (this._mousemoveCleanup) {
+            this._mousemoveCleanup();
+            this._mousemoveCleanup = null;
+        }
+    }
+    _scheduleClose() {
+        this._clearCloseTimer();
+        this._closeTimer = setTimeout(() => {
+            this._ngZone.run(() => this._config.requestClose?.() ?? this.close());
+        }, 150);
+    }
+    _clearCloseTimer() {
+        if (this._closeTimer !== null) {
+            clearTimeout(this._closeTimer);
+            this._closeTimer = null;
+        }
+    }
+}
+
+/** Injection token for the parent `mlv-menubar`. */
+const MENUBAR_TOKEN = new InjectionToken('MENUBAR_TOKEN');
+
+/**
+ * Trigger directive for `mlv-menu`.
+ *
+ * Attach to any element to open a `mlv-menu` panel on click. Uses `MlvPopupService`
+ * from `@malva-ui/core/popup` to create the CDK overlay with the popup component's
+ * template for visual chrome (background, border, radius, shadow, animations).
+ * The menu panel and items are declared inside `[mlvPopupContent]` in the menu's
+ * template and are rendered directly into the overlay — no DOM manipulation required.
+ *
+ * When used as a submenu trigger (`[isSubmenuTrigger]="true"`), the panel opens on
+ * mouseenter and the triangle-pointer-tracking algorithm keeps it open while the
+ * cursor moves diagonally toward it.
+ *
+ * Hover intent is resolved by what the pointer is over, with geometry used only
+ * for the ambiguous space between item and panel:
+ * - over the trigger item — stays open, whatever the trajectory;
+ * - over a different row of the same menu — closes;
+ * - in between (including the 8px `SUBMENU_POSITIONS` gap) — the safe cone
+ *   decides, and a short grace timer absorbs jitter and gap crossings.
+ *
+ * Once the cursor enters the submenu panel, triangle tracking stops and the
+ * panel's own `mouseleave` schedules the close.
+ *
+ * @example Simple trigger
+ * ```html
+ * <button [mlvMenuTrigger]="menu">Open menu</button>
+ * <mlv-menu #menu>
+ *   <mlv-menu-item (itemClick)="onEdit()">Edit</mlv-menu-item>
+ *   <mlv-menu-separator />
+ *   <mlv-menu-item (itemClick)="onDelete()">Delete</mlv-menu-item>
+ * </mlv-menu>
+ * ```
+ *
+ * @example Submenu trigger on a menu item
+ * ```html
+ * <mlv-menu-item [mlvMenuTrigger]="sub" [isSubmenuTrigger]="true">
+ *   More options
+ * </mlv-menu-item>
+ * <mlv-menu #sub>
+ *   <mlv-menu-item (itemClick)="onOption()">Option A</mlv-menu-item>
+ * </mlv-menu>
+ * ```
+ */
+class MlvMenuTrigger {
+    /** @private Normalizes horizontal submenu opening for RTL layouts. */
+    _rtlService = inject(MlvRtlService);
+    // ─── Injected services ────────────────────────────────────────────────────
+    /** @private Host element reference. */
+    _elementRef = inject((ElementRef));
+    /** @private DestroyRef for cleanup on directive destruction. */
+    _destroyRef = inject(DestroyRef);
+    /** @private Parent menu for submenu triggers, if this trigger lives inside one. */
+    _parentMenu = inject(MENU_TOKEN, {
+        optional: true,
+    });
+    /**
+     * @private Parent menubar, if this trigger is a direct child of a `mlv-menubar`
+     * (i.e. a top-level File / Edit / View item). `null` for standalone triggers
+     * and submenu triggers.
+     */
+    _menubar = inject(MENUBAR_TOKEN, {
+        optional: true,
+    });
+    _menubarItemRegistry = inject(MLV_MENUBAR_ITEM_REGISTRY, {
+        optional: true,
+    });
+    /**
+     * @private Whether this trigger is a top-level menubar item. When `true` the
+     * host exposes `role="menuitem"` + a roving tabindex, and open/close state is
+     * coordinated with the parent `mlv-menubar`.
+     */
+    _isMenubarChild = this._menubar !== null;
+    // ─── Inputs ───────────────────────────────────────────────────────────────
+    /**
+     * The `mlv-menu` panel to open. Required.
+     */
+    mlvMenuTrigger = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mlvMenuTrigger" }] : /* istanbul ignore next */ []));
+    /**
+     * When true, treats this trigger as a submenu trigger:
+     * - Opens the panel using submenu positions (right-of-parent).
+     * - Activates triangle pointer tracking while the submenu is open.
+     * - Opens on `mouseenter` in addition to `click`.
+     */
+    isSubmenuTrigger = input(false, { ...(ngDevMode ? { debugName: "isSubmenuTrigger" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * When `true`, disables the trigger — no overlay will open.
+     */
+    menuTriggerDisabled = input(false, { ...(ngDevMode ? { debugName: "menuTriggerDisabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    // ─── Outputs ──────────────────────────────────────────────────────────────
+    /** Emits when the menu panel opens. */
+    menuOpened = output();
+    /** Emits when the menu panel closes. */
+    menuClosed = output();
+    // ─── Internal state ───────────────────────────────────────────────────────
+    /**
+     * @private Roving tabindex for menubar top-level items — `0` for the active
+     * item, `-1` otherwise. Written by the parent `mlv-menubar`; only reflected
+     * on the host when `_isMenubarChild` is `true`.
+     */
+    _tabIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_tabIndex" }] : /* istanbul ignore next */ []));
+    /** @private Shared overlay and submenu hover-intent controller. */
+    _overlayController = new MlvMenuOverlayController({
+        getMenu: () => this.mlvMenuTrigger(),
+        origin: this._elementRef,
+        vcr: inject(ViewContainerRef),
+        parentMenu: this._parentMenu,
+        menubar: this._menubar,
+        isSubmenu: () => this.isSubmenuTrigger(),
+        isMenubarChild: this._isMenubarChild,
+        isDisabled: () => this.menuTriggerDisabled(),
+        getMenubarItem: () => this,
+        requestClose: () => this.close(),
+        onOpened: () => this.menuOpened.emit(),
+        onClosed: () => this.menuClosed.emit(),
+    });
+    /** @private Whether the menu overlay is currently open. */
+    _isOpen = this._overlayController.isOpen;
+    constructor() {
+        if (this._isMenubarChild) {
+            this._menubarItemRegistry?.register(this);
+            afterRenderEffect(() => this._menubarItemRegistry?.resync());
+        }
+        this._destroyRef.onDestroy(() => {
+            if (this._isMenubarChild) {
+                this._menubarItemRegistry?.unregister(this);
+            }
+        });
+        // Menubar top-level item: apply `role="menuitem"` + a roving tabindex
+        // imperatively. Only done for menubar children (never co-hosted with
+        // `MlvMenuItem`), so it cannot collide with that directive's own
+        // `role`/`tabindex` host bindings on submenu triggers.
+        if (this._isMenubarChild) {
+            const renderer = inject(Renderer2);
+            const el = this._elementRef.nativeElement;
+            renderer.setAttribute(el, 'role', 'menuitem');
+            effect(() => {
+                renderer.setAttribute(el, 'tabindex', String(this._tabIndex()));
+            });
+        }
+    }
+    // ─── Public API ───────────────────────────────────────────────────────────
+    /**
+     * Opens the menu overlay programmatically.
+     * No-op if the overlay is already open or the trigger is disabled.
+     */
+    open() {
+        this._overlayController.open();
+    }
+    /**
+     * Closes the menu overlay programmatically.
+     * No-op if the overlay is not open.
+     */
+    close() {
+        this._overlayController.close();
+    }
+    /**
+     * Toggles the menu overlay open/closed.
+     */
+    toggle() {
+        this._overlayController.toggle();
+    }
+    // ─── MlvMenubarItem (used by the parent `mlv-menubar`) ─────────────────────
+    /**
+     * Whether this trigger is disabled. Bridges the `menuTriggerDisabled` signal
+     * to the `MlvMenubarItem` / `FocusKeyManager.skipPredicate` contract.
+     */
+    get disabledBoolean() {
+        return !!this.menuTriggerDisabled();
+    }
+    /**
+     * Focuses the trigger host element. Required by CDK `FocusableOption` for the
+     * menubar's `FocusKeyManager` roving tabindex.
+     */
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+    /**
+     * Returns the trigger's trimmed visible text, used by the menubar's
+     * `FocusKeyManager` type-ahead. Required by `FocusKeyManager.withTypeAhead()`.
+     */
+    getLabel() {
+        return this._elementRef.nativeElement.textContent?.trim() ?? '';
+    }
+    /** Whether this item's dropdown menu is currently open (`MlvMenubarItem`). */
+    isMenuOpen() {
+        return this._isOpen();
+    }
+    /** Opens this item's dropdown without moving focus into the panel (`MlvMenubarItem`). */
+    openMenu() {
+        this.open();
+    }
+    /** Closes this item's dropdown (`MlvMenubarItem`). */
+    closeMenu() {
+        this.close();
+    }
+    /**
+     * Opens this item's dropdown and moves focus to its first item (`MlvMenubarItem`).
+     */
+    openMenuWithFirstItemFocused() {
+        this._overlayController.openWithFirstItemFocused();
+    }
+    /**
+     * Opens this item's dropdown and moves focus to its last item (`MlvMenubarItem`).
+     */
+    openMenuWithLastItemFocused() {
+        this._overlayController.openWithLastItemFocused();
+    }
+    // ─── Protected host event handlers ───────────────────────────────────────
+    /**
+     * @protected Click handler — toggles the menu.
+     */
+    _onTriggerClick() {
+        if (this.menuTriggerDisabled())
+            return;
+        this.toggle();
+    }
+    /**
+     * @protected Mouseenter handler.
+     *
+     * - Menubar top-level item: delegates to the bar's hover-follow, which opens
+     *   this item's menu only while another dropdown in the bar is already open.
+     * - Submenu trigger: opens the submenu on hover (triangle tracking).
+     * - Standalone trigger: no-op (opens on click only).
+     */
+    _onTriggerMouseEnter() {
+        this._overlayController.onMouseEnter();
+    }
+    /**
+     * @protected Mouseleave handler — for submenu triggers, starts a delayed close
+     * unless the cursor is heading into the submenu triangle.
+     * Once the cursor has entered the submenu panel, the submenu overlay's own
+     * mouseleave listener handles closing — no triangle tracking needed here.
+     */
+    _onTriggerMouseLeave(event) {
+        this._overlayController.onMouseLeave(event);
+    }
+    /**
+     * @protected Keyboard handler — Enter/Space opens; Escape closes;
+     * ArrowDown/Up opens with keyboard focus.
+     */
+    _onKeydown(event) {
+        if (this.menuTriggerDisabled())
+            return;
+        const key = this._rtlService.normalizeArrowKey(event);
+        switch (key ?? event.key) {
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.toggle();
+                if (this._isOpen()) {
+                    setTimeout(() => this.mlvMenuTrigger().focusFirstItem(), 0);
+                }
+                break;
+            case DOWN_ARROW:
+                if (!this._isOpen()) {
+                    event.preventDefault();
+                    this.open();
+                    setTimeout(() => this.mlvMenuTrigger().focusFirstItem(), 0);
+                }
+                break;
+            case UP_ARROW:
+                if (!this._isOpen()) {
+                    event.preventDefault();
+                    this.open();
+                    setTimeout(() => this.mlvMenuTrigger().focusLastItem(), 0);
+                }
+                break;
+            case RIGHT_ARROW:
+                // On a submenu trigger (a menu item), ArrowRight opens the submenu and
+                // moves focus to its first item.
+                if (this.isSubmenuTrigger() && !this._isOpen()) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.open();
+                    setTimeout(() => this.mlvMenuTrigger().focusFirstItem(), 0);
+                }
+                break;
+            case 'Escape':
+                if (this._isOpen()) {
+                    event.preventDefault();
+                    this.close();
+                    this._elementRef.nativeElement.focus();
+                }
+                break;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MlvMenuTrigger, isStandalone: true, selector: "[mlvMenuTrigger]", inputs: { mlvMenuTrigger: { classPropertyName: "mlvMenuTrigger", publicName: "mlvMenuTrigger", isSignal: true, isRequired: true, transformFunction: null }, isSubmenuTrigger: { classPropertyName: "isSubmenuTrigger", publicName: "isSubmenuTrigger", isSignal: true, isRequired: false, transformFunction: null }, menuTriggerDisabled: { classPropertyName: "menuTriggerDisabled", publicName: "menuTriggerDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed" }, host: { listeners: { "click": "_onTriggerClick()", "mouseenter": "_onTriggerMouseEnter()", "mouseleave": "_onTriggerMouseLeave($event)", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "_isOpen()", "attr.aria-controls": "_isOpen() ? mlvMenuTrigger().panelId : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMenuTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvMenuTrigger]',
+                    host: {
+                        '[attr.aria-haspopup]': '"menu"',
+                        '[attr.aria-expanded]': '_isOpen()',
+                        '[attr.aria-controls]': '_isOpen() ? mlvMenuTrigger().panelId : null',
+                        // NB: `role="menuitem"` and the roving `tabindex` are applied imperatively
+                        // (see the constructor) *only* for menubar children. They are deliberately
+                        // NOT host bindings: a submenu trigger co-hosts `MlvMenuItem`, which
+                        // already owns `[attr.role]`/`[attr.tabindex]`, and two directives binding
+                        // the same attribute would clobber each other.
+                        '(click)': '_onTriggerClick()',
+                        '(mouseenter)': '_onTriggerMouseEnter()',
+                        '(mouseleave)': '_onTriggerMouseLeave($event)',
+                        '(keydown)': '_onKeydown($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { mlvMenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "mlvMenuTrigger", required: true }] }], isSubmenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubmenuTrigger", required: false }] }], menuTriggerDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuTriggerDisabled", required: false }] }], menuOpened: [{ type: i0.Output, args: ["menuOpened"] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }] } });
+
+/**
+ * Menu item directive — applied to `mlv-list-item` to give it menu-item semantics
+ * and behavior.
+ *
+ * Overrides the list item's default `role="listitem"` with `role="menuitem"`,
+ * wires into the parent menu's `FocusKeyManager` (via `focus()` / `disabledBoolean`),
+ * and closes the parent menu stack on leaf activation. A co-hosted enabled
+ * submenu trigger owns its own activation so opening a child menu keeps the
+ * ancestor open; a disabled submenu trigger falls back to leaf activation.
+ *
+ * Use `[mlvListItemPrefix]` for leading icons and `[mlvListItemSuffix]` for
+ * trailing content (chevron, shortcut label, etc.).
+ *
+ * @example
+ * ```html
+ * <mlv-list-item mlvMenuItem (itemClick)="onSave()">Save</mlv-list-item>
+ *
+ * <mlv-list-item mlvMenuItem disabled>Unavailable</mlv-list-item>
+ *
+ * <mlv-list-item mlvMenuItem (itemClick)="onEdit()">
+ *   <svg mlvListItemPrefix lucideEdit [size]="14" />
+ *   Edit
+ * </mlv-list-item>
+ * ```
+ */
+class MlvMenuItem {
+    /** @private Normalizes horizontal submenu navigation for RTL layouts. */
+    _rtlService = inject(MlvRtlService);
+    /** @private Reference to parent menu, if any. Used to close on activation. */
+    _menu = inject(MENU_TOKEN, { optional: true });
+    _registry = inject(MLV_MENU_ITEM_REGISTRY, {
+        optional: true,
+    });
+    _renderer = inject(Renderer2);
+    _dataItemContext = inject(MLV_MENU_DATA_ITEM, {
+        optional: true,
+    });
+    _menubar = inject(MENUBAR_TOKEN, { optional: true });
+    /** @private A co-hosted submenu trigger owns activation instead of this leaf item. */
+    _submenuTrigger = inject(MlvMenuTrigger, {
+        optional: true,
+        self: true,
+    });
+    /** @private Host element used to call `focus()` for `FocusKeyManager`. */
+    _elementRef = inject((ElementRef));
+    constructor() {
+        this._registry?.register(this);
+        afterRenderEffect(() => this._registry?.resync());
+        inject(DestroyRef).onDestroy(() => this._registry?.unregister(this));
+        if (this._dataItemContext && !this._submenuTrigger) {
+            effect(() => {
+                const element = this._elementRef.nativeElement;
+                if (!this._dataItemContext?.hasChildren()) {
+                    this._renderer.removeAttribute(element, 'aria-haspopup');
+                    this._renderer.removeAttribute(element, 'aria-expanded');
+                    this._renderer.removeAttribute(element, 'aria-controls');
+                    return;
+                }
+                this._renderer.setAttribute(element, 'aria-haspopup', 'menu');
+                this._renderer.setAttribute(element, 'aria-expanded', String(this._dataItemContext.isOpen()));
+                const panelId = this._dataItemContext.panelId();
+                if (this._dataItemContext.isOpen() && panelId) {
+                    this._renderer.setAttribute(element, 'aria-controls', panelId);
+                }
+                else {
+                    this._renderer.removeAttribute(element, 'aria-controls');
+                }
+            });
+        }
+    }
+    // ─── Inputs ───────────────────────────────────────────────────────────────
+    /**
+     * When true, disables the item — removes it from the tab order and
+     * prevents activation. Supports attribute syntax: `<mlv-list-item mlvMenuItem disabled>`.
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    // ─── Outputs ──────────────────────────────────────────────────────────────
+    /**
+     * Emits when a leaf item is activated (click or Enter/Space key).
+     * The parent menu stack closes automatically after this event. Submenu-trigger
+     * rows delegate activation to `MlvMenuTrigger` and do not emit this output
+     * while that trigger is enabled.
+     */
+    itemClick = output();
+    // ─── FocusKeyManager interface ────────────────────────────────────────────
+    /**
+     * @private Tabindex managed by the parent menu's `FocusKeyManager`.
+     * `0` for the active (focused) item, `-1` for all others (roving tabindex).
+     * A signal so the host `[attr.tabindex]` binding updates under OnPush.
+     */
+    _tabIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_tabIndex" }] : /* istanbul ignore next */ []));
+    /**
+     * Boolean getter for `FocusKeyManager.skipPredicate`.
+     * The key manager calls `item.disabledBoolean` so this bridges
+     * the signal API to the CDK interface.
+     */
+    get disabledBoolean() {
+        return this._isDisabled();
+    }
+    /**
+     * Focuses the host element.
+     * Required by CDK `FocusableOption` for `FocusKeyManager`.
+     */
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+    /**
+     * Returns the item's visible text label, used by the parent menu's
+     * `FocusKeyManager` type-ahead (type a letter to jump to the first matching
+     * item). Reads the host element's trimmed `textContent`.
+     * Required by CDK `FocusKeyManager.withTypeAhead()`.
+     */
+    getLabel() {
+        return this._elementRef.nativeElement.textContent?.trim() ?? '';
+    }
+    // ─── Handlers ─────────────────────────────────────────────────────────────
+    /**
+     * @protected Handles click activation.
+     */
+    _onClick() {
+        if (this._isDisabled())
+            return;
+        if (this._hasAutomaticSubmenu()) {
+            this._dataItemContext?.toggle();
+            return;
+        }
+        if (this._enabledSubmenuOwnsActivation())
+            return;
+        this.itemClick.emit();
+        this._menu?.closeAll();
+    }
+    /**
+     * @protected Handles Enter / Space keyboard activation.
+     * Prevents default scroll on Space and triggers the same logic as a click.
+     */
+    _onActivate(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this._isDisabled())
+            return;
+        if (this._hasAutomaticSubmenu()) {
+            if (this._dataItemContext?.isOpen()) {
+                this._dataItemContext.close();
+            }
+            else {
+                this._dataItemContext?.openWithFirstItemFocused();
+            }
+            return;
+        }
+        if (this._enabledSubmenuOwnsActivation())
+            return;
+        this.itemClick.emit();
+        this._menu?.closeAll();
+    }
+    /** @protected Delegates hover-open behavior for generated submenu rows. */
+    _onMouseEnter() {
+        if (this._isDisabled() || !this._hasAutomaticSubmenu())
+            return;
+        this._dataItemContext?.onMouseEnter();
+    }
+    /** @protected Delegates hover-close intent for generated submenu rows. */
+    _onMouseLeave(event) {
+        if (this._isDisabled() || !this._hasAutomaticSubmenu())
+            return;
+        this._dataItemContext?.onMouseLeave(event);
+    }
+    /** @protected Handles submenu keyboard opening for generated rows. */
+    _onKeydown(event) {
+        if (this._isDisabled() || !this._hasAutomaticSubmenu())
+            return;
+        const key = this._rtlService.normalizeArrowKey(event) ?? event.key;
+        if (this._isMenubarDataItem()) {
+            if (key === DOWN_ARROW && !this._dataItemContext?.isOpen()) {
+                event.preventDefault();
+                event.stopPropagation();
+                this._dataItemContext?.openWithFirstItemFocused();
+            }
+            else if (key === UP_ARROW && !this._dataItemContext?.isOpen()) {
+                event.preventDefault();
+                event.stopPropagation();
+                this._dataItemContext?.openWithLastItemFocused();
+            }
+            return;
+        }
+        if (key !== RIGHT_ARROW || this._dataItemContext?.isOpen())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this._dataItemContext?.openWithFirstItemFocused();
+    }
+    /** @private Whether a co-hosted trigger can handle submenu activation. */
+    _enabledSubmenuOwnsActivation() {
+        return !!(this._submenuTrigger?.isSubmenuTrigger() &&
+            !this._submenuTrigger.menuTriggerDisabled());
+    }
+    /** @private Whether this row is a generated submenu row without an explicit trigger. */
+    _hasAutomaticSubmenu() {
+        return !this._submenuTrigger && !!this._dataItemContext?.hasChildren();
+    }
+    /** @private Whether this generated row is a root item of a reactive menubar. */
+    _isMenubarDataItem() {
+        return !!this._dataItemContext && this._menubar !== null;
+    }
+    /** @private Resolved disabled state from explicit input or generated row data. */
+    _isDisabled() {
+        return !!(this.disabled() || this._dataItemContext?.isDisabled());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MlvMenuItem, isStandalone: true, selector: "mlv-list-item[mlvMenuItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { listeners: { "click": "_onClick()", "mouseenter": "_onMouseEnter()", "mouseleave": "_onMouseLeave($event)", "keydown.enter": "_onActivate($event)", "keydown": "_onKeydown($event)", "keydown.space": "_onActivate($event)" }, properties: { "attr.role": "\"menuitem\"", "attr.tabindex": "_isDisabled() ? -1 : _tabIndex()", "attr.aria-disabled": "_isDisabled() || null", "class.mlv-list-item--disabled": "_isDisabled()", "class.mlv-menu-data-renderer__submenu-trigger": "_hasAutomaticSubmenu()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMenuItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'mlv-list-item[mlvMenuItem]',
+                    host: {
+                        '[attr.role]': '"menuitem"',
+                        '[attr.tabindex]': '_isDisabled() ? -1 : _tabIndex()',
+                        '[attr.aria-disabled]': '_isDisabled() || null',
+                        '[class.mlv-list-item--disabled]': '_isDisabled()',
+                        '[class.mlv-menu-data-renderer__submenu-trigger]': '_hasAutomaticSubmenu()',
+                        '(click)': '_onClick()',
+                        '(mouseenter)': '_onMouseEnter()',
+                        '(mouseleave)': '_onMouseLeave($event)',
+                        '(keydown.enter)': '_onActivate($event)',
+                        '(keydown)': '_onKeydown($event)',
+                        '(keydown.space)': '_onActivate($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+
+/** Internal adapter that normalizes arrays and `MlvDataSource` instances. */
+class MlvMenuDataSourceAdapter {
+    /** @private The current source identity the adapter exposes. */
+    _source = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_source" }] : /* istanbul ignore next */ []));
+    /** @private Memoized `connect()` signals keyed by data-source identity. */
+    _connected = new Map();
+    /** Current top-level menu items for the active source. */
+    items = computed(() => {
+        const source = this._source();
+        if (source instanceof MlvDataSource) {
+            const items = this._connected.get(source);
+            return items ? items() : [];
+        }
+        return source;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    loading = computed(() => {
+        const source = this._source();
+        return source instanceof MlvDataSource ? source.loading() : false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** Replaces the active source, connecting data sources once per identity. */
+    setSource(source) {
+        if (source instanceof MlvDataSource && !this._connected.has(source)) {
+            this._connected.set(source, source.connect());
+        }
+        this._source.set(source);
+    }
+}
+/** Internal lazy loader for submenu children streams. */
+class MlvMenuChildrenDataSource {
+    _children;
+    /** @private Destroy hook used to tear down the child subscription. */
+    _destroyRef = inject(DestroyRef);
+    /** @private Latest emitted child items. */
+    _items = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+    /** @private Loading state for the first child request. */
+    _loading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_loading" }] : /* istanbul ignore next */ []));
+    /** @private Guards the one-time lazy subscription. */
+    _loaded = false;
+    _destroyed = false;
+    /** @private Active child-stream subscription, if loading has started. */
+    _subscription = null;
+    /** Latest child items emitted by the submenu stream. */
+    items = this._items.asReadonly();
+    /** Whether the first child payload is still pending. */
+    loading = this._loading.asReadonly();
+    constructor(_children) {
+        this._children = _children;
+        this._destroyRef.onDestroy(() => this._subscription?.unsubscribe());
+    }
+    /** Starts the lazy child subscription the first time a submenu is opened. */
+    ensureLoaded() {
+        if (this._destroyed || this._loaded || !this._children)
+            return;
+        this._loaded = true;
+        this._loading.set(true);
+        this._subscription = this._children.subscribe({
+            next: (items) => {
+                this._items.set(items);
+                this._loading.set(false);
+            },
+            error: () => {
+                this._items.set([]);
+                this._loading.set(false);
+            },
+        });
+    }
+    /** Stops the child stream when its owning row changes source identity. */
+    destroy() {
+        if (this._destroyed)
+            return;
+        this._destroyed = true;
+        this._subscription?.unsubscribe();
+        this._subscription = null;
+    }
+}
+
+/** Internal generated row host for one data-driven menu item. */
+class MlvMenuDataItem {
+    _injector = inject(Injector);
+    _viewContainerRef = inject(ViewContainerRef);
+    _menuItemRegistry = inject(MLV_MENU_ITEM_REGISTRY, { optional: true });
+    _menubarItemRegistry = inject(MLV_MENUBAR_ITEM_REGISTRY, { optional: true });
+    _hostElement = inject((ElementRef));
+    _renderer = inject(Renderer2);
+    _childMenu = viewChild(forwardRef(() => MlvMenu), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_childMenu" }] : /* istanbul ignore next */ []));
+    _childrenSource = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_childrenSource" }] : /* istanbul ignore next */ []));
+    _childrenIdentity;
+    _registeredMenubarItem = false;
+    /** Current row data. */
+    item = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+    /** Zero-based row index within the current level. */
+    index = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    /** Optional projected row definition to stamp for this item. */
+    itemDef = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemDef" }] : /* istanbul ignore next */ []));
+    /** Menu/menubar rendering mode for this level. */
+    mode = input('menu', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Owning parent menu accessor. */
+    parentMenu = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parentMenu" }] : /* istanbul ignore next */ []));
+    /** Root menubar accessor when relevant. */
+    menubar = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menubar" }] : /* istanbul ignore next */ []));
+    /** Menubar registry façade for a generated root data row. */
+    _menubarItem = this._createMenubarItem();
+    /** Typed template context for the stamped row. */
+    context = computed(() => ({
+        $implicit: this.item(),
+        index: this.index(),
+        hasChildren: this.hasChildren(),
+        loading: this.loading(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
+    /** Injector that reconnects generated rows to the menu contracts. */
+    rowInjector = computed(() => Injector.create({
+        providers: [
+            {
+                provide: MENU_TOKEN,
+                useValue: this.parentMenu(),
+            },
+            {
+                provide: MLV_MENU_ITEM_REGISTRY,
+                useValue: this._menuItemRegistry,
+            },
+            {
+                provide: MENUBAR_TOKEN,
+                useValue: this.mode() === 'menubar' ? this.menubar() : null,
+            },
+            {
+                provide: MLV_MENU_DATA_ITEM,
+                useValue: this._dataItemContext,
+            },
+        ],
+        parent: this._injector,
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowInjector" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Overlay origin for the generated submenu.
+     *
+     * Must be a real `ElementRef` instance: CDK's
+     * `FlexibleConnectedPositionStrategy` only measures the DOM node when the
+     * origin passes `instanceof ElementRef` (or `instanceof Element`), and reads
+     * anything else as an `{x, y}` point — which anchors the submenu to the
+     * viewport origin instead of its row. The `nativeElement` accessor stays
+     * lazy because the row is stamped by `ngTemplateOutlet` after construction.
+     */
+    _originElement = Object.defineProperty(new ElementRef(this._hostElement.nativeElement), 'nativeElement', {
+        configurable: true,
+        get: () => this._getRenderedRowElement() ?? this._hostElement.nativeElement,
+    });
+    _parentMenuProxy = {
+        close: () => this.parentMenu()?.close(),
+        closeAll: () => this.parentMenu()?.closeAll(),
+    };
+    _menubarProxy = this._createMenubarProxy();
+    _overlayController = new MlvMenuOverlayController({
+        getMenu: () => {
+            const menu = this._childMenu();
+            if (!menu) {
+                throw new Error('Generated submenu menu is not available.');
+            }
+            return menu;
+        },
+        origin: this._originElement,
+        vcr: this._viewContainerRef,
+        parentMenu: this._parentMenuProxy,
+        menubar: null,
+        isSubmenu: () => this.hasChildren(),
+        isMenubarChild: false,
+        isDisabled: () => !!this.item().disabled,
+        getMenubarItem: () => {
+            throw new Error('Generated data rows are not menubar triggers.');
+        },
+    });
+    _menubarOverlayController = new MlvMenuOverlayController({
+        getMenu: () => {
+            const menu = this._childMenu();
+            if (!menu) {
+                throw new Error('Generated submenu menu is not available.');
+            }
+            return menu;
+        },
+        origin: this._originElement,
+        vcr: this._viewContainerRef,
+        parentMenu: null,
+        menubar: this._menubarProxy,
+        isSubmenu: () => false,
+        isMenubarChild: true,
+        isDisabled: () => !!this.item().disabled,
+        getMenubarItem: () => this._menubarItem,
+    });
+    _dataItemContext = {
+        hasChildren: () => this.hasChildren(),
+        loading: () => this.loading(),
+        isOpen: () => this._activeOverlayController().isOpen(),
+        panelId: () => this._childMenu()?.panelId ?? null,
+        isDisabled: () => !!this.item().disabled,
+        open: () => {
+            this._ensureLoaded();
+            this._activeOverlayController().open();
+        },
+        close: () => this._activeOverlayController().close(),
+        toggle: () => {
+            this._ensureLoaded();
+            this._activeOverlayController().toggle();
+        },
+        openWithFirstItemFocused: () => {
+            this._ensureLoaded();
+            this._activeOverlayController().openWithFirstItemFocused();
+        },
+        openWithLastItemFocused: () => {
+            this._ensureLoaded();
+            this._activeOverlayController().openWithLastItemFocused();
+        },
+        onMouseEnter: () => {
+            this._ensureLoaded();
+            this._activeOverlayController().onMouseEnter();
+        },
+        onMouseLeave: (event) => this._activeOverlayController().onMouseLeave(event),
+    };
+    constructor() {
+        const source = this._childrenSource;
+        const injector = this._injector;
+        effect(() => {
+            const isMenubarItem = this.mode() === 'menubar' && this.menubar() !== null;
+            if (isMenubarItem &&
+                this._menubarItemRegistry &&
+                !this._registeredMenubarItem) {
+                this._menubarItemRegistry.register(this._menubarItem);
+                this._registeredMenubarItem = true;
+            }
+            else if (!isMenubarItem && this._registeredMenubarItem) {
+                this._menubarItemRegistry?.unregister(this._menubarItem);
+                this._registeredMenubarItem = false;
+            }
+        });
+        afterRenderEffect(() => {
+            const tabIndex = this._menubarItem._tabIndex();
+            if (this.mode() !== 'menubar')
+                return;
+            const row = this._getRenderedRowElement();
+            if (row)
+                this._renderer.setAttribute(row, 'tabindex', String(tabIndex));
+        });
+        inject(DestroyRef).onDestroy(() => {
+            if (this._registeredMenubarItem) {
+                this._menubarItemRegistry?.unregister(this._menubarItem);
+            }
+        });
+        effect(() => {
+            const children = this.item().children;
+            if (children === this._childrenIdentity)
+                return;
+            this._childrenSource()?.destroy();
+            this._childrenIdentity = children;
+            const nextSource = children
+                ? runInInjectionContext(injector, () => new MlvMenuChildrenDataSource(children))
+                : null;
+            source.set(nextSource);
+            if (nextSource && this._activeOverlayController().isOpen()) {
+                nextSource.ensureLoaded();
+            }
+        });
+    }
+    /** Whether this row currently advertises a generated submenu. */
+    hasChildren = computed(() => !!this.item().children, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
+    /** Whether the submenu is still waiting for its first child emission. */
+    loading = computed(() => this._childrenSource()?.loading() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** Current child collection for the generated submenu. */
+    childItems = computed(() => this._childrenSource()?.items() ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "childItems" }] : /* istanbul ignore next */ []));
+    _ensureLoaded() {
+        this._childrenSource()?.ensureLoaded();
+    }
+    _getRenderedRowElement() {
+        return this._hostElement.nativeElement.querySelector('mlv-list-item');
+    }
+    _activeOverlayController() {
+        return this.mode() === 'menubar'
+            ? this._menubarOverlayController
+            : this._overlayController;
+    }
+    _createMenubarItem() {
+        const item = {
+            _elementRef: this._hostElement,
+            _tabIndex: signal(-1),
+            focus: () => this._getRenderedRowElement()?.focus() ??
+                this._hostElement.nativeElement.focus(),
+            getLabel: () => this._getRenderedRowElement()?.textContent?.trim() ?? this.item().label,
+            isMenuOpen: () => this._menubarOverlayController.isOpen(),
+            openMenu: () => {
+                if (this.hasChildren())
+                    this._menubarOverlayController.open();
+            },
+            closeMenu: () => this._menubarOverlayController.close(),
+            openMenuWithFirstItemFocused: () => {
+                if (this.hasChildren())
+                    this._menubarOverlayController.openWithFirstItemFocused();
+            },
+            openMenuWithLastItemFocused: () => {
+                if (this.hasChildren())
+                    this._menubarOverlayController.openWithLastItemFocused();
+            },
+        };
+        Object.defineProperty(item, 'disabledBoolean', {
+            get: () => !!this.item().disabled,
+        });
+        return item;
+    }
+    _createMenubarProxy() {
+        const proxy = {
+            notifyItemOpened: (item) => this.menubar()?.notifyItemOpened(item),
+            notifyItemClosed: (item) => this.menubar()?.notifyItemClosed(item),
+            onItemPointerEnter: (item) => this.menubar()?.onItemPointerEnter(item),
+            hasOpenMenu: () => this.menubar()?.hasOpenMenu() ?? false,
+            openAdjacentItemMenu: (from, dir) => this.menubar()?.openAdjacentItemMenu(from, dir),
+        };
+        Object.defineProperty(proxy, 'hostElement', {
+            get: () => this.menubar()?.hostElement ?? this._hostElement.nativeElement,
+        });
+        return proxy;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMenuDataItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvMenuDataItem, isStandalone: true, selector: "mlv-menu-data-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, itemDef: { classPropertyName: "itemDef", publicName: "itemDef", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, parentMenu: { classPropertyName: "parentMenu", publicName: "parentMenu", isSignal: true, isRequired: false, transformFunction: null }, menubar: { classPropertyName: "menubar", publicName: "menubar", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mlv-menu-data-item" }, viewQueries: [{ propertyName: "_childMenu", first: true, predicate: i0.forwardRef(() => MlvMenu), descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-container
+      [ngTemplateOutlet]="itemDef()?.templateRef ?? _defaultItemDef"
+      [ngTemplateOutletContext]="context()"
+      [ngTemplateOutletInjector]="rowInjector()"
+    />
+
+    @if (hasChildren()) {
+      <mlv-menu #childMenu [label]="item().label">
+        @if (loading()) {
+          <div class="mlv-menu-data-renderer__loader">
+            <mlv-loader variant="circle" indeterminate />
+          </div>
+        } @else {
+          <mlv-menu-data-renderer
+            [items]="childItems()"
+            [itemDef]="itemDef()"
+            mode="menu"
+            [parentMenu]="childMenu"
+            [menubar]="menubar()"
+          />
+        }
+      </mlv-menu>
+    }
+
+    <ng-template #_defaultItemDef let-item>
+      <mlv-list-item mlvMenuItem>{{ item.label }}</mlv-list-item>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => MlvListItem), selector: "mlv-list-item", inputs: ["itemRole", "unread", "accent"] }, { kind: "component", type: i0.forwardRef(() => MlvLoader), selector: "mlv-loader", inputs: ["variant", "tone", "value", "max", "indeterminate", "size", "strokeWidth", "ariaLabel", "showHint", "color", "trackColor", "glow"] }, { kind: "component", type: i0.forwardRef(() => MlvMenu), selector: "mlv-menu", inputs: ["label", "mlvDensity", "dataSource"], outputs: ["closed"] }, { kind: "directive", type: i0.forwardRef(() => MlvMenuItem), selector: "mlv-list-item[mlvMenuItem]", inputs: ["disabled"], outputs: ["itemClick"] }, { kind: "component", type: i0.forwardRef(() => MlvMenuDataRenderer), selector: "mlv-menu-data-renderer", inputs: ["items", "itemDef", "mode", "parentMenu", "menubar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMenuDataItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mlv-menu-data-item',
+                    template: `
+    <ng-container
+      [ngTemplateOutlet]="itemDef()?.templateRef ?? _defaultItemDef"
+      [ngTemplateOutletContext]="context()"
+      [ngTemplateOutletInjector]="rowInjector()"
+    />
+
+    @if (hasChildren()) {
+      <mlv-menu #childMenu [label]="item().label">
+        @if (loading()) {
+          <div class="mlv-menu-data-renderer__loader">
+            <mlv-loader variant="circle" indeterminate />
+          </div>
+        } @else {
+          <mlv-menu-data-renderer
+            [items]="childItems()"
+            [itemDef]="itemDef()"
+            mode="menu"
+            [parentMenu]="childMenu"
+            [menubar]="menubar()"
+          />
+        }
+      </mlv-menu>
+    }
+
+    <ng-template #_defaultItemDef let-item>
+      <mlv-list-item mlvMenuItem>{{ item.label }}</mlv-list-item>
+    </ng-template>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        NgTemplateOutlet,
+                        MlvListItem,
+                        MlvLoader,
+                        forwardRef(() => MlvMenu),
+                        MlvMenuItem,
+                        forwardRef(() => MlvMenuDataRenderer),
+                    ],
+                    host: {
+                        class: 'mlv-menu-data-item',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { _childMenu: [{ type: i0.ViewChild, args: [forwardRef(() => MlvMenu), { isSignal: true }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], itemDef: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDef", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], parentMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentMenu", required: false }] }], menubar: [{ type: i0.Input, args: [{ isSignal: true, alias: "menubar", required: false }] }] } });
+
+/** Internal recursive renderer for data-driven menu rows. */
+class MlvMenuDataRenderer {
+    _injectedParentMenu = inject(MENU_TOKEN, { optional: true });
+    _injectedMenubar = inject(MENUBAR_TOKEN, { optional: true });
+    /** Current collection to render at this menu level. */
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Optional projected row template for each item. */
+    itemDef = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemDef" }] : /* istanbul ignore next */ []));
+    /** Whether this renderer is inside a menu or a root menubar. */
+    mode = input('menu', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Parent menu accessor for generated rows at this level. */
+    parentMenu = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parentMenu" }] : /* istanbul ignore next */ []));
+    /** Parent menu input, falling back to the nearest menu provider. */
+    _resolvedParentMenu = computed(() => this.parentMenu() ?? this._injectedParentMenu, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedParentMenu" }] : /* istanbul ignore next */ []));
+    /** Menubar accessor, falling back to the nearest menubar provider. */
+    _resolvedMenubar = computed(() => this.menubar() ?? this._injectedMenubar, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedMenubar" }] : /* istanbul ignore next */ []));
+    /** Root menubar accessor when rows need top-level menubar context. */
+    menubar = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menubar" }] : /* istanbul ignore next */ []));
+    /** Whether an entry is a root-level menubar divider. */
+    isDivider(item) {
+        return 'kind' in item && item.kind === 'divider';
+    }
+    /** Narrows a mixed menubar entry to a renderable menu item. */
+    asItem(item) {
+        return item;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMenuDataRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvMenuDataRenderer, isStandalone: true, selector: "mlv-menu-data-renderer", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, itemDef: { classPropertyName: "itemDef", publicName: "itemDef", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, parentMenu: { classPropertyName: "parentMenu", publicName: "parentMenu", isSignal: true, isRequired: false, transformFunction: null }, menubar: { classPropertyName: "menubar", publicName: "menubar", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mlv-menu-data-renderer" }, ngImport: i0, template: `
+    @for (item of items(); track item.id) {
+      @if (mode() === 'menubar' && isDivider(item)) {
+        <span
+          class="mlv-menubar__divider"
+          role="separator"
+          aria-orientation="vertical"
+        ></span>
+      } @else {
+        <mlv-menu-data-item
+          [item]="asItem(item)"
+          [index]="$index"
+          [itemDef]="itemDef()"
+          [mode]="mode()"
+          [parentMenu]="mode() === 'menu' ? _resolvedParentMenu() : null"
+          [menubar]="_resolvedMenubar()"
+        />
+      }
+    }
+  `, isInline: true, styles: ["@layer mlv.components{mlv-menu-data-renderer,mlv-menu-data-item{display:contents}.mlv-menu-data-renderer__loader{display:flex;align-items:center;justify-content:center;min-block-size:2.5rem;padding:var(--mlv-padding-s)}}\n"], dependencies: [{ kind: "component", type: MlvMenuDataItem, selector: "mlv-menu-data-item", inputs: ["item", "index", "itemDef", "mode", "parentMenu", "menubar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMenuDataRenderer, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-menu-data-renderer', template: `
+    @for (item of items(); track item.id) {
+      @if (mode() === 'menubar' && isDivider(item)) {
+        <span
+          class="mlv-menubar__divider"
+          role="separator"
+          aria-orientation="vertical"
+        ></span>
+      } @else {
+        <mlv-menu-data-item
+          [item]="asItem(item)"
+          [index]="$index"
+          [itemDef]="itemDef()"
+          [mode]="mode()"
+          [parentMenu]="mode() === 'menu' ? _resolvedParentMenu() : null"
+          [menubar]="_resolvedMenubar()"
+        />
+      }
+    }
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MlvMenuDataItem], host: {
+                        class: 'mlv-menu-data-renderer',
+                    }, styles: ["@layer mlv.components{mlv-menu-data-renderer,mlv-menu-data-item{display:contents}.mlv-menu-data-renderer__loader{display:flex;align-items:center;justify-content:center;min-block-size:2.5rem;padding:var(--mlv-padding-s)}}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], itemDef: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDef", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], parentMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentMenu", required: false }] }], menubar: [{ type: i0.Input, args: [{ isSignal: true, alias: "menubar", required: false }] }] } });
+
+/** Marks a custom template for rendering reactive menu items. */
+class MlvMenuItemDef {
+    /** The template reference used for each rendered menu row. */
+    templateRef = inject((TemplateRef));
+    /** Type guard so `let-` variables infer from `MlvMenuItemDefContext<T>`. */
+    static ngTemplateContextGuard(_directive, _context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMenuItemDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvMenuItemDef, isStandalone: true, selector: "[mlvMenuItemDef]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMenuItemDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvMenuItemDef]',
+                }]
+        }] });
+
+function mlvSameMenuItems(a, b) {
+    return (a.length === b.length &&
+        a.every((item, index) => item.item === b[index] && item.disabled === b[index].disabledBoolean));
+}
+/**
+ * The first item at or after `start` that is not disabled, falling back to the
+ * closest enabled item before `start`. Returns `null` when every item is
+ * disabled (or the list is empty).
+ * @private
+ */
+function mlvNearestEnabledItem(items, start) {
+    for (let index = Math.max(start, 0); index < items.length; index++) {
+        if (!items[index].disabledBoolean)
+            return items[index];
+    }
+    for (let index = Math.min(start, items.length) - 1; index >= 0; index--) {
+        if (!items[index].disabledBoolean)
+            return items[index];
+    }
+    return null;
+}
+/**
+ * Dropdown menu panel (`mlv-menu`).
+ *
+ * Renders a `role="menu"` panel containing `mlv-menu-item`, `mlv-menu-separator`,
+ * and `mlv-menu-group` children. Manages keyboard navigation (ArrowUp, ArrowDown,
+ * Home, End, Escape) via `FocusKeyManager`.
+ *
+ * The menu uses `mlv-popup` for visual chrome (background, border, radius, shadow,
+ * animations). The panel is rendered inside the popup's content template via
+ * `[mlvPopupContent]`, so no DOM manipulation is required.
+ *
+ * @example
+ * ```html
+ * <button [mlvMenuTrigger]="myMenu">Open</button>
+ * <mlv-menu #myMenu>
+ *   <mlv-menu-item (itemClick)="onEdit()">Edit</mlv-menu-item>
+ *   <mlv-menu-separator />
+ *   <mlv-menu-item (itemClick)="onDelete()">Delete</mlv-menu-item>
+ * </mlv-menu>
+ * ```
+ */
+class MlvMenu {
+    // ─── Injected services ────────────────────────────────────────────────────
+    /**
+     * @private Element reference for the host element.
+     */
+    _elementRef = inject((ElementRef));
+    _itemRegistry = inject(MLV_MENU_ITEM_REGISTRY);
+    _dataSourceAdapter = new MlvMenuDataSourceAdapter();
+    // ─── View children ────────────────────────────────────────────────────────
+    /**
+     * @private The popup component managing the overlay chrome (background, border, shadow, animations).
+     * Accessed by `MlvMenuTrigger` to open the overlay and manage animation state.
+     * The menu panel (`mlv-list`) is declared inside this popup's `[mlvPopupContent]` template.
+     */
+    _popup = viewChild.required('_popup', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_popup" }] : /* istanbul ignore next */ []));
+    // ─── Content children ────────────────────────────────────────────────────
+    _projectedItems = contentChildren(MlvMenuItem, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_projectedItems" }] : /* istanbul ignore next */ []));
+    /** @protected The projected row definition used by data-driven rendering. */
+    _itemDef = contentChild((MlvMenuItemDef), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_itemDef" }] : /* istanbul ignore next */ []));
+    /** @protected All registered menu items, in render order. */
+    _items = this._itemRegistry.items;
+    /** @protected Items currently rendered in this menu panel. */
+    _navigationItems = computed(() => {
+        const items = this._items();
+        items.forEach((item) => void item.disabledBoolean);
+        if (!this._dataMode())
+            return items;
+        return items.filter((item) => item._elementRef?.nativeElement.closest('[role="menu"]'));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_navigationItems" }] : /* istanbul ignore next */ []));
+    // ─── Inputs ───────────────────────────────────────────────────────────────
+    /**
+     * Accessible label for the menu panel (`aria-label`).
+     * Use when there is no visible heading that labels the menu.
+     */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Density applied to the menu panel's item rows.
+     *
+     * The panel is portaled to the CDK overlay container, outside the trigger's
+     * DOM tree, so ancestor density classes cannot cascade into it. Forwarded to
+     * the underlying `mlv-popup`, which stamps the resolved `mlv--{density}`
+     * class on the detached panel. When omitted, the global `MlvDensityService`
+     * density applies. Submenus are separate `mlv-menu` instances — set the
+     * input on each when overriding the density of a nested menu tree.
+     */
+    mlvDensity = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mlvDensity" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional data source for this menu. Arrays render immediately; an
+     * `MlvDataSource` supplies the current collection and loading state.
+     */
+    dataSource = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+    // ─── Public identifiers ────────────────────────────────────────────────────
+    /**
+     * Stable DOM id of the menu panel (`role="menu"` list). Consumed by
+     * `MlvMenuTrigger` to wire `aria-controls` from the trigger to the panel.
+     */
+    panelId = mlvNextId('mlv-menu-panel');
+    // ─── Outputs ──────────────────────────────────────────────────────────────
+    /**
+     * Emits when the menu requests to be closed (e.g., Escape key, Tab key,
+     * or after a menu item is activated).
+     */
+    closed = output();
+    // ─── Internal state ───────────────────────────────────────────────────────
+    /**
+     * @private Whether the panel is currently open. Set by `MlvMenuTrigger`.
+     */
+    _isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
+    /** @protected Whether this menu is using data-driven rather than projected content. */
+    _dataMode = computed(() => this.dataSource() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_dataMode" }] : /* istanbul ignore next */ []));
+    /** @protected Current data-driven items normalized from the active source. */
+    _dataSourceItems = this._dataSourceAdapter.items;
+    /** @protected Current loading state normalized from the active source. */
+    _dataSourceLoading = this._dataSourceAdapter.loading;
+    /**
+     * @private Parent menu that opened this menu as a submenu.
+     */
+    _parentMenu = null;
+    /**
+     * @private Controller supplied by the opening `MlvMenuTrigger` when this
+     * menu is a top-level menubar dropdown. Enables ArrowRight / ArrowLeft at the
+     * top level of the panel to cross to the adjacent menubar menu. `null` for
+     * standalone menus and submenus.
+     */
+    _menubarController = null;
+    /** @private Normalizes horizontal menu navigation for RTL layouts. */
+    _rtlService = inject(MlvRtlService);
+    /**
+     * @private `FocusKeyManager` managing the menu items.
+     * Initialized lazily when items are first available.
+     */
+    _keyManager = null;
+    /**
+     * @private Subscription to the key manager's `change` stream, used to keep the
+     * roving tabindex in sync when type-ahead moves the active item asynchronously.
+     */
+    _changeSub = null;
+    /**
+     * @private Snapshot of the items the current `_keyManager` was built from.
+     * Compared member-by-member so a change-detection pass that re-runs the content
+     * query without changing the projected items does not rebuild the manager —
+     * a rebuild resets `activeItemIndex` and would wipe the roving tabindex.
+     */
+    _managedItems = null;
+    /** @private The last menu item that received focus, retained across row removal. */
+    _focusedItem = null;
+    constructor() {
+        effect(() => {
+            const source = this.dataSource();
+            untracked(() => this._dataSourceAdapter.setSource(source ?? []));
+        });
+        afterRenderEffect(() => this._itemRegistry.resync());
+        afterRenderEffect(() => {
+            if (!this._dataMode())
+                return;
+            this._dataSourceItems();
+            untracked(() => this._syncKeyManager(this._navigationItems()));
+        });
+        effect(() => {
+            const projectedItems = this._projectedItems();
+            untracked(() => this._itemRegistry.syncOrder(projectedItems));
+        });
+        // Rebuild the key manager only when the projected item set actually changes.
+        //
+        // The work runs `untracked` on purpose. `_syncTabIndices()` reads
+        // `FocusKeyManager.activeItem`, which CDK backs with a signal; reading it in
+        // the effect's reactive context made the effect depend on the active item, so
+        // *every* arrow keypress re-ran the effect, replaced the manager and reset
+        // `activeItemIndex` to -1 — no item ever kept `tabindex="0"` and ArrowDown /
+        // ArrowUp always snapped back to the first / last item. `_navigationItems()`
+        // must stay the effect's only dependency.
+        effect(() => {
+            const items = this._navigationItems();
+            if (this._dataMode())
+                this._dataSourceItems();
+            untracked(() => this._syncKeyManager(items));
+        });
+        inject(DestroyRef).onDestroy(() => this._teardownKeyManager());
+    }
+    // ─── Public API ───────────────────────────────────────────────────────────
+    /**
+     * Focuses the first non-disabled item in the menu.
+     * Called by `MlvMenuTrigger` when the menu opens via keyboard ArrowDown or Enter.
+     */
+    focusFirstItem() {
+        this._keyManager?.setFirstItemActive();
+        this._syncTabIndices();
+    }
+    /**
+     * Focuses the last non-disabled item in the menu.
+     * Called by `MlvMenuTrigger` when the menu opens via keyboard ArrowUp.
+     */
+    focusLastItem() {
+        this._keyManager?.setLastItemActive();
+        this._syncTabIndices();
+    }
+    // ─── MlvMenuAccessor ─────────────────────────────────────────────────────────
+    /**
+     * Closes the menu panel by emitting the `closed` output.
+     * Called by `MlvMenuItem` after item activation and by the keyboard handler.
+     */
+    close() {
+        this._isOpen.set(false);
+        this.closed.emit();
+    }
+    /**
+     * Closes this menu panel and any ancestor menu panels.
+     * Called by submenu items so selecting a nested action dismisses the full menu stack.
+     */
+    closeAll() {
+        this.close();
+        this._parentMenu?.closeAll();
+    }
+    /**
+     * Registers the parent menu that owns this menu when it is opened as a submenu.
+     * Called by `MlvMenuTrigger` while opening submenu overlays.
+     */
+    registerParentMenu(parentMenu) {
+        this._parentMenu = parentMenu;
+    }
+    /**
+     * Registers (or clears) the menubar controller when this menu is opened as a
+     * top-level menubar dropdown. Called by `MlvMenuTrigger` while opening.
+     */
+    registerMenubarController(controller) {
+        this._menubarController = controller;
+    }
+    // ─── Protected handlers ──────────────────────────────────────────────────
+    /**
+     * @protected Routes keydown events to `FocusKeyManager` and handles Escape / Tab.
+     */
+    _onKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+            return;
+        }
+        if (event.key === 'Tab') {
+            // Close the menu and let the trigger restore focus (see MlvMenuTrigger).
+            event.preventDefault();
+            event.stopPropagation();
+            this.close();
+            return;
+        }
+        const key = this._rtlService.normalizeArrowKey(event);
+        // Top-level menubar dropdown: ArrowRight / ArrowLeft cross to the adjacent
+        // menubar menu. A focused submenu-trigger item handles ArrowRight itself
+        // (and stops propagation), so the submenu opens instead — submenu wins.
+        if (this._menubarController) {
+            if (key === RIGHT_ARROW) {
+                event.preventDefault();
+                event.stopPropagation();
+                this._menubarController.openNextItemMenu();
+                return;
+            }
+            if (key === LEFT_ARROW && !this._parentMenu) {
+                event.preventDefault();
+                event.stopPropagation();
+                this._menubarController.openPreviousItemMenu();
+                return;
+            }
+        }
+        // ArrowLeft inside a submenu closes it and returns focus to the parent
+        // trigger item (handled by the submenu trigger's close-focus restore).
+        if (key === LEFT_ARROW && this._parentMenu) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.close();
+            return;
+        }
+        this._keyManager?.onKeydown(event);
+        this._syncTabIndices();
+    }
+    /** @protected Remembers item focus before a live data update can remove its row. */
+    _onFocusIn(event) {
+        const target = event.target;
+        this._focusedItem =
+            this._navigationItems().find((item) => item._elementRef?.nativeElement === target) ?? null;
+    }
+    // ─── Private helpers ──────────────────────────────────────────────────────
+    /**
+     * @private Reconciles the `FocusKeyManager` with the projected items.
+     *
+     * No-ops when the item set is unchanged — rebuilding a manager throws away its
+     * `activeItemIndex`, which is what previously broke arrow navigation. When the
+     * set really did change the manager is replaced and the active item carried
+     * over, so the roving tabindex survives adding or removing an item.
+     */
+    _syncKeyManager(items) {
+        if (this._managedItems && mlvSameMenuItems(this._managedItems, items)) {
+            return;
+        }
+        const previousItem = this._keyManager?.activeItem ?? null;
+        const previousIndex = this._keyManager?.activeItemIndex ?? -1;
+        // Snapshot so later in-place mutation of the query result cannot make the
+        // comparison above lie, and so the manager holds a stable item array.
+        const snapshot = Array.from(items);
+        this._managedItems = snapshot.map((item) => ({
+            item,
+            disabled: item.disabledBoolean,
+        }));
+        this._teardownKeyManager();
+        if (snapshot.length > 0) {
+            this._initKeyManager(snapshot);
+            this._restoreActiveItem(snapshot, previousItem, previousIndex);
+        }
+        this._syncTabIndices();
+    }
+    /**
+     * @private Creates the `FocusKeyManager` for `items`.
+     * Skips items whose `disabled` property is `true`.
+     *
+     * `withTypeAhead()` enables type-to-focus (press a letter to jump to the
+     * first matching item by its `getLabel()`). Type-ahead matching is debounced
+     * and can move the active item outside of `_onKeydown`, so the manager's
+     * `change` stream is used to keep the roving tabindex in sync.
+     */
+    _initKeyManager(items) {
+        this._keyManager = new FocusKeyManager(items)
+            .withVerticalOrientation()
+            .withWrap()
+            .withHomeAndEnd()
+            .withTypeAhead()
+            .skipPredicate((item) => item.disabledBoolean);
+        this._changeSub = this._keyManager.change.subscribe(() => this._syncTabIndices());
+    }
+    /**
+     * @private Disposes the current key manager and its `change` subscription.
+     */
+    _teardownKeyManager() {
+        this._changeSub?.unsubscribe();
+        this._changeSub = null;
+        this._keyManager?.destroy();
+        this._keyManager = null;
+    }
+    /**
+     * @private Carries the active item of the previous key manager over to a freshly
+     * built one, using `updateActiveItem()` so the roving tabindex is restored
+     * without stealing DOM focus. When the previously active item was removed (or
+     * became disabled) the nearest enabled item to its old position takes over.
+     * Does nothing when no item was active yet.
+     */
+    _restoreActiveItem(items, previousItem, previousIndex) {
+        const keyManager = this._keyManager;
+        if (!keyManager || previousIndex < 0)
+            return;
+        const shouldRestoreFocus = this._focusedItem === previousItem;
+        if (previousItem &&
+            !previousItem.disabledBoolean &&
+            items.indexOf(previousItem) > -1) {
+            keyManager.updateActiveItem(previousItem);
+            return;
+        }
+        const fallback = mlvNearestEnabledItem(items, previousIndex);
+        if (fallback)
+            keyManager.updateActiveItem(fallback);
+        if (fallback && shouldRestoreFocus && this._isOpen()) {
+            this._focusedItem = fallback;
+            fallback.focus();
+        }
+    }
+    /**
+     * @private Updates `_tabIndex` on every item so that exactly one item has
+     * `tabindex="0"` (roving tabindex pattern) and all others have `-1`.
+     *
+     * That is the active item once keyboard navigation has started. Before then —
+     * a pointer-opened panel puts focus on the `role="menu"` list itself — the first
+     * enabled item is the tab stop, so the open menu is never entirely untabbable.
+     */
+    _syncTabIndices() {
+        const items = this._navigationItems();
+        const activeItem = (this._keyManager?.activeItem ??
+            null);
+        const tabbableItem = activeItem ?? mlvNearestEnabledItem(items, 0);
+        items.forEach((item) => item._tabIndex.set(item === tabbableItem ? 0 : -1));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvMenu, isStandalone: true, selector: "mlv-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, mlvDensity: { classPropertyName: "mlvDensity", publicName: "mlvDensity", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class.mlv-menu--open": "_isOpen()" }, classAttribute: "mlv-menu" }, providers: [
+            {
+                provide: MENU_TOKEN,
+                useExisting: MlvMenu,
+            },
+            {
+                provide: MLV_MENU_ITEM_REGISTRY,
+                useFactory: () => new MlvMenuItemRegistryStore(),
+            },
+        ], queries: [{ propertyName: "_projectedItems", predicate: MlvMenuItem, isSignal: true }, { propertyName: "_itemDef", first: true, predicate: (MlvMenuItemDef), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_popup", first: true, predicate: ["_popup"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <mlv-popup
+      #_popup
+      [position]="['bottom-start', 'top-start', 'bottom-end', 'top-end']"
+      [hasShadow]="true"
+      [restrictPosition]="false"
+      [mlvDensity]="mlvDensity()"
+      [class]="'mlv-menu__popup'"
+    >
+      <ng-template mlvPopupContent>
+        <mlv-list
+          listRole="menu"
+          appearance="menu"
+          class="mlv-menu__panel"
+          tabindex="-1"
+          [id]="panelId"
+          [attr.aria-label]="label() || null"
+          (keydown)="_onKeydown($event)"
+          (focusin)="_onFocusIn($event)"
+        >
+          @if (_dataMode()) {
+            @if (_dataSourceLoading()) {
+              <div class="mlv-menu__loader">
+                <mlv-loader variant="circle" indeterminate [size]="20" />
+              </div>
+            } @else {
+              <mlv-menu-data-renderer
+                [items]="_dataSourceItems()"
+                [itemDef]="_itemDef()"
+                mode="menu"
+              />
+            }
+          } @else {
+            <ng-content />
+          }
+        </mlv-list>
+      </ng-template>
+    </mlv-popup>
+  `, isInline: true, styles: ["@layer mlv.components{.mlv-menu{display:contents}.mlv-menu__popup{padding:var(--mlv-popover-inset);overflow:hidden}.mlv-menu__panel{display:flex;flex-direction:column;min-width:10rem;max-width:20rem;--mlv-list-padding-block: 0;--mlv-list-padding-inline: 0;gap:0;overflow:hidden;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m);box-sizing:border-box}.mlv-menu__loader{display:flex;align-items:center;justify-content:center;min-block-size:2.5rem;padding:var(--mlv-padding-s)}.mlv-menu__panel .mlv-list-item{border-radius:var(--mlv-popover-item-radius);--mlv-list-item-padding-block: var(--mlv-popover-item-padding);--mlv-list-item-padding-inline: var(--mlv-popover-item-padding);font-size:var(--mlv-font-size-m)}.mlv-menu__panel .mlv-list-item:focus-visible{outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-menu__panel .mlv-list-item [mlvlistitemsuffix]{display:inline-flex;flex:0 0 var(--form-ctrl-icon-size, 1.25rem);align-items:center;justify-content:center;inline-size:var(--form-ctrl-icon-size, 1.25rem);block-size:var(--form-ctrl-icon-size, 1.25rem);color:var(--mlv-text-tertiary)}.mlv-menu__panel .mlv-menu-data-renderer__submenu-trigger:not(:has([mlvlistitemsuffix])) .mlv-list-item__surface{position:relative;padding-inline-end:calc(var(--mlv-list-item-padding-inline) + var(--form-ctrl-icon-size, 1.25rem))}.mlv-menu__panel .mlv-menu-data-renderer__submenu-trigger:not(:has([mlvlistitemsuffix])) .mlv-list-item__surface:after{content:\"\";position:absolute;inset-block-start:50%;inset-inline-end:var(--mlv-list-item-padding-inline);inline-size:var(--form-ctrl-icon-size, 1.25rem);block-size:var(--form-ctrl-icon-size, 1.25rem);border-block-start:var(--mlv-stroke-width-medium) solid currentColor;border-inline-end:var(--mlv-stroke-width-medium) solid currentColor;color:var(--mlv-text-tertiary);pointer-events:none;transform:translateY(-50%) rotate(45deg) scale(.6);transform-origin:center;transition:color var(--mlv-duration-fast) var(--mlv-ease-out)}.mlv-menu__panel .mlv-menu-data-renderer__submenu-trigger:not(:has([mlvlistitemsuffix])) .mlv-list-item__surface:hover:after,.mlv-menu__panel .mlv-menu-data-renderer__submenu-trigger:not(:has([mlvlistitemsuffix])) .mlv-list-item__surface:focus-visible:after,.mlv-menu__panel .mlv-menu-data-renderer__submenu-trigger:not(:has([mlvlistitemsuffix])) .mlv-list-item__surface[aria-expanded=true]:after{color:var(--mlv-text-primary)}.mlv-menu-separator{display:block;margin:var(--mlv-spacing-1) 0}.mlv-menu-separator__line{border:none;border-top:var(--mlv-stroke-width) solid var(--mlv-border-subtle);margin:0}.mlv-menu-group{display:block}.mlv-menu-group__label{display:block;padding:var(--mlv-spacing-1) var(--mlv-popover-item-padding);font-size:var(--mlv-typography-ui-s-size);font-weight:var(--mlv-font-weight-medium);color:var(--mlv-text-secondary);text-transform:uppercase;letter-spacing:.05em;pointer-events:none}}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => MlvPopup), selector: "mlv-popup", inputs: ["position", "positions", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "hasArrow", "hasShadow", "class", "mlvDensity", "flexibleDimensions", "scrollStrategy", "hasBackdrop", "restrictPosition", "panelRole", "modal", "ariaLabel", "dismissExcludeElements", "mobileMode", "mobileBreakpoint", "mobileTitle", "mobileCloseLabel", "opened"], outputs: ["openedChange", "afterOpened", "afterClosed"] }, { kind: "directive", type: i0.forwardRef(() => MlvPopupContent), selector: "[mlvPopupContent]" }, { kind: "component", type: i0.forwardRef(() => MlvList), selector: "mlv-list", inputs: ["listRole", "variant", "appearance"] }, { kind: "component", type: i0.forwardRef(() => MlvLoader), selector: "mlv-loader", inputs: ["variant", "tone", "value", "max", "indeterminate", "size", "strokeWidth", "ariaLabel", "showHint", "color", "trackColor", "glow"] }, { kind: "component", type: i0.forwardRef(() => MlvMenuDataRenderer), selector: "mlv-menu-data-renderer", inputs: ["items", "itemDef", "mode", "parentMenu", "menubar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-menu', template: `
+    <mlv-popup
+      #_popup
+      [position]="['bottom-start', 'top-start', 'bottom-end', 'top-end']"
+      [hasShadow]="true"
+      [restrictPosition]="false"
+      [mlvDensity]="mlvDensity()"
+      [class]="'mlv-menu__popup'"
+    >
+      <ng-template mlvPopupContent>
+        <mlv-list
+          listRole="menu"
+          appearance="menu"
+          class="mlv-menu__panel"
+          tabindex="-1"
+          [id]="panelId"
+          [attr.aria-label]="label() || null"
+          (keydown)="_onKeydown($event)"
+          (focusin)="_onFocusIn($event)"
+        >
+          @if (_dataMode()) {
+            @if (_dataSourceLoading()) {
+              <div class="mlv-menu__loader">
+                <mlv-loader variant="circle" indeterminate [size]="20" />
+              </div>
+            } @else {
+              <mlv-menu-data-renderer
+                [items]="_dataSourceItems()"
+                [itemDef]="_itemDef()"
+                mode="menu"
+              />
+            }
+          } @else {
+            <ng-content />
+          }
+        </mlv-list>
+      </ng-template>
+    </mlv-popup>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MlvPopup,
+                        MlvPopupContent,
+                        MlvList,
+                        MlvLoader,
+                        forwardRef(() => MlvMenuDataRenderer),
+                    ], host: {
+                        class: 'mlv-menu',
+                        '[class.mlv-menu--open]': '_isOpen()',
+                    }, providers: [
+                        {
+                            provide: MENU_TOKEN,
+                            useExisting: MlvMenu,
+                        },
+                        {
+                            provide: MLV_MENU_ITEM_REGISTRY,
+                            useFactory: () => new MlvMenuItemRegistryStore(),
+                        },
+                    ], styles: ["@layer mlv.components{.mlv-menu{display:contents}.mlv-menu__popup{padding:var(--mlv-popover-inset);overflow:hidden}.mlv-menu__panel{display:flex;flex-direction:column;min-width:10rem;max-width:20rem;--mlv-list-padding-block: 0;--mlv-list-padding-inline: 0;gap:0;overflow:hidden;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m);box-sizing:border-box}.mlv-menu__loader{display:flex;align-items:center;justify-content:center;min-block-size:2.5rem;padding:var(--mlv-padding-s)}.mlv-menu__panel .mlv-list-item{border-radius:var(--mlv-popover-item-radius);--mlv-list-item-padding-block: var(--mlv-popover-item-padding);--mlv-list-item-padding-inline: var(--mlv-popover-item-padding);font-size:var(--mlv-font-size-m)}.mlv-menu__panel .mlv-list-item:focus-visible{outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-menu__panel .mlv-list-item [mlvlistitemsuffix]{display:inline-flex;flex:0 0 var(--form-ctrl-icon-size, 1.25rem);align-items:center;justify-content:center;inline-size:var(--form-ctrl-icon-size, 1.25rem);block-size:var(--form-ctrl-icon-size, 1.25rem);color:var(--mlv-text-tertiary)}.mlv-menu__panel .mlv-menu-data-renderer__submenu-trigger:not(:has([mlvlistitemsuffix])) .mlv-list-item__surface{position:relative;padding-inline-end:calc(var(--mlv-list-item-padding-inline) + var(--form-ctrl-icon-size, 1.25rem))}.mlv-menu__panel .mlv-menu-data-renderer__submenu-trigger:not(:has([mlvlistitemsuffix])) .mlv-list-item__surface:after{content:\"\";position:absolute;inset-block-start:50%;inset-inline-end:var(--mlv-list-item-padding-inline);inline-size:var(--form-ctrl-icon-size, 1.25rem);block-size:var(--form-ctrl-icon-size, 1.25rem);border-block-start:var(--mlv-stroke-width-medium) solid currentColor;border-inline-end:var(--mlv-stroke-width-medium) solid currentColor;color:var(--mlv-text-tertiary);pointer-events:none;transform:translateY(-50%) rotate(45deg) scale(.6);transform-origin:center;transition:color var(--mlv-duration-fast) var(--mlv-ease-out)}.mlv-menu__panel .mlv-menu-data-renderer__submenu-trigger:not(:has([mlvlistitemsuffix])) .mlv-list-item__surface:hover:after,.mlv-menu__panel .mlv-menu-data-renderer__submenu-trigger:not(:has([mlvlistitemsuffix])) .mlv-list-item__surface:focus-visible:after,.mlv-menu__panel .mlv-menu-data-renderer__submenu-trigger:not(:has([mlvlistitemsuffix])) .mlv-list-item__surface[aria-expanded=true]:after{color:var(--mlv-text-primary)}.mlv-menu-separator{display:block;margin:var(--mlv-spacing-1) 0}.mlv-menu-separator__line{border:none;border-top:var(--mlv-stroke-width) solid var(--mlv-border-subtle);margin:0}.mlv-menu-group{display:block}.mlv-menu-group__label{display:block;padding:var(--mlv-spacing-1) var(--mlv-popover-item-padding);font-size:var(--mlv-typography-ui-s-size);font-weight:var(--mlv-font-weight-medium);color:var(--mlv-text-secondary);text-transform:uppercase;letter-spacing:.05em;pointer-events:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _popup: [{ type: i0.ViewChild, args: ['_popup', { isSignal: true }] }], _projectedItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MlvMenuItem), { isSignal: true }] }], _itemDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvMenuItemDef), { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], mlvDensity: [{ type: i0.Input, args: [{ isSignal: true, alias: "mlvDensity", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+/**
+ * A visual separator between groups of menu items in a `mlv-menu`.
+ *
+ * Renders as a horizontal rule (`<hr role="separator">`) styled to match
+ * `mlv-divider` visual design.
+ *
+ * @example
+ * ```html
+ * <mlv-menu-item (itemClick)="onEdit()">Edit</mlv-menu-item>
+ * <mlv-menu-separator />
+ * <mlv-menu-item (itemClick)="onDelete()">Delete</mlv-menu-item>
+ * ```
+ */
+class MlvMenuSeparator {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMenuSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: MlvMenuSeparator, isStandalone: true, selector: "mlv-menu-separator", host: { attributes: { "role": "presentation" }, classAttribute: "mlv-menu-separator" }, ngImport: i0, template: `<hr
+    class="mlv-menu-separator__line"
+    role="separator"
+    aria-orientation="horizontal"
+  />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMenuSeparator, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mlv-menu-separator',
+                    template: `<hr
+    class="mlv-menu-separator__line"
+    role="separator"
+    aria-orientation="horizontal"
+  />`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'mlv-menu-separator',
+                        role: 'presentation',
+                    },
+                }]
+        }] });
+
+/**
+ * Marks an element as the label for a `mlv-menu-group`.
+ * The group applies `aria-labelledby` pointing to this element's generated id.
+ *
+ * @example
+ * ```html
+ * <mlv-menu-group>
+ *   <span mlvMenuGroupLabel>File actions</span>
+ *   <mlv-menu-item>Open</mlv-menu-item>
+ * </mlv-menu-group>
+ * ```
+ */
+class MlvMenuGroupLabel {
+    /**
+     * Stable DOM id applied to the label element so the parent
+     * `mlv-menu-group` can reference it via `aria-labelledby`.
+     */
+    id = mlvNextId('mlv-menu-group-label');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMenuGroupLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvMenuGroupLabel, isStandalone: true, selector: "[mlvMenuGroupLabel]", host: { properties: { "id": "id" }, classAttribute: "mlv-menu-group__label" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMenuGroupLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvMenuGroupLabel]',
+                    host: {
+                        class: 'mlv-menu-group__label',
+                        '[id]': 'id',
+                    },
+                }]
+        }] });
+
+/**
+ * Groups related menu items with an optional label inside a `mlv-menu`.
+ *
+ * Use `[mlvMenuGroupLabel]` on a child element to provide an accessible label
+ * for the group. When present, the group's `role="group"` is named via
+ * `aria-labelledby` pointing at the label element.
+ *
+ * @example
+ * ```html
+ * <mlv-menu-group>
+ *   <span mlvMenuGroupLabel>File</span>
+ *   <mlv-menu-item (itemClick)="onNew()">New</mlv-menu-item>
+ *   <mlv-menu-item (itemClick)="onOpen()">Open</mlv-menu-item>
+ * </mlv-menu-group>
+ * ```
+ */
+class MlvMenuGroup {
+    /**
+     * @protected Projected `[mlvMenuGroupLabel]` element, if any. Its generated
+     * id names this group via `aria-labelledby`.
+     */
+    _label = contentChild(MlvMenuGroupLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_label" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MlvMenuGroup, isStandalone: true, selector: "mlv-menu-group", host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "_label()?.id ?? null" }, classAttribute: "mlv-menu-group" }, queries: [{ propertyName: "_label", first: true, predicate: MlvMenuGroupLabel, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMenuGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mlv-menu-group',
+                    template: `<ng-content />`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'mlv-menu-group',
+                        role: 'group',
+                        '[attr.aria-labelledby]': '_label()?.id ?? null',
+                    },
+                }]
+        }], propDecorators: { _label: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvMenuGroupLabel), { isSignal: true }] }] } });
+
+/**
+ * Horizontal application menu bar (`mlv-menubar`) — a File / Edit / View style
+ * row of top-level menu triggers, implementing the
+ * [WAI-ARIA Menubar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/).
+ *
+ * Wrap a set of `[mlvMenuTrigger]` elements. Each trigger opens a standard
+ * `mlv-menu` dropdown; the bar coordinates them:
+ *
+ * - `role="menubar"` container with a **roving tabindex** across the top-level
+ *   items (only the active item is in the tab order).
+ * - `ArrowLeft` / `ArrowRight` move between top-level items (wrapping); `Home` /
+ *   `End` jump to the first / last; printable characters type-ahead by label.
+ * - `ArrowDown` / `Enter` / `Space` open the focused item's menu with focus on
+ *   its first item; `ArrowUp` opens with focus on the last item (handled by the
+ *   trigger).
+ * - While any dropdown is open, hovering or arrowing to another top-level item
+ *   closes the current menu and opens the sibling (hover-follow only-while-open).
+ * - `ArrowRight` / `ArrowLeft` at the top level of an open dropdown cross to the
+ *   adjacent menubar menu; a focused submenu trigger's own `ArrowRight` wins.
+ * - `Escape` closes the menu and restores focus to its top-level item.
+ *
+ * Declare the `mlv-menu` panels **as siblings of the menubar** (outside its
+ * content), so the bar's `contentChildren` query only picks up the top-level
+ * triggers — see the example below.
+ *
+ * @example
+ * ```html
+ * <mlv-menubar aria-label="Main">
+ *   <button mlvButton variant="transparent" [mlvMenuTrigger]="fileMenu">File</button>
+ *   <button mlvButton variant="transparent" [mlvMenuTrigger]="editMenu">Edit</button>
+ * </mlv-menubar>
+ *
+ * <mlv-menu #fileMenu label="File">
+ *   <mlv-list-item mlvMenuItem (itemClick)="onNew()">New</mlv-list-item>
+ * </mlv-menu>
+ * <mlv-menu #editMenu label="Edit">
+ *   <mlv-list-item mlvMenuItem (itemClick)="onUndo()">Undo</mlv-list-item>
+ * </mlv-menu>
+ * ```
+ */
+class MlvMenubar {
+    // ─── Injected services ────────────────────────────────────────────────────
+    /** @private Host element reference. */
+    _elementRef = inject((ElementRef));
+    _itemRegistry = inject(MLV_MENUBAR_ITEM_REGISTRY);
+    _rtlService = inject(MlvRtlService);
+    _dataSourceAdapter = new MlvMenuDataSourceAdapter();
+    /**
+     * @private The `aria-label` the consumer placed directly on the `<mlv-menubar>`
+     * element, captured before the host binding runs. Used as the accessible-name
+     * fallback so a natively-provided `aria-label` is preserved when the `label`
+     * input is not used — without it the `[attr.aria-label]` host binding would
+     * clobber the consumer's attribute with `null`.
+     */
+    _initialAriaLabel = inject(new HostAttributeToken('aria-label'), { optional: true });
+    // ─── Content children ─────────────────────────────────────────────────────
+    _projectedItems = contentChildren(MlvMenuTrigger, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_projectedItems" }] : /* istanbul ignore next */ []));
+    /** @protected The projected row definition used by data-driven rendering. */
+    _itemDef = contentChild((MlvMenuItemDef), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_itemDef" }] : /* istanbul ignore next */ []));
+    /** @protected The registered top-level menu triggers, in render order. */
+    _items = this._itemRegistry.items;
+    // ─── Inputs ───────────────────────────────────────────────────────────────
+    /**
+     * Accessible label for the menubar (`aria-label`). Use when there is no
+     * visible heading that labels the bar.
+     */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional reactive source for the root menubar entries. Entries may be
+     * menu-item data or `{ kind: 'divider', id }` separator records.
+     */
+    dataSource = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+    // ─── Internal state ───────────────────────────────────────────────────────
+    /**
+     * @private `FocusKeyManager` managing the roving tabindex and horizontal
+     * arrow / Home / End / type-ahead navigation across top-level items.
+     */
+    _keyManager = null;
+    /**
+     * @private Subscription to the key manager's `change` stream, keeping the
+     * roving tabindex in sync when type-ahead moves the active item.
+     */
+    _changeSub = null;
+    /**
+     * @private The top-level item whose dropdown is currently open, or `null`
+     * when the whole bar is closed.
+     */
+    _openItem = null;
+    /** @protected Whether the bar is rendering reactive data instead of projected triggers. */
+    _dataMode = computed(() => this.dataSource() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_dataMode" }] : /* istanbul ignore next */ []));
+    /** @protected Current entries normalized from the active reactive source. */
+    _dataSourceItems = this._dataSourceAdapter.items;
+    /** @protected Current source loading state. */
+    _dataSourceLoading = this._dataSourceAdapter.loading;
+    constructor() {
+        effect(() => {
+            const source = this.dataSource();
+            untracked(() => this._dataSourceAdapter.setSource(source ?? []));
+        });
+        afterRenderEffect(() => this._itemRegistry.resync());
+        effect(() => {
+            const projectedItems = this._projectedItems();
+            if (this._dataMode())
+                return;
+            untracked(() => this._itemRegistry.syncOrder(projectedItems));
+        });
+        // (Re)build the key manager whenever the set of top-level items changes.
+        //
+        // The effect deliberately depends ONLY on the `_items()` query. All the
+        // imperative work below both READS reactive signals (`menuTriggerDisabled()`
+        // via the key manager's `skipPredicate`) and WRITES them (`_tabIndex` in
+        // `_syncTabIndices`). Because writing `_tabIndex` dirties the child trigger
+        // effects — and therefore the view — leaving those reads tracked would let
+        // the effect re-notify itself on every view refresh, spinning synchronously.
+        // Running the side effects in `untracked` keeps the sole reactive dependency
+        // the item set, which is the only thing that should trigger a rebuild.
+        effect(() => {
+            const items = this._items();
+            const direction = this._rtlService.direction();
+            untracked(() => {
+                if (items.length > 0) {
+                    this._initKeyManager(items, direction);
+                    this._syncTabIndices();
+                }
+            });
+        });
+        inject(DestroyRef).onDestroy(() => this._changeSub?.unsubscribe());
+    }
+    // ─── MlvMenubarAccessor ──────────────────────────────────────────────────────
+    /** Host element of the menubar (used as a click-outside exclusion). */
+    get hostElement() {
+        return this._elementRef.nativeElement;
+    }
+    /**
+     * Records `item` as the open dropdown, closing any previously-open sibling
+     * and syncing the roving tabindex so the bar's active item follows the open
+     * menu. Called by a child trigger from its open path.
+     */
+    notifyItemOpened(item) {
+        const previous = this._openItem;
+        this._openItem = item;
+        if (previous && previous !== item) {
+            previous.closeMenu();
+        }
+        this._keyManager?.setActiveItem(item);
+        this._syncTabIndices();
+    }
+    /** Clears the open-item record when `item`'s dropdown closes. */
+    notifyItemClosed(item) {
+        if (this._openItem === item) {
+            this._openItem = null;
+        }
+    }
+    /** Whether any dropdown in the bar is currently open. */
+    hasOpenMenu() {
+        return this._openItem !== null;
+    }
+    /**
+     * Hover-follow: while a dropdown is already open, opening the hovered item's
+     * dropdown (which, via `notifyItemOpened`, closes the previous one). Does
+     * nothing when the bar is fully closed or the item is disabled/already open.
+     */
+    onItemPointerEnter(item) {
+        if (!this.hasOpenMenu())
+            return;
+        if (item === this._openItem || item.disabledBoolean)
+            return;
+        item.openMenu();
+    }
+    /**
+     * Crosses from the open dropdown to an adjacent top-level item's menu,
+     * wrapping over disabled items, and opens it with focus on its first item.
+     */
+    openAdjacentItemMenu(from, dir) {
+        const items = this._navigableItems();
+        const index = items.indexOf(from);
+        if (index === -1 || items.length === 0)
+            return;
+        const target = items[(index + dir + items.length) % items.length];
+        if (target === from)
+            return;
+        from.closeMenu();
+        this._keyManager?.setActiveItem(target);
+        this._syncTabIndices();
+        target.openMenuWithFirstItemFocused();
+    }
+    // ─── Protected handlers ───────────────────────────────────────────────────
+    /**
+     * @protected Menubar-level keyboard handler.
+     *
+     * Opening keys (`Enter`, `Space`, `ArrowDown`, `ArrowUp`) are handled by the
+     * focused trigger itself, so they are ignored here. Everything else is routed
+     * to `FocusKeyManager` for horizontal navigation, Home/End, and type-ahead.
+     * If a dropdown is open when the active item changes, the newly-focused item's
+     * menu is opened (open-follow).
+     */
+    _onKeydown(event) {
+        const key = this._rtlService.normalizeArrowKey(event);
+        switch (key ?? event.key) {
+            case 'Enter':
+            case ' ':
+            case DOWN_ARROW:
+            case UP_ARROW:
+                return;
+        }
+        const keyManager = this._keyManager;
+        if (!keyManager)
+            return;
+        const before = keyManager.activeItem;
+        keyManager.onKeydown(event);
+        const after = keyManager.activeItem;
+        if (after && after !== before) {
+            this._syncTabIndices();
+            if (this._openItem && after !== this._openItem) {
+                after.openMenu();
+            }
+        }
+    }
+    // ─── Private helpers ──────────────────────────────────────────────────────
+    /**
+     * @private Creates or replaces the `FocusKeyManager` with the current items,
+     * using horizontal orientation, wrap, Home/End and type-ahead, skipping
+     * disabled items. Sets the first item active so the bar has a tabbable entry.
+     */
+    _initKeyManager(items, direction) {
+        this._changeSub?.unsubscribe();
+        this._keyManager = new FocusKeyManager(items)
+            .withHorizontalOrientation(direction)
+            .withWrap()
+            .withHomeAndEnd()
+            .withTypeAhead()
+            .skipPredicate((item) => item.disabledBoolean);
+        this._changeSub = this._keyManager.change.subscribe(() => this._syncTabIndices());
+        if (!this._keyManager.activeItem) {
+            this._keyManager.setFirstItemActive();
+        }
+    }
+    /**
+     * @private Updates `_tabIndex` on every item so that only the active item has
+     * `tabindex="0"` (roving tabindex). All others get `-1`.
+     */
+    _syncTabIndices() {
+        const active = this._keyManager?.activeItem;
+        this._items().forEach((item) => {
+            item._tabIndex.set(item === active ? 0 : -1);
+        });
+    }
+    /** @private The non-disabled top-level items, in DOM order. */
+    _navigableItems() {
+        return this._items().filter((item) => !item.disabledBoolean);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMenubar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvMenubar, isStandalone: true, selector: "mlv-menubar", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menubar" }, listeners: { "keydown": "_onKeydown($event)" }, properties: { "attr.aria-orientation": "\"horizontal\"", "attr.aria-label": "label() || _initialAriaLabel || null" }, classAttribute: "mlv-menubar" }, providers: [
+            {
+                provide: MENUBAR_TOKEN,
+                useExisting: MlvMenubar,
+            },
+            {
+                provide: MLV_MENUBAR_ITEM_REGISTRY,
+                useFactory: () => new MlvMenubarItemRegistryStore(),
+            },
+        ], queries: [{ propertyName: "_projectedItems", predicate: MlvMenuTrigger, isSignal: true }, { propertyName: "_itemDef", first: true, predicate: (MlvMenuItemDef), descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (_dataMode()) {
+      @if (_dataSourceLoading()) {
+        <mlv-loader variant="circle" indeterminate [size]="20" />
+      } @else {
+        <mlv-menu-data-renderer
+          [items]="_dataSourceItems()"
+          [itemDef]="_itemDef()"
+          mode="menubar"
+        />
+      }
+    } @else {
+      <ng-content />
+    }
+  `, isInline: true, styles: ["@layer mlv.components{.mlv-menubar{box-sizing:border-box;padding:var(--mlv-padding-xs);margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-body-m-size)}.mlv-menubar *{box-sizing:border-box}.mlv-menubar{display:inline-flex;align-items:center;gap:var(--mlv-spacing-2);background-color:var(--mlv-background-raised);border:var(--mlv-stroke-width) solid var(--mlv-border-subtle);border-radius:var(--mlv-radius-m);color:var(--mlv-text-primary)}.mlv-menubar__divider{align-self:stretch;flex:0 0 var(--mlv-stroke-width);min-block-size:1.5rem;margin-block:var(--mlv-spacing-1);background-color:var(--mlv-border-subtle)}.mlv-menubar>mlv-loader{margin:var(--mlv-spacing-1)}.mlv-menubar:focus-visible{outline:none}.mlv-menubar [role=menuitem]:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => MlvLoader), selector: "mlv-loader", inputs: ["variant", "tone", "value", "max", "indeterminate", "size", "strokeWidth", "ariaLabel", "showHint", "color", "trackColor", "glow"] }, { kind: "component", type: i0.forwardRef(() => MlvMenuDataRenderer), selector: "mlv-menu-data-renderer", inputs: ["items", "itemDef", "mode", "parentMenu", "menubar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMenubar, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-menubar', template: `
+    @if (_dataMode()) {
+      @if (_dataSourceLoading()) {
+        <mlv-loader variant="circle" indeterminate [size]="20" />
+      } @else {
+        <mlv-menu-data-renderer
+          [items]="_dataSourceItems()"
+          [itemDef]="_itemDef()"
+          mode="menubar"
+        />
+      }
+    } @else {
+      <ng-content />
+    }
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MlvLoader, forwardRef(() => MlvMenuDataRenderer)], host: {
+                        class: 'mlv-menubar',
+                        role: 'menubar',
+                        '[attr.aria-orientation]': '"horizontal"',
+                        '[attr.aria-label]': 'label() || _initialAriaLabel || null',
+                        '(keydown)': '_onKeydown($event)',
+                    }, providers: [
+                        {
+                            provide: MENUBAR_TOKEN,
+                            useExisting: MlvMenubar,
+                        },
+                        {
+                            provide: MLV_MENUBAR_ITEM_REGISTRY,
+                            useFactory: () => new MlvMenubarItemRegistryStore(),
+                        },
+                    ], styles: ["@layer mlv.components{.mlv-menubar{box-sizing:border-box;padding:var(--mlv-padding-xs);margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-body-m-size)}.mlv-menubar *{box-sizing:border-box}.mlv-menubar{display:inline-flex;align-items:center;gap:var(--mlv-spacing-2);background-color:var(--mlv-background-raised);border:var(--mlv-stroke-width) solid var(--mlv-border-subtle);border-radius:var(--mlv-radius-m);color:var(--mlv-text-primary)}.mlv-menubar__divider{align-self:stretch;flex:0 0 var(--mlv-stroke-width);min-block-size:1.5rem;margin-block:var(--mlv-spacing-1);background-color:var(--mlv-border-subtle)}.mlv-menubar>mlv-loader{margin:var(--mlv-spacing-1)}.mlv-menubar:focus-visible{outline:none}.mlv-menubar [role=menuitem]:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _projectedItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MlvMenuTrigger), { isSignal: true }] }], _itemDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvMenuItemDef), { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MENUBAR_TOKEN, MENU_TOKEN, MLV_MENU_DATA_ITEM, MlvMenu, MlvMenuGroup, MlvMenuGroupLabel, MlvMenuItem, MlvMenuItemDef, MlvMenuSeparator, MlvMenuTrigger, MlvMenubar };
+//# sourceMappingURL=malva-ui-core-menu.mjs.map