@ng-cn/core 1.0.17 → 1.0.18

package/src/app/lib/components/ui/dialog/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,22 +10,25 @@ import {
   HostListener,
   inject,
   input,
-  signal,
 } from '@angular/core';
 import { DIALOG_CONTEXT } from './dialog-context';
 
-/** Animation duration in ms — must match Tailwind's duration-200 */
-const EXIT_ANIMATION_MS = 200;
-
 /**
  * DialogContent component - the content of the dialog.
  * Matches shadcn/ui React DialogContent exactly.
+ *
+ * Features:
+ * - Escape key closes the dialog
+ * - Overlay click closes the dialog
+ * - Focus is trapped within the dialog
+ * - Exit animations handled by Presence component (no setTimeout needed)
+ * - Focus restored on any close path (overlay click, close button, Escape, programmatic)
  */
 @Component({
   selector: 'DialogContent',
-  imports: [FocusTrapDirective],
+  imports: [FocusTrapDirective, Presence],
   template: `
-    @if (shouldRender()) {
+    <Presence [present]="context.isOpen()">
       <!-- Overlay -->
       <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"
@@ -38,7 +41,7 @@ const EXIT_ANIMATION_MS = 200;
         hlmFocusTrap
         [trapFocus]="context.isOpen()"
         [autoFocus]="true"
-        [restoreFocus]="true"
+        [restoreFocus]="false"
         [initialFocus]="initialFocus()"
         [class]="computedClass()"
         [attr.data-state]="context.isOpen() ? 'open' : 'closed'"
@@ -76,7 +79,7 @@ const EXIT_ANIMATION_MS = 200;
           </button>
         }
       </div>
-    }
+    </Presence>
   `,
   host: {
     'attr.data-slot': '"dialog-content"',
@@ -86,22 +89,22 @@ const EXIT_ANIMATION_MS = 200;
 })
 export class DialogContent {
   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()) {
-          // Keep DOM alive for the exit animation, then unmount
-          setTimeout(() => {
-            this.shouldRender.set(false);
-            this._cdr.markForCheck();
-          }, EXIT_ANIMATION_MS);
+        // Restore focus on any close path (overlay click, close button, Escape, programmatic)
+        if (wasOpen) {
+          this.restoreFocus();
         }
+        wasOpen = false;
       }
     });
 
@@ -121,8 +124,6 @@ export class DialogContent {
 
   readonly context = inject(DIALOG_CONTEXT);
 
-  protected readonly shouldRender = signal(false);
-
   protected readonly computedClass = computed(() =>
     cn(
       'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background text-foreground p-6 shadow-lg duration-200',
@@ -137,6 +138,7 @@ export class DialogContent {
   );
 
   private previousBodyOverflow = '';
+  private previousBodyPaddingRight = '';
 
   @HostListener('document:keydown.escape')
   onEscapeKey(): void {
@@ -154,17 +156,22 @@ export class DialogContent {
 
   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 {

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

@@ -0,0 +1,9 @@
+import { InjectionToken, signal } from '@angular/core';
+
+export type Direction = 'ltr' | 'rtl';
+
+export interface DirectionContext {
+  dir: ReturnType<typeof signal<Direction>>;
+}
+
+export const DIRECTION_CONTEXT = new InjectionToken<DirectionContext>('DirectionContext');

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

@@ -0,0 +1,48 @@
+import { ChangeDetectionStrategy, Component, effect, forwardRef, input, signal } from '@angular/core';
+import {
+  DIRECTION_CONTEXT,
+  type Direction as DirectionType,
+  type DirectionContext,
+} from './direction-context';
+
+/**
+ * Direction component - provides RTL/LTR direction context to descendants.
+ * Equivalent to Radix UI's DirectionProvider.
+ *
+ * @example
+ * <Direction dir="rtl">
+ *   <!-- All components inside will be RTL -->
+ *   <Select>...</Select>
+ * </Direction>
+ */
+@Component({
+  selector: 'Direction',
+  template: `<ng-content />`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'attr.data-slot': '"direction"',
+    '[attr.dir]': 'dir()',
+    style: 'display: contents',
+  },
+  providers: [
+    {
+      provide: DIRECTION_CONTEXT,
+      useFactory: (component: Direction) => component.context,
+      deps: [forwardRef(() => Direction)],
+    },
+  ],
+})
+export class Direction {
+  /** Text direction */
+  readonly dir = input<DirectionType>('ltr');
+
+  readonly context: DirectionContext = {
+    dir: signal<DirectionType>(this.dir()),
+  };
+
+  constructor() {
+    effect(() => {
+      this.context.dir.set(this.dir());
+    });
+  }
+}

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

@@ -0,0 +1,2 @@
+export { Direction } from './direction.component';
+export { DIRECTION_CONTEXT, type Direction as DirectionType, type DirectionContext } from './direction-context';

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

@@ -11,6 +11,7 @@ import {
   Injector,
   input,
   OnDestroy,
+  signal,
   viewChild,
 } from '@angular/core';
 import { DRAWER_CONTEXT } from './drawer-context';
@@ -35,6 +36,7 @@ import { DRAWER_CONTEXT } from './drawer-context';
       <div
         #contentEl
         [class]="computedClass()"
+        [style]="swipeStyle()"
         [attr.data-state]="context.open() ? 'open' : 'closed'"
         role="dialog"
         aria-modal="true"
@@ -44,6 +46,9 @@ import { DRAWER_CONTEXT } from './drawer-context';
         hlmFocusTrap
         [trapFocus]="context.open()"
         (keydown.escape)="onEscapeKey()"
+        (touchstart)="onTouchStart($event)"
+        (touchmove)="onTouchMove($event)"
+        (touchend)="onTouchEnd()"
       >
         <!-- Handle -->
         <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted"></div>
@@ -105,6 +110,17 @@ export class DrawerContent implements OnDestroy {
     );
   });
 
+  protected readonly swipeDelta = signal(0);
+  private touchStartCoord = 0;
+
+  protected readonly swipeStyle = computed(() => {
+    const delta = this.swipeDelta();
+    if (delta === 0) return '';
+    const dir = this.context.direction;
+    if (dir === 'bottom' || dir === 'top') return { transform: `translateY(${delta}px)` };
+    return { transform: `translateX(${delta}px)` };
+  });
+
   /** Previous body overflow style for restoration */
   private previousBodyOverflow = '';
 
@@ -119,6 +135,34 @@ export class DrawerContent implements OnDestroy {
   onEscapeKey(): void {
     this.context.setOpen(false);
   }
+  onTouchStart(event: TouchEvent): void {
+    const touch = event.touches[0];
+    const dir = this.context.direction;
+    this.touchStartCoord = dir === 'bottom' || dir === 'top' ? touch.clientY : touch.clientX;
+  }
+  onTouchMove(event: TouchEvent): void {
+    const touch = event.touches[0];
+    const dir = this.context.direction;
+    const coord = dir === 'bottom' || dir === 'top' ? touch.clientY : touch.clientX;
+    const rawDelta = coord - this.touchStartCoord;
+    // Only allow dragging in the "away" direction
+    const isAway =
+      (dir === 'bottom' && rawDelta > 0) ||
+      (dir === 'top' && rawDelta < 0) ||
+      (dir === 'right' && rawDelta > 0) ||
+      (dir === 'left' && rawDelta < 0);
+    this.swipeDelta.set(isAway ? rawDelta : 0);
+  }
+  onTouchEnd(): void {
+    const threshold = 80;
+    if (Math.abs(this.swipeDelta()) >= threshold) {
+      this.swipeDelta.set(0);
+      this.context.setOpen(false);
+    } else {
+      this.swipeDelta.set(0);
+    }
+    this.touchStartCoord = 0;
+  }
 
   private focusFirstElement(): void {
     setTimeout(() => {

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

@@ -111,7 +111,7 @@ export class DropdownMenuContent implements OnDestroy {
   /** Additional CSS classes */
   readonly class = input<string>('');
   /** Positioning strategy: 'absolute' stays within parent, 'fixed' escapes overflow containers */
-  readonly strategy = input<'absolute' | 'fixed'>('absolute');
+  readonly strategy = input<'absolute' | 'fixed'>('fixed');
 
   private readonly _elementRef = inject(ElementRef);
 
@@ -198,7 +198,7 @@ export class DropdownMenuContent implements OnDestroy {
     if (content) {
       this.menuItems = Array.from(
         content.querySelectorAll(
-          '[role="menuitem"]:not([aria-disabled="true"]):not([data-disabled])',
+          '[role="menuitem"]:not([aria-disabled="true"]):not([data-disabled=""])',
         ),
       );
     }

package/src/app/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.component.ts

@@ -67,5 +67,6 @@ export class DropdownMenuRadioItem {
     }
     this._radioGroupContext.setValue(this.value());
     this.onSelect.emit();
+    this._context.open.set(false);
   }
 }

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

@@ -43,9 +43,11 @@ export class DropdownMenuSubContent {
   );
 
   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/dropdown-menu/dropdown-menu-sub-trigger.component.ts

@@ -19,7 +19,12 @@ import { DROPDOWN_MENU_SUB_CONTEXT } from './dropdown-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,9 +51,30 @@ export class DropdownMenuSubTrigger {
     this.subContext.open.set(true);
   }
   protected onMouseLeave(): void {
-    // Delay closing to allow mouse to move to sub-content
     setTimeout(() => {
-      // Check if mouse is still outside both trigger and content
+      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('DropdownMenuSub')
+          ?.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/dropdown-menu/dropdown-menu-sub.component.ts

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

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

@@ -36,6 +36,31 @@ export class DropdownMenuTrigger {
         this.context.open.set(true);
         this.context.focusedIndex.set(0);
         break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.context.triggerElement.set(this._elementRef.nativeElement);
+        this.context.open.set(true);
+        // Set focusedIndex to -1 so the content effect opens normally,
+        // then after it renders and focuses the first item we move to last.
+        this.context.focusedIndex.set(-1);
+        setTimeout(() => {
+          // After the content's own setTimeout(0) has run and focused item[0],
+          // query the menu items and focus the last one.
+          const menu = document.querySelector('[data-slot="dropdown-menu-content"] [role="menu"]');
+          if (menu) {
+            const items = Array.from(
+              menu.querySelectorAll<HTMLElement>(
+                '[role="menuitem"]:not([aria-disabled="true"]):not([data-disabled=""])',
+              ),
+            );
+            if (items.length > 0) {
+              const lastIndex = items.length - 1;
+              items[lastIndex].focus();
+              this.context.focusedIndex.set(lastIndex);
+            }
+          }
+        }, 10);
+        break;
       case 'Enter':
       case ' ':
         event.preventDefault();

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

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

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

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

package/src/app/lib/components/ui/empty/empty-icon.component.ts

@@ -8,6 +8,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'EmptyIcon',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"empty-icon"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -19,7 +20,7 @@ export class EmptyIcon {
   /** Computed class combining base styles and custom classes */
   protected readonly computedClass = computed(() =>
     cn(
-      'mx-auto flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground [&>svg]:size-6',
+      'mx-auto flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground [&>svg]:size-6 [&>lucide-icon]:size-6',
       this.class(),
     ),
   );

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

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

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

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

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

@@ -14,7 +14,7 @@ import { FORM_FIELD_CONTEXT } from './form-context';
   host: {
     '[class]': 'computedClass()',
     '[attr.id]': 'fieldContext?.formDescriptionId()',
-    'data-slot': 'form-description',
+    'attr.data-slot': '"form-description"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -26,6 +26,6 @@ export class FormDescription {
 
   /** Computed class combining base styles and custom classes */
   protected readonly computedClass = computed(() =>
-    cn('text-muted-foreground text-[0.8rem]', this.class()),
+    cn('text-muted-foreground text-[length:var(--font-size-description)]', this.class()),
   );
 }