@ng-cn/core 1.0.16 → 1.0.18

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

@@ -39,6 +39,7 @@ import { DIALOG_CONTEXT, type DialogContextValue } from './dialog-context';
     },
   ],
   host: {
+    'attr.data-slot': '"dialog"',
     style: 'display: contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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-close.component.ts

@@ -9,6 +9,7 @@ import { DRAWER_CONTEXT } from './drawer-context';
   selector: 'DrawerClose',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"drawer-close"',
     '(click)': 'onClick($event)',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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>
@@ -52,6 +57,7 @@ import { DRAWER_CONTEXT } from './drawer-context';
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"drawer-content"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -104,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 = '';
 
@@ -118,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/drawer/drawer-description.component.ts

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

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

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

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

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

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

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

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

@@ -9,6 +9,7 @@ import { DRAWER_CONTEXT } from './drawer-context';
   selector: 'DrawerTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"drawer-trigger"',
     '(click)': 'onClick($event)',
     '[attr.aria-controls]': 'context.contentId',
     '[attr.aria-expanded]': 'context.open()',

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

@@ -37,6 +37,10 @@ import { DRAWER_CONTEXT, type DrawerContextValue } from './drawer-context';
 @Component({
   selector: 'Drawer',
   template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"drawer"',
+    style: 'display: contents',
+  },
   providers: [
     {
       provide: DRAWER_CONTEXT,

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

@@ -27,6 +27,7 @@ import { DROPDOWN_MENU_CONTEXT } from './dropdown-menu-context';
     <ng-content />
   `,
   host: {
+    'attr.data-slot': '"dropdown-menu-checkbox-item"',
     '[class]': 'computedClass()',
     '[attr.role]': '"menuitemcheckbox"',
     '[attr.aria-checked]': 'checked()',

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

@@ -42,6 +42,7 @@ import { DROPDOWN_MENU_CONTEXT } from './dropdown-menu-context';
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"dropdown-menu-content"',
     class: 'contents',
     '(document:click)': 'onDocumentClick($event)',
     '(document:keydown.escape)': 'onEscapeKey()',
@@ -110,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);
 
@@ -197,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-group.component.ts

@@ -8,6 +8,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   selector: 'DropdownMenuGroup',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"dropdown-menu-group"',
     '[attr.role]': '"group"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -10,6 +10,7 @@ import { DROPDOWN_MENU_CONTEXT } from './dropdown-menu-context';
   selector: 'DropdownMenuItem',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"dropdown-menu-item"',
     '[class]': 'computedClass()',
     '[attr.role]': '"menuitem"',
     '[attr.tabindex]': 'disabled() ? -1 : 0',

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

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

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

@@ -37,6 +37,7 @@ export const DROPDOWN_MENU_RADIO_GROUP_CONTEXT = new InjectionToken<DropdownMenu
     },
   ],
   host: {
+    'attr.data-slot': '"dropdown-menu-radio-group"',
     '[attr.role]': '"group"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -20,6 +20,7 @@ import { DROPDOWN_MENU_RADIO_GROUP_CONTEXT } from './dropdown-menu-radio-group.c
     <ng-content />
   `,
   host: {
+    'attr.data-slot': '"dropdown-menu-radio-item"',
     '[class]': 'computedClass()',
     '[attr.role]': '"menuitemradio"',
     '[attr.aria-checked]': 'isSelected()',
@@ -66,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-separator.component.ts

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'DropdownMenuSeparator',
   template: ``,
   host: {
+    'attr.data-slot': '"dropdown-menu-separator"',
     '[class]': 'computedClass()',
     '[attr.role]': '"separator"',
   },

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

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

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

@@ -21,6 +21,7 @@ import { DROPDOWN_MENU_SUB_CONTEXT } from './dropdown-menu-sub.component';
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"dropdown-menu-sub-content"',
     class: 'contents',
     '(mouseenter)': 'onMouseEnter()',
     '(mouseleave)': 'onMouseLeave()',
@@ -42,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

@@ -15,10 +15,16 @@ import { DROPDOWN_MENU_SUB_CONTEXT } from './dropdown-menu-sub.component';
     <lucide-icon [img]="ChevronRightIcon" class="ml-auto h-4 w-4" />
   `,
   host: {
+    'attr.data-slot': '"dropdown-menu-sub-trigger"',
     '[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,
 })
@@ -33,7 +39,7 @@ export class DropdownMenuSubTrigger {
 
   protected readonly computedClass = computed(() =>
     cn(
-      'flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&>svg]:size-4 [&>svg]:shrink-0',
+      'flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&>svg]:size-4 [&>svg]:shrink-0 [&>lucide-icon]:size-4 [&>lucide-icon]:shrink-0',
       this.inset() && 'pl-8',
       this.class(),
     ),
@@ -45,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,10 +28,12 @@ export const DROPDOWN_MENU_SUB_CONTEXT = new InjectionToken<DropdownMenuSubConte
       provide: DROPDOWN_MENU_SUB_CONTEXT,
       useFactory: (): DropdownMenuSubContext => ({
         open: signal(false),
+        isMouseInSubContent: signal(false),
       }),
     },
   ],
   host: {
+    'attr.data-slot': '"dropdown-menu-sub"',
     class: 'relative',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -9,6 +9,7 @@ import { DROPDOWN_MENU_CONTEXT } from './dropdown-menu-context';
   selector: 'DropdownMenuTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"dropdown-menu-trigger"',
     class: 'cursor-pointer',
     '(click)': 'toggle()',
     '(keydown)': 'onKeyDown($event)',
@@ -35,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/dropdown-menu/dropdown-menu.component.ts

@@ -25,6 +25,7 @@ import { DROPDOWN_MENU_CONTEXT, type DropdownMenuContextValue } from './dropdown
     },
   ],
   host: {
+    'attr.data-slot': '"dropdown-menu"',
     class: 'relative inline-block',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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()),
   );
 }