@ng-cn/core 1.0.17 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-cn/core",
-  "version": "1.0.17",
+  "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/alert-dialog/alert-dialog-content.component.ts

@@ -1,4 +1,4 @@
-import { cn } from '@/lib/utils';
+import { cn, Presence } from '@/lib/utils';
 import { FocusTrapDirective } from '@/lib/utils/accessibility';
 import {
   ChangeDetectionStrategy,
@@ -10,13 +10,9 @@ import {
   HostListener,
   inject,
   input,
-  signal,
 } from '@angular/core';
 import { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
 
-/** Animation duration in ms — must match Tailwind's duration-200 */
-const EXIT_ANIMATION_MS = 200;
-
 /**
  * AlertDialogContent component - the modal content of the alert dialog.
  * Matches shadcn/ui React AlertDialogContent exactly.
@@ -26,12 +22,14 @@ const EXIT_ANIMATION_MS = 200;
  * - 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 (shouldRender()) {
+    <Presence [present]="context.isOpen()">
       <!-- Overlay - does NOT close on click -->
       <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"
@@ -55,7 +53,7 @@ const EXIT_ANIMATION_MS = 200;
       >
         <ng-content />
       </div>
-    }
+    </Presence>
   `,
   host: {
     'attr.data-slot': '"alert-dialog-content"',
@@ -65,21 +63,22 @@ const EXIT_ANIMATION_MS = 200;
 })
 export class AlertDialogContent {
   constructor() {
+    let wasOpen = false;
+
     effect(() => {
       const isOpen = this.context.isOpen();
       this._cdr.markForCheck();
 
       if (isOpen) {
-        this.shouldRender.set(true);
+        wasOpen = true;
         this.lockBodyScroll();
       } else {
         this.unlockBodyScroll();
-        if (this.shouldRender()) {
-          setTimeout(() => {
-            this.shouldRender.set(false);
-            this._cdr.markForCheck();
-          }, EXIT_ANIMATION_MS);
+        // Restore focus whenever dialog closes (covers Action/Cancel/Escape paths)
+        if (wasOpen) {
+          this.restoreFocus();
         }
+        wasOpen = false;
       }
     });
 
@@ -95,7 +94,6 @@ export class AlertDialogContent {
   private readonly _cdr = inject(ChangeDetectorRef);
 
   protected readonly context = inject(ALERT_DIALOG_CONTEXT);
-  protected readonly shouldRender = signal(false);
 
   protected readonly computedClass = computed(() =>
     cn(
@@ -111,29 +109,32 @@ export class AlertDialogContent {
   );
 
   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) {

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

@@ -14,6 +14,10 @@ import { Avatar } from './avatar.component';
   selector: 'ui-avatar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [Avatar, AvatarImage, AvatarFallback],
+  host: {
+    'attr.data-slot': '"ui-avatar"',
+    style: 'display: contents',
+  },
   template: `
     <Avatar [class]="class()">
       @if (src()) {

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

@@ -22,7 +22,8 @@ import { COLLAPSIBLE_CONTEXT } from './collapsible-context';
     '[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

@@ -17,6 +17,7 @@ import { COLLAPSIBLE_CONTEXT } from './collapsible-context';
     '[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

@@ -77,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/context-menu/context-menu-content.component.ts

@@ -7,8 +7,10 @@ import {
   effect,
   ElementRef,
   inject,
+  Injector,
   input,
   OnDestroy,
+  signal,
 } from '@angular/core';
 import { CONTEXT_MENU_CONTEXT } from './context-menu-context';
 
@@ -26,8 +28,8 @@ import { CONTEXT_MENU_CONTEXT } from './context-menu-context';
         [class]="computedClass()"
         [attr.data-state]="context.open() ? 'open' : 'closed'"
         [style.position]="'fixed'"
-        [style.left.px]="context.position().x"
-        [style.top.px]="context.position().y"
+        [style.left.px]="displayPosition().x"
+        [style.top.px]="displayPosition().y"
         role="menu"
         aria-orientation="vertical"
         tabindex="-1"
@@ -40,7 +42,7 @@ import { CONTEXT_MENU_CONTEXT } from './context-menu-context';
   host: {
     'attr.data-slot': '"context-menu-content"',
     class: 'contents',
-    '(document:click)': 'onDocumentClick()',
+    '(document:click)': 'onDocumentClick($event)',
     '(document:keydown.escape)': 'onEscapeKey()',
     '(document:contextmenu)': 'onAnotherContextMenu()',
   },
@@ -48,19 +50,28 @@ import { CONTEXT_MENU_CONTEXT } from './context-menu-context';
 })
 export class ContextMenuContent implements OnDestroy {
   constructor() {
-    // Focus first item when menu opens
+    // Clamp position and focus first item when menu opens
     effect(() => {
       if (this.context.open()) {
-        setTimeout(() => {
-          this.updateMenuItems();
-          const focusedIdx = this.context.focusedIndex();
-          if (focusedIdx >= 0 && this.menuItems[focusedIdx]) {
-            this.menuItems[focusedIdx].focus();
-          } else if (this.menuItems.length > 0) {
-            this.menuItems[0].focus();
-            this.context.focusedIndex.set(0);
-          }
-        }, 0);
+        this.isPositioned.set(false);
+        afterNextRender(
+          () => {
+            this.clampPosition();
+            this.isPositioned.set(true);
+            this.updateMenuItems();
+            const focusedIdx = this.context.focusedIndex();
+            if (focusedIdx >= 0 && this.menuItems[focusedIdx]) {
+              this.menuItems[focusedIdx].focus();
+            } else if (this.menuItems.length > 0) {
+              this.menuItems[0].focus();
+              this.context.focusedIndex.set(0);
+            }
+          },
+          { injector: this._injector },
+        );
+      } else {
+        this.isPositioned.set(false);
+        this.clampedPos.set(null);
       }
     });
 
@@ -74,15 +85,21 @@ export class ContextMenuContent implements OnDestroy {
   readonly class = input<string>('');
 
   private readonly _elementRef = inject(ElementRef);
+  private readonly _injector = inject(Injector);
 
   protected readonly context = inject(CONTEXT_MENU_CONTEXT);
 
+  protected readonly isPositioned = signal(false);
+  protected readonly clampedPos = signal<{ x: number; y: number } | null>(null);
+  protected readonly displayPosition = computed(() => this.clampedPos() ?? this.context.position());
+
   protected readonly computedClass = computed(() =>
     cn(
       'z-50 min-w-[12rem] overflow-hidden rounded-xl border bg-popover p-2 text-popover-foreground shadow-lg',
       'data-[state=open]:animate-in data-[state=closed]:animate-out',
       'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+      !this.isPositioned() && 'pointer-events-none opacity-0',
       this.class(),
     ),
   );
@@ -97,12 +114,22 @@ export class ContextMenuContent implements OnDestroy {
     }
   }
 
+  private clampPosition(): void {
+    const menu = this._elementRef.nativeElement.querySelector('[role="menu"]') as HTMLElement;
+    if (!menu) return;
+    const pos = this.context.position();
+    const rect = menu.getBoundingClientRect();
+    const padding = 8;
+    const x = Math.max(padding, Math.min(pos.x, window.innerWidth - rect.width - padding));
+    const y = Math.max(padding, Math.min(pos.y, window.innerHeight - rect.height - padding));
+    this.clampedPos.set({ x, y });
+  }
   private updateMenuItems(): void {
     const content = this._elementRef.nativeElement.querySelector('[role="menu"]');
     if (content) {
       this.menuItems = Array.from(
         content.querySelectorAll(
-          '[role="menuitem"]:not([aria-disabled="true"]):not([data-disabled])',
+          ':is([role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]):not([aria-disabled="true"]):not([data-disabled=""])',
         ),
       );
     }
@@ -194,8 +221,12 @@ export class ContextMenuContent implements OnDestroy {
       triggerEl.focus();
     }
   }
-  protected onDocumentClick(): void {
-    this.close();
+  protected onDocumentClick(event: MouseEvent): void {
+    const target = event.target as HTMLElement;
+    const host = this._elementRef.nativeElement;
+    if (!host.contains(target)) {
+      this.close();
+    }
   }
   protected onEscapeKey(): void {
     this.close();

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

@@ -43,9 +43,11 @@ export class ContextMenuSubContent {
   );
 
   protected onMouseEnter(): void {
+    this.subContext.isMouseInSubContent.set(true);
     this.subContext.open.set(true);
   }
   protected onMouseLeave(): void {
+    this.subContext.isMouseInSubContent.set(false);
     this.subContext.open.set(false);
   }
 }

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

@@ -19,7 +19,12 @@ import { CONTEXT_MENU_SUB_CONTEXT } from './context-menu-sub.component';
     '[class]': 'computedClass()',
     '(mouseenter)': 'onMouseEnter()',
     '(mouseleave)': 'onMouseLeave()',
+    '(keydown)': 'onKeyDown($event)',
     '[attr.data-state]': 'subContext.open() ? "open" : "closed"',
+    'role': 'menuitem',
+    '[attr.aria-haspopup]': '"menu"',
+    '[attr.aria-expanded]': 'subContext.open()',
+    '[attr.tabindex]': '"-1"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -46,6 +51,30 @@ export class ContextMenuSubTrigger {
     this.subContext.open.set(true);
   }
   protected onMouseLeave(): void {
-    // Keep open to allow mouse movement to subcontent
+    setTimeout(() => {
+      if (!this.subContext.isMouseInSubContent()) {
+        this.subContext.open.set(false);
+      }
+    }, 100);
+  }
+  protected onKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'ArrowRight' || event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      event.stopPropagation();
+      this.subContext.open.set(true);
+      // Focus first focusable item in sub-content after it renders
+      setTimeout(() => {
+        const subContent = (event.target as HTMLElement)
+          .closest('ContextMenuSub')
+          ?.querySelector<HTMLElement>('[role="menu"] [role="menuitem"]:not([aria-disabled="true"]):not([data-disabled=""])');
+        if (subContent) {
+          subContent.focus();
+        }
+      }, 10);
+    }
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      this.subContext.open.set(false);
+    }
   }
 }

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

@@ -8,6 +8,8 @@ import {
 
 export interface ContextMenuSubContext {
   open: WritableSignal<boolean>;
+  /** True while the mouse is hovering over the sub-content panel */
+  isMouseInSubContent: WritableSignal<boolean>;
 }
 
 export const CONTEXT_MENU_SUB_CONTEXT = new InjectionToken<ContextMenuSubContext>(
@@ -26,6 +28,7 @@ export const CONTEXT_MENU_SUB_CONTEXT = new InjectionToken<ContextMenuSubContext
       provide: CONTEXT_MENU_SUB_CONTEXT,
       useFactory: (): ContextMenuSubContext => ({
         open: signal(false),
+        isMouseInSubContent: signal(false),
       }),
     },
   ],

package/src/app/lib/components/ui/date-picker/date-picker.component.ts

@@ -44,6 +44,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '../popover';
     </Popover>
   `,
   host: {
+    'attr.data-slot': '"date-picker"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,