@ng-cn/core 1.0.16 → 1.0.18

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

@@ -1,12 +1,16 @@
-import { cn, Presence } from '@/lib/utils';
+import { Align, cn, computePosition, getTransformOrigin, Presence, Side } from '@/lib/utils';
 import {
+  afterNextRender,
   ChangeDetectionStrategy,
   Component,
   computed,
+  effect,
   ElementRef,
   inject,
+  Injector,
   input,
   OnDestroy,
+  signal,
 } from '@angular/core';
 import { HOVER_CARD_CONTEXT, HoverCardAlign, HoverCardSide } from './hover-card-context';
 
@@ -38,31 +42,6 @@ export interface HoverCardContentProps {
  * HoverCardContent displays the preview content. It stays open when
  * hovered, allowing users to interact with the content.
  *
- * ## Features
- * - Stays open when content is hovered
- * - Configurable side and alignment
- * - Smooth animations
- * - Escape key to dismiss
- *
- * ## Accessibility
- * - `role="dialog"` on the content
- * - Focusable content items
- * - Escape returns focus to trigger
- *
- * @example Basic usage
- * ```html
- * <HoverCardContent>
- *   <p>Preview content</p>
- * </HoverCardContent>
- * ```
- *
- * @example With positioning
- * ```html
- * <HoverCardContent side="right" align="start">
- *   <p>Right-aligned content</p>
- * </HoverCardContent>
- * ```
- *
  * @data-attributes
  * - `data-state` - 'open' | 'closed'
  * - `data-side` - 'top' | 'right' | 'bottom' | 'left'
@@ -78,9 +57,10 @@ export interface HoverCardContentProps {
         [attr.aria-modal]="false"
         tabindex="-1"
         [class]="computedClass()"
+        [style]="positionStyles()"
         [attr.data-state]="state()"
-        [attr.data-side]="side()"
-        [attr.data-align]="align()"
+        [attr.data-side]="computedSide()"
+        [attr.data-align]="computedAlign()"
         data-slot="hover-card-content"
         (mouseenter)="onMouseEnter()"
         (mouseleave)="onMouseLeave()"
@@ -93,11 +73,31 @@ export interface HoverCardContentProps {
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"hover-card-content"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HoverCardContent implements OnDestroy {
+  constructor() {
+    effect(() => {
+      const isOpen = this.context.open();
+      if (isOpen) {
+        this.isPositioned.set(false);
+        afterNextRender(
+          () => {
+            this.schedulePositionUpdate();
+          },
+          { injector: this._injector },
+        );
+      } else {
+        this.cancelScheduledPositionUpdate();
+        this.isPositioned.set(false);
+        this.positionStyles.set({ position: 'fixed', top: '-9999px', left: '-9999px' });
+      }
+    });
+  }
+
   /** The preferred side of the trigger to render against */
   readonly side = input<HoverCardSide>('bottom');
   /** The distance in pixels from the trigger */
@@ -108,80 +108,129 @@ export class HoverCardContent implements OnDestroy {
   readonly class = input<string>('');
 
   private readonly _elementRef = inject(ElementRef<HTMLElement>);
+  private readonly _injector = inject(Injector);
 
   protected readonly context = inject(HOVER_CARD_CONTEXT);
 
-  protected readonly computedClass = computed(() => {
-    const sideClasses = {
-      top: 'bottom-full mb-2',
-      bottom: 'top-full mt-2',
-      left: 'right-full mr-2',
-      right: 'left-full ml-2',
-    };
-
-    const alignClasses = {
-      start: 'left-0',
-      center: 'left-1/2 -translate-x-1/2',
-      end: 'right-0',
-    };
-
-    return cn(
-      'absolute z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
+  protected readonly computedClass = computed(() =>
+    cn(
+      'fixed z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
       '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',
       'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
       'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-      sideClasses[this.side()],
-      this.side() === 'top' || this.side() === 'bottom' ? alignClasses[this.align()] : '',
+      !this.isPositioned() && 'pointer-events-none opacity-0',
       this.class(),
-    );
+    ),
+  );
+
+  protected readonly positionStyles = signal<Record<string, string>>({
+    position: 'fixed',
+    top: '-9999px',
+    left: '-9999px',
   });
+  protected readonly isPositioned = signal(false);
+  protected readonly computedSide = signal<Side>('bottom');
+  protected readonly computedAlign = signal<Align>('center');
 
-  private closeTimeout: ReturnType<typeof setTimeout> | null = null;
   /** Current state: open or closed */
   protected readonly state = computed<HoverCardContentState>(() =>
     this.context.open() ? 'open' : 'closed',
   );
 
+  private closeTimeout: ReturnType<typeof setTimeout> | null = null;
+  private positionFrameId: number | null = null;
+
   ngOnDestroy(): void {
-    this.clearTimeout();
+    this.clearCloseTimeout();
+    this.cancelScheduledPositionUpdate();
   }
 
   onMouseEnter(): void {
-    this.clearTimeout();
+    this.clearCloseTimeout();
   }
   onMouseLeave(): void {
     this.closeTimeout = setTimeout(() => {
       this.context.setOpen(false);
-    }, this.context.closeDelay);
+    }, this.context.closeDelay());
   }
   onFocusIn(): void {
-    this.clearTimeout();
+    this.clearCloseTimeout();
   }
   onFocusOut(event: FocusEvent): void {
     const relatedTarget = event.relatedTarget as HTMLElement | null;
-    const trigger = this._elementRef.nativeElement.parentElement?.querySelector('[data-state]');
+    const trigger = this.context.triggerRef();
 
-    // Check if focus moved to trigger or stayed within content
     if (relatedTarget && (trigger === relatedTarget || trigger?.contains(relatedTarget))) {
       return;
     }
 
     this.closeTimeout = setTimeout(() => {
       this.context.setOpen(false);
-    }, this.context.closeDelay);
+    }, this.context.closeDelay());
   }
   onEscape(): void {
     this.context.setOpen(false);
-    // Return focus to trigger
-    const trigger = this._elementRef.nativeElement.parentElement?.querySelector(
-      '[data-state]',
+    this.context.triggerRef()?.focus();
+  }
+
+  private schedulePositionUpdate(): void {
+    this.cancelScheduledPositionUpdate();
+    this.positionFrameId = requestAnimationFrame(() => {
+      this.updatePosition();
+      this.positionFrameId = requestAnimationFrame(() => {
+        this.updatePosition();
+        this.positionFrameId = null;
+      });
+    });
+  }
+  private cancelScheduledPositionUpdate(): void {
+    if (this.positionFrameId !== null) {
+      cancelAnimationFrame(this.positionFrameId);
+      this.positionFrameId = null;
+    }
+  }
+  private updatePosition(): void {
+    const triggerElement = this.context.triggerRef();
+    const contentElement = this._elementRef.nativeElement.querySelector(
+      '[role="dialog"]',
     ) as HTMLElement;
-    trigger?.focus();
+
+    if (!triggerElement || !contentElement) return;
+
+    const triggerRect = triggerElement.getBoundingClientRect();
+    const contentRect = contentElement.getBoundingClientRect();
+    const overlayWidth = Math.round(contentRect.width || 256);
+    const overlayHeight = Math.round(contentRect.height || 100);
+
+    const result = computePosition(
+      triggerRect,
+      { width: overlayWidth, height: overlayHeight },
+      {
+        side: this.side(),
+        align: this.align(),
+        sideOffset: this.sideOffset(),
+        alignOffset: 0,
+        avoidCollisions: true,
+        collisionPadding: 8,
+      },
+    );
+
+    this.computedSide.set(result.side);
+    this.computedAlign.set(result.align);
+
+    const transformOrigin = getTransformOrigin(result.side, result.align);
+    this.positionStyles.set({
+      position: 'fixed',
+      top: result.styles.top || '',
+      left: result.styles.left || '',
+      '--radix-hover-card-content-transform-origin': transformOrigin,
+    });
+    this.isPositioned.set(true);
   }
 
-  private clearTimeout(): void {
+  private clearCloseTimeout(): void {
     if (this.closeTimeout) {
       clearTimeout(this.closeTimeout);
       this.closeTimeout = null;

package/src/app/lib/components/ui/hover-card/hover-card-context.ts

@@ -9,9 +9,11 @@ export interface HoverCardContextValue {
   /** Set open state */
   setOpen: (open: boolean) => void;
   /** The duration from when the pointer enters the trigger until the hover card opens (ms) */
-  openDelay: number;
+  openDelay: () => number;
   /** The duration from when the pointer leaves the trigger/content until the hover card closes (ms) */
-  closeDelay: number;
+  closeDelay: () => number;
+  /** Reference to the trigger element for fixed positioning */
+  triggerRef: WritableSignal<HTMLElement | null>;
 }
 
 export const HOVER_CARD_CONTEXT = new InjectionToken<HoverCardContextValue>('HOVER_CARD_CONTEXT');

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

@@ -64,6 +64,7 @@ export interface HoverCardTriggerProps {
   selector: 'HoverCardTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"hover-card-trigger"',
     tabindex: '0',
     role: 'button',
     '(mouseenter)': 'onMouseEnter()',
@@ -95,18 +96,20 @@ export class HoverCardTrigger implements OnDestroy {
   }
 
   onMouseEnter(): void {
+    this.context.triggerRef.set(this._elementRef.nativeElement);
     this.clearTimeouts();
     this.openTimeout = setTimeout(() => {
       this.context.setOpen(true);
-    }, this.context.openDelay);
+    }, this.context.openDelay());
   }
   onMouseLeave(): void {
     this.clearTimeouts();
     this.closeTimeout = setTimeout(() => {
       this.context.setOpen(false);
-    }, this.context.closeDelay);
+    }, this.context.closeDelay());
   }
   onFocus(): void {
+    this.context.triggerRef.set(this._elementRef.nativeElement);
     this.clearTimeouts();
     // Open immediately on focus for keyboard users
     this.context.setOpen(true);
@@ -126,7 +129,7 @@ export class HoverCardTrigger implements OnDestroy {
     this.clearTimeouts();
     this.closeTimeout = setTimeout(() => {
       this.context.setOpen(false);
-    }, this.context.closeDelay);
+    }, this.context.closeDelay());
   }
   onKeyDown(event: Event): void {
     event.preventDefault();

package/src/app/lib/components/ui/hover-card/hover-card.component.ts

@@ -5,6 +5,8 @@ import {
   input,
   output,
   signal,
+  Signal,
+  WritableSignal,
 } from '@angular/core';
 import { HOVER_CARD_CONTEXT, type HoverCardContextValue } from './hover-card-context';
 
@@ -92,7 +94,8 @@ export interface HoverCardProps {
   selector: 'HoverCard',
   template: `<ng-content />`,
   host: {
-    class: 'relative inline-block',
+    'attr.data-slot': '"hover-card"',
+    class: 'inline-block',
   },
   providers: [
     {
@@ -119,10 +122,13 @@ export class HoverCard implements HoverCardContextValue {
 
   readonly open = signal(false);
 
+  /** Reference to the trigger element for fixed positioning */
+  readonly triggerRef: WritableSignal<HTMLElement | null> = signal<HTMLElement | null>(null);
+
   /** The duration from when the pointer enters the trigger until the hover card opens (ms) */
-  readonly openDelay = 700;
+  readonly openDelay = input<number>(700);
   /** The duration from when the pointer leaves the trigger/content until the hover card closes (ms) */
-  readonly closeDelay = 300;
+  readonly closeDelay = input<number>(300);
 
   setOpen(open: boolean): void {
     if (this.controlledOpen() === undefined) {

package/src/app/lib/components/ui/input-group/input-group-addon.component.ts

@@ -14,6 +14,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'InputGroupAddon',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"input-group-addon"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -10,6 +10,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'InputGroupInput',
   template: ``,
   host: {
+    'attr.data-slot': '"input-group-input"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -30,6 +30,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'InputGroup',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"input-group"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/input-otp/input-otp-group.component.ts

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'InputOTPGroup',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"input-otp-group"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -15,6 +15,7 @@ import { LucideAngularModule, Minus } from 'lucide-angular';
     </div>
   `,
   host: {
+    'attr.data-slot': '"input-otp-separator"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/input-otp/input-otp-slot.component.ts

@@ -19,6 +19,7 @@ import { INPUT_OTP_CONTEXT } from './input-otp-context';
     }
   `,
   host: {
+    'attr.data-slot': '"input-otp-slot"',
     '[class]': 'computedClass()',
     '[attr.data-active]': 'isActive() ? "" : null',
     '[attr.aria-label]': 'ariaLabel()',

package/src/app/lib/components/ui/input-otp/input-otp.component.ts

@@ -130,6 +130,7 @@ export interface InputOTPProps {
     },
   ],
   host: {
+    'attr.data-slot': '"input-otp"',
     class: 'contents',
     '[attr.data-disabled]': 'disabled() ? "" : null',
   },

package/src/app/lib/components/ui/kbd/kbd.component.ts

@@ -22,6 +22,7 @@ import { kbdVariants, type KbdVariants } from './kbd-variants';
   selector: 'Kbd',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"kbd"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -27,6 +27,7 @@ import { MENUBAR_CONTEXT, MENUBAR_MENU_CONTEXT } from './menubar-context';
     <ng-content />
   `,
   host: {
+    'attr.data-slot': '"menubar-checkbox-item"',
     '[class]': 'computedClass()',
     '[attr.role]': '"menuitemcheckbox"',
     '[attr.aria-checked]': 'checked()',

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

@@ -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()',
@@ -113,7 +114,7 @@ export class MenubarContent implements OnDestroy {
     if (content) {
       this.menuItems = Array.from(
         content.querySelectorAll(
-          '[role="menuitem"]:not([aria-disabled="true"]):not([data-disabled])',
+          '[role="menuitem"]:not([data-disabled=""]), [role="menuitemcheckbox"]:not([data-disabled=""]), [role="menuitemradio"]:not([data-disabled=""])',
         ),
       );
     }

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',

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,

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

@@ -33,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

@@ -35,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()',

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"',
   },

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,

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()',

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()',

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

@@ -28,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

@@ -19,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',

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

@@ -131,6 +131,7 @@ export interface MenubarProps {
     },
   ],
   host: {
+    'attr.data-slot': '"menubar"',
     '[class]': 'computedClass()',
     role: 'menubar',
     'aria-orientation': 'horizontal',

package/src/app/lib/components/ui/native-select/native-select.component.ts

@@ -42,7 +42,7 @@ import { nativeSelectVariants, type NativeSelectVariants } from './native-select
   template: `<ng-content />`,
   host: {
     '[class]': 'computedClass()',
-    'data-slot': 'native-select',
+    'attr.data-slot': '"native-select"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

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

@@ -18,12 +18,19 @@ import { NAVIGATION_MENU_CONTEXT, NAVIGATION_MENU_ITEM_CONTEXT } from './navigat
   imports: [Presence],
   template: `
     <Presence [present]="itemContext.open()">
-      <div [class]="computedClass()" [attr.data-state]="itemContext.open() ? 'open' : 'closed'">
+      <div
+        [class]="computedClass()"
+        [attr.id]="itemContext.contentId"
+        [attr.data-state]="itemContext.open() ? 'open' : 'closed'"
+        [attr.aria-labelledby]="itemContext.triggerId"
+        role="region"
+      >
         <ng-content />
       </div>
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"navigation-menu-content"',
     class: 'contents',
     '(document:click)': 'onDocumentClick($event)',
     '(document:keydown.escape)': 'onEscapeKey()',

package/src/app/lib/components/ui/navigation-menu/navigation-menu-context.ts

@@ -22,6 +22,16 @@ export interface NavigationMenuContextValue {
   activeItem: WritableSignal<string | null>;
   /** Layout orientation of the menu */
   orientation: WritableSignal<NavigationMenuOrientation>;
+  /** Ordered list of registered trigger element IDs */
+  triggerIds: WritableSignal<string[]>;
+  /** Register a trigger ID (called by NavigationMenuTrigger on init) */
+  registerTrigger: (triggerId: string) => void;
+  /** Unregister a trigger ID (called by NavigationMenuTrigger on destroy) */
+  unregisterTrigger: (triggerId: string) => void;
+  /** Move DOM focus to the next trigger in document order */
+  focusNextTrigger: (currentTriggerId: string) => void;
+  /** Move DOM focus to the previous trigger in document order */
+  focusPreviousTrigger: (currentTriggerId: string) => void;
 }
 
 export const NAVIGATION_MENU_CONTEXT = new InjectionToken<NavigationMenuContextValue>(
@@ -38,6 +48,10 @@ export const NAVIGATION_MENU_CONTEXT = new InjectionToken<NavigationMenuContextV
 export interface NavigationMenuItemContextValue {
   /** Unique identifier for this item */
   itemId: string;
+  /** DOM id for the trigger element (used for aria-controls / aria-labelledby) */
+  triggerId: string;
+  /** DOM id for the content element (used for aria-controls) */
+  contentId: string;
   /** Whether this item's content is open */
   open: WritableSignal<boolean>;
 }

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

@@ -11,6 +11,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
     <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md"></div>
   `,
   host: {
+    'attr.data-slot': '"navigation-menu-indicator"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -17,13 +17,19 @@ let itemIdCounter = 0;
   providers: [
     {
       provide: NAVIGATION_MENU_ITEM_CONTEXT,
-      useFactory: (): NavigationMenuItemContextValue => ({
-        itemId: `nav-item-${itemIdCounter++}`,
-        open: signal(false),
-      }),
+      useFactory: (): NavigationMenuItemContextValue => {
+        const id = itemIdCounter++;
+        return {
+          itemId: `nav-item-${id}`,
+          triggerId: `nav-trigger-${id}`,
+          contentId: `nav-content-${id}`,
+          open: signal(false),
+        };
+      },
     },
   ],
   host: {
+    'attr.data-slot': '"navigation-menu-item"',
     class: 'relative',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -12,6 +12,7 @@ import { navigationMenuTriggerStyle } from './navigation-menu-trigger-style';
   selector: 'NavigationMenuLink',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"navigation-menu-link"',
     '[class]': 'computedClass()',
     '[attr.aria-current]': 'ariaCurrent()',
     '[attr.data-active]': 'active() || null',