@ng-cn/core 1.0.15 → 1.0.17

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

@@ -1,31 +1,53 @@
 import { cn } from '@/lib/utils';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
+  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 computedClass = computed(() =>
-    cn('aspect-square size-full', this.class())
-  );
+  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,37 +1,34 @@
 import { cn } from '@/lib/utils';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
+  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()
-    )
+    cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', this.class()),
   );
 }

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

@@ -1,5 +1,5 @@
+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';
 export { UiAvatar } from './ui-avatar.component';
-

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

@@ -1,40 +1,25 @@
-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],
   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>
   `,
 })
@@ -43,10 +28,4 @@ export class UiAvatar {
   readonly alt = input<string>('');
   readonly fallback = input<string>('');
   readonly class = input<string>('');
-
-  protected readonly imageError = signal(false);
-
-  protected onImageError() {
-    this.imageError.set(true);
-  }
 }

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

@@ -6,23 +6,23 @@ 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: {
-        default:
-          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
         secondary:
           'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
         destructive:
           'border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
-        outline: 'text-foreground border-border [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+        outline:
+          'text-foreground border-border [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
       },
     },
     defaultVariants: {
       variant: 'default',
     },
-  }
+  },
 );
 
 export type BadgeVariants = VariantProps<typeof badgeVariants>;

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

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { badgeVariants, type BadgeVariants } from './badge-variants';
 
 /**
@@ -27,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,
@@ -44,7 +40,7 @@ export class Badge {
       badgeVariants({
         variant: this.variant(),
       }),
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

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

@@ -1,3 +1,2 @@
 export { badgeVariants, type BadgeVariants } from './badge-variants';
 export { Badge } from './badge.component';
-

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

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * BreadcrumbEllipsis component - shows more items indicator.
@@ -32,6 +27,7 @@ import {
     <span class="sr-only">More</span>
   `,
   host: {
+    'attr.data-slot': '"breadcrumb-ellipsis"',
     role: 'presentation',
     '[attr.aria-hidden]': '"true"',
     '[class]': 'computedClass()',
@@ -43,6 +39,6 @@ export class BreadcrumbEllipsis {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('flex h-9 w-9 items-center justify-center', this.class())
+    cn('flex h-9 w-9 items-center justify-center', this.class()),
   );
 }

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

@@ -1,28 +1,19 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+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(() =>
-    cn('inline-flex items-center gap-1.5', this.class())
+    cn('inline-flex items-center gap-1.5', this.class()),
   );
 }

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

@@ -1,32 +1,20 @@
 import { cn } from '@/lib/utils';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-} from '@angular/core';
+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(() =>
-    cn('transition-colors hover:text-foreground', this.class())
+    cn('transition-colors hover:text-foreground', this.class()),
   );
 }

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

@@ -1,31 +1,22 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+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(() =>
     cn(
       'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

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

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * BreadcrumbPage component - current page span.
@@ -14,6 +9,7 @@ import {
   selector: 'BreadcrumbPage',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"breadcrumb-page"',
     role: 'link',
     '[attr.aria-disabled]': '"true"',
     '[attr.aria-current]': '"page"',
@@ -26,6 +22,6 @@ export class BreadcrumbPage {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('font-normal text-foreground', this.class())
+    cn('font-normal text-foreground', this.class()),
   );
 }

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

@@ -1,47 +1,38 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+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(() =>
-    cn('[&>svg]:h-3.5 [&>svg]:w-3.5', this.class())
+    cn('[&>svg]:h-3.5 [&>svg]:w-3.5', this.class()),
   );
 }

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

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * Breadcrumb component - root container.
@@ -27,6 +22,7 @@ import {
   selector: 'Breadcrumb',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"breadcrumb"',
     role: 'navigation',
     '[attr.aria-label]': '"breadcrumb"',
     '[class]': 'computedClass()',
@@ -37,7 +33,5 @@ export class Breadcrumb {
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly computedClass = computed(() =>
-    cn(this.class())
-  );
+  protected readonly computedClass = computed(() => cn(this.class()));
 }

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

@@ -5,4 +5,3 @@ export { BreadcrumbList } from './breadcrumb-list.component';
 export { BreadcrumbPage } from './breadcrumb-page.component';
 export { BreadcrumbSeparator } from './breadcrumb-separator.component';
 export { Breadcrumb } from './breadcrumb.component';
-

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

@@ -10,21 +10,19 @@ export const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default:
-          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
         destructive:
           'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
         outline:
           'border border-input bg-background text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground',
-        secondary:
-          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
         ghost: 'text-foreground hover:bg-accent hover:text-accent-foreground',
         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',
       },
     },
@@ -32,7 +30,7 @@ export const buttonVariants = cva(
       variant: 'default',
       size: 'default',
     },
-  }
+  },
 );
 
 export type ButtonVariants = VariantProps<typeof buttonVariants>;

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

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { buttonVariants, type ButtonVariants } from './button-variants';
 
 /**
@@ -62,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',
@@ -97,7 +93,7 @@ export class Button {
         size: this.size(),
       }),
       this.loading() && 'relative cursor-wait',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

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

@@ -1,3 +1,2 @@
 export { buttonVariants, type ButtonVariants } from './button-variants';
 export { Button } from './button.component';
-

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

@@ -4,21 +4,18 @@ import { cva, type VariantProps } from 'class-variance-authority';
  * ButtonGroup variants using class-variance-authority
  * Grouped buttons with shared styling
  */
-export const buttonGroupVariants = cva(
-  'inline-flex items-center justify-center rounded-md',
-  {
-    variants: {
-      orientation: {
-        horizontal:
-          '[&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ml-px',
-        vertical:
-          'flex-col [&>*:first-child]:rounded-b-none [&>*:last-child]:rounded-t-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-mt-px',
-      },
+export const buttonGroupVariants = cva('inline-flex items-center justify-center rounded-md', {
+  variants: {
+    orientation: {
+      horizontal:
+        '[&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ml-px',
+      vertical:
+        'flex-col [&>*:first-child]:rounded-b-none [&>*:last-child]:rounded-t-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-mt-px',
     },
-    defaultVariants: {
-      orientation: 'horizontal',
-    },
-  }
-);
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+  },
+});
 
 export type ButtonGroupVariants = VariantProps<typeof buttonGroupVariants>;