ngx-com 0.0.1 → 0.0.4

package/fesm2022/ngx-com-components-menu.mjs

@@ -0,0 +1,1200 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, ViewContainerRef, Injector, DestroyRef, Renderer2, computed, input, booleanAttribute, model, output, Directive, signal, contentChildren, effect, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { filter } from 'rxjs/operators';
+import { buildPopoverPositions } from 'ngx-com/components/popover';
+import { mergeClasses } from 'ngx-com/utils';
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import { cva } from 'class-variance-authority';
+
+/**
+ * Token to access the root menu trigger from anywhere in the menu tree.
+ * Used by items to close the entire menu on selection.
+ */
+const ROOT_MENU_TRIGGER = new InjectionToken('ROOT_MENU_TRIGGER');
+/**
+ * Token to access the nearest parent menu component.
+ * Used by items and submenu triggers to coordinate with their parent.
+ */
+const MENU_REF = new InjectionToken('MENU_REF');
+
+// Re-export from shared utilities
+let menuIdCounter = 0;
+/**
+ * Generate a unique ID for a menu instance.
+ */
+function generateMenuId() {
+    return `menu-${++menuIdCounter}`;
+}
+
+/**
+ * Unified menu trigger directive — opens a menu in a CDK overlay.
+ *
+ * **Root context** (outside a menu): Opens on click, has backdrop.
+ * **Submenu context** (inside a menu): Opens on hover/ArrowRight, no backdrop.
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-lg`
+ *
+ * @example Root trigger
+ * ```html
+ * <button comButton [comMenuTrigger]="menu">Options</button>
+ * <ng-template #menu>
+ *   <com-menu>
+ *     <button comMenuItem>Edit</button>
+ *     <button comMenuItem>Delete</button>
+ *   </com-menu>
+ * </ng-template>
+ * ```
+ *
+ * @example Submenu trigger (inside a menu, combined with comMenuItem)
+ * ```html
+ * <button comMenuItem [comMenuTrigger]="shareMenu" side="right" align="start">
+ *   Share
+ *   <com-menu-sub-indicator />
+ * </button>
+ * ```
+ */
+class MenuTriggerDirective {
+    overlay = inject(Overlay);
+    elementRef = inject(ElementRef);
+    viewContainerRef = inject(ViewContainerRef);
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    renderer = inject(Renderer2);
+    // Context detection - if MENU_REF exists, we're inside a menu (submenu trigger)
+    parentMenu = inject(MENU_REF, { optional: true });
+    parentRootTrigger = inject(ROOT_MENU_TRIGGER, { optional: true });
+    overlayRef = null;
+    attachedMenu = null;
+    menuId = generateMenuId();
+    // Submenu hover timers
+    openDelayTimer = null;
+    closeDelayTimer = null;
+    mouseInSubmenu = false;
+    // Listener cleanup functions
+    submenuMouseEnterCleanup = null;
+    submenuMouseLeaveCleanup = null;
+    // ─── Context ───
+    /** Whether this trigger is inside a menu (submenu context). */
+    isSubmenu = computed(() => !!this.parentMenu, ...(ngDevMode ? [{ debugName: "isSubmenu" }] : []));
+    // ─── Inputs ───
+    /** Template containing `<com-menu>` with items. */
+    comMenuTrigger = input.required(...(ngDevMode ? [{ debugName: "comMenuTrigger" }] : []));
+    /** Preferred position direction (root trigger only). */
+    menuPosition = input('below', ...(ngDevMode ? [{ debugName: "menuPosition" }] : []));
+    /** Alignment along cross-axis (root trigger only). */
+    menuAlignment = input('start', ...(ngDevMode ? [{ debugName: "menuAlignment" }] : []));
+    /** Gap in px between trigger and menu. */
+    menuOffset = input(4, ...(ngDevMode ? [{ debugName: "menuOffset" }] : []));
+    /** Prevents opening when true. */
+    menuDisabled = input(false, { ...(ngDevMode ? { debugName: "menuDisabled" } : {}), transform: booleanAttribute });
+    /** Two-way bindable open state. */
+    menuOpen = model(false, ...(ngDevMode ? [{ debugName: "menuOpen" }] : []));
+    /** Custom CSS class(es) on the overlay panel. */
+    menuPanelClass = input('', ...(ngDevMode ? [{ debugName: "menuPanelClass" }] : []));
+    /** Close menu when an item is selected. */
+    menuCloseOnSelect = input(true, { ...(ngDevMode ? { debugName: "menuCloseOnSelect" } : {}), transform: booleanAttribute });
+    /** Side for submenu positioning (submenu context only). */
+    side = input('right', ...(ngDevMode ? [{ debugName: "side" }] : []));
+    /** Alignment for submenu positioning (submenu context only). */
+    align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : []));
+    /** Hover delay before submenu opens in ms (submenu context only). */
+    subMenuOpenDelay = input(200, ...(ngDevMode ? [{ debugName: "subMenuOpenDelay" }] : []));
+    /** Hover delay before submenu closes in ms (submenu context only). */
+    subMenuCloseDelay = input(150, ...(ngDevMode ? [{ debugName: "subMenuCloseDelay" }] : []));
+    // ─── Outputs ───
+    /** Emitted after menu opens. */
+    menuOpened = output();
+    /** Emitted after menu closes. */
+    menuClosed = output();
+    // ─── Computed ───
+    ariaControls = computed(() => this.menuOpen() ? this.menuId : null, ...(ngDevMode ? [{ debugName: "ariaControls" }] : []));
+    panelClassArray = computed(() => {
+        const panelClass = this.menuPanelClass();
+        if (Array.isArray(panelClass))
+            return panelClass;
+        return panelClass ? [panelClass] : [];
+    }, ...(ngDevMode ? [{ debugName: "panelClassArray" }] : []));
+    constructor() {
+        this.destroyRef.onDestroy(() => this.disposeOverlay());
+    }
+    // ─── Public API ───
+    /** Programmatically open the menu. */
+    open() {
+        if (!this.menuDisabled() && !this.overlayRef?.hasAttached()) {
+            this.openMenu();
+            this.menuOpen.set(true);
+        }
+    }
+    /** Programmatically close the menu. */
+    close() {
+        if (this.isSubmenu()) {
+            // For submenu, close this level
+            this.closeSubmenu();
+        }
+        else {
+            // For root, close entire menu tree
+            this.closeMenu();
+        }
+        this.menuOpen.set(false);
+    }
+    /** Toggle the menu open/close state. */
+    toggle() {
+        if (this.menuOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    /** Called by MenuComponent to register itself when attached. */
+    registerMenu(menu) {
+        this.attachedMenu = menu;
+    }
+    // ─── Event Handlers ───
+    onClick(event) {
+        if (this.menuDisabled())
+            return;
+        if (!this.isSubmenu()) {
+            this.toggle();
+            return;
+        }
+        // Submenu: prevent comMenuItem's click handler and open submenu
+        event.preventDefault();
+        event.stopPropagation();
+        this.cancelOpenTimer();
+        this.openSubmenuInternal();
+        this.focusFirstItemDeferred();
+    }
+    onArrowDown(event) {
+        if (this.isSubmenu() || this.menuOpen())
+            return;
+        event.preventDefault();
+        this.open();
+        this.focusFirstItemDeferred();
+    }
+    onArrowUp(event) {
+        if (this.isSubmenu() || this.menuOpen())
+            return;
+        event.preventDefault();
+        this.open();
+        this.focusLastItemDeferred();
+    }
+    onArrowRight(event) {
+        if (!this.isSubmenu() || this.side() !== 'right')
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.openSubmenuInternal();
+        this.focusFirstItemDeferred();
+    }
+    onArrowLeft(event) {
+        if (!this.isSubmenu())
+            return;
+        if (this.side() === 'left') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.openSubmenuInternal();
+            this.focusFirstItemDeferred();
+        }
+        else if (this.menuOpen()) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.closeSubmenu();
+        }
+    }
+    onEnter(event) {
+        if (this.menuDisabled())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.isSubmenu()) {
+            this.openSubmenuInternal();
+            this.focusFirstItemDeferred();
+        }
+        else if (!this.menuOpen()) {
+            this.open();
+            this.focusFirstItemDeferred();
+        }
+    }
+    onSpace(event) {
+        this.onEnter(event);
+    }
+    onMouseEnter() {
+        if (this.menuDisabled())
+            return;
+        if (!this.isSubmenu())
+            return; // Hover only opens submenus
+        this.cancelCloseTimer();
+        this.openDelayTimer = setTimeout(() => {
+            this.openSubmenuInternal();
+        }, this.subMenuOpenDelay());
+    }
+    onMouseLeave() {
+        if (!this.isSubmenu())
+            return;
+        this.cancelOpenTimer();
+        this.closeDelayTimer = setTimeout(() => {
+            if (!this.mouseInSubmenu) {
+                this.closeSubmenu();
+            }
+        }, this.subMenuCloseDelay());
+    }
+    focusFirstItemDeferred() {
+        setTimeout(() => this.attachedMenu?.focusFirstItem(), 0);
+    }
+    focusLastItemDeferred() {
+        setTimeout(() => this.attachedMenu?.focusLastItem(), 0);
+    }
+    // ─── Menu Management ───
+    openMenu() {
+        if (this.menuDisabled())
+            return;
+        this.createOverlay();
+        this.attachContent();
+        this.subscribeToCloseEvents();
+        this.menuOpened.emit();
+    }
+    closeMenu() {
+        if (this.overlayRef?.hasAttached()) {
+            this.overlayRef.detach();
+        }
+        this.attachedMenu = null;
+        this.menuClosed.emit();
+        this.elementRef.nativeElement.focus();
+    }
+    // ─── Submenu Management ───
+    openSubmenuInternal() {
+        if (this.menuOpen() || this.menuDisabled())
+            return;
+        this.createOverlay();
+        this.attachContent();
+        this.subscribeToSubmenuCloseEvents();
+        this.menuOpen.set(true);
+        this.menuOpened.emit();
+    }
+    closeSubmenu() {
+        if (!this.menuOpen())
+            return;
+        this.cleanupSubmenuListeners();
+        if (this.overlayRef?.hasAttached()) {
+            this.overlayRef.detach();
+        }
+        this.menuOpen.set(false);
+        this.attachedMenu = null;
+        this.menuClosed.emit();
+    }
+    // ─── Overlay Management ───
+    createOverlay() {
+        if (this.overlayRef)
+            return;
+        const positions = this.isSubmenu()
+            ? buildPopoverPositions(this.side(), this.align(), 0)
+            : buildPopoverPositions(this.menuPosition(), this.menuAlignment(), this.menuOffset());
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.elementRef)
+            .withPositions(positions)
+            .withFlexibleDimensions(false)
+            .withPush(true)
+            .withViewportMargin(8);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: !this.isSubmenu(),
+            backdropClass: this.isSubmenu() ? '' : 'cdk-overlay-transparent-backdrop',
+            panelClass: ['com-menu-panel', ...this.panelClassArray()],
+        });
+    }
+    attachContent() {
+        if (!this.overlayRef)
+            return;
+        const template = this.comMenuTrigger();
+        // For submenu, wrap the root trigger to delegate close to the actual root
+        const rootTriggerValue = this.isSubmenu()
+            ? {
+                close: () => this.parentRootTrigger?.close(),
+                menuCloseOnSelect: () => this.parentRootTrigger?.menuCloseOnSelect() ?? true,
+                registerMenu: (menu) => {
+                    this.attachedMenu = menu;
+                },
+            }
+            : this;
+        const injector = Injector.create({
+            parent: this.injector,
+            providers: [{ provide: ROOT_MENU_TRIGGER, useValue: rootTriggerValue }],
+        });
+        const portal = new TemplatePortal(template, this.viewContainerRef, undefined, injector);
+        this.overlayRef.attach(portal);
+        // For submenu, track mouse in overlay using Renderer2
+        if (this.isSubmenu()) {
+            const overlayEl = this.overlayRef.overlayElement;
+            this.submenuMouseEnterCleanup = this.renderer.listen(overlayEl, 'mouseenter', () => this.onSubmenuMouseEnter());
+            this.submenuMouseLeaveCleanup = this.renderer.listen(overlayEl, 'mouseleave', () => this.onSubmenuMouseLeave());
+        }
+    }
+    subscribeToCloseEvents() {
+        if (!this.overlayRef)
+            return;
+        this.overlayRef
+            .backdropClick()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.close());
+        this.overlayRef
+            .keydownEvents()
+            .pipe(filter((event) => event.key === 'Escape'), takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            event.preventDefault();
+            this.close();
+        });
+        this.overlayRef
+            .detachments()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.menuOpen.set(false);
+        });
+    }
+    subscribeToSubmenuCloseEvents() {
+        if (!this.overlayRef)
+            return;
+        const closeKey = this.side() === 'right' ? 'ArrowLeft' : 'ArrowRight';
+        this.overlayRef
+            .keydownEvents()
+            .pipe(filter((event) => event.key === 'Escape' || event.key === closeKey), takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.closeSubmenu();
+            this.elementRef.nativeElement.focus();
+        });
+        this.overlayRef
+            .detachments()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.menuOpen.set(false);
+        });
+    }
+    // ─── Submenu Hover Tracking ───
+    onSubmenuMouseEnter() {
+        this.mouseInSubmenu = true;
+        this.cancelCloseTimer();
+    }
+    onSubmenuMouseLeave() {
+        this.mouseInSubmenu = false;
+        this.closeDelayTimer = setTimeout(() => {
+            if (!this.mouseInSubmenu) {
+                this.closeSubmenu();
+            }
+        }, this.subMenuCloseDelay());
+    }
+    cancelOpenTimer() {
+        if (this.openDelayTimer) {
+            clearTimeout(this.openDelayTimer);
+            this.openDelayTimer = null;
+        }
+    }
+    cancelCloseTimer() {
+        if (this.closeDelayTimer) {
+            clearTimeout(this.closeDelayTimer);
+            this.closeDelayTimer = null;
+        }
+    }
+    // ─── Cleanup ───
+    disposeOverlay() {
+        this.cancelOpenTimer();
+        this.cancelCloseTimer();
+        this.cleanupSubmenuListeners();
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+        this.attachedMenu = null;
+    }
+    cleanupSubmenuListeners() {
+        this.submenuMouseEnterCleanup?.();
+        this.submenuMouseEnterCleanup = null;
+        this.submenuMouseLeaveCleanup?.();
+        this.submenuMouseLeaveCleanup = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: MenuTriggerDirective, isStandalone: true, selector: "[comMenuTrigger]", inputs: { comMenuTrigger: { classPropertyName: "comMenuTrigger", publicName: "comMenuTrigger", isSignal: true, isRequired: true, transformFunction: null }, menuPosition: { classPropertyName: "menuPosition", publicName: "menuPosition", isSignal: true, isRequired: false, transformFunction: null }, menuAlignment: { classPropertyName: "menuAlignment", publicName: "menuAlignment", isSignal: true, isRequired: false, transformFunction: null }, menuOffset: { classPropertyName: "menuOffset", publicName: "menuOffset", isSignal: true, isRequired: false, transformFunction: null }, menuDisabled: { classPropertyName: "menuDisabled", publicName: "menuDisabled", isSignal: true, isRequired: false, transformFunction: null }, menuOpen: { classPropertyName: "menuOpen", publicName: "menuOpen", isSignal: true, isRequired: false, transformFunction: null }, menuPanelClass: { classPropertyName: "menuPanelClass", publicName: "menuPanelClass", isSignal: true, isRequired: false, transformFunction: null }, menuCloseOnSelect: { classPropertyName: "menuCloseOnSelect", publicName: "menuCloseOnSelect", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, subMenuOpenDelay: { classPropertyName: "subMenuOpenDelay", publicName: "subMenuOpenDelay", isSignal: true, isRequired: false, transformFunction: null }, subMenuCloseDelay: { classPropertyName: "subMenuCloseDelay", publicName: "subMenuCloseDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuOpen: "menuOpenChange", menuOpened: "menuOpened", menuClosed: "menuClosed" }, host: { listeners: { "click": "onClick($event)", "keydown.arrowdown": "onArrowDown($event)", "keydown.arrowup": "onArrowUp($event)", "keydown.arrowright": "onArrowRight($event)", "keydown.arrowleft": "onArrowLeft($event)", "keydown.enter": "onEnter($event)", "keydown.space": "onSpace($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "menuOpen()", "attr.aria-controls": "ariaControls()" } }, exportAs: ["comMenuTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comMenuTrigger]',
+                    exportAs: 'comMenuTrigger',
+                    host: {
+                        '[attr.aria-haspopup]': '"menu"',
+                        '[attr.aria-expanded]': 'menuOpen()',
+                        '[attr.aria-controls]': 'ariaControls()',
+                        '(click)': 'onClick($event)',
+                        '(keydown.arrowdown)': 'onArrowDown($event)',
+                        '(keydown.arrowup)': 'onArrowUp($event)',
+                        '(keydown.arrowright)': 'onArrowRight($event)',
+                        '(keydown.arrowleft)': 'onArrowLeft($event)',
+                        '(keydown.enter)': 'onEnter($event)',
+                        '(keydown.space)': 'onSpace($event)',
+                        '(mouseenter)': 'onMouseEnter()',
+                        '(mouseleave)': 'onMouseLeave()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { comMenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "comMenuTrigger", required: true }] }], menuPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuPosition", required: false }] }], menuAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuAlignment", required: false }] }], menuOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuOffset", required: false }] }], menuDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuDisabled", required: false }] }], menuOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuOpen", required: false }] }, { type: i0.Output, args: ["menuOpenChange"] }], menuPanelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuPanelClass", required: false }] }], menuCloseOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuCloseOnSelect", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], subMenuOpenDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "subMenuOpenDelay", required: false }] }], subMenuCloseDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "subMenuCloseDelay", required: false }] }], menuOpened: [{ type: i0.Output, args: ["menuOpened"] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }] } });
+
+// ─── Menu Panel Variants ───
+/**
+ * Menu panel styling variants.
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-lg`, `--radius-popover`
+ */
+const menuPanelVariants = cva([
+    'bg-popover text-popover-foreground',
+    'border border-border',
+    'rounded-popover shadow-lg',
+    'overflow-hidden',
+    'py-1',
+], {
+    variants: {
+        size: {
+            sm: 'min-w-32',
+            md: 'min-w-48',
+            lg: 'min-w-64',
+        },
+        variant: {
+            default: '',
+            compact: 'py-0.5',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'default',
+    },
+});
+/**
+ * Menu item styling variants (base for all item types).
+ *
+ * @tokens `--color-popover-foreground`, `--color-foreground`, `--color-muted`, `--color-warn`, `--color-warn-subtle`
+ */
+const menuItemVariants = cva([
+    'relative flex items-center w-full',
+    'text-sm text-popover-foreground',
+    'outline-none select-none',
+    'transition-colors duration-75',
+], {
+    variants: {
+        size: {
+            sm: 'px-2 py-1 gap-2',
+            md: 'px-3 py-1.5 gap-2.5',
+            lg: 'px-4 py-2 gap-3',
+        },
+        focused: {
+            true: 'bg-muted text-foreground',
+            false: '',
+        },
+        disabled: {
+            true: 'bg-disabled text-disabled-foreground pointer-events-none',
+            false: 'cursor-pointer',
+        },
+        destructive: {
+            true: '',
+            false: '',
+        },
+    },
+    compoundVariants: [
+        { destructive: true, focused: true, class: 'bg-warn-subtle text-warn' },
+        { destructive: true, focused: false, class: 'text-warn' },
+    ],
+    defaultVariants: {
+        size: 'md',
+        focused: false,
+        disabled: false,
+        destructive: false,
+    },
+});
+// ─── Menu Label Variants ───
+/**
+ * Menu label (section header) styling variants.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+const menuLabelVariants = cva('text-muted-foreground font-medium select-none', {
+    variants: {
+        size: {
+            sm: 'px-2 py-1 text-xs',
+            md: 'px-3 py-1.5 text-xs',
+            lg: 'px-4 py-2 text-sm',
+        },
+    },
+    defaultVariants: { size: 'md' },
+});
+// ─── Check/Radio Indicator Variants ───
+/**
+ * Check/radio indicator sizing variants.
+ */
+const menuCheckIndicatorVariants = cva('inline-flex items-center justify-center shrink-0', {
+    variants: {
+        size: {
+            sm: 'w-3.5 h-3.5',
+            md: 'w-4 h-4',
+            lg: 'w-5 h-5',
+        },
+    },
+    defaultVariants: { size: 'md' },
+});
+// ─── Keyboard Shortcut Hint Variants ───
+/**
+ * Keyboard shortcut hint styling variants.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+const menuShortcutVariants = cva('ml-auto text-muted-foreground tracking-widest', {
+    variants: {
+        size: {
+            sm: 'text-[10px]',
+            md: 'text-xs',
+            lg: 'text-xs',
+        },
+    },
+    defaultVariants: { size: 'md' },
+});
+
+/**
+ * Base class for focusable menu items.
+ * All item directives must implement this interface for FocusKeyManager.
+ */
+class MenuItemBase {
+}
+/**
+ * Menu panel component that renders inside an overlay.
+ * Manages keyboard navigation across its items using CDK FocusKeyManager.
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-lg`
+ *
+ * @example
+ * ```html
+ * <com-menu>
+ *   <button comMenuItem>Edit</button>
+ *   <button comMenuItem>Delete</button>
+ * </com-menu>
+ * ```
+ */
+class MenuComponent {
+    rootTrigger = inject(ROOT_MENU_TRIGGER, { optional: true });
+    keyManager = null;
+    // ─── Inputs ───
+    /** Size variant for the menu panel. */
+    menuSize = input('md', ...(ngDevMode ? [{ debugName: "menuSize" }] : []));
+    /** Spacing density variant. */
+    menuVariant = input('default', ...(ngDevMode ? [{ debugName: "menuVariant" }] : []));
+    /** Accessible label for the menu. */
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** ID of element labeling this menu. */
+    ariaLabelledBy = input(null, ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : []));
+    // ─── Internal State ───
+    menuId = generateMenuId();
+    animationState = signal('open', ...(ngDevMode ? [{ debugName: "animationState" }] : []));
+    /** Query all focusable items in the menu. */
+    items = contentChildren(MenuItemBase, ...(ngDevMode ? [{ debugName: "items" }] : []));
+    // ─── Computed ───
+    panelClasses = computed(() => mergeClasses(menuPanelVariants({ size: this.menuSize(), variant: this.menuVariant() })), ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
+    constructor() {
+        this.rootTrigger?.registerMenu?.(this);
+        effect(() => {
+            const items = this.items();
+            if (items.length > 0 && !this.keyManager) {
+                this.keyManager = new FocusKeyManager(items)
+                    .withVerticalOrientation()
+                    .withWrap()
+                    .withHomeAndEnd()
+                    .withTypeAhead(200);
+            }
+        });
+    }
+    // ─── Public API ───
+    /** Focus the first non-disabled item. */
+    focusFirstItem() {
+        this.keyManager?.setFirstItemActive();
+    }
+    /** Focus the last non-disabled item. */
+    focusLastItem() {
+        this.keyManager?.setLastItemActive();
+    }
+    /** Close this menu level. */
+    close() {
+        this.rootTrigger?.close();
+    }
+    // ─── Event Handlers ───
+    onKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.close();
+            return;
+        }
+        // ArrowRight/ArrowLeft are handled by submenu triggers
+        if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') {
+            this.keyManager?.onKeydown(event);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: MenuComponent, isStandalone: true, selector: "com-menu", inputs: { menuSize: { classPropertyName: "menuSize", publicName: "menuSize", isSignal: true, isRequired: false, transformFunction: null }, menuVariant: { classPropertyName: "menuVariant", publicName: "menuVariant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MENU_REF, useExisting: forwardRef(() => MenuComponent) }], queries: [{ propertyName: "items", predicate: MenuItemBase, isSignal: true }], ngImport: i0, template: `
+    <div
+      [class]="panelClasses()"
+      role="menu"
+      [attr.aria-label]="ariaLabel() || null"
+      [attr.aria-labelledby]="ariaLabelledBy() || null"
+      [id]="menuId"
+      [attr.data-state]="animationState()"
+      (keydown)="onKeydown($event)"
+    >
+      <ng-content />
+    </div>
+  `, isInline: true, styles: [":host{display:contents}[data-state=open]{animation:menu-in .15s ease-out}[data-state=closed]{animation:menu-out .1s ease-in forwards}@keyframes menu-in{0%{opacity:0;transform:scale(.96) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes menu-out{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){[data-state=open],[data-state=closed]{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'com-menu', template: `
+    <div
+      [class]="panelClasses()"
+      role="menu"
+      [attr.aria-label]="ariaLabel() || null"
+      [attr.aria-labelledby]="ariaLabelledBy() || null"
+      [id]="menuId"
+      [attr.data-state]="animationState()"
+      (keydown)="onKeydown($event)"
+    >
+      <ng-content />
+    </div>
+  `, providers: [{ provide: MENU_REF, useExisting: forwardRef(() => MenuComponent) }], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}[data-state=open]{animation:menu-in .15s ease-out}[data-state=closed]{animation:menu-out .1s ease-in forwards}@keyframes menu-in{0%{opacity:0;transform:scale(.96) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes menu-out{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){[data-state=open],[data-state=closed]{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { menuSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuSize", required: false }] }], menuVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuVariant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MenuItemBase), { isSignal: true }] }] } });
+
+/**
+ * Menu item directive for actionable menu items.
+ * Applied to buttons, anchors, or any element that should be selectable.
+ *
+ * @tokens `--color-popover-foreground`, `--color-foreground`, `--color-muted`, `--color-warn`, `--color-warn-subtle`
+ *
+ * @example
+ * ```html
+ * <button comMenuItem (menuItemSelect)="onEdit()">Edit</button>
+ * <button comMenuItem [menuItemDisabled]="true">Disabled</button>
+ * <button comMenuItem destructive>Delete</button>
+ * ```
+ */
+class MenuItemDirective extends MenuItemBase {
+    elementRef = inject(ElementRef);
+    menu = inject(MENU_REF, { optional: true });
+    rootTrigger = inject(ROOT_MENU_TRIGGER, { optional: true });
+    // ─── Inputs ───
+    /** Disables the item. */
+    menuItemDisabled = input(false, { ...(ngDevMode ? { debugName: "menuItemDisabled" } : {}), transform: booleanAttribute });
+    /** Marks item as destructive (delete, remove actions). */
+    destructive = input(false, { ...(ngDevMode ? { debugName: "destructive" } : {}), transform: booleanAttribute });
+    // ─── Outputs ───
+    /** Emitted when item is activated. */
+    menuItemSelect = output();
+    // ─── Internal State ───
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+    // ─── Computed ───
+    size = computed(() => this.menu?.menuSize() ?? 'md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    itemClasses = computed(() => mergeClasses(menuItemVariants({
+        size: this.size(),
+        focused: this.isFocused(),
+        disabled: this.menuItemDisabled(),
+        destructive: this.destructive(),
+    })), ...(ngDevMode ? [{ debugName: "itemClasses" }] : []));
+    // ─── FocusableOption Implementation ───
+    get disabled() {
+        return this.menuItemDisabled();
+    }
+    focus() {
+        this.elementRef.nativeElement.focus();
+        this.isFocused.set(true);
+    }
+    getLabel() {
+        return this.elementRef.nativeElement.textContent?.trim() ?? '';
+    }
+    // ─── Event Handlers ───
+    onAction(event) {
+        if (this.menuItemDisabled())
+            return;
+        event.preventDefault();
+        this.menuItemSelect.emit();
+        if (this.rootTrigger?.menuCloseOnSelect()) {
+            this.rootTrigger.close();
+        }
+    }
+    onMouseEnter() {
+        if (this.menuItemDisabled())
+            return;
+        this.focus();
+    }
+    onMouseLeave() {
+        this.isFocused.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuItemDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: MenuItemDirective, isStandalone: true, selector: "[comMenuItem]", inputs: { menuItemDisabled: { classPropertyName: "menuItemDisabled", publicName: "menuItemDisabled", isSignal: true, isRequired: false, transformFunction: null }, destructive: { classPropertyName: "destructive", publicName: "destructive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemSelect: "menuItemSelect" }, host: { listeners: { "click": "onAction($event)", "keydown.enter": "onAction($event)", "keydown.space": "onAction($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "class": "itemClasses()", "attr.role": "\"menuitem\"", "attr.tabindex": "-1", "attr.aria-disabled": "menuItemDisabled() || null", "attr.disabled": "menuItemDisabled() || null" } }, providers: [{ provide: MenuItemBase, useExisting: forwardRef(() => MenuItemDirective) }], exportAs: ["comMenuItem"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comMenuItem]',
+                    exportAs: 'comMenuItem',
+                    providers: [{ provide: MenuItemBase, useExisting: forwardRef(() => MenuItemDirective) }],
+                    host: {
+                        '[class]': 'itemClasses()',
+                        '[attr.role]': '"menuitem"',
+                        '[attr.tabindex]': '-1',
+                        '[attr.aria-disabled]': 'menuItemDisabled() || null',
+                        '[attr.disabled]': 'menuItemDisabled() || null',
+                        '(click)': 'onAction($event)',
+                        '(keydown.enter)': 'onAction($event)',
+                        '(keydown.space)': 'onAction($event)',
+                        '(mouseenter)': 'onMouseEnter()',
+                        '(mouseleave)': 'onMouseLeave()',
+                    },
+                }]
+        }], propDecorators: { menuItemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItemDisabled", required: false }] }], destructive: [{ type: i0.Input, args: [{ isSignal: true, alias: "destructive", required: false }] }], menuItemSelect: [{ type: i0.Output, args: ["menuItemSelect"] }] } });
+
+/**
+ * Checkbox menu item component with toggleable checked state.
+ *
+ * @tokens `--color-popover-foreground`, `--color-foreground`, `--color-muted`
+ *
+ * @example
+ * ```html
+ * <button comMenuItemCheckbox [(checked)]="showSidebar">Sidebar</button>
+ * ```
+ */
+class MenuItemCheckboxComponent extends MenuItemBase {
+    elementRef = inject(ElementRef);
+    menu = inject(MENU_REF, { optional: true });
+    // ─── Inputs ───
+    /** Disables the item. */
+    menuItemDisabled = input(false, { ...(ngDevMode ? { debugName: "menuItemDisabled" } : {}), transform: booleanAttribute });
+    /** Two-way bindable checked state. */
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    // ─── Internal State ───
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+    // ─── Computed ───
+    size = computed(() => this.menu?.menuSize() ?? 'md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    itemClasses = computed(() => mergeClasses(menuItemVariants({
+        size: this.size(),
+        focused: this.isFocused(),
+        disabled: this.menuItemDisabled(),
+    })), ...(ngDevMode ? [{ debugName: "itemClasses" }] : []));
+    indicatorClasses = computed(() => mergeClasses(menuCheckIndicatorVariants({ size: this.size() })), ...(ngDevMode ? [{ debugName: "indicatorClasses" }] : []));
+    // ─── FocusableOption Implementation ───
+    get disabled() {
+        return this.menuItemDisabled();
+    }
+    focus() {
+        this.elementRef.nativeElement.focus();
+        this.isFocused.set(true);
+    }
+    getLabel() {
+        return this.elementRef.nativeElement.textContent?.trim() ?? '';
+    }
+    // ─── Event Handlers ───
+    toggle(event) {
+        if (this.menuItemDisabled())
+            return;
+        event.preventDefault();
+        this.checked.update((c) => !c);
+    }
+    onMouseEnter() {
+        if (this.menuItemDisabled())
+            return;
+        this.focus();
+    }
+    onMouseLeave() {
+        this.isFocused.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuItemCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: MenuItemCheckboxComponent, isStandalone: true, selector: "[comMenuItemCheckbox]", inputs: { menuItemDisabled: { classPropertyName: "menuItemDisabled", publicName: "menuItemDisabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { listeners: { "click": "toggle($event)", "keydown.enter": "toggle($event)", "keydown.space": "toggle($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "class": "itemClasses()", "attr.role": "\"menuitemcheckbox\"", "attr.tabindex": "-1", "attr.aria-checked": "checked()", "attr.aria-disabled": "menuItemDisabled() || null", "attr.disabled": "menuItemDisabled() || null" } }, providers: [{ provide: MenuItemBase, useExisting: forwardRef(() => MenuItemCheckboxComponent) }], exportAs: ["comMenuItemCheckbox"], usesInheritance: true, ngImport: i0, template: `
+    <span [class]="indicatorClasses()">
+      @if (checked()) {
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="w-full h-full"
+          aria-hidden="true"
+        >
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      }
+    </span>
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuItemCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[comMenuItemCheckbox]',
+                    exportAs: 'comMenuItemCheckbox',
+                    template: `
+    <span [class]="indicatorClasses()">
+      @if (checked()) {
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="w-full h-full"
+          aria-hidden="true"
+        >
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      }
+    </span>
+    <ng-content />
+  `,
+                    providers: [{ provide: MenuItemBase, useExisting: forwardRef(() => MenuItemCheckboxComponent) }],
+                    host: {
+                        '[class]': 'itemClasses()',
+                        '[attr.role]': '"menuitemcheckbox"',
+                        '[attr.tabindex]': '-1',
+                        '[attr.aria-checked]': 'checked()',
+                        '[attr.aria-disabled]': 'menuItemDisabled() || null',
+                        '[attr.disabled]': 'menuItemDisabled() || null',
+                        '(click)': 'toggle($event)',
+                        '(keydown.enter)': 'toggle($event)',
+                        '(keydown.space)': 'toggle($event)',
+                        '(mouseenter)': 'onMouseEnter()',
+                        '(mouseleave)': 'onMouseLeave()',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { menuItemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItemDisabled", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
+
+/**
+ * Token for menu group to allow radio items to coordinate.
+ */
+class MenuGroupRef {
+}
+/**
+ * Menu group directive for organizing related items.
+ * For radio items, ensures mutual exclusivity within the group.
+ *
+ * @example
+ * ```html
+ * <div comMenuGroup [(groupValue)]="sortField">
+ *   <button comMenuItemRadio value="name">Name</button>
+ *   <button comMenuItemRadio value="date">Date</button>
+ * </div>
+ * ```
+ *
+ * @tokens None - uses only ARIA attributes
+ */
+class MenuGroupDirective extends MenuGroupRef {
+    /** Optional accessible label for the group. */
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** Two-way bindable value for radio groups. */
+    groupValue = model(undefined, ...(ngDevMode ? [{ debugName: "groupValue" }] : []));
+    setGroupValue(value) {
+        this.groupValue.set(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuGroupDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: MenuGroupDirective, isStandalone: true, selector: "[comMenuGroup]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, groupValue: { classPropertyName: "groupValue", publicName: "groupValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { groupValue: "groupValueChange" }, host: { properties: { "attr.role": "\"group\"", "attr.aria-label": "ariaLabel() || null" } }, providers: [{ provide: MenuGroupRef, useExisting: forwardRef(() => MenuGroupDirective) }], exportAs: ["comMenuGroup"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comMenuGroup]',
+                    exportAs: 'comMenuGroup',
+                    providers: [{ provide: MenuGroupRef, useExisting: forwardRef(() => MenuGroupDirective) }],
+                    host: {
+                        '[attr.role]': '"group"',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                    },
+                }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], groupValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupValue", required: false }] }, { type: i0.Output, args: ["groupValueChange"] }] } });
+
+/**
+ * Radio menu item component for single-selection within a group.
+ *
+ * @tokens `--color-popover-foreground`, `--color-foreground`, `--color-muted`
+ *
+ * @example
+ * ```html
+ * <div comMenuGroup [(groupValue)]="sortField">
+ *   <button comMenuItemRadio value="name">Name</button>
+ *   <button comMenuItemRadio value="date">Date</button>
+ * </div>
+ * ```
+ */
+class MenuItemRadioComponent extends MenuItemBase {
+    elementRef = inject(ElementRef);
+    menu = inject(MENU_REF, { optional: true });
+    rootTrigger = inject(ROOT_MENU_TRIGGER, { optional: true });
+    group = inject(MenuGroupRef, { optional: true });
+    // ─── Inputs ───
+    /** Disables the item. */
+    menuItemDisabled = input(false, { ...(ngDevMode ? { debugName: "menuItemDisabled" } : {}), transform: booleanAttribute });
+    /** The value this radio item represents. */
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    // ─── Internal State ───
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+    // ─── Computed ───
+    size = computed(() => this.menu?.menuSize() ?? 'md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Whether this radio item is currently selected. */
+    isChecked = computed(() => this.group?.groupValue() === this.value(), ...(ngDevMode ? [{ debugName: "isChecked" }] : []));
+    itemClasses = computed(() => mergeClasses(menuItemVariants({
+        size: this.size(),
+        focused: this.isFocused(),
+        disabled: this.menuItemDisabled(),
+    })), ...(ngDevMode ? [{ debugName: "itemClasses" }] : []));
+    indicatorClasses = computed(() => mergeClasses(menuCheckIndicatorVariants({ size: this.size() })), ...(ngDevMode ? [{ debugName: "indicatorClasses" }] : []));
+    // ─── FocusableOption Implementation ───
+    get disabled() {
+        return this.menuItemDisabled();
+    }
+    focus() {
+        this.elementRef.nativeElement.focus();
+        this.isFocused.set(true);
+    }
+    getLabel() {
+        return this.elementRef.nativeElement.textContent?.trim() ?? '';
+    }
+    // ─── Event Handlers ───
+    select(event) {
+        if (this.menuItemDisabled())
+            return;
+        event.preventDefault();
+        this.group?.setGroupValue(this.value());
+        if (this.rootTrigger?.menuCloseOnSelect()) {
+            this.rootTrigger.close();
+        }
+    }
+    onMouseEnter() {
+        if (this.menuItemDisabled())
+            return;
+        this.focus();
+    }
+    onMouseLeave() {
+        this.isFocused.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuItemRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: MenuItemRadioComponent, isStandalone: true, selector: "[comMenuItemRadio]", inputs: { menuItemDisabled: { classPropertyName: "menuItemDisabled", publicName: "menuItemDisabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "select($event)", "keydown.enter": "select($event)", "keydown.space": "select($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "class": "itemClasses()", "attr.role": "\"menuitemradio\"", "attr.tabindex": "-1", "attr.aria-checked": "isChecked()", "attr.aria-disabled": "menuItemDisabled() || null", "attr.disabled": "menuItemDisabled() || null" } }, providers: [{ provide: MenuItemBase, useExisting: forwardRef(() => MenuItemRadioComponent) }], exportAs: ["comMenuItemRadio"], usesInheritance: true, ngImport: i0, template: `
+    <span [class]="indicatorClasses()">
+      @if (isChecked()) {
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          class="w-full h-full"
+          aria-hidden="true"
+        >
+          <circle cx="12" cy="12" r="6" />
+        </svg>
+      }
+    </span>
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuItemRadioComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[comMenuItemRadio]',
+                    exportAs: 'comMenuItemRadio',
+                    template: `
+    <span [class]="indicatorClasses()">
+      @if (isChecked()) {
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          class="w-full h-full"
+          aria-hidden="true"
+        >
+          <circle cx="12" cy="12" r="6" />
+        </svg>
+      }
+    </span>
+    <ng-content />
+  `,
+                    providers: [{ provide: MenuItemBase, useExisting: forwardRef(() => MenuItemRadioComponent) }],
+                    host: {
+                        '[class]': 'itemClasses()',
+                        '[attr.role]': '"menuitemradio"',
+                        '[attr.tabindex]': '-1',
+                        '[attr.aria-checked]': 'isChecked()',
+                        '[attr.aria-disabled]': 'menuItemDisabled() || null',
+                        '[attr.disabled]': 'menuItemDisabled() || null',
+                        '(click)': 'select($event)',
+                        '(keydown.enter)': 'select($event)',
+                        '(keydown.space)': 'select($event)',
+                        '(mouseenter)': 'onMouseEnter()',
+                        '(mouseleave)': 'onMouseLeave()',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { menuItemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItemDisabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+
+let labelIdCounter = 0;
+/**
+ * Non-interactive section label/header inside a menu.
+ *
+ * @tokens `--color-muted-foreground`
+ *
+ * @example
+ * ```html
+ * <span comMenuLabel>Team</span>
+ * <button comMenuItem>View Members</button>
+ * ```
+ */
+class MenuLabelDirective {
+    menu = inject(MENU_REF, { optional: true });
+    /** Unique ID that can be referenced by aria-labelledby. */
+    labelId = `menu-label-${++labelIdCounter}`;
+    size = computed(() => this.menu?.menuSize() ?? 'md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    labelClasses = computed(() => mergeClasses(menuLabelVariants({ size: this.size() })), ...(ngDevMode ? [{ debugName: "labelClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: MenuLabelDirective, isStandalone: true, selector: "[comMenuLabel]", host: { properties: { "class": "labelClasses()", "attr.role": "\"presentation\"", "id": "labelId" } }, exportAs: ["comMenuLabel"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comMenuLabel]',
+                    exportAs: 'comMenuLabel',
+                    host: {
+                        '[class]': 'labelClasses()',
+                        '[attr.role]': '"presentation"',
+                        '[id]': 'labelId',
+                    },
+                }]
+        }] });
+
+/**
+ * Visual separator between menu sections.
+ *
+ * @tokens `--color-border`
+ *
+ * @example
+ * ```html
+ * <button comMenuItem>Edit</button>
+ * <hr comMenuDivider />
+ * <button comMenuItem>Delete</button>
+ * ```
+ */
+class MenuDividerDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuDividerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: MenuDividerDirective, isStandalone: true, selector: "[comMenuDivider]", host: { properties: { "attr.role": "\"separator\"" }, classAttribute: "block border-t border-border my-1" }, exportAs: ["comMenuDivider"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuDividerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comMenuDivider]',
+                    exportAs: 'comMenuDivider',
+                    host: {
+                        class: 'block border-t border-border my-1',
+                        '[attr.role]': '"separator"',
+                    },
+                }]
+        }] });
+
+/**
+ * Submenu indicator component — displays a chevron icon indicating a submenu.
+ * Place inside a menu item that has `[comMenuTrigger]` to indicate it opens a submenu.
+ *
+ * @tokens `--color-muted-foreground`
+ *
+ * @example
+ * ```html
+ * <button comMenuItem [comMenuTrigger]="shareMenu">
+ *   Share
+ *   <com-menu-sub-indicator />
+ * </button>
+ * ```
+ */
+class MenuSubIndicatorComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuSubIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: MenuSubIndicatorComponent, isStandalone: true, selector: "com-menu-sub-indicator", host: { properties: { "attr.aria-hidden": "true" }, classAttribute: "ml-auto inline-flex items-center justify-center w-4 h-4 text-muted-foreground" }, ngImport: i0, template: `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <polyline points="9 18 15 12 9 6" />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuSubIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'com-menu-sub-indicator',
+                    template: `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <polyline points="9 18 15 12 9 6" />
+    </svg>
+  `,
+                    host: {
+                        class: 'ml-auto inline-flex items-center justify-center w-4 h-4 text-muted-foreground',
+                        '[attr.aria-hidden]': 'true',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+/**
+ * Keyboard shortcut hint displayed in a menu item.
+ *
+ * @tokens `--color-muted-foreground`
+ *
+ * @example
+ * ```html
+ * <button comMenuItem>
+ *   Save
+ *   <span comMenuShortcut>⌘S</span>
+ * </button>
+ * ```
+ */
+class MenuShortcutDirective {
+    menu = inject(MENU_REF, { optional: true });
+    size = computed(() => this.menu?.menuSize() ?? 'md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    shortcutClasses = computed(() => mergeClasses(menuShortcutVariants({ size: this.size() })), ...(ngDevMode ? [{ debugName: "shortcutClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuShortcutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: MenuShortcutDirective, isStandalone: true, selector: "[comMenuShortcut]", host: { properties: { "class": "shortcutClasses()" } }, exportAs: ["comMenuShortcut"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuShortcutDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comMenuShortcut]',
+                    exportAs: 'comMenuShortcut',
+                    host: {
+                        '[class]': 'shortcutClasses()',
+                    },
+                }]
+        }] });
+
+// Public API for the menu component
+// Main components/directives
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MENU_REF, MenuComponent, MenuDividerDirective, MenuGroupDirective, MenuGroupRef, MenuItemBase, MenuItemCheckboxComponent, MenuItemDirective, MenuItemRadioComponent, MenuLabelDirective, MenuShortcutDirective, MenuSubIndicatorComponent, MenuTriggerDirective, ROOT_MENU_TRIGGER, menuCheckIndicatorVariants, menuItemVariants, menuLabelVariants, menuPanelVariants, menuShortcutVariants };
+//# sourceMappingURL=ngx-com-components-menu.mjs.map