@radix-ng/primitives 0.50.0 → 1.0.0-beta.0

package/fesm2022/radix-ng-primitives-menubar.mjs

@@ -1,176 +1,304 @@
 import * as i0 from '@angular/core';
-import { Directive, NgModule } from '@angular/core';
-import * as i1 from '@radix-ng/primitives/menu';
-import { RdxMenuContentDirective, RdxMenuItemCheckboxDirective, RdxMenuItemIndicatorDirective, RdxMenuItemRadioDirective, RdxMenuItemDirective, RdxMenuSeparatorDirective, RdxMenuTriggerDirective } from '@radix-ng/primitives/menu';
-import * as i1$1 from '@angular/cdk/menu';
-import { CdkMenuGroup, CdkMenuBar } from '@angular/cdk/menu';
+import { inject, contentChildren, input, booleanAttribute, signal, computed, effect, Directive, NgModule } from '@angular/core';
+import { createContext } from '@radix-ng/primitives/core';
+import { RdxMenuRoot } from '@radix-ng/primitives/menu';
 
-class RdxMenuBarContentDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuBarContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxMenuBarContentDirective, isStandalone: true, selector: "[RdxMenuBarContent]", hostDirectives: [{ directive: i1.RdxMenuContentDirective }], ngImport: i0 }); }
+const [injectRdxMenubarContext, provideRdxMenubarContext] = createContext('RdxMenubarContext');
+const contextFactory = () => buildContext(inject(RdxMenubarRoot));
+function buildContext(root) {
+    return {
+        activeId: root.activeId.asReadonly(),
+        isAnyOpen: root.isAnyOpen,
+        disabled: root.disabled,
+        orientation: root.orientation,
+        registerItem: (id, el, open, close, disabled) => root.registerItem(id, el, open, close, disabled),
+        activateItem: (id) => root.activateItem(id),
+        deactivateAll: () => root.deactivateAll(),
+        focusAdjacent: (id, offset, open) => root.focusAdjacent(id, offset, open),
+        focusBoundary: (boundary, open) => root.focusBoundary(boundary, open)
+    };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuBarContentDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[RdxMenuBarContent]',
-                    hostDirectives: [RdxMenuContentDirective]
-                }]
-        }] });
-
-class RdxMenubarItemCheckboxDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenubarItemCheckboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxMenubarItemCheckboxDirective, isStandalone: true, selector: "[RdxMenuBarCheckboxItem]", hostDirectives: [{ directive: i1.RdxMenuItemCheckboxDirective, inputs: ["checked", "checked", "disabled", "disabled"] }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenubarItemCheckboxDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[RdxMenuBarCheckboxItem]',
-                    hostDirectives: [
-                        {
-                            directive: RdxMenuItemCheckboxDirective,
-                            inputs: ['checked', 'disabled']
-                        }
-                    ]
-                }]
-        }] });
-
-class RdxMenubarItemIndicatorDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenubarItemIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxMenubarItemIndicatorDirective, isStandalone: true, selector: "[RdxMenuBarItemIndicator]", hostDirectives: [{ directive: i1.RdxMenuItemIndicatorDirective }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenubarItemIndicatorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[RdxMenuBarItemIndicator]',
-                    hostDirectives: [RdxMenuItemIndicatorDirective]
-                }]
-        }] });
-
-class RdxMenubarItemRadioDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenubarItemRadioDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxMenubarItemRadioDirective, isStandalone: true, selector: "[RdxMenuBarItemRadio]", hostDirectives: [{ directive: i1.RdxMenuItemRadioDirective, inputs: ["disabled", "disabled", "checked", "checked"] }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenubarItemRadioDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[RdxMenuBarItemRadio]',
-                    hostDirectives: [
-                        {
-                            directive: RdxMenuItemRadioDirective,
-                            inputs: ['disabled', 'checked']
-                        }
-                    ]
-                }]
-        }] });
-
-class RdxMenuBarItemDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuBarItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxMenuBarItemDirective, isStandalone: true, selector: "[RdxMenuBarItem]", hostDirectives: [{ directive: i1.RdxMenuItemDirective, inputs: ["disabled", "disabled"], outputs: ["onSelect", "onSelect"] }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuBarItemDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[RdxMenuBarItem]',
-                    hostDirectives: [
-                        {
-                            directive: RdxMenuItemDirective,
-                            inputs: ['disabled'],
-                            outputs: ['onSelect']
-                        }
-                    ]
-                }]
-        }] });
-
-class RdxMenubarRadioGroupDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenubarRadioGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxMenubarRadioGroupDirective, isStandalone: true, selector: "[RdxMenuBarRadioGroup]", hostDirectives: [{ directive: i1$1.CdkMenuGroup }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenubarRadioGroupDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[RdxMenuBarRadioGroup]',
-                    hostDirectives: [CdkMenuGroup]
-                }]
-        }] });
-
-class RdxMenuBarRootDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuBarRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxMenuBarRootDirective, isStandalone: true, selector: "[RdxMenuBarRoot]", host: { attributes: { "tabindex": "0" }, properties: { "attr.data-orientation": "\"horizontal\"" } }, hostDirectives: [{ directive: i1$1.CdkMenuBar }], ngImport: i0 }); }
+let nextMenubarItemId = 0;
+/**
+ * Container for a horizontal application menu bar.
+ * Coordinates open/close state across multiple menus and provides arrow-key navigation.
+ */
+class RdxMenubarRoot {
+    constructor() {
+        this.menuRoots = contentChildren(RdxMenuRoot, ...(ngDevMode ? [{ debugName: "menuRoots" }] : /* istanbul ignore next */ []));
+        this.ids = new WeakMap();
+        this.items = [];
+        /** Whether every menubar trigger is disabled. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether arrow-key navigation wraps at the first/last trigger. */
+        this.loopFocus = input(true, { ...(ngDevMode ? { debugName: "loopFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** The menubar orientation. */
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.activeId = signal(null, ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+        this.isAnyOpen = computed(() => this.activeId() !== null, ...(ngDevMode ? [{ debugName: "isAnyOpen" }] : /* istanbul ignore next */ []));
+        effect((onCleanup) => {
+            const roots = this.menuRoots();
+            const registered = [];
+            roots.forEach((root) => {
+                const trigger = root.trigger();
+                if (!trigger || trigger.closest('[rdxMenuPopup]')) {
+                    return;
+                }
+                registered.push(this.registerMenuRoot(root, trigger));
+            });
+            onCleanup(() => {
+                registered.forEach((cleanup) => cleanup());
+            });
+        });
+        effect(() => {
+            const activeId = this.activeId();
+            if (!activeId) {
+                return;
+            }
+            this.menuRoots().forEach((root) => {
+                const trigger = root.trigger();
+                if (!trigger || trigger.closest('[rdxMenuPopup]')) {
+                    return;
+                }
+                if (this.idFor(root) === activeId && !root.open()) {
+                    this.deactivateAll();
+                }
+            });
+        });
+    }
+    registerItem(id, el, open, close, disabled) {
+        this.items.push({ id, el, root: undefined, open, close, disabled });
+        // Keep items in DOM order
+        this.items.sort((a, b) => (a.el.compareDocumentPosition(b.el) & 4 ? -1 : 1));
+        return () => {
+            this.items = this.items.filter((item) => item.id !== id);
+            if (this.activeId() === id)
+                this.activeId.set(null);
+        };
+    }
+    activateItem(id) {
+        if (this.disabled()) {
+            return;
+        }
+        // Close every other open menu
+        this.items.forEach((item) => {
+            if (item.id !== id)
+                item.close();
+        });
+        this.activeId.set(id);
+    }
+    deactivateAll() {
+        this.activeId.set(null);
+    }
+    focusBoundary(boundary, openOnMove) {
+        const enabled = this.enabledItems();
+        this.focusItem(boundary === 'first' ? enabled[0] : enabled[enabled.length - 1], openOnMove);
+    }
+    generateId() {
+        return `rdx-menubar-item-${nextMenubarItemId++}`;
+    }
+    idFor(root) {
+        let id = this.ids.get(root);
+        if (!id) {
+            id = this.generateId();
+            this.ids.set(root, id);
+        }
+        return id;
+    }
+    registerMenuRoot(root, trigger) {
+        const id = this.idFor(root);
+        const unregisterPopupArrowNavigation = root.registerPopupArrowNavigationHandler((offset) => {
+            if (this.disabled()) {
+                return false;
+            }
+            this.focusAdjacent(id, offset, true);
+            return true;
+        });
+        const unregisterTriggerInteraction = root.registerTriggerInteractionHandler((interaction) => this.handleTriggerInteraction(id, root, trigger, interaction));
+        const unregisterItem = this.registerResolvedItem(id, trigger, root);
+        return () => {
+            unregisterItem();
+            unregisterTriggerInteraction();
+            unregisterPopupArrowNavigation();
+        };
+    }
+    registerResolvedItem(id, el, root) {
+        this.items.push({
+            id,
+            el,
+            root,
+            open: () => root.show(false),
+            close: () => root.close(),
+            disabled: () => this.disabled() || root.disabled() || el.hasAttribute('disabled')
+        });
+        this.items.sort((a, b) => (a.el.compareDocumentPosition(b.el) & 4 ? -1 : 1));
+        this.updateTriggerTabStops();
+        return () => {
+            this.items = this.items.filter((item) => item.id !== id);
+            if (this.activeId() === id)
+                this.activeId.set(null);
+            this.updateTriggerTabStops();
+        };
+    }
+    handleTriggerInteraction(id, root, trigger, interaction) {
+        if (this.disabled()) {
+            return false;
+        }
+        switch (interaction.type) {
+            case 'click': {
+                if (root.open()) {
+                    root.close();
+                    this.deactivateAll();
+                }
+                else {
+                    root.show();
+                    this.activateItem(id);
+                }
+                return true;
+            }
+            case 'pointerenter': {
+                if (interaction.event.pointerType === 'touch' || !this.hasOpenMenu()) {
+                    return false;
+                }
+                if (root.open()) {
+                    return true;
+                }
+                trigger.focus({ preventScroll: true });
+                root.show(false);
+                this.activateItem(id);
+                return true;
+            }
+            case 'arrowdown': {
+                interaction.event.preventDefault();
+                root.show('first');
+                this.activateItem(id);
+                return true;
+            }
+            case 'arrowup': {
+                interaction.event.preventDefault();
+                root.show('last');
+                this.activateItem(id);
+                return true;
+            }
+            case 'arrowleft': {
+                this.handleTriggerArrow(interaction.event, id, -1, root.open());
+                return true;
+            }
+            case 'arrowright': {
+                this.handleTriggerArrow(interaction.event, id, 1, root.open());
+                return true;
+            }
+            case 'home': {
+                this.handleTriggerBoundary(interaction.event, 'first', root.open());
+                return true;
+            }
+            case 'end': {
+                this.handleTriggerBoundary(interaction.event, 'last', root.open());
+                return true;
+            }
+            case 'escape': {
+                interaction.event.preventDefault();
+                interaction.event.stopPropagation();
+                root.close();
+                this.deactivateAll();
+                trigger.focus({ preventScroll: true });
+                return true;
+            }
+        }
+    }
+    handleTriggerArrow(event, id, offset, openOnMove) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        this.focusAdjacent(id, offset, openOnMove);
+    }
+    handleTriggerBoundary(event, boundary, openOnMove) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        this.focusBoundary(boundary, openOnMove);
+    }
+    focusAdjacent(currentId, offset, openOnMove) {
+        const enabled = this.enabledItems();
+        const currentIndex = enabled.findIndex((item) => item.id === currentId);
+        if (currentIndex === -1 || enabled.length === 0)
+            return;
+        const nextIndex = currentIndex + offset;
+        if (!this.loopFocus() && (nextIndex < 0 || nextIndex >= enabled.length)) {
+            return;
+        }
+        const next = enabled[(nextIndex + enabled.length) % enabled.length];
+        this.focusItem(next, openOnMove);
+    }
+    handleArrowLeft(event) {
+        this.handleOpenMenuNavigation(event, -1);
+    }
+    handleArrowRight(event) {
+        this.handleOpenMenuNavigation(event, 1);
+    }
+    handleOpenMenuNavigation(event, offset) {
+        const activeId = this.activeId();
+        if (!activeId || this.disabled() || !this.hasOpenMenu()) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        this.focusAdjacent(activeId, offset, true);
+    }
+    focusItem(item, openOnMove) {
+        if (!item || this.disabled())
+            return;
+        item.el.focus();
+        if (openOnMove) {
+            item.open();
+            this.activateItem(item.id);
+        }
+    }
+    updateTriggerTabStops() {
+        this.items.forEach((item) => item.el.setAttribute('tabindex', '-1'));
+    }
+    enabledItems() {
+        return this.items.filter((item) => !item.disabled());
+    }
+    hasOpenMenu() {
+        return this.items.some((item) => item.root?.open());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenubarRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.9", type: RdxMenubarRoot, isStandalone: true, selector: "[rdxMenubarRoot]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loopFocus: { classPropertyName: "loopFocus", publicName: "loopFocus", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menubar", "tabindex": "0" }, listeners: { "keydown.arrowleft": "handleArrowLeft($event)", "keydown.arrowright": "handleArrowRight($event)" }, properties: { "attr.aria-orientation": "orientation()", "attr.data-orientation": "orientation()", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.data-has-submenu-open": "isAnyOpen() ? \"\" : undefined" } }, providers: [provideRdxMenubarContext(contextFactory)], queries: [{ propertyName: "menuRoots", predicate: RdxMenuRoot, isSignal: true }], exportAs: ["rdxMenubarRoot"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuBarRootDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenubarRoot, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[RdxMenuBarRoot]',
-                    hostDirectives: [CdkMenuBar],
+                    selector: '[rdxMenubarRoot]',
+                    exportAs: 'rdxMenubarRoot',
+                    providers: [provideRdxMenubarContext(contextFactory)],
                     host: {
+                        role: 'menubar',
                         tabindex: '0',
-                        '[attr.data-orientation]': '"horizontal"'
+                        '[attr.aria-orientation]': 'orientation()',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
+                        '[attr.data-has-submenu-open]': 'isAnyOpen() ? "" : undefined',
+                        '(keydown.arrowleft)': 'handleArrowLeft($event)',
+                        '(keydown.arrowright)': 'handleArrowRight($event)'
                     }
                 }]
-        }] });
-
-class RdxMenubarSeparatorDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenubarSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxMenubarSeparatorDirective, isStandalone: true, selector: "[RdxMenuBarSeparator]", hostDirectives: [{ directive: i1.RdxMenuSeparatorDirective }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenubarSeparatorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[RdxMenuBarSeparator]',
-                    hostDirectives: [RdxMenuSeparatorDirective]
-                }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { menuRoots: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => RdxMenuRoot), { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loopFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "loopFocus", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
 
-class RdxMenuBarTriggerDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuBarTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxMenuBarTriggerDirective, isStandalone: true, selector: "[RdxMenuBarTrigger]", hostDirectives: [{ directive: i1.RdxMenuTriggerDirective, inputs: ["disabled", "disabled", "menuTriggerFor", "menuTriggerFor", "sideOffset", "sideOffset", "side", "side", "align", "align", "alignOffset", "alignOffset"] }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuBarTriggerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[RdxMenuBarTrigger]',
-                    hostDirectives: [
-                        {
-                            directive: RdxMenuTriggerDirective,
-                            inputs: ['disabled', 'menuTriggerFor', 'sideOffset', 'side', 'align', 'alignOffset']
-                        }
-                    ]
-                }]
-        }] });
-
-const menubarImports = [
-    RdxMenuBarContentDirective,
-    RdxMenuBarTriggerDirective,
-    RdxMenubarSeparatorDirective,
-    RdxMenubarItemCheckboxDirective,
-    RdxMenuBarRootDirective,
-    RdxMenuBarItemDirective,
-    RdxMenubarItemIndicatorDirective,
-    RdxMenubarItemRadioDirective,
-    RdxMenubarRadioGroupDirective
-];
-class MenubarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MenubarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MenubarModule, imports: [RdxMenuBarContentDirective,
-            RdxMenuBarTriggerDirective,
-            RdxMenubarSeparatorDirective,
-            RdxMenubarItemCheckboxDirective,
-            RdxMenuBarRootDirective,
-            RdxMenuBarItemDirective,
-            RdxMenubarItemIndicatorDirective,
-            RdxMenubarItemRadioDirective,
-            RdxMenubarRadioGroupDirective], exports: [RdxMenuBarContentDirective,
-            RdxMenuBarTriggerDirective,
-            RdxMenubarSeparatorDirective,
-            RdxMenubarItemCheckboxDirective,
-            RdxMenuBarRootDirective,
-            RdxMenuBarItemDirective,
-            RdxMenubarItemIndicatorDirective,
-            RdxMenubarItemRadioDirective,
-            RdxMenubarRadioGroupDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MenubarModule }); }
+/**
+ * Menubar-specific parts. Triggers use the standard `rdxMenuTrigger` from
+ * `@radix-ng/primitives/menu`; the menubar root wires them for roving focus,
+ * hover switching, and ArrowLeft / ArrowRight navigation. The menu popup, items,
+ * checkbox/radio, submenu, separator, etc. also come from `RdxMenuModule`.
+ */
+const menubarImports = [RdxMenubarRoot];
+class RdxMenubarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenubarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxMenubarModule, imports: [RdxMenubarRoot], exports: [RdxMenubarRoot] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenubarModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MenubarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenubarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...menubarImports],
@@ -182,5 +310,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MenubarModule, RdxMenuBarContentDirective, RdxMenuBarItemDirective, RdxMenuBarRootDirective, RdxMenuBarTriggerDirective, RdxMenubarItemCheckboxDirective, RdxMenubarItemIndicatorDirective, RdxMenubarItemRadioDirective, RdxMenubarRadioGroupDirective, RdxMenubarSeparatorDirective };
+export { RdxMenubarModule, RdxMenubarRoot, injectRdxMenubarContext, provideRdxMenubarContext };
 //# sourceMappingURL=radix-ng-primitives-menubar.mjs.map