@ng-cn/core 1.0.15 → 1.0.17

package/src/app/lib/components/ui/drawer/index.ts

@@ -7,4 +7,3 @@ export { DrawerHeader } from './drawer-header.component';
 export { DrawerTitle } from './drawer-title.component';
 export { DrawerTrigger } from './drawer-trigger.component';
 export { Drawer } from './drawer.component';
-

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

@@ -1,5 +1,13 @@
 import { cn } from '@/lib/utils';
-import { ChangeDetectionStrategy, Component, computed, inject, input, model, output } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  model,
+  output,
+} from '@angular/core';
 import { Check, LucideAngularModule } from 'lucide-angular';
 import { DROPDOWN_MENU_CONTEXT } from './dropdown-menu-context';
 
@@ -19,6 +27,7 @@ import { DROPDOWN_MENU_CONTEXT } from './dropdown-menu-context';
     <ng-content />
   `,
   host: {
+    'attr.data-slot': '"dropdown-menu-checkbox-item"',
     '[class]': 'computedClass()',
     '[attr.role]': '"menuitemcheckbox"',
     '[attr.aria-checked]': 'checked()',
@@ -33,29 +42,29 @@ import { DROPDOWN_MENU_CONTEXT } from './dropdown-menu-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DropdownMenuCheckboxItem {
-  private readonly context = inject(DROPDOWN_MENU_CONTEXT);
-  protected readonly CheckIcon = Check;
+  /** Select event emitted when item is clicked */
+  readonly onCheckedChange = output<boolean>();
 
   /** Whether the checkbox is checked */
   readonly checked = model<boolean>(false);
 
-  /** 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 emitted when item is clicked */
-  readonly onCheckedChange = output<boolean>();
+  private readonly _context = inject(DROPDOWN_MENU_CONTEXT);
 
   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 transition-colors 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 transition-colors 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 CheckIcon = Check;
+
   protected handleClick(event: Event): void {
     if (this.disabled()) {
       event.preventDefault();

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

@@ -1,14 +1,15 @@
 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,
+  signal,
 } from '@angular/core';
 import { DROPDOWN_MENU_CONTEXT } from './dropdown-menu-context';
 
@@ -25,6 +26,7 @@ import { DROPDOWN_MENU_CONTEXT } from './dropdown-menu-context';
     <Presence [present]="context.open()">
       <div
         [class]="computedClass()"
+        [style]="fixedStyle()"
         [attr.id]="context.contentId"
         [attr.aria-labelledby]="null"
         [attr.data-state]="context.open() ? 'open' : 'closed'"
@@ -40,6 +42,7 @@ import { DROPDOWN_MENU_CONTEXT } from './dropdown-menu-context';
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"dropdown-menu-content"',
     class: 'contents',
     '(document:click)': 'onDocumentClick($event)',
     '(document:keydown.escape)': 'onEscapeKey()',
@@ -47,26 +50,81 @@ import { DROPDOWN_MENU_CONTEXT } from './dropdown-menu-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DropdownMenuContent implements OnDestroy {
-  protected readonly context = inject(DROPDOWN_MENU_CONTEXT);
-  private readonly elementRef = inject(ElementRef);
+  constructor() {
+    // Focus first item when menu opens; compute fixed position if needed
+    effect(() => {
+      if (this.context.open()) {
+        if (this.strategy() === 'fixed') {
+          const trigger = this.context.triggerElement();
+          if (trigger) {
+            const rect = trigger.getBoundingClientRect();
+            const side = this.side();
+            const offset = this.sideOffset();
+            let top = rect.top;
+            let left = rect.left;
+
+            if (side === 'bottom') {
+              top = rect.bottom + offset;
+              left = rect.left;
+            } else if (side === 'top') {
+              top = rect.top - offset;
+              left = rect.left;
+            } else if (side === 'right') {
+              top = rect.top;
+              left = rect.right + offset;
+            } else if (side === 'left') {
+              top = rect.top;
+              left = rect.left - offset;
+            }
+
+            this.fixedPos.set({ top, left });
+          }
+        } else {
+          this.fixedPos.set(null);
+        }
+
+        setTimeout(() => {
+          this.updateMenuItems();
+          const focusedIdx = this.context.focusedIndex();
+          if (focusedIdx >= 0 && this.menuItems[focusedIdx]) {
+            this.menuItems[focusedIdx].focus();
+          } else if (this.menuItems.length > 0) {
+            this.menuItems[0].focus();
+            this.context.focusedIndex.set(0);
+          }
+        }, 0);
+      }
+    });
+
+    // Initial menu items update (browser-only)
+    afterNextRender(() => {
+      this.updateMenuItems();
+    });
+  }
 
   /** Side of the trigger to place content */
   readonly side = input<'top' | 'right' | 'bottom' | 'left'>('bottom');
-
   /** Alignment of the content */
   readonly align = input<'start' | 'center' | 'end'>('start');
-
   /** Side offset */
   readonly sideOffset = input<number>(4);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
+  /** Positioning strategy: 'absolute' stays within parent, 'fixed' escapes overflow containers */
+  readonly strategy = input<'absolute' | 'fixed'>('absolute');
 
-  private menuItems: HTMLElement[] = [];
-  private typeaheadBuffer = '';
-  private typeaheadTimeout: ReturnType<typeof setTimeout> | null = null;
+  private readonly _elementRef = inject(ElementRef);
 
+  protected readonly context = inject(DROPDOWN_MENU_CONTEXT);
+
+  protected readonly fixedStyle = computed(() => {
+    const pos = this.fixedPos();
+    if (this.strategy() !== 'fixed' || !pos) return '';
+    return `top: ${pos.top}px; left: ${pos.left}px;`;
+  });
   protected readonly computedClass = computed(() => {
+    const isFixed = this.strategy() === 'fixed';
+
     const sideClasses = {
       top: 'bottom-full mb-1',
       bottom: 'top-full mt-1',
@@ -81,36 +139,20 @@ export class DropdownMenuContent implements OnDestroy {
     };
 
     return cn(
-      'absolute z-50 min-w-[12rem] overflow-hidden rounded-xl border bg-popover p-2 text-popover-foreground shadow-lg',
+      isFixed ? 'fixed' : 'absolute',
+      'z-50 min-w-[12rem] overflow-hidden rounded-xl border bg-popover p-2 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 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()],
-      alignClasses[this.align()],
-      this.class()
+      !isFixed && sideClasses[this.side()],
+      !isFixed && alignClasses[this.align()],
+      this.class(),
     );
   });
 
-  constructor() {
-    // Focus first item when menu opens
-    effect(() => {
-      if (this.context.open()) {
-        setTimeout(() => {
-          this.updateMenuItems();
-          const focusedIdx = this.context.focusedIndex();
-          if (focusedIdx >= 0 && this.menuItems[focusedIdx]) {
-            this.menuItems[focusedIdx].focus();
-          } else if (this.menuItems.length > 0) {
-            this.menuItems[0].focus();
-            this.context.focusedIndex.set(0);
-          }
-        }, 0);
-      }
-    });
+  protected readonly fixedPos = signal<{ top: number; left: number } | null>(null);
 
-    // 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) {
@@ -118,15 +160,6 @@ export class DropdownMenuContent implements OnDestroy {
     }
   }
 
-  private updateMenuItems(): void {
-    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])')
-      );
-    }
-  }
-
   onKeydown(event: KeyboardEvent): void {
     this.updateMenuItems();
 
@@ -160,33 +193,38 @@ export class DropdownMenuContent implements OnDestroy {
     }
   }
 
+  private updateMenuItems(): void {
+    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])',
+        ),
+      );
+    }
+  }
   private focusNext(): void {
     const currentIndex = this.context.focusedIndex();
     const nextIndex = currentIndex < this.menuItems.length - 1 ? currentIndex + 1 : 0;
     this.focusItem(nextIndex);
   }
-
   private focusPrevious(): void {
     const currentIndex = this.context.focusedIndex();
     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) {
       this.menuItems[index].focus();
       this.context.focusedIndex.set(index);
     }
   }
-
   private handleTypeahead(key: string): void {
     this.typeaheadBuffer += key.toLowerCase();
 
@@ -200,28 +238,25 @@ export class DropdownMenuContent 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);
     }
   }
-
   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('DropdownMenu');
 
     if (parent && !parent.contains(target)) {
       this.close();
     }
   }
-
   protected onEscapeKey(): void {
     this.close();
   }
-
   private close(): void {
     this.context.open.set(false);
     this.context.focusedIndex.set(-1);

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

@@ -11,5 +11,5 @@ export interface DropdownMenuContextValue {
 }
 
 export const DROPDOWN_MENU_CONTEXT = new InjectionToken<DropdownMenuContextValue>(
-  'DROPDOWN_MENU_CONTEXT'
+  'DROPDOWN_MENU_CONTEXT',
 );

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

@@ -8,6 +8,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   selector: 'DropdownMenuGroup',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"dropdown-menu-group"',
     '[attr.role]': '"group"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -10,6 +10,7 @@ import { DROPDOWN_MENU_CONTEXT } from './dropdown-menu-context';
   selector: 'DropdownMenuItem',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"dropdown-menu-item"',
     '[class]': 'computedClass()',
     '[attr.role]': '"menuitem"',
     '[attr.tabindex]': 'disabled() ? -1 : 0',
@@ -22,27 +23,25 @@ import { DROPDOWN_MENU_CONTEXT } from './dropdown-menu-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DropdownMenuItem {
-  private readonly context = inject(DROPDOWN_MENU_CONTEXT);
+  /** Select event emitted when item is clicked */
+  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 emitted when item is clicked */
-  readonly onSelect = output<void>();
+  private readonly _context = inject(DROPDOWN_MENU_CONTEXT);
 
   protected readonly computedClass = computed(() =>
     cn(
-      "relative flex cursor-default select-none items-center gap-3 rounded-md px-3 py-2.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0 [&>lucide-icon]:size-4 [&>lucide-icon]:shrink-0 [&>lucide-icon]:text-muted-foreground",
+      'relative flex cursor-default select-none items-center gap-3 rounded-md px-3 py-2.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0 [&>lucide-icon]:size-4 [&>lucide-icon]:shrink-0 [&>lucide-icon]:text-muted-foreground',
       this.inset() && 'pl-8',
       !this.disabled() && 'cursor-pointer hover:bg-accent hover:text-accent-foreground',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 
   protected handleClick(event: Event): void {
@@ -51,6 +50,6 @@ export class DropdownMenuItem {
       return;
     }
     this.onSelect.emit();
-    this.context.open.set(false);
+    this._context.open.set(false);
   }
 }

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

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

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

@@ -1,4 +1,12 @@
-import { ChangeDetectionStrategy, Component, InjectionToken, model, output, signal, type WritableSignal } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  InjectionToken,
+  model,
+  output,
+  signal,
+  type WritableSignal,
+} from '@angular/core';
 
 export interface DropdownMenuRadioGroupContext {
   value: WritableSignal<string>;
@@ -6,7 +14,7 @@ export interface DropdownMenuRadioGroupContext {
 }
 
 export const DROPDOWN_MENU_RADIO_GROUP_CONTEXT = new InjectionToken<DropdownMenuRadioGroupContext>(
-  'DROPDOWN_MENU_RADIO_GROUP_CONTEXT'
+  'DROPDOWN_MENU_RADIO_GROUP_CONTEXT',
 );
 
 /**
@@ -29,14 +37,15 @@ export const DROPDOWN_MENU_RADIO_GROUP_CONTEXT = new InjectionToken<DropdownMenu
     },
   ],
   host: {
+    'attr.data-slot': '"dropdown-menu-radio-group"',
     '[attr.role]': '"group"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DropdownMenuRadioGroup {
-  /** The current value */
-  readonly value = model<string>('');
-
   /** Value change event */
   readonly onValueChange = output<string>();
+
+  /** The current value */
+  readonly value = model<string>('');
 }

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

@@ -20,6 +20,7 @@ import { DROPDOWN_MENU_RADIO_GROUP_CONTEXT } from './dropdown-menu-radio-group.c
     <ng-content />
   `,
   host: {
+    'attr.data-slot': '"dropdown-menu-radio-item"',
     '[class]': 'computedClass()',
     '[attr.role]': '"menuitemradio"',
     '[attr.aria-checked]': 'isSelected()',
@@ -34,38 +35,37 @@ import { DROPDOWN_MENU_RADIO_GROUP_CONTEXT } from './dropdown-menu-radio-group.c
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DropdownMenuRadioItem {
-  private readonly context = inject(DROPDOWN_MENU_CONTEXT);
-  private readonly radioGroupContext = inject(DROPDOWN_MENU_RADIO_GROUP_CONTEXT);
-  protected readonly CircleIcon = Circle;
+  /** Select event emitted when item is clicked */
+  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 emitted when item is clicked */
-  readonly onSelect = output<void>();
-
-  protected readonly isSelected = computed(() => this.radioGroupContext.value() === this.value());
+  private readonly _context = inject(DROPDOWN_MENU_CONTEXT);
+  private readonly _radioGroupContext = inject(DROPDOWN_MENU_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 transition-colors 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 transition-colors 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/dropdown-menu/dropdown-menu-separator.component.ts

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

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

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

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

@@ -21,6 +21,7 @@ import { DROPDOWN_MENU_SUB_CONTEXT } from './dropdown-menu-sub.component';
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"dropdown-menu-sub-content"',
     class: 'contents',
     '(mouseenter)': 'onMouseEnter()',
     '(mouseleave)': 'onMouseLeave()',
@@ -28,23 +29,22 @@ import { DROPDOWN_MENU_SUB_CONTEXT } from './dropdown-menu-sub.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DropdownMenuSubContent {
-  protected readonly subContext = inject(DROPDOWN_MENU_SUB_CONTEXT);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  protected readonly subContext = inject(DROPDOWN_MENU_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 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',
-      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/dropdown-menu/dropdown-menu-sub-trigger.component.ts

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

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

@@ -1,11 +1,17 @@
-import { ChangeDetectionStrategy, Component, InjectionToken, signal, type WritableSignal } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  InjectionToken,
+  signal,
+  type WritableSignal,
+} from '@angular/core';
 
 export interface DropdownMenuSubContext {
   open: WritableSignal<boolean>;
 }
 
 export const DROPDOWN_MENU_SUB_CONTEXT = new InjectionToken<DropdownMenuSubContext>(
-  'DROPDOWN_MENU_SUB_CONTEXT'
+  'DROPDOWN_MENU_SUB_CONTEXT',
 );
 
 /**
@@ -24,6 +30,7 @@ export const DROPDOWN_MENU_SUB_CONTEXT = new InjectionToken<DropdownMenuSubConte
     },
   ],
   host: {
+    'attr.data-slot': '"dropdown-menu-sub"',
     class: 'relative',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,