@ng-cn/core 1.0.16 → 1.0.17

package/src/app/lib/components/ui/data-table/data-table-view-options.component.ts

@@ -42,6 +42,7 @@ import { DATA_TABLE_CONTEXT } from './data-table-context';
     </div>
   `,
   host: {
+    'attr.data-slot': '"data-table-view-options"',
     '[class]': 'computedClass()',
     '(document:click)': 'onDocumentClick($event)',
   },

package/src/app/lib/components/ui/data-table/data-table.component.ts

@@ -36,7 +36,7 @@ import {
   template: `<ng-content />`,
   host: {
     '[class]': 'computedClass()',
-    'data-slot': 'data-table',
+    'attr.data-slot': '"data-table"',
     ngSkipHydration: 'true',
   },
   providers: [

package/src/app/lib/components/ui/dialog/dialog-close.component.ts

@@ -9,6 +9,7 @@ import { DIALOG_CONTEXT } from './dialog-context';
   selector: 'DialogClose',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"dialog-close"',
     '(click)': 'onClick($event)',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -10,9 +10,13 @@ import {
   HostListener,
   inject,
   input,
+  signal,
 } from '@angular/core';
 import { DIALOG_CONTEXT } from './dialog-context';
 
+/** Animation duration in ms — must match Tailwind's duration-200 */
+const EXIT_ANIMATION_MS = 200;
+
 /**
  * DialogContent component - the content of the dialog.
  * Matches shadcn/ui React DialogContent exactly.
@@ -21,10 +25,11 @@ import { DIALOG_CONTEXT } from './dialog-context';
   selector: 'DialogContent',
   imports: [FocusTrapDirective],
   template: `
-    @if (context.isOpen()) {
+    @if (shouldRender()) {
       <!-- Overlay -->
       <div
-        class="fixed inset-0 z-50 bg-black/80"
+        class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-200"
+        [attr.data-state]="context.isOpen() ? 'open' : 'closed'"
         (click)="onOverlayClick($event)"
         aria-hidden="true"
       ></div>
@@ -36,6 +41,7 @@ import { DIALOG_CONTEXT } from './dialog-context';
         [restoreFocus]="true"
         [initialFocus]="initialFocus()"
         [class]="computedClass()"
+        [attr.data-state]="context.isOpen() ? 'open' : 'closed'"
         [attr.id]="context.contentId"
         [attr.aria-labelledby]="context.titleId"
         [attr.aria-describedby]="context.descriptionId"
@@ -43,7 +49,6 @@ import { DIALOG_CONTEXT } from './dialog-context';
         aria-modal="true"
       >
         <ng-content />
-        <!-- Close button -->
         @if (showClose()) {
           <button
             type="button"
@@ -74,41 +79,41 @@ import { DIALOG_CONTEXT } from './dialog-context';
     }
   `,
   host: {
+    'attr.data-slot': '"dialog-content"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DialogContent {
   constructor() {
-    // Handle body scroll lock based on open state
     effect(() => {
       const isOpen = this.context.isOpen();
-
-      // Force change detection since context.isOpen() might update outside of this component's hierarchy
-      // and we are using OnPush
       this._cdr.markForCheck();
 
       if (isOpen) {
+        this.shouldRender.set(true);
         this.lockBodyScroll();
       } else {
         this.unlockBodyScroll();
+        if (this.shouldRender()) {
+          // Keep DOM alive for the exit animation, then unmount
+          setTimeout(() => {
+            this.shouldRender.set(false);
+            this._cdr.markForCheck();
+          }, EXIT_ANIMATION_MS);
+        }
       }
     });
 
-    // Cleanup on destroy
     this._destroyRef.onDestroy(() => {
       this.unlockBodyScroll();
       this.restoreFocus();
     });
   }
 
-  /** Additional CSS classes */
   readonly class = input<string>('');
-  /** Whether to show close button */
   readonly showClose = input<boolean>(true);
-  /** Aria label for close button */
   readonly ariaCloselabel = input<string>('Close dialog');
-  /** Selector for initial focus element */
   readonly initialFocus = input<string | undefined>(undefined);
 
   private readonly _destroyRef = inject(DestroyRef);
@@ -116,6 +121,8 @@ export class DialogContent {
 
   readonly context = inject(DIALOG_CONTEXT);
 
+  protected readonly shouldRender = signal(false);
+
   protected readonly computedClass = computed(() =>
     cn(
       'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background text-foreground p-6 shadow-lg duration-200',
@@ -129,7 +136,6 @@ export class DialogContent {
     ),
   );
 
-  /** Previous body overflow for restoration */
   private previousBodyOverflow = '';
 
   @HostListener('document:keydown.escape')
@@ -164,9 +170,7 @@ export class DialogContent {
   private restoreFocus(): void {
     const triggerEl = this.context.getTriggerElement();
     if (triggerEl) {
-      setTimeout(() => {
-        triggerEl.focus();
-      }, 0);
+      setTimeout(() => triggerEl.focus(), 0);
     }
   }
 }

package/src/app/lib/components/ui/dialog/dialog-description.component.ts

@@ -11,6 +11,7 @@ import { DIALOG_CONTEXT } from './dialog-context';
   selector: 'DialogDescription',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"dialog-description"',
     '[class]': 'computedClass()',
     '[attr.id]': 'context.descriptionId',
   },

package/src/app/lib/components/ui/dialog/dialog-footer.component.ts

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

package/src/app/lib/components/ui/dialog/dialog-header.component.ts

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

package/src/app/lib/components/ui/dialog/dialog-title.component.ts

@@ -11,6 +11,7 @@ import { DIALOG_CONTEXT } from './dialog-context';
   selector: 'DialogTitle',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"dialog-title"',
     '[class]': 'computedClass()',
     '[attr.id]': 'context.titleId',
   },

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

@@ -9,6 +9,7 @@ import { DIALOG_CONTEXT } from './dialog-context';
   selector: 'DialogTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"dialog-trigger"',
     '(click)': 'onClick($event)',
     '[attr.aria-haspopup]': '"dialog"',
     '[attr.aria-expanded]': 'context.isOpen()',

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

@@ -39,6 +39,7 @@ import { DIALOG_CONTEXT, type DialogContextValue } from './dialog-context';
     },
   ],
   host: {
+    'attr.data-slot': '"dialog"',
     style: 'display: contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/drawer/drawer-close.component.ts

@@ -9,6 +9,7 @@ import { DRAWER_CONTEXT } from './drawer-context';
   selector: 'DrawerClose',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"drawer-close"',
     '(click)': 'onClick($event)',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -52,6 +52,7 @@ import { DRAWER_CONTEXT } from './drawer-context';
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"drawer-content"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/drawer/drawer-description.component.ts

@@ -10,6 +10,7 @@ import { DRAWER_CONTEXT } from './drawer-context';
   selector: 'DrawerDescription',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"drawer-description"',
     '[class]': 'computedClass()',
     '[attr.id]': 'context.descriptionId',
   },

package/src/app/lib/components/ui/drawer/drawer-footer.component.ts

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

package/src/app/lib/components/ui/drawer/drawer-header.component.ts

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

package/src/app/lib/components/ui/drawer/drawer-title.component.ts

@@ -10,6 +10,7 @@ import { DRAWER_CONTEXT } from './drawer-context';
   selector: 'DrawerTitle',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"drawer-title"',
     '[class]': 'computedClass()',
     '[attr.id]': 'context.titleId',
   },

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

@@ -9,6 +9,7 @@ import { DRAWER_CONTEXT } from './drawer-context';
   selector: 'DrawerTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"drawer-trigger"',
     '(click)': 'onClick($event)',
     '[attr.aria-controls]': 'context.contentId',
     '[attr.aria-expanded]': 'context.open()',

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

@@ -37,6 +37,10 @@ import { DRAWER_CONTEXT, type DrawerContextValue } from './drawer-context';
 @Component({
   selector: 'Drawer',
   template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"drawer"',
+    style: 'display: contents',
+  },
   providers: [
     {
       provide: DRAWER_CONTEXT,

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

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

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

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

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

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,

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

@@ -37,6 +37,7 @@ export const DROPDOWN_MENU_RADIO_GROUP_CONTEXT = new InjectionToken<DropdownMenu
     },
   ],
   host: {
+    'attr.data-slot': '"dropdown-menu-radio-group"',
     '[attr.role]': '"group"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

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

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,

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

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()',
@@ -33,7 +34,7 @@ export class DropdownMenuSubTrigger {
 
   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(),
     ),

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

@@ -30,6 +30,7 @@ export const DROPDOWN_MENU_SUB_CONTEXT = new InjectionToken<DropdownMenuSubConte
     },
   ],
   host: {
+    'attr.data-slot': '"dropdown-menu-sub"',
     class: 'relative',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -9,6 +9,7 @@ import { DROPDOWN_MENU_CONTEXT } from './dropdown-menu-context';
   selector: 'DropdownMenuTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"dropdown-menu-trigger"',
     class: 'cursor-pointer',
     '(click)': 'toggle()',
     '(keydown)': 'onKeyDown($event)',

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

@@ -25,6 +25,7 @@ import { DROPDOWN_MENU_CONTEXT, type DropdownMenuContextValue } from './dropdown
     },
   ],
   host: {
+    'attr.data-slot': '"dropdown-menu"',
     class: 'relative inline-block',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -93,6 +93,7 @@ export interface HoverCardContentProps {
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"hover-card-content"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

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

@@ -92,6 +92,7 @@ export interface HoverCardProps {
   selector: 'HoverCard',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"hover-card"',
     class: 'relative inline-block',
   },
   providers: [

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

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,
 })