ngx-com 0.0.21 → 0.1.0

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

@@ -35,7 +35,7 @@ function generateMenuId() {
  * **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`
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-overlay`
  *
  * @example Root trigger
  * ```html
@@ -56,7 +56,7 @@ function generateMenuId() {
  * </button>
  * ```
  */
-class MenuTriggerDirective {
+class ComMenuTrigger {
     overlay = inject(Overlay);
     elementRef = inject(ElementRef);
     viewContainerRef = inject(ViewContainerRef);
@@ -149,7 +149,7 @@ class MenuTriggerDirective {
             this.open();
         }
     }
-    /** Called by MenuComponent to register itself when attached. */
+    /** Called by ComMenuComponent to register itself when attached. */
     registerMenu(menu) {
         this.attachedMenu = menu;
     }
@@ -349,12 +349,6 @@ class MenuTriggerDirective {
             event.preventDefault();
             this.close();
         });
-        this.overlayRef
-            .detachments()
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            this.menuOpen.set(false);
-        });
     }
     subscribeToSubmenuCloseEvents() {
         if (!this.overlayRef)
@@ -369,12 +363,6 @@ class MenuTriggerDirective {
             this.closeSubmenu();
             this.elementRef.nativeElement.focus();
         });
-        this.overlayRef
-            .detachments()
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            this.menuOpen.set(false);
-        });
     }
     // ─── Submenu Hover Tracking ───
     onSubmenuMouseEnter() {
@@ -418,10 +406,10 @@ class MenuTriggerDirective {
         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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ComMenuTrigger, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComMenuTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[comMenuTrigger]',
@@ -447,12 +435,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 /**
  * Menu panel styling variants.
  *
- * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-lg`, `--radius-popover`
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-overlay`, `--radius-popover`
  */
 const menuPanelVariants = cva([
     'bg-popover text-popover-foreground',
     'border border-border',
-    'rounded-popover shadow-lg',
+    'rounded-popover shadow-overlay',
     'overflow-hidden',
     'py-1',
 ], {
@@ -481,7 +469,7 @@ const menuItemVariants = cva([
     'relative flex items-center w-full',
     'text-sm text-popover-foreground',
     'outline-none select-none',
-    'transition-colors duration-75',
+    'transition-colors duration-fast',
 ], {
     variants: {
         size: {
@@ -564,13 +552,13 @@ const menuShortcutVariants = cva('ml-auto text-muted-foreground tracking-widest'
  * Base class for focusable menu items.
  * All item directives must implement this interface for FocusKeyManager.
  */
-class MenuItemBase {
+class ComMenuItemBase {
 }
 /**
  * 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`
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-overlay`
  *
  * @example
  * ```html
@@ -580,7 +568,7 @@ class MenuItemBase {
  * </com-menu>
  * ```
  */
-class MenuComponent {
+class ComMenuComponent {
     rootTrigger = inject(ROOT_MENU_TRIGGER, { optional: true });
     keyManager = null;
     // ─── Inputs ───
@@ -596,7 +584,7 @@ class MenuComponent {
     menuId = generateMenuId();
     animationState = signal('open', ...(ngDevMode ? [{ debugName: "animationState" }] : []));
     /** Query all focusable items in the menu. */
-    items = contentChildren(MenuItemBase, ...(ngDevMode ? [{ debugName: "items" }] : []));
+    items = contentChildren(ComMenuItemBase, ...(ngDevMode ? [{ debugName: "items" }] : []));
     // ─── Computed ───
     panelClasses = computed(() => mergeClasses(menuPanelVariants({ size: this.menuSize(), variant: this.menuVariant() })), ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
     constructor() {
@@ -638,11 +626,12 @@ class MenuComponent {
             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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: ComMenuComponent, 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(() => ComMenuComponent) }], queries: [{ propertyName: "items", predicate: ComMenuItemBase, isSignal: true }], ngImport: i0, template: `
     <div
       [class]="panelClasses()"
       role="menu"
+      tabindex="-1"
       [attr.aria-label]="ariaLabel() || null"
       [attr.aria-labelledby]="ariaLabelledBy() || null"
       [id]="menuId"
@@ -653,12 +642,13 @@ class MenuComponent {
     </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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'com-menu', template: `
     <div
       [class]="panelClasses()"
       role="menu"
+      tabindex="-1"
       [attr.aria-label]="ariaLabel() || null"
       [attr.aria-labelledby]="ariaLabelledBy() || null"
       [id]="menuId"
@@ -667,8 +657,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
     >
       <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 }] }] } });
+  `, providers: [{ provide: MENU_REF, useExisting: forwardRef(() => ComMenuComponent) }], 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(() => ComMenuItemBase), { isSignal: true }] }] } });
 
 /**
  * Menu item directive for actionable menu items.
@@ -683,7 +673,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * <button comMenuItem destructive>Delete</button>
  * ```
  */
-class MenuItemDirective extends MenuItemBase {
+class ComMenuItem extends ComMenuItemBase {
     elementRef = inject(ElementRef);
     menu = inject(MENU_REF, { optional: true });
     rootTrigger = inject(ROOT_MENU_TRIGGER, { optional: true });
@@ -734,15 +724,15 @@ class MenuItemDirective extends MenuItemBase {
     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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComMenuItem, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ComMenuItem, 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: ComMenuItemBase, useExisting: forwardRef(() => ComMenuItem) }], exportAs: ["comMenuItem"], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComMenuItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[comMenuItem]',
                     exportAs: 'comMenuItem',
-                    providers: [{ provide: MenuItemBase, useExisting: forwardRef(() => MenuItemDirective) }],
+                    providers: [{ provide: ComMenuItemBase, useExisting: forwardRef(() => ComMenuItem) }],
                     host: {
                         '[class]': 'itemClasses()',
                         '[attr.role]': '"menuitem"',
@@ -768,7 +758,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * <button comMenuItemCheckbox [(checked)]="showSidebar">Sidebar</button>
  * ```
  */
-class MenuItemCheckboxComponent extends MenuItemBase {
+class ComMenuItemCheckbox extends ComMenuItemBase {
     elementRef = inject(ElementRef);
     menu = inject(MENU_REF, { optional: true });
     // ─── Inputs ───
@@ -812,8 +802,8 @@ class MenuItemCheckboxComponent extends MenuItemBase {
     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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComMenuItemCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComMenuItemCheckbox, 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: ComMenuItemBase, useExisting: forwardRef(() => ComMenuItemCheckbox) }], exportAs: ["comMenuItemCheckbox"], usesInheritance: true, ngImport: i0, template: `
     <span [class]="indicatorClasses()">
       @if (checked()) {
         <svg
@@ -834,9 +824,10 @@ class MenuItemCheckboxComponent extends MenuItemBase {
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuItemCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComMenuItemCheckbox, decorators: [{
             type: Component,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector -- attribute selector used on <button> host elements
                     selector: '[comMenuItemCheckbox]',
                     exportAs: 'comMenuItemCheckbox',
                     template: `
@@ -859,7 +850,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
     </span>
     <ng-content />
   `,
-                    providers: [{ provide: MenuItemBase, useExisting: forwardRef(() => MenuItemCheckboxComponent) }],
+                    providers: [{ provide: ComMenuItemBase, useExisting: forwardRef(() => ComMenuItemCheckbox) }],
                     host: {
                         '[class]': 'itemClasses()',
                         '[attr.role]': '"menuitemcheckbox"',
@@ -880,7 +871,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 /**
  * Token for menu group to allow radio items to coordinate.
  */
-class MenuGroupRef {
+class ComMenuGroupRef {
 }
 /**
  * Menu group directive for organizing related items.
@@ -896,7 +887,7 @@ class MenuGroupRef {
  *
  * @tokens None - uses only ARIA attributes
  */
-class MenuGroupDirective extends MenuGroupRef {
+class ComMenuGroup extends ComMenuGroupRef {
     /** Optional accessible label for the group. */
     ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     /** Two-way bindable value for radio groups. */
@@ -904,15 +895,15 @@ class MenuGroupDirective extends MenuGroupRef {
     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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComMenuGroup, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ComMenuGroup, 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: ComMenuGroupRef, useExisting: forwardRef(() => ComMenuGroup) }], exportAs: ["comMenuGroup"], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComMenuGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[comMenuGroup]',
                     exportAs: 'comMenuGroup',
-                    providers: [{ provide: MenuGroupRef, useExisting: forwardRef(() => MenuGroupDirective) }],
+                    providers: [{ provide: ComMenuGroupRef, useExisting: forwardRef(() => ComMenuGroup) }],
                     host: {
                         '[attr.role]': '"group"',
                         '[attr.aria-label]': 'ariaLabel() || null',
@@ -933,11 +924,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * </div>
  * ```
  */
-class MenuItemRadioComponent extends MenuItemBase {
+class ComMenuItemRadio extends ComMenuItemBase {
     elementRef = inject(ElementRef);
     menu = inject(MENU_REF, { optional: true });
     rootTrigger = inject(ROOT_MENU_TRIGGER, { optional: true });
-    group = inject(MenuGroupRef, { optional: true });
+    group = inject(ComMenuGroupRef, { optional: true });
     // ─── Inputs ───
     /** Disables the item. */
     menuItemDisabled = input(false, { ...(ngDevMode ? { debugName: "menuItemDisabled" } : {}), transform: booleanAttribute });
@@ -984,8 +975,8 @@ class MenuItemRadioComponent extends MenuItemBase {
     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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComMenuItemRadio, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComMenuItemRadio, 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: ComMenuItemBase, useExisting: forwardRef(() => ComMenuItemRadio) }], exportAs: ["comMenuItemRadio"], usesInheritance: true, ngImport: i0, template: `
     <span [class]="indicatorClasses()">
       @if (isChecked()) {
         <svg
@@ -1002,9 +993,10 @@ class MenuItemRadioComponent extends MenuItemBase {
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuItemRadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComMenuItemRadio, decorators: [{
             type: Component,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector -- attribute selector used on <button> host elements
                     selector: '[comMenuItemRadio]',
                     exportAs: 'comMenuItemRadio',
                     template: `
@@ -1023,7 +1015,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
     </span>
     <ng-content />
   `,
-                    providers: [{ provide: MenuItemBase, useExisting: forwardRef(() => MenuItemRadioComponent) }],
+                    providers: [{ provide: ComMenuItemBase, useExisting: forwardRef(() => ComMenuItemRadio) }],
                     host: {
                         '[class]': 'itemClasses()',
                         '[attr.role]': '"menuitemradio"',
@@ -1053,16 +1045,16 @@ let labelIdCounter = 0;
  * <button comMenuItem>View Members</button>
  * ```
  */
-class MenuLabelDirective {
+class ComMenuLabel {
     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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComMenuLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComMenuLabel, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComMenuLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[comMenuLabel]',
@@ -1087,11 +1079,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * <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 });
+class ComMenuDivider {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComMenuDivider, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComMenuDivider, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComMenuDivider, decorators: [{
             type: Directive,
             args: [{
                     selector: '[comMenuDivider]',
@@ -1117,9 +1109,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * </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: `
+class ComMenuSubIndicator {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComMenuSubIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ComMenuSubIndicator, 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"
@@ -1133,7 +1125,7 @@ class MenuSubIndicatorComponent {
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MenuSubIndicatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComMenuSubIndicator, decorators: [{
             type: Component,
             args: [{
                     selector: 'com-menu-sub-indicator',
@@ -1171,14 +1163,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * </button>
  * ```
  */
-class MenuShortcutDirective {
+class ComMenuShortcut {
     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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComMenuShortcut, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComMenuShortcut, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComMenuShortcut, decorators: [{
             type: Directive,
             args: [{
                     selector: '[comMenuShortcut]',
@@ -1196,5 +1188,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * 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 };
+export { ComMenuComponent, ComMenuDivider, ComMenuGroup, ComMenuGroupRef, ComMenuItem, ComMenuItemBase, ComMenuItemCheckbox, ComMenuItemRadio, ComMenuLabel, ComMenuShortcut, ComMenuSubIndicator, ComMenuTrigger, MENU_REF, ROOT_MENU_TRIGGER, menuCheckIndicatorVariants, menuItemVariants, menuLabelVariants, menuPanelVariants, menuShortcutVariants };
 //# sourceMappingURL=ngx-com-components-menu.mjs.map