@ng-cn/core 1.0.17 → 1.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-cn/core",
-  "version": "1.0.17",
+  "version": "1.0.20",
   "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') {
+    if (typeof window !== 'undefined' && 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

@@ -4,6 +4,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
+  ElementRef,
   inject,
   input,
   model,
@@ -26,8 +27,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">
@@ -47,6 +52,7 @@ import { buttonVariants } from '../button';
                 type="button"
                 [class]="navButtonClass()"
                 (click)="previousMonth()"
+                [disabled]="isPrevMonthDisabled()"
                 [attr.aria-label]="'Go to previous month, ' + getPreviousMonthLabel()"
               >
                 <lucide-icon [img]="ChevronLeftIcon" class="h-4 w-4" aria-hidden="true" />
@@ -55,6 +61,7 @@ import { buttonVariants } from '../button';
                 type="button"
                 [class]="navButtonClass()"
                 (click)="nextMonth()"
+                [disabled]="isNextMonthDisabled()"
                 [attr.aria-label]="'Go to next month, ' + getNextMonthLabel()"
               >
                 <lucide-icon [img]="ChevronRightIcon" class="h-4 w-4" aria-hidden="true" />
@@ -94,6 +101,7 @@ import { buttonVariants } from '../button';
                       <button
                         type="button"
                         [class]="getDayClass(day)"
+                        [attr.data-date]="day.date.getFullYear() + '-' + day.date.getMonth() + '-' + day.date.getDate()"
                         [attr.aria-label]="getDateLabel(day.date)"
                         [attr.aria-selected]="isSelected(day.date) ? 'true' : null"
                         [attr.aria-current]="isToday(day.date) ? 'date' : null"
@@ -134,12 +142,19 @@ export class Calendar {
   readonly showOutsideDays = input<boolean>(true);
   /** Disabled dates function */
   readonly disabled = input<((date: Date) => boolean) | undefined>(undefined);
+  /** Minimum selectable date — dates before this are disabled, navigation before this month is blocked */
+  readonly minDate = input<Date | undefined>(undefined);
+  /** Maximum selectable date — dates after this are disabled, navigation after this month is blocked */
+  readonly maxDate = input<Date | undefined>(undefined);
+  /** Locale for date formatting (e.g. 'en-US', 'fr-FR') */
+  readonly locale = input<string>('en-US');
   /** Accessible label for the calendar */
   readonly ariaLabel = input<string>('Calendar');
   /** Additional CSS classes */
   readonly class = input<string>('');
 
   private readonly _liveAnnouncer = inject(LiveAnnouncerService);
+  private readonly _elementRef = inject(ElementRef);
 
   protected readonly computedClass = computed(() => cn('w-full p-3', this.class()));
   protected readonly navButtonClass = computed(() =>
@@ -148,9 +163,25 @@ export class Calendar {
       'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 hover:bg-gray-100 dark:hover:bg-neutral-800',
     ),
   );
+  /** True when navigating to the previous month would go before minDate */
+  protected readonly isPrevMonthDisabled = computed(() => {
+    const min = this.minDate();
+    if (!min) return false;
+    const current = this.currentMonth();
+    const prevMonthEnd = new Date(current.getFullYear(), current.getMonth(), 0);
+    return prevMonthEnd < new Date(min.getFullYear(), min.getMonth(), 1);
+  });
+  /** True when navigating to the next month would go after maxDate */
+  protected readonly isNextMonthDisabled = computed(() => {
+    const max = this.maxDate();
+    if (!max) return false;
+    const current = this.currentMonth();
+    const nextMonthStart = new Date(current.getFullYear(), current.getMonth() + 1, 1);
+    return nextMonthStart > new Date(max.getFullYear(), max.getMonth() + 1, 0);
+  });
   protected readonly monthYear = computed(() => {
     const date = this.currentMonth();
-    return date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+    return date.toLocaleDateString(this.locale(), { month: 'long', year: 'numeric' });
   });
   protected readonly calendarWeeks = computed(() => {
     const date = this.currentMonth();
@@ -184,7 +215,12 @@ export class Calendar {
         const dayDate = new Date(current);
         const isOutside = dayDate.getMonth() !== month;
         const disabledFn = this.disabled();
-        const isDisabled = disabledFn ? disabledFn(dayDate) : false;
+        const min = this.minDate();
+        const max = this.maxDate();
+        const isDisabled =
+          (disabledFn ? disabledFn(dayDate) : false) ||
+          (min != null && this.isBeforeDay(dayDate, min)) ||
+          (max != null && this.isAfterDay(dayDate, max));
 
         week.push({
           date: dayDate,
@@ -224,7 +260,7 @@ export class Calendar {
       day: 'numeric',
       year: 'numeric',
     };
-    const label = date.toLocaleDateString('en-US', options);
+    const label = date.toLocaleDateString(this.locale(), options);
 
     if (this.isToday(date)) {
       return `${label}, today`;
@@ -242,13 +278,13 @@ export class Calendar {
   protected getPreviousMonthLabel(): string {
     const current = this.currentMonth();
     const prev = new Date(current.getFullYear(), current.getMonth() - 1, 1);
-    return prev.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+    return prev.toLocaleDateString(this.locale(), { month: 'long', year: 'numeric' });
   }
   /** Get label for next month button */
   protected getNextMonthLabel(): string {
     const current = this.currentMonth();
     const next = new Date(current.getFullYear(), current.getMonth() + 1, 1);
-    return next.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+    return next.toLocaleDateString(this.locale(), { month: 'long', year: 'numeric' });
   }
   /** Get tabindex for day button (roving tabindex) */
   protected getDayTabIndex(day: { date: Date; isOutside: boolean; disabled: boolean }): number {
@@ -298,13 +334,21 @@ export class Calendar {
       if (newDate.getMonth() !== this.currentMonth().getMonth()) {
         this.currentMonth.set(new Date(newDate.getFullYear(), newDate.getMonth(), 1));
       }
-      // Focus the new date after DOM update
-      setTimeout(() => {
-        const button = document.querySelector(
-          `[aria-label*="${newDate!.getDate()},"]`,
-        ) as HTMLElement;
-        button?.focus();
-      }, 0);
+      // Focus the new date after DOM update (browser only)
+      if (typeof document !== 'undefined') {
+        const targetDate = newDate;
+        setTimeout(() => {
+          const root: HTMLElement = this._elementRef.nativeElement;
+          const buttons = root.querySelectorAll<HTMLElement>('button[data-date]');
+          const targetStr = `${targetDate.getFullYear()}-${targetDate.getMonth()}-${targetDate.getDate()}`;
+          for (const btn of Array.from(buttons)) {
+            if (btn.dataset['date'] === targetStr) {
+              btn.focus();
+              break;
+            }
+          }
+        }, 0);
+      }
     }
   }
   protected getDayClass(day: { date: Date; isOutside: boolean; disabled: boolean }): string {
@@ -353,4 +397,17 @@ export class Calendar {
       date1.getDate() === date2.getDate()
     );
   }
+  private isBeforeDay(date: Date, ref: Date): boolean {
+    if (date.getFullYear() !== ref.getFullYear()) return date.getFullYear() < ref.getFullYear();
+    if (date.getMonth() !== ref.getMonth()) return date.getMonth() < ref.getMonth();
+    return date.getDate() < ref.getDate();
+  }
+  private isAfterDay(date: Date, ref: Date): boolean {
+    if (date.getFullYear() !== ref.getFullYear()) return date.getFullYear() > ref.getFullYear();
+    if (date.getMonth() !== ref.getMonth()) return date.getMonth() > ref.getMonth();
+    return date.getDate() > ref.getDate();
+  }
+
+  // TODO: range and multiple modes - requires multi-select state
 }
+

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,23 @@ export class ContextMenuContent implements OnDestroy {
     }
   }
 
+  private clampPosition(): void {
+    if (typeof window === 'undefined') return;
+    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 +222,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();