@ng-cn/core 1.0.16 → 1.0.17

package/src/app/lib/components/ui/badge/badge-variants.ts

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
  * WCAG AA compliant contrast ratios for all variants
  */
 export const badgeVariants = cva(
-  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 [&>lucide-icon]:size-3 gap-1 [&>svg]:pointer-events-none [&>lucide-icon]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
   {
     variants: {
       variant: {

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

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

package/src/app/lib/components/ui/breadcrumb/breadcrumb-ellipsis.component.ts

@@ -27,6 +27,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
     <span class="sr-only">More</span>
   `,
   host: {
+    'attr.data-slot': '"breadcrumb-ellipsis"',
     role: 'presentation',
     '[attr.aria-hidden]': '"true"',
     '[class]': 'computedClass()',

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

@@ -1,20 +1,16 @@
 import { cn } from '@/lib/utils';
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
-/**
- * BreadcrumbItem component - li container.
- * Matches shadcn/ui React BreadcrumbItem exactly.
- */
 @Component({
   selector: 'BreadcrumbItem',
-  template: `<ng-content />`,
+  template: `<li [class]="computedClass()"><ng-content /></li>`,
   host: {
-    '[class]': 'computedClass()',
+    'attr.data-slot': '"breadcrumb-item"',
+    style: 'display:contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BreadcrumbItem {
-  /** Additional CSS classes */
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>

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

@@ -1,24 +1,17 @@
 import { cn } from '@/lib/utils';
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
-/**
- * BreadcrumbLink component - anchor link.
- * Matches shadcn/ui React BreadcrumbLink exactly.
- */
 @Component({
   selector: 'BreadcrumbLink',
-  template: `<ng-content />`,
+  template: `<a [attr.href]="href()" [class]="computedClass()"><ng-content /></a>`,
   host: {
-    '[class]': 'computedClass()',
-    '[attr.href]': 'href()',
+    'attr.data-slot': '"breadcrumb-link"',
+    style: 'display:contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BreadcrumbLink {
-  /** Link href */
-  readonly href = input<string>('#');
-
-  /** Additional CSS classes */
+  readonly href = input<string | undefined>(undefined);
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>

package/src/app/lib/components/ui/breadcrumb/breadcrumb-list.component.ts

@@ -1,20 +1,16 @@
 import { cn } from '@/lib/utils';
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
-/**
- * BreadcrumbList component - ol container for items.
- * Matches shadcn/ui React BreadcrumbList exactly.
- */
 @Component({
   selector: 'BreadcrumbList',
-  template: `<ng-content />`,
+  template: `<ol [class]="computedClass()"><ng-content /></ol>`,
   host: {
-    '[class]': 'computedClass()',
+    'attr.data-slot': '"breadcrumb-list"',
+    style: 'display:contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BreadcrumbList {
-  /** Additional CSS classes */
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>

package/src/app/lib/components/ui/breadcrumb/breadcrumb-page.component.ts

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'BreadcrumbPage',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"breadcrumb-page"',
     role: 'link',
     '[attr.aria-disabled]': '"true"',
     '[attr.aria-current]': '"page"',

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

@@ -1,39 +1,35 @@
 import { cn } from '@/lib/utils';
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
-/**
- * BreadcrumbSeparator component - visual separator.
- * Matches shadcn/ui React BreadcrumbSeparator exactly.
- */
 @Component({
   selector: 'BreadcrumbSeparator',
   template: `
-    <ng-content>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        class="h-3.5 w-3.5"
-      >
-        <path d="m9 18 6-6-6-6" />
-      </svg>
-    </ng-content>
+    <li role="presentation" aria-hidden="true" [class]="computedClass()">
+      <ng-content>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="h-3.5 w-3.5"
+        >
+          <path d="m9 18 6-6-6-6" />
+        </svg>
+      </ng-content>
+    </li>
   `,
   host: {
-    role: 'presentation',
-    '[attr.aria-hidden]': '"true"',
-    '[class]': 'computedClass()',
+    'attr.data-slot': '"breadcrumb-separator"',
+    style: 'display:contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BreadcrumbSeparator {
-  /** Additional CSS classes */
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>

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

@@ -22,6 +22,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'Breadcrumb',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"breadcrumb"',
     role: 'navigation',
     '[attr.aria-label]': '"breadcrumb"',
     '[class]': 'computedClass()',

package/src/app/lib/components/ui/button/button-variants.ts

@@ -20,9 +20,9 @@ export const buttonVariants = cva(
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3 has-[>lucide-icon]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 has-[>lucide-icon]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4 has-[>lucide-icon]:px-4',
         icon: 'size-9',
       },
     },

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

@@ -57,6 +57,7 @@ import { buttonVariants, type ButtonVariants } from './button-variants';
     <ng-content />
   `,
   host: {
+    'attr.data-slot': '"button"',
     '[class]': 'computedClass()',
     '[attr.disabled]': 'isDisabled() || null',
     '[attr.aria-disabled]': 'isDisabled() || null',

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

@@ -24,6 +24,7 @@ import { buttonGroupVariants, type ButtonGroupVariants } from './button-group-va
   selector: 'ButtonGroup',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"button-group"',
     '[class]': 'computedClass()',
     role: 'group',
   },

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

@@ -18,6 +18,7 @@ import { COLLAPSIBLE_CONTEXT } from './collapsible-context';
     </div>
   `,
   host: {
+    'attr.data-slot': '"collapsible-content"',
     '[class]': 'computedClass()',
     '[attr.data-state]': 'collapsible.isOpen() ? "open" : "closed"',
     '[attr.data-disabled]': 'collapsible.disabled() ? "" : null',

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

@@ -12,6 +12,7 @@ import { COLLAPSIBLE_CONTEXT } from './collapsible-context';
   selector: 'CollapsibleTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"collapsible-trigger"',
     '[class]': 'computedClass()',
     '[attr.data-state]': 'collapsible.isOpen() ? "open" : "closed"',
     '[attr.data-disabled]': 'collapsible.disabled() ? "" : null',

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

@@ -34,6 +34,7 @@ import { COLLAPSIBLE_CONTEXT, CollapsibleContext } from './collapsible-context';
   selector: 'Collapsible',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"collapsible"',
     '[class]': 'computedClass()',
     '[attr.data-state]': 'isOpen() ? "open" : "closed"',
     '[attr.data-disabled]': 'disabled() ? "" : null',

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

@@ -25,6 +25,7 @@ import { COMBOBOX_CONTEXT } from './combobox-context';
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"combobox-content"',
     '[class]': 'computedClass()',
     '[attr.data-state]': 'context.open() ? "open" : "closed"',
   },

package/src/app/lib/components/ui/combobox/combobox-empty.component.ts

@@ -13,6 +13,7 @@ import { COMBOBOX_CONTEXT } from './combobox-context';
     }
   `,
   host: {
+    'attr.data-slot': '"combobox-empty"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -8,6 +8,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'ComboboxGroup',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"combobox-group"',
     '[class]': 'computedClass()',
     role: 'group',
     '[attr.aria-label]': 'label()',

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

@@ -40,6 +40,7 @@ import { COMBOBOX_CONTEXT } from './combobox-context';
     />
   `,
   host: {
+    'attr.data-slot': '"combobox-input"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -50,6 +50,7 @@ import { LucideAngularModule } from 'lucide-angular';
     </div>
   `,
   host: {
+    'attr.data-slot': '"combobox-item"',
     '[class]': 'computedClass()',
     '[id]': 'optionId()',
     role: 'option',
@@ -65,7 +66,6 @@ import { LucideAngularModule } from 'lucide-angular';
 })
 export class ComboboxItem {
   constructor() {
-    // Scroll into view when highlighted
     effect(() => {
       if (this.isHighlighted()) {
         this.itemElement()?.nativeElement?.scrollIntoView({
@@ -73,8 +73,6 @@ export class ComboboxItem {
           behavior: 'smooth',
         });
       }
-
-      // console.log('icon position on combobox item', this.iconPosition());
     });
   }
 
@@ -93,7 +91,6 @@ export class ComboboxItem {
 
   protected readonly context = inject(COMBOBOX_CONTEXT);
 
-  // readonly iconPosition = this.context.iconPosition();
   readonly iconPosition = computed(() => this.context.iconPosition());
   protected readonly option = computed(() =>
     this.context.options().find((o) => o.value === this.value()),

package/src/app/lib/components/ui/combobox/combobox-list.component.ts

@@ -33,7 +33,7 @@ import { ComboboxItem } from './combobox-item.component';
   `,
   host: {
     class: 'contents',
-    'data-slot': 'combobox-list',
+    'attr.data-slot': '"combobox-list"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

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

@@ -21,6 +21,7 @@ import { COMBOBOX_CONTEXT } from './combobox-context';
   `,
   imports: [LucideAngularModule],
   host: {
+    'attr.data-slot': '"combobox-trigger"',
     '[class]': 'computedClass()',
     role: 'combobox',
     '[attr.id]': 'context.id + "-trigger"',

package/src/app/lib/components/ui/combobox/combobox-value.component.ts

@@ -26,6 +26,7 @@ import { LucideAngularModule } from 'lucide-angular';
       <span class="text-neutral-500">{{ placeholder() }}</span>
     }`,
   host: {
+    'attr.data-slot': '"combobox-value"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -40,7 +40,7 @@ let comboboxIdCounter = 0;
   exportAs: 'combobox',
   host: {
     '[class]': 'computedClass()',
-    'data-slot': 'combobox',
+    'attr.data-slot': '"combobox"',
   },
   providers: [
     {

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

@@ -26,6 +26,7 @@ import { Command } from './command.component';
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"command-dialog"',
     class: 'contents',
     '(document:keydown.escape)': 'onEscapeKey()',
   },

package/src/app/lib/components/ui/command/command-empty.component.ts

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

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

@@ -23,6 +23,7 @@ import {
     <ng-content />
   `,
   host: {
+    'attr.data-slot': '"command-group"',
     '[class]': 'computedClass()',
     '[hidden]': '!hasVisibleItems()',
   },

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

@@ -44,6 +44,7 @@ import { COMMAND_CONTEXT } from './command-context';
     </div>
   `,
   host: {
+    'attr.data-slot': '"command-input-wrapper"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -25,6 +25,7 @@ let itemIndexCounter = 0;
   selector: 'CommandItem',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"command-item"',
     '[class]': 'computedClass()',
     '[attr.role]': '"option"',
     '[attr.id]': 'itemId',
@@ -92,7 +93,7 @@ export class CommandItem implements OnInit, OnDestroy {
   });
   protected readonly computedClass = computed(() =>
     cn(
-      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[selected]:bg-accent data-[selected]:text-accent-foreground data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
+      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[selected]:bg-accent data-[selected]:text-accent-foreground data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0 [&>lucide-icon]:size-4 [&>lucide-icon]:shrink-0',
       !this.disabled() && 'cursor-pointer hover:bg-accent hover:text-accent-foreground',
       this.class(),
     ),

package/src/app/lib/components/ui/command/command-list.component.ts

@@ -11,6 +11,7 @@ import { COMMAND_CONTEXT } from './command-context';
   selector: 'CommandList',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"command-list"',
     '[class]': 'computedClass()',
     '[attr.id]': 'context.listId',
     role: 'listbox',

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

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

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

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

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

@@ -63,6 +63,7 @@ const defaultFilterFn: CommandFilterFunction = (
     },
   ],
   host: {
+    'attr.data-slot': '"command"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

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

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

@@ -38,6 +38,7 @@ import { CONTEXT_MENU_CONTEXT } from './context-menu-context';
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"context-menu-content"',
     class: 'contents',
     '(document:click)': 'onDocumentClick()',
     '(document:keydown.escape)': 'onEscapeKey()',

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

@@ -11,6 +11,7 @@ import { CONTEXT_MENU_CONTEXT } from './context-menu-context';
   selector: 'ContextMenuItem',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"context-menu-item"',
     '[class]': 'computedClass()',
     '[attr.role]': '"menuitem"',
     '[attr.tabindex]': 'disabled() ? -1 : -1',
@@ -37,7 +38,7 @@ export class ContextMenuItem {
 
   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',
+      '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',
       this.inset() && 'pl-8',
       !this.disabled() && 'cursor-pointer hover:bg-accent hover:text-accent-foreground',
       this.class(),

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

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

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

@@ -35,6 +35,7 @@ export const CONTEXT_MENU_RADIO_GROUP_CONTEXT = new InjectionToken<ContextMenuRa
     },
   ],
   host: {
+    'attr.data-slot': '"context-menu-radio-group"',
     '[attr.role]': '"group"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -20,6 +20,7 @@ import { CONTEXT_MENU_RADIO_GROUP_CONTEXT } from './context-menu-radio-group.com
     <ng-content />
   `,
   host: {
+    'attr.data-slot': '"context-menu-radio-item"',
     '[class]': 'computedClass()',
     '[attr.role]': '"menuitemradio"',
     '[attr.aria-checked]': 'isSelected()',

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

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'ContextMenuSeparator',
   template: ``,
   host: {
+    'attr.data-slot': '"context-menu-separator"',
     '[class]': 'computedClass()',
     '[attr.role]': '"separator"',
   },

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

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

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

@@ -21,6 +21,7 @@ import { CONTEXT_MENU_SUB_CONTEXT } from './context-menu-sub.component';
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"context-menu-sub-content"',
     class: 'contents',
     '(mouseenter)': 'onMouseEnter()',
     '(mouseleave)': 'onMouseLeave()',

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

@@ -15,6 +15,7 @@ import { CONTEXT_MENU_SUB_CONTEXT } from './context-menu-sub.component';
     <lucide-icon [img]="ChevronRightIcon" class="ml-auto h-4 w-4" />
   `,
   host: {
+    'attr.data-slot': '"context-menu-sub-trigger"',
     '[class]': 'computedClass()',
     '(mouseenter)': 'onMouseEnter()',
     '(mouseleave)': 'onMouseLeave()',
@@ -33,7 +34,7 @@ export class ContextMenuSubTrigger {
 
   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 focus:text-accent-foreground 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 focus:text-accent-foreground 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/context-menu/context-menu-sub.component.ts

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

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

@@ -10,6 +10,7 @@ import { CONTEXT_MENU_CONTEXT } from './context-menu-context';
   selector: 'ContextMenuTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"context-menu-trigger"',
     '[attr.tabindex]': '0',
     '(contextmenu)': 'onContextMenu($event)',
     '(keydown)': 'onKeydown($event)',

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

@@ -20,6 +20,7 @@ import { CONTEXT_MENU_CONTEXT, type ContextMenuContextValue } from './context-me
     },
   ],
   host: {
+    'attr.data-slot': '"context-menu"',
     class: 'relative inline-block',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

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

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

@@ -74,6 +74,7 @@ import { DATA_TABLE_CONTEXT } from './data-table-context';
     </div>
   `,
   host: {
+    'attr.data-slot': '"data-table-pagination"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -16,6 +16,7 @@ import { DATA_TABLE_CONTEXT } from './data-table-context';
     />
   `,
   host: {
+    'attr.data-slot': '"data-table-search"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

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