@ng-cn/core 1.0.16 → 1.0.18

package/src/app/lib/components/ui/avatar/ui-avatar.component.ts

@@ -1,30 +1,29 @@
-import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { AvatarFallback } from './avatar-fallback.component';
+import { AvatarImage } from './avatar-image.component';
 import { Avatar } from './avatar.component';
 
 /**
- * Avatar component that handles image loading and fallback display.
- * This is a convenience component that combines Avatar, AvatarImage, and AvatarFallback.
+ * Convenience component combining Avatar + AvatarImage + AvatarFallback.
+ * Error handling is automatic via the shared Avatar context.
  *
  * @example
- * <ui-avatar
- *   src="/avatar.png"
- *   alt="John Doe"
- *   fallback="JD"
- * />
+ * <ui-avatar src="/avatar.png" alt="John Doe" fallback="JD" />
  */
 @Component({
   selector: 'ui-avatar',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [Avatar, AvatarFallback],
+  imports: [Avatar, AvatarImage, AvatarFallback],
+  host: {
+    'attr.data-slot': '"ui-avatar"',
+    style: 'display: contents',
+  },
   template: `
     <Avatar [class]="class()">
-      @if (src() && !imageError()) {
-        <img AvatarImage [src]="src()" [alt]="alt()" (error)="onImageError()" />
-      }
-      @if (!src() || imageError()) {
-        <AvatarFallback>{{ fallback() }}</AvatarFallback>
+      @if (src()) {
+        <AvatarImage [src]="src()" [alt]="alt()" />
       }
+      <AvatarFallback>{{ fallback() }}</AvatarFallback>
     </Avatar>
   `,
 })
@@ -33,10 +32,4 @@ export class UiAvatar {
   readonly alt = input<string>('');
   readonly fallback = input<string>('');
   readonly class = input<string>('');
-
-  protected readonly imageError = signal(false);
-
-  protected onImageError(): void {
-    this.imageError.set(true);
-  }
 }

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/calendar/calendar.component.ts

@@ -26,8 +26,12 @@ import { buttonVariants } from '../button';
 @Component({
   selector: 'Calendar',
   imports: [LucideAngularModule],
+  host: {
+    'attr.data-slot': '"calendar"',
+    '[class]': 'computedClass()',
+  },
   template: `
-    <div [class]="computedClass()" role="application" [attr.aria-label]="ariaLabel()">
+    <div role="application" [attr.aria-label]="ariaLabel()">
       <!-- Header with navigation -->
       <div class="w-full">
         <div class="w-full space-y-4">

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

@@ -14,6 +14,7 @@ import { CAROUSEL_CONTEXT } from './carousel-context';
     </div>
   `,
   host: {
+    'attr.data-slot': '"carousel-content"',
     '[class]': 'computedClass()',
     'aria-atomic': 'false',
   },

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

@@ -10,6 +10,7 @@ import { CAROUSEL_CONTEXT } from './carousel-context';
   selector: 'CarouselItem',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"carousel-item"',
     '[class]': 'computedClass()',
     role: 'group',
     'aria-roledescription': 'slide',

package/src/app/lib/components/ui/carousel/carousel-next.component.ts

@@ -24,6 +24,7 @@ import { CAROUSEL_CONTEXT } from './carousel-context';
     </button>
   `,
   host: {
+    'attr.data-slot': '"carousel-next"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/carousel/carousel-previous.component.ts

@@ -24,6 +24,7 @@ import { CAROUSEL_CONTEXT } from './carousel-context';
     </button>
   `,
   host: {
+    'attr.data-slot': '"carousel-previous"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -77,6 +77,7 @@ import {
     },
   ],
   host: {
+    'attr.data-slot': '"carousel"',
     '[class]': 'computedClass()',
     role: 'region',
     '[attr.aria-label]': 'ariaLabel()',

package/src/app/lib/components/ui/chart/chart-container.component.ts

@@ -24,6 +24,7 @@ import { CHART_CONTEXT, type ChartConfig, type ChartContext } from './chart-cont
   selector: 'ChartContainer',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"chart-container"',
     '[class]': 'computedClass()',
     '[style]': 'chartStyles()',
     'data-chart': '',

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

@@ -16,6 +16,7 @@ import { CHART_COLORS, CHART_CONTEXT } from './chart-context';
     }
   `,
   host: {
+    'attr.data-slot': '"chart-legend-content"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/chart/chart-legend.component.ts

@@ -6,11 +6,11 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
  */
 @Component({
   selector: 'ChartLegend',
-  template: `
-    <div [class]="computedClass()">
-      <ng-content />
-    </div>
-  `,
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"chart-legend"',
+    '[class]': 'computedClass()',
+  },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ChartLegend {

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

@@ -6,11 +6,11 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
  */
 @Component({
   selector: 'ChartTooltipContent',
-  template: `
-    <div [class]="computedClass()">
-      <ng-content />
-    </div>
-  `,
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"chart-tooltip-content"',
+    '[class]': 'computedClass()',
+  },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ChartTooltipContent {

package/src/app/lib/components/ui/chart/chart-tooltip.component.ts

@@ -6,11 +6,11 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
  */
 @Component({
   selector: 'ChartTooltip',
-  template: `
-    <div [class]="computedClass()">
-      <ng-content />
-    </div>
-  `,
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"chart-tooltip"',
+    '[class]': 'computedClass()',
+  },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ChartTooltip {

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

@@ -114,6 +114,7 @@ import {
     </svg>
   `,
   host: {
+    'attr.data-slot': '"chart"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -96,7 +96,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
   `,
   host: {
     '[class]': 'computedClass()',
-    'data-slot': 'checkbox',
+    'attr.data-slot': '"checkbox"',
   },
   providers: [
     {

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

@@ -18,10 +18,12 @@ 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',
-    '[attr.aria-hidden]': '!collapsible.isOpen()',
+    '[attr.id]': 'collapsible.contentId',
+    '[attr.inert]': '!collapsible.isOpen() || null',
   },
   styles: [
     `

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

@@ -4,6 +4,7 @@ export interface CollapsibleContext {
   isOpen: () => boolean;
   toggle: () => void;
   disabled: () => boolean;
+  contentId: string;
 }
 
 export const COLLAPSIBLE_CONTEXT = new InjectionToken<CollapsibleContext>('CollapsibleContext');

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

@@ -12,10 +12,12 @@ 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',
     '[attr.aria-expanded]': 'collapsible.isOpen()',
+    '[attr.aria-controls]': 'collapsible.contentId',
     '[attr.disabled]': 'collapsible.disabled() ? true : null',
     '(click)': 'onClick()',
     '(keydown.enter)': 'onClick()',

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',
@@ -76,6 +77,9 @@ export class Collapsible implements CollapsibleContext {
 
   protected readonly computedClass = computed(() => cn('', this.class()));
 
+  /** Stable ID linking the trigger (aria-controls) to the content (id) */
+  readonly contentId = `collapsible-content-${Math.random().toString(36).slice(2)}`;
+
   /** Internal state for open/closed */
   private readonly _isOpen = signal<boolean>(false);
 

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,