@ng-cn/core 1.0.15 → 1.0.17

package/src/app/lib/components/ui/menubar/menubar-content.component.ts

@@ -1,14 +1,14 @@
 import { cn, Presence } from '@/lib/utils';
 import {
-    afterNextRender,
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    effect,
-    ElementRef,
-    inject,
-    input,
-    OnDestroy,
+  afterNextRender,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  OnDestroy,
 } from '@angular/core';
 import { MENUBAR_CONTEXT, MENUBAR_MENU_CONTEXT } from './menubar-context';
 
@@ -35,6 +35,7 @@ import { MENUBAR_CONTEXT, MENUBAR_MENU_CONTEXT } from './menubar-context';
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"menubar-content"',
     class: 'contents',
     '(document:click)': 'onDocumentClick($event)',
     '(document:keydown.escape)': 'onEscapeKey()',
@@ -42,25 +43,44 @@ import { MENUBAR_CONTEXT, MENUBAR_MENU_CONTEXT } from './menubar-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MenubarContent implements OnDestroy {
-  protected readonly context = inject(MENUBAR_CONTEXT);
-  protected readonly menuContext = inject(MENUBAR_MENU_CONTEXT);
-  private readonly elementRef = inject(ElementRef);
+  constructor() {
+    // Focus first item when menu opens
+    effect(() => {
+      if (this.menuContext.open()) {
+        setTimeout(() => {
+          this.updateMenuItems();
+          const focusedIdx = this.menuContext.focusedItemIndex();
+          if (focusedIdx >= 0 && this.menuItems[focusedIdx]) {
+            this.menuItems[focusedIdx].focus();
+          } else if (this.menuItems.length > 0) {
+            this.menuItems[0].focus();
+            this.menuContext.focusedItemIndex.set(0);
+          }
+        }, 0);
+      }
+    });
+
+    // Initial menu items update (browser-only)
+    afterNextRender(() => {
+      this.updateMenuItems();
+    });
+  }
 
   /** Alignment */
   readonly align = input<'start' | 'center' | 'end'>('start');
 
   /** Side offset */
   readonly sideOffset = input<number>(8);
-
   /** Align offset */
   readonly alignOffset = input<number>(-4);
 
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  private menuItems: HTMLElement[] = [];
-  private typeaheadBuffer = '';
-  private typeaheadTimeout: ReturnType<typeof setTimeout> | null = null;
+  private readonly _elementRef = inject(ElementRef);
+
+  protected readonly context = inject(MENUBAR_CONTEXT);
+  protected readonly menuContext = inject(MENUBAR_MENU_CONTEXT);
 
   protected readonly computedClass = computed(() => {
     const alignClasses = {
@@ -75,32 +95,13 @@ export class MenubarContent implements OnDestroy {
       'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
       alignClasses[this.align()],
-      this.class()
+      this.class(),
     );
   });
 
-  constructor() {
-    // Focus first item when menu opens
-    effect(() => {
-      if (this.menuContext.open()) {
-        setTimeout(() => {
-          this.updateMenuItems();
-          const focusedIdx = this.menuContext.focusedItemIndex();
-          if (focusedIdx >= 0 && this.menuItems[focusedIdx]) {
-            this.menuItems[focusedIdx].focus();
-          } else if (this.menuItems.length > 0) {
-            this.menuItems[0].focus();
-            this.menuContext.focusedItemIndex.set(0);
-          }
-        }, 0);
-      }
-    });
-
-    // Initial menu items update (browser-only)
-    afterNextRender(() => {
-      this.updateMenuItems();
-    });
-  }
+  private menuItems: HTMLElement[] = [];
+  private typeaheadBuffer = '';
+  private typeaheadTimeout: ReturnType<typeof setTimeout> | null = null;
 
   ngOnDestroy(): void {
     if (this.typeaheadTimeout) {
@@ -109,14 +110,15 @@ export class MenubarContent implements OnDestroy {
   }
 
   private updateMenuItems(): void {
-    const content = this.elementRef.nativeElement.querySelector('[role="menu"]');
+    const content = this._elementRef.nativeElement.querySelector('[role="menu"]');
     if (content) {
       this.menuItems = Array.from(
-        content.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"]):not([data-disabled])')
+        content.querySelectorAll(
+          '[role="menuitem"]:not([aria-disabled="true"]):not([data-disabled])',
+        ),
       );
     }
   }
-
   protected onKeydown(event: KeyboardEvent): void {
     this.updateMenuItems();
 
@@ -161,27 +163,22 @@ export class MenubarContent implements OnDestroy {
         break;
     }
   }
-
   private focusNext(): void {
     const currentIndex = this.menuContext.focusedItemIndex();
     const nextIndex = currentIndex < this.menuItems.length - 1 ? currentIndex + 1 : 0;
     this.focusItem(nextIndex);
   }
-
   private focusPrevious(): void {
     const currentIndex = this.menuContext.focusedItemIndex();
     const prevIndex = currentIndex > 0 ? currentIndex - 1 : this.menuItems.length - 1;
     this.focusItem(prevIndex);
   }
-
   private focusFirst(): void {
     this.focusItem(0);
   }
-
   private focusLast(): void {
     this.focusItem(this.menuItems.length - 1);
   }
-
   private focusItem(index: number): void {
     if (index >= 0 && index < this.menuItems.length) {
       // Update roving tabindex
@@ -192,7 +189,6 @@ export class MenubarContent implements OnDestroy {
       this.menuContext.focusedItemIndex.set(index);
     }
   }
-
   private handleTypeahead(key: string): void {
     this.typeaheadBuffer += key.toLowerCase();
 
@@ -206,30 +202,27 @@ export class MenubarContent implements OnDestroy {
 
     // Find first matching item
     const matchIndex = this.menuItems.findIndex((item) =>
-      item.textContent?.toLowerCase().trim().startsWith(this.typeaheadBuffer)
+      item.textContent?.toLowerCase().trim().startsWith(this.typeaheadBuffer),
     );
 
     if (matchIndex >= 0) {
       this.focusItem(matchIndex);
     }
   }
-
   private close(): void {
     this.menuContext.open.set(false);
     this.context.activeMenu.set(null);
     this.menuContext.focusedItemIndex.set(-1);
   }
-
   protected onDocumentClick(event: MouseEvent): void {
     const target = event.target as HTMLElement;
-    const hostElement = this.elementRef.nativeElement;
+    const hostElement = this._elementRef.nativeElement;
     const parent = hostElement.closest('MenubarMenu');
 
     if (parent && !parent.contains(target)) {
       this.close();
     }
   }
-
   protected onEscapeKey(): void {
     this.close();
   }

package/src/app/lib/components/ui/menubar/menubar-context.ts

@@ -1,9 +1,5 @@
 import { InjectionToken, type WritableSignal } from '@angular/core';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 /**
  * Direction for menubar layout
  */
@@ -14,10 +10,6 @@ export type MenubarDirection = 'ltr' | 'rtl';
  */
 export type MenubarNavigationDirection = 'horizontal' | 'vertical';
 
-// ============================================================================
-// Context Interfaces
-// ============================================================================
-
 /**
  * Context value for the Menubar component
  *
@@ -60,4 +52,6 @@ export interface MenubarMenuContextValue {
   focusedItemIndex: WritableSignal<number>;
 }
 
-export const MENUBAR_MENU_CONTEXT = new InjectionToken<MenubarMenuContextValue>('MENUBAR_MENU_CONTEXT');
+export const MENUBAR_MENU_CONTEXT = new InjectionToken<MenubarMenuContextValue>(
+  'MENUBAR_MENU_CONTEXT',
+);

package/src/app/lib/components/ui/menubar/menubar-item.component.ts

@@ -11,6 +11,7 @@ import { MENUBAR_CONTEXT, MENUBAR_MENU_CONTEXT } from './menubar-context';
   selector: 'MenubarItem',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"menubar-item"',
     '[class]': 'computedClass()',
     '[attr.role]': '"menuitem"',
     '[attr.tabindex]': 'disabled() ? -1 : -1',
@@ -23,28 +24,26 @@ import { MENUBAR_CONTEXT, MENUBAR_MENU_CONTEXT } from './menubar-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MenubarItem {
-  private readonly context = inject(MENUBAR_CONTEXT);
-  private readonly menuContext = inject(MENUBAR_MENU_CONTEXT);
+  /** Select event */
+  readonly onSelect = output<void>();
 
+  /** Additional CSS classes */
+  readonly class = input<string>('');
   /** Whether the item is disabled */
   readonly disabled = input<boolean>(false);
-
   /** Whether the item is inset (extra padding) */
   readonly inset = input<boolean>(false);
 
-  /** Additional CSS classes */
-  readonly class = input<string>('');
-
-  /** Select event */
-  readonly onSelect = output<void>();
+  private readonly _context = inject(MENUBAR_CONTEXT);
+  private readonly _menuContext = inject(MENUBAR_MENU_CONTEXT);
 
   protected readonly computedClass = computed(() =>
     cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       this.inset() && 'pl-8',
       !this.disabled() && 'cursor-pointer hover:bg-accent hover:text-accent-foreground',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 
   protected handleClick(event: Event): void {
@@ -53,8 +52,8 @@ export class MenubarItem {
       return;
     }
     this.onSelect.emit();
-    this.menuContext.open.set(false);
-    this.context.activeMenu.set(null);
-    this.menuContext.focusedItemIndex.set(-1);
+    this._menuContext.open.set(false);
+    this._context.activeMenu.set(null);
+    this._menuContext.focusedItemIndex.set(-1);
   }
 }

package/src/app/lib/components/ui/menubar/menubar-label.component.ts

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'MenubarLabel',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"menubar-label"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -21,10 +22,6 @@ export class MenubarLabel {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn(
-      'px-2 py-1.5 text-sm font-semibold',
-      this.inset() && 'pl-8',
-      this.class()
-    )
+    cn('px-2 py-1.5 text-sm font-semibold', this.inset() && 'pl-8', this.class()),
   );
 }

package/src/app/lib/components/ui/menubar/menubar-menu.component.ts

@@ -1,5 +1,16 @@
-import { ChangeDetectionStrategy, Component, inject, OnDestroy, OnInit, signal } from '@angular/core';
-import { MENUBAR_CONTEXT, MENUBAR_MENU_CONTEXT, type MenubarMenuContextValue } from './menubar-context';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  OnDestroy,
+  OnInit,
+  signal,
+} from '@angular/core';
+import {
+  MENUBAR_CONTEXT,
+  MENUBAR_MENU_CONTEXT,
+  type MenubarMenuContextValue,
+} from './menubar-context';
 
 let menuIdCounter = 0;
 
@@ -22,6 +33,7 @@ let menuIdCounter = 0;
     },
   ],
   host: {
+    'attr.data-slot': '"menubar-menu"',
     class: 'relative',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/menubar/menubar-radio-group.component.ts

@@ -1,4 +1,10 @@
-import { ChangeDetectionStrategy, Component, InjectionToken, signal, type WritableSignal } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  InjectionToken,
+  signal,
+  type WritableSignal,
+} from '@angular/core';
 
 export interface MenubarRadioGroupContext {
   value: WritableSignal<string>;
@@ -6,7 +12,7 @@ export interface MenubarRadioGroupContext {
 }
 
 export const MENUBAR_RADIO_GROUP_CONTEXT = new InjectionToken<MenubarRadioGroupContext>(
-  'MENUBAR_RADIO_GROUP_CONTEXT'
+  'MENUBAR_RADIO_GROUP_CONTEXT',
 );
 
 /**
@@ -29,6 +35,7 @@ export const MENUBAR_RADIO_GROUP_CONTEXT = new InjectionToken<MenubarRadioGroupC
     },
   ],
   host: {
+    'attr.data-slot': '"menubar-radio-group"',
     '[attr.role]': '"group"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/menubar/menubar-radio-item.component.ts

@@ -19,6 +19,7 @@ import { MENUBAR_RADIO_GROUP_CONTEXT } from './menubar-radio-group.component';
     <ng-content />
   `,
   host: {
+    'attr.data-slot': '"menubar-radio-item"',
     '[class]': 'computedClass()',
     '[attr.role]': '"menuitemradio"',
     '[attr.aria-checked]': 'isSelected()',
@@ -30,37 +31,36 @@ import { MENUBAR_RADIO_GROUP_CONTEXT } from './menubar-radio-group.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MenubarRadioItem {
-  private readonly radioGroupContext = inject(MENUBAR_RADIO_GROUP_CONTEXT);
-  protected readonly CircleIcon = Circle;
+  /** Select event */
+  readonly onSelect = output<void>();
 
   /** The value of this radio item */
   readonly value = input.required<string>();
 
-  /** Whether the item is disabled */
-  readonly disabled = input<boolean>(false);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
+  /** Whether the item is disabled */
+  readonly disabled = input<boolean>(false);
 
-  /** Select event */
-  readonly onSelect = output<void>();
-
-  protected readonly isSelected = computed(() => this.radioGroupContext.value() === this.value());
+  private readonly _radioGroupContext = inject(MENUBAR_RADIO_GROUP_CONTEXT);
 
+  protected readonly isSelected = computed(() => this._radioGroupContext.value() === this.value());
   protected readonly computedClass = computed(() =>
     cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       !this.disabled() && 'cursor-pointer hover:bg-accent hover:text-accent-foreground',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 
+  protected readonly CircleIcon = Circle;
+
   protected handleClick(event: Event): void {
     if (this.disabled()) {
       event.preventDefault();
       return;
     }
-    this.radioGroupContext.setValue(this.value());
+    this._radioGroupContext.setValue(this.value());
     this.onSelect.emit();
   }
 }

package/src/app/lib/components/ui/menubar/menubar-separator.component.ts

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'MenubarSeparator',
   template: ``,
   host: {
+    'attr.data-slot': '"menubar-separator"',
     '[class]': 'computedClass()',
     '[attr.role]': '"separator"',
   },
@@ -18,7 +19,5 @@ export class MenubarSeparator {
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly computedClass = computed(() =>
-    cn('-mx-1 my-1 h-px bg-muted', this.class())
-  );
+  protected readonly computedClass = computed(() => cn('-mx-1 my-1 h-px bg-muted', this.class()));
 }

package/src/app/lib/components/ui/menubar/menubar-shortcut.component.ts

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'MenubarShortcut',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"menubar-shortcut"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -18,6 +19,6 @@ export class MenubarShortcut {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('ml-auto text-xs tracking-widest text-muted-foreground', this.class())
+    cn('ml-auto text-xs tracking-widest text-muted-foreground', this.class()),
   );
 }

package/src/app/lib/components/ui/menubar/menubar-sub-content.component.ts

@@ -21,6 +21,7 @@ import { MENUBAR_SUB_CONTEXT } from './menubar-sub.component';
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"menubar-sub-content"',
     class: 'contents',
     '(mouseenter)': 'onMouseEnter()',
     '(mouseleave)': 'onMouseLeave()',
@@ -28,23 +29,22 @@ import { MENUBAR_SUB_CONTEXT } from './menubar-sub.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MenubarSubContent {
-  protected readonly subContext = inject(MENUBAR_SUB_CONTEXT);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  protected readonly subContext = inject(MENUBAR_SUB_CONTEXT);
+
   protected readonly computedClass = computed(() =>
     cn(
       'absolute left-full top-0 z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg',
       'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 
   protected onMouseEnter(): void {
     this.subContext.open.set(true);
   }
-
   protected onMouseLeave(): void {
     this.subContext.open.set(false);
   }

package/src/app/lib/components/ui/menubar/menubar-sub-trigger.component.ts

@@ -15,6 +15,7 @@ import { MENUBAR_SUB_CONTEXT } from './menubar-sub.component';
     <lucide-icon [img]="ChevronRightIcon" class="ml-auto h-4 w-4" />
   `,
   host: {
+    'attr.data-slot': '"menubar-sub-trigger"',
     '[class]': 'computedClass()',
     '[attr.data-state]': 'subContext.open() ? "open" : "closed"',
     '(mouseenter)': 'onMouseEnter()',
@@ -23,27 +24,27 @@ import { MENUBAR_SUB_CONTEXT } from './menubar-sub.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MenubarSubTrigger {
-  protected readonly subContext = inject(MENUBAR_SUB_CONTEXT);
-  protected readonly ChevronRightIcon = ChevronRight;
-
   /** Whether the trigger is inset */
   readonly inset = input<boolean>(false);
 
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  protected readonly subContext = inject(MENUBAR_SUB_CONTEXT);
+
   protected readonly computedClass = computed(() =>
     cn(
       'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
       this.inset() && 'pl-8',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 
+  protected readonly ChevronRightIcon = ChevronRight;
+
   protected onMouseEnter(): void {
     this.subContext.open.set(true);
   }
-
   protected onMouseLeave(): void {
     // Keep open for mouse to move to sub-content
   }

package/src/app/lib/components/ui/menubar/menubar-sub.component.ts

@@ -1,4 +1,10 @@
-import { ChangeDetectionStrategy, Component, InjectionToken, signal, type WritableSignal } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  InjectionToken,
+  signal,
+  type WritableSignal,
+} from '@angular/core';
 
 export interface MenubarSubContext {
   open: WritableSignal<boolean>;
@@ -22,6 +28,7 @@ export const MENUBAR_SUB_CONTEXT = new InjectionToken<MenubarSubContext>('MENUBA
     },
   ],
   host: {
+    'attr.data-slot': '"menubar-sub"',
     class: 'relative',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/menubar/menubar-trigger.component.ts

@@ -1,5 +1,13 @@
 import { cn } from '@/lib/utils';
-import { ChangeDetectionStrategy, Component, computed, effect, ElementRef, inject, input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  inject,
+  input,
+} from '@angular/core';
 import { MENUBAR_CONTEXT, MENUBAR_MENU_CONTEXT } from './menubar-context';
 
 /**
@@ -11,6 +19,7 @@ import { MENUBAR_CONTEXT, MENUBAR_MENU_CONTEXT } from './menubar-context';
   selector: 'MenubarTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"menubar-trigger"',
     '[class]': 'computedClass()',
     '[attr.role]': '"menuitem"',
     '[attr.tabindex]': 'isFocused() ? 0 : -1',
@@ -24,37 +33,37 @@ import { MENUBAR_CONTEXT, MENUBAR_MENU_CONTEXT } from './menubar-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MenubarTrigger {
-  protected readonly context = inject(MENUBAR_CONTEXT);
-  protected readonly menuContext = inject(MENUBAR_MENU_CONTEXT);
-  private readonly elementRef = inject(ElementRef);
+  constructor() {
+    // Focus this trigger when it becomes the focused menu
+    effect(() => {
+      if (this.isFocused()) {
+        this._elementRef.nativeElement.focus();
+      }
+    });
+  }
 
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  private readonly _elementRef = inject(ElementRef);
+
+  protected readonly context = inject(MENUBAR_CONTEXT);
+  protected readonly menuContext = inject(MENUBAR_MENU_CONTEXT);
+
   protected readonly isFocused = computed(() => {
     const menuIds = this.context.menuIds();
     const focusedIdx = this.context.focusedMenuIndex();
     return menuIds[focusedIdx] === this.menuContext.menuId;
   });
-
   protected readonly computedClass = computed(() =>
     cn(
       'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 
-  constructor() {
-    // Focus this trigger when it becomes the focused menu
-    effect(() => {
-      if (this.isFocused()) {
-        this.elementRef.nativeElement.focus();
-      }
-    });
-  }
-
   protected toggle(): void {
-    this.menuContext.open.update(v => !v);
+    this.menuContext.open.update((v) => !v);
     if (this.menuContext.open()) {
       this.context.activeMenu.set(this.menuContext.menuId);
       this.menuContext.focusedItemIndex.set(0);
@@ -63,7 +72,6 @@ export class MenubarTrigger {
       this.menuContext.focusedItemIndex.set(-1);
     }
   }
-
   protected onMouseEnter(): void {
     // If another menu is already open, open this one on hover
     const activeMenu = this.context.activeMenu();
@@ -73,7 +81,6 @@ export class MenubarTrigger {
       this.menuContext.focusedItemIndex.set(0);
     }
   }
-
   protected onKeydown(event: KeyboardEvent): void {
     switch (event.key) {
       case 'ArrowRight':
@@ -114,13 +121,11 @@ export class MenubarTrigger {
         break;
     }
   }
-
   private closeCurrentMenu(): void {
     // Close current menu by finding it through activeMenu
     this.menuContext.open.set(false);
     this.menuContext.focusedItemIndex.set(-1);
   }
-
   private openFocusedMenu(): void {
     const menuIds = this.context.menuIds();
     const focusedIdx = this.context.focusedMenuIndex();