@ng-cn/core 1.0.16 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-cn/core",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "Beautifully designed Angular components built with Tailwind CSS v4 - The official Angular port of shadcn/ui",
   "keywords": [
     "angular",
@@ -58,6 +58,8 @@
     ]
   },
   "dependencies": {
+    "@angular-devkit/core": "^21.2.5",
+    "@angular-devkit/schematics": "^21.2.5",
     "@angular/cdk": "^21.2.4",
     "@angular/common": "^21.2.6",
     "@angular/compiler": "^21.2.6",
@@ -74,18 +76,17 @@
     "express": "^5.1.0",
     "lucide-angular": "^1.0.0",
     "ng-apexcharts": "^2.3.0",
+    "ngx-sonner": "^3.1.0",
     "postcss": "^8.5.8",
     "rxjs": "~7.8.0",
     "shiki": "^4.0.2",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.2",
-    "tslib": "^2.3.0",
-    "@angular-devkit/core": "^21.2.5",
-    "@angular-devkit/schematics": "^21.2.5"
+    "tslib": "^2.3.0"
   },
   "devDependencies": {
-    "@analogjs/vitest-angular": "^2.3.1",
     "@analogjs/vite-plugin-angular": "^2.2.0",
+    "@analogjs/vitest-angular": "^2.3.1",
     "@angular/build": "^21.2.5",
     "@angular/cli": "^21.2.5",
     "@angular/compiler-cli": "^21.2.6",

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

@@ -4,7 +4,8 @@ import { ACCORDION_ITEM_CONTEXT } from './accordion-context';
 
 /**
  * AccordionContent component - expandable content area.
- * Uses role="region" and aria-labelledby to associate with trigger.
+ * Uses CSS grid animation (grid-template-rows: 0fr → 1fr) for smooth open/close.
+ * Content is always in the DOM; visibility is controlled by the grid row height.
  *
  * @example
  * <AccordionContent>
@@ -14,19 +15,17 @@ import { ACCORDION_ITEM_CONTEXT } from './accordion-context';
 @Component({
   selector: 'AccordionContent',
   template: `
-    @if (item.isOpen()) {
-      <div [class]="innerClass()">
-        <ng-content />
-      </div>
-    }
+    <div [class]="innerClass()">
+      <ng-content />
+    </div>
   `,
   host: {
+    'attr.data-slot': '"accordion-content"',
     role: 'region',
     '[class]': 'computedClass()',
     '[attr.id]': 'item.contentId',
     '[attr.data-state]': 'item.isOpen() ? "open" : "closed"',
     '[attr.aria-labelledby]': 'item.triggerId',
-    '[attr.aria-hidden]': '!item.isOpen()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -36,13 +35,11 @@ export class AccordionContent {
 
   protected readonly item = inject(ACCORDION_ITEM_CONTEXT);
 
-  protected readonly computedClass = computed(() =>
-    cn(
-      'overflow-hidden text-sm',
-      'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
-    ),
-  );
+  // No overflow-hidden on the host — grid-template-rows handles expansion.
+  // Global CSS ([data-slot='accordion-content'] > div { overflow: hidden }) clips the inner div.
+  protected readonly computedClass = computed(() => cn('text-sm', this.class()));
+
   protected readonly innerClass = computed(() =>
-    cn('pb-4 pt-2 px-1 text-muted-foreground leading-relaxed', this.class()),
+    cn('pb-4 pt-2 px-1 text-muted-foreground leading-relaxed'),
   );
 }

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

@@ -16,6 +16,7 @@ export interface AccordionItemContext {
   value: () => string;
   isOpen: () => boolean;
   toggle: () => void;
+  disabled: () => boolean;
   /** Unique IDs for ARIA relationships */
   triggerId: string;
   contentId: string;

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

@@ -1,6 +1,7 @@
 import { cn } from '@/lib/utils';
 import { AriaIdService } from '@/lib/utils/accessibility';
 import {
+  booleanAttribute,
   ChangeDetectionStrategy,
   Component,
   computed,
@@ -30,9 +31,12 @@ import {
   selector: 'AccordionItem',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"accordion-item"',
     '[class]': 'computedClass()',
     '[attr.data-state]': 'isOpen() ? "open" : "closed"',
     '[attr.data-value]': 'value()',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+    '[attr.aria-disabled]': 'disabled() || null',
   },
   providers: [
     {
@@ -46,6 +50,9 @@ export class AccordionItem implements AccordionItemContext, OnInit, OnDestroy {
   /** Unique value for this accordion item */
   readonly value = input.required<string>();
 
+  /** Whether this item is disabled */
+  readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });
+
   /** Additional CSS classes */
   readonly class = input<string>('');
 
@@ -77,6 +84,7 @@ export class AccordionItem implements AccordionItemContext, OnInit, OnDestroy {
 
   /** Toggle this item's open state */
   toggle(): void {
+    if (this.disabled()) return;
     this._accordion.onValueChange(this.value());
   }
 }

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

@@ -15,7 +15,6 @@ import { ACCORDION_ITEM_CONTEXT } from './accordion-context';
     <span class="me-2"><ng-content /></span>
     <svg
       class="size-4 shrink-0 ms-auto text-muted-foreground transition-transform duration-200"
-      [class.rotate-180]="item.isOpen()"
       xmlns="http://www.w3.org/2000/svg"
       width="24"
       height="24"
@@ -30,11 +29,13 @@ import { ACCORDION_ITEM_CONTEXT } from './accordion-context';
     </svg>
   `,
   host: {
+    'attr.data-slot': '"accordion-trigger"',
     '[class]': 'computedClass()',
     '[attr.id]': 'item.triggerId',
     '[attr.data-state]': 'item.isOpen() ? "open" : "closed"',
     '[attr.aria-expanded]': 'item.isOpen()',
     '[attr.aria-controls]': 'item.contentId',
+    '[attr.aria-disabled]': 'item.disabled() || null',
     '(click)': 'onClick()',
     '(keydown.enter)': 'onClick()',
     '(keydown.space)': 'onSpace($event)',
@@ -52,15 +53,18 @@ export class AccordionTrigger {
   protected readonly computedClass = computed(() =>
     cn(
       'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180 cursor-pointer w-full',
+      this.item.disabled() && 'cursor-not-allowed opacity-50 hover:no-underline',
       this.class(),
     ),
   );
 
   protected onClick(): void {
+    if (this.item.disabled()) return;
     this.item.toggle();
   }
   protected onSpace(event: Event): void {
     event.preventDefault();
+    if (this.item.disabled()) return;
     this.item.toggle();
   }
 }

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

@@ -7,6 +7,7 @@ import {
   effect,
   forwardRef,
   input,
+  output,
   signal,
 } from '@angular/core';
 import { ACCORDION_CONTEXT, AccordionContext, AccordionType } from './accordion-context';
@@ -28,6 +29,7 @@ import { ACCORDION_CONTEXT, AccordionContext, AccordionType } from './accordion-
   selector: 'Accordion',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"accordion"',
     '[class]': 'computedClass()',
     '[attr.data-orientation]': '"vertical"',
     '(keydown)': 'onKeydown($event)',
@@ -69,6 +71,9 @@ export class Accordion implements AccordionContext {
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  /** Emits the new value whenever the open state changes */
+  readonly valueChange = output<string | string[] | undefined>();
+
   protected readonly computedClass = computed(() => cn('w-full', this.class()));
   /** Get current value(s) */
   readonly value = computed(() => {
@@ -119,6 +124,7 @@ export class Accordion implements AccordionContext {
 
       return newSet;
     });
+    this.valueChange.emit(this.value());
   }
   /** Check if an item is open */
   isItemOpen(itemValue: string): boolean {
@@ -179,12 +185,24 @@ export class Accordion implements AccordionContext {
 
     if (handled) {
       event.preventDefault();
-      // Focus the trigger of the new item
-      const newValue = values[newIndex];
-      const newTrigger = document.querySelector(
-        `AccordionItem[data-value="${newValue}"] AccordionTrigger, [data-accordion-trigger="${newValue}"]`,
-      ) as HTMLElement;
-      newTrigger?.focus();
+      const direction =
+        event.key === 'ArrowDown' || event.key === 'End' ? 1 : -1;
+      let attempts = 0;
+      while (attempts < values.length) {
+        const candidateValue = values[newIndex];
+        const candidateItem = document.querySelector(
+          `AccordionItem[data-value="${candidateValue}"]`,
+        );
+        if (!candidateItem?.hasAttribute('data-disabled')) {
+          const trigger = document.querySelector(
+            `AccordionItem[data-value="${candidateValue}"] AccordionTrigger`,
+          ) as HTMLElement;
+          trigger?.focus();
+          break;
+        }
+        newIndex = (newIndex + direction + values.length) % values.length;
+        attempts++;
+      }
     }
   }
 }

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

@@ -1,17 +1,31 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 
 /**
- * Alert variants using class-variance-authority
- * WCAG AA compliant contrast ratios for all variants
+ * Alert variants using class-variance-authority.
+ * Selectors cover both native <svg> and lucide-angular's <lucide-icon> element.
  */
 export const alertVariants = cva(
-  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+  [
+    'relative w-full rounded-lg border px-4 py-3 text-sm',
+    // Grid base — 1-col by default, switches to 2-col when icon is present
+    'grid grid-cols-[0_1fr]',
+    'has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr]',
+    'has-[>lucide-icon]:grid-cols-[calc(var(--spacing)*4)_1fr]',
+    // Column gap when icon present
+    'has-[>svg]:gap-x-3',
+    'has-[>lucide-icon]:gap-x-3',
+    'gap-y-0.5 items-start',
+    // Icon sizing and alignment — native SVG
+    '[&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+    // Icon sizing and alignment — lucide-angular
+    '[&>lucide-icon]:size-4 [&>lucide-icon]:translate-y-0.5 [&>lucide-icon]:text-current',
+  ].join(' '),
   {
     variants: {
       variant: {
         default: 'bg-card text-card-foreground border-border',
         destructive:
-          'bg-destructive/10 text-destructive border-destructive/30 [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+          'bg-destructive/10 text-destructive border-destructive/30 [&>svg]:text-current [&>lucide-icon]:text-current *:data-[slot=alert-description]:text-destructive/90',
       },
     },
     defaultVariants: {

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

@@ -15,6 +15,7 @@ import { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
   selector: 'AlertDialogAction',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"alert-dialog-action"',
     '[class]': 'computedClass()',
     '(click)': 'onClick($event)',
   },

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

@@ -18,7 +18,7 @@ import { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
   host: {
     '[class]': 'computedClass()',
     '(click)': 'onClick($event)',
-    'data-slot': 'alert-dialog-cancel',
+    'attr.data-slot': '"alert-dialog-cancel"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

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

@@ -1,7 +1,8 @@
-import { cn } from '@/lib/utils';
+import { cn, Presence } from '@/lib/utils';
 import { FocusTrapDirective } from '@/lib/utils/accessibility';
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   computed,
   DestroyRef,
@@ -21,14 +22,20 @@ import { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
  * - Overlay/backdrop click does NOT close the dialog
  * - Focus is trapped within the dialog
  * - User must explicitly click Cancel or Action to close
+ * - Exit animations handled by Presence component (no setTimeout needed)
+ * - Focus restored on any programmatic close (Action/Cancel/Escape)
  */
 @Component({
   selector: 'AlertDialogContent',
-  imports: [FocusTrapDirective],
+  imports: [FocusTrapDirective, Presence],
   template: `
-    @if (context.isOpen()) {
+    <Presence [present]="context.isOpen()">
       <!-- Overlay - does NOT close on click -->
-      <div class="fixed inset-0 z-50 bg-black/80" aria-hidden="true"></div>
+      <div
+        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'"
+        aria-hidden="true"
+      ></div>
       <!-- Content Dialog -->
       <div
         hlmFocusTrap
@@ -37,6 +44,7 @@ import { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
         [restoreFocus]="false"
         [initialFocus]="'[data-slot=alert-dialog-cancel]'"
         [class]="computedClass()"
+        [attr.data-state]="context.isOpen() ? 'open' : 'closed'"
         [attr.id]="context.contentId"
         [attr.aria-labelledby]="context.titleId"
         [attr.aria-describedby]="context.descriptionId"
@@ -45,36 +53,45 @@ import { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
       >
         <ng-content />
       </div>
-    }
+    </Presence>
   `,
   host: {
+    'attr.data-slot': '"alert-dialog-content"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AlertDialogContent {
   constructor() {
-    // Handle body scroll lock based on open state
+    let wasOpen = false;
+
     effect(() => {
       const isOpen = this.context.isOpen();
+      this._cdr.markForCheck();
+
       if (isOpen) {
+        wasOpen = true;
         this.lockBodyScroll();
       } else {
         this.unlockBodyScroll();
+        // Restore focus whenever dialog closes (covers Action/Cancel/Escape paths)
+        if (wasOpen) {
+          this.restoreFocus();
+        }
+        wasOpen = false;
       }
     });
 
-    // Cleanup on destroy
     this._destroyRef.onDestroy(() => {
       this.unlockBodyScroll();
       this.restoreFocus();
     });
   }
 
-  /** Additional CSS classes */
   readonly class = input<string>('');
 
   private readonly _destroyRef = inject(DestroyRef);
+  private readonly _cdr = inject(ChangeDetectorRef);
 
   protected readonly context = inject(ALERT_DIALOG_CONTEXT);
 
@@ -91,37 +108,37 @@ export class AlertDialogContent {
     ),
   );
 
-  /** Previous body overflow for restoration */
   private previousBodyOverflow = '';
+  private previousBodyPaddingRight = '';
 
   @HostListener('document:keydown.escape')
   onEscapeKey(): void {
     if (this.context.isOpen()) {
-      this.close();
+      this.context.setOpen(false);
     }
   }
 
   private lockBodyScroll(): void {
     if (typeof document !== 'undefined') {
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
       this.previousBodyOverflow = document.body.style.overflow;
+      this.previousBodyPaddingRight = document.body.style.paddingRight;
       document.body.style.overflow = 'hidden';
+      if (scrollbarWidth > 0) {
+        document.body.style.paddingRight = scrollbarWidth + 'px';
+      }
     }
   }
   private unlockBodyScroll(): void {
     if (typeof document !== 'undefined') {
       document.body.style.overflow = this.previousBodyOverflow;
+      document.body.style.paddingRight = this.previousBodyPaddingRight;
     }
   }
-  private close(): void {
-    this.restoreFocus();
-    this.context.setOpen(false);
-  }
   private restoreFocus(): void {
     const triggerEl = this.context.getTriggerElement();
     if (triggerEl) {
-      setTimeout(() => {
-        triggerEl.focus();
-      }, 0);
+      setTimeout(() => triggerEl.focus(), 0);
     }
   }
 }

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

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

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

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

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

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

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

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

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

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

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

@@ -43,6 +43,10 @@ import { ALERT_DIALOG_CONTEXT, type AlertDialogContextValue } from './alert-dial
       useExisting: forwardRef(() => AlertDialog),
     },
   ],
+  host: {
+    'attr.data-slot': '"alert-dialog"',
+    style: 'display: contents',
+  },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AlertDialog implements AlertDialogContextValue {

package/src/app/lib/components/ui/aspect-ratio/aspect-ratio.component.ts

@@ -30,6 +30,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
     </div>
   `,
   host: {
+    'attr.data-slot': '"aspect-ratio"',
     '[class]': 'computedClass()',
     '[style.padding-bottom]': 'paddingBottom()',
     '[style.position]': '"relative"',

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

@@ -0,0 +1,9 @@
+import { InjectionToken, WritableSignal } from '@angular/core';
+
+export type AvatarImageStatus = 'idle' | 'loaded' | 'error';
+
+export interface AvatarContext {
+  imageStatus: WritableSignal<AvatarImageStatus>;
+}
+
+export const AVATAR_CONTEXT = new InjectionToken<AvatarContext>('AvatarContext');

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

@@ -1,24 +1,21 @@
 import { cn } from '@/lib/utils';
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { AVATAR_CONTEXT } from './avatar-context';
 
-/**
- * Avatar fallback component.
- * Shown when the image fails to load or is not provided.
- *
- * @example
- * <AvatarFallback>JD</AvatarFallback>
- */
 @Component({
   selector: 'AvatarFallback',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"avatar-fallback"',
     '[class]': 'computedClass()',
-    'data-slot': 'avatar-fallback',
+    // Hidden via display:none when image has loaded; always in DOM for layout stability
+    '[style.display]': 'context.imageStatus() === "loaded" ? "none" : null',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AvatarFallback {
   readonly class = input<string>('');
+  protected readonly context = inject(AVATAR_CONTEXT);
 
   protected readonly computedClass = computed(() =>
     cn('bg-muted flex size-full items-center justify-center rounded-full text-xs', this.class()),

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

@@ -1,24 +1,53 @@
 import { cn } from '@/lib/utils';
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  inject,
+  input,
+} from '@angular/core';
+import { AVATAR_CONTEXT } from './avatar-context';
 
-/**
- * Avatar image component.
- * The image to display for the avatar.
- *
- * @example
- * <AvatarImage src="/avatar.png" alt="User avatar" />
- */
 @Component({
   selector: 'AvatarImage',
-  template: `<ng-content />`,
+  template: `
+    @if (context.imageStatus() !== 'error') {
+      <img
+        [src]="src()"
+        [alt]="alt()"
+        [class]="computedClass()"
+        (load)="onLoad()"
+        (error)="onError()"
+      />
+    }
+  `,
   host: {
-    '[class]': 'computedClass()',
-    'data-slot': 'avatar-image',
+    'attr.data-slot': '"avatar-image"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AvatarImage {
+  readonly src = input<string>('');
+  readonly alt = input<string>('');
   readonly class = input<string>('');
 
+  protected readonly context = inject(AVATAR_CONTEXT);
   protected readonly computedClass = computed(() => cn('aspect-square size-full', this.class()));
+
+  constructor() {
+    // Reset status whenever src changes so a new src gets a fresh load attempt
+    effect(() => {
+      const _ = this.src();
+      this.context.imageStatus.set('idle');
+    });
+  }
+
+  protected onLoad(): void {
+    this.context.imageStatus.set('loaded');
+  }
+
+  protected onError(): void {
+    this.context.imageStatus.set('error');
+  }
 }

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

@@ -1,27 +1,32 @@
 import { cn } from '@/lib/utils';
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  signal,
+} from '@angular/core';
+import { AVATAR_CONTEXT, AvatarContext, AvatarImageStatus } from './avatar-context';
 
-/**
- * Avatar container component.
- * Wraps the avatar image and fallback.
- *
- * @example
- * <Avatar>
- *   <img AvatarImage src="/avatar.png" alt="User" />
- *   <AvatarFallback>JD</AvatarFallback>
- * </Avatar>
- */
 @Component({
   selector: 'Avatar',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"avatar"',
     '[class]': 'computedClass()',
-    'data-slot': 'avatar',
   },
+  providers: [
+    {
+      provide: AVATAR_CONTEXT,
+      useExisting: forwardRef(() => Avatar),
+    },
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class Avatar {
+export class Avatar implements AvatarContext {
   readonly class = input<string>('');
+  readonly imageStatus = signal<AvatarImageStatus>('idle');
 
   protected readonly computedClass = computed(() =>
     cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', this.class()),

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

@@ -1,3 +1,4 @@
+export { AVATAR_CONTEXT, type AvatarContext, type AvatarImageStatus } from './avatar-context';
 export { AvatarFallback } from './avatar-fallback.component';
 export { AvatarImage } from './avatar-image.component';
 export { Avatar } from './avatar.component';