@ng-cn/core 1.0.16 → 1.0.18

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

@@ -25,6 +25,7 @@ let itemIndexCounter = 0;
   selector: 'CommandItem',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"command-item"',
     '[class]': 'computedClass()',
     '[attr.role]': '"option"',
     '[attr.id]': 'itemId',
@@ -92,7 +93,7 @@ export class CommandItem implements OnInit, OnDestroy {
   });
   protected readonly computedClass = computed(() =>
     cn(
-      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[selected]:bg-accent data-[selected]:text-accent-foreground data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
+      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[selected]:bg-accent data-[selected]:text-accent-foreground data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0 [&>lucide-icon]:size-4 [&>lucide-icon]:shrink-0',
       !this.disabled() && 'cursor-pointer hover:bg-accent hover:text-accent-foreground',
       this.class(),
     ),

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

@@ -11,6 +11,7 @@ import { COMMAND_CONTEXT } from './command-context';
   selector: 'CommandList',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"command-list"',
     '[class]': 'computedClass()',
     '[attr.id]': 'context.listId',
     role: 'listbox',

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

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

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

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

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

@@ -63,6 +63,7 @@ const defaultFilterFn: CommandFilterFunction = (
     },
   ],
   host: {
+    'attr.data-slot': '"command"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

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

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"
@@ -38,8 +40,9 @@ import { CONTEXT_MENU_CONTEXT } from './context-menu-context';
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"context-menu-content"',
     class: 'contents',
-    '(document:click)': 'onDocumentClick()',
+    '(document:click)': 'onDocumentClick($event)',
     '(document:keydown.escape)': 'onEscapeKey()',
     '(document:contextmenu)': 'onAnotherContextMenu()',
   },
@@ -47,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);
       }
     });
 
@@ -73,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(),
     ),
   );
@@ -96,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=""])',
         ),
       );
     }
@@ -193,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-item.component.ts

@@ -11,6 +11,7 @@ import { CONTEXT_MENU_CONTEXT } from './context-menu-context';
   selector: 'ContextMenuItem',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"context-menu-item"',
     '[class]': 'computedClass()',
     '[attr.role]': '"menuitem"',
     '[attr.tabindex]': 'disabled() ? -1 : -1',
@@ -37,7 +38,7 @@ export class ContextMenuItem {
 
   protected readonly computedClass = computed(() =>
     cn(
-      'relative flex cursor-default select-none items-center gap-3 rounded-md px-3 py-2.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
+      'relative flex cursor-default select-none items-center gap-3 rounded-md px-3 py-2.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0 [&>lucide-icon]:size-4 [&>lucide-icon]:shrink-0',
       this.inset() && 'pl-8',
       !this.disabled() && 'cursor-pointer hover:bg-accent hover:text-accent-foreground',
       this.class(),

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

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

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

@@ -35,6 +35,7 @@ export const CONTEXT_MENU_RADIO_GROUP_CONTEXT = new InjectionToken<ContextMenuRa
     },
   ],
   host: {
+    'attr.data-slot': '"context-menu-radio-group"',
     '[attr.role]': '"group"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -20,6 +20,7 @@ import { CONTEXT_MENU_RADIO_GROUP_CONTEXT } from './context-menu-radio-group.com
     <ng-content />
   `,
   host: {
+    'attr.data-slot': '"context-menu-radio-item"',
     '[class]': 'computedClass()',
     '[attr.role]': '"menuitemradio"',
     '[attr.aria-checked]': 'isSelected()',

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

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

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

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

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

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

@@ -15,10 +15,16 @@ import { CONTEXT_MENU_SUB_CONTEXT } from './context-menu-sub.component';
     <lucide-icon [img]="ChevronRightIcon" class="ml-auto h-4 w-4" />
   `,
   host: {
+    'attr.data-slot': '"context-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 ContextMenuSubTrigger {
 
   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 focus:text-accent-foreground 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 focus:text-accent-foreground 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,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,10 +28,12 @@ export const CONTEXT_MENU_SUB_CONTEXT = new InjectionToken<ContextMenuSubContext
       provide: CONTEXT_MENU_SUB_CONTEXT,
       useFactory: (): ContextMenuSubContext => ({
         open: signal(false),
+        isMouseInSubContent: signal(false),
       }),
     },
   ],
   host: {
+    'attr.data-slot': '"context-menu-sub"',
     class: 'relative',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -10,6 +10,7 @@ import { CONTEXT_MENU_CONTEXT } from './context-menu-context';
   selector: 'ContextMenuTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"context-menu-trigger"',
     '[attr.tabindex]': '0',
     '(contextmenu)': 'onContextMenu($event)',
     '(keydown)': 'onKeydown($event)',

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

@@ -20,6 +20,7 @@ import { CONTEXT_MENU_CONTEXT, type ContextMenuContextValue } from './context-me
     },
   ],
   host: {
+    'attr.data-slot': '"context-menu"',
     class: 'relative inline-block',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -96,6 +96,7 @@ import {
     </div>
   `,
   host: {
+    'attr.data-slot': '"data-table-content"',
     '[class]': 'computedClass()',
     ngSkipHydration: 'true',
   },

package/src/app/lib/components/ui/data-table/data-table-pagination.component.ts

@@ -74,6 +74,7 @@ import { DATA_TABLE_CONTEXT } from './data-table-context';
     </div>
   `,
   host: {
+    'attr.data-slot': '"data-table-pagination"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/data-table/data-table-search.component.ts

@@ -16,6 +16,7 @@ import { DATA_TABLE_CONTEXT } from './data-table-context';
     />
   `,
   host: {
+    'attr.data-slot': '"data-table-search"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/data-table/data-table-toolbar.component.ts

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

package/src/app/lib/components/ui/data-table/data-table-view-options.component.ts

@@ -42,6 +42,7 @@ import { DATA_TABLE_CONTEXT } from './data-table-context';
     </div>
   `,
   host: {
+    'attr.data-slot': '"data-table-view-options"',
     '[class]': 'computedClass()',
     '(document:click)': 'onDocumentClick($event)',
   },

package/src/app/lib/components/ui/data-table/data-table.component.ts

@@ -36,7 +36,7 @@ import {
   template: `<ng-content />`,
   host: {
     '[class]': 'computedClass()',
-    'data-slot': 'data-table',
+    'attr.data-slot': '"data-table"',
     ngSkipHydration: 'true',
   },
   providers: [

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,

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

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

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,
@@ -16,15 +16,23 @@ import { DIALOG_CONTEXT } from './dialog-context';
 /**
  * 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 (context.isOpen()) {
+    <Presence [present]="context.isOpen()">
       <!-- Overlay -->
       <div
-        class="fixed inset-0 z-50 bg-black/80"
+        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"
+        [attr.data-state]="context.isOpen() ? 'open' : 'closed'"
         (click)="onOverlayClick($event)"
         aria-hidden="true"
       ></div>
@@ -33,9 +41,10 @@ import { DIALOG_CONTEXT } from './dialog-context';
         hlmFocusTrap
         [trapFocus]="context.isOpen()"
         [autoFocus]="true"
-        [restoreFocus]="true"
+        [restoreFocus]="false"
         [initialFocus]="initialFocus()"
         [class]="computedClass()"
+        [attr.data-state]="context.isOpen() ? 'open' : 'closed'"
         [attr.id]="context.contentId"
         [attr.aria-labelledby]="context.titleId"
         [attr.aria-describedby]="context.descriptionId"
@@ -43,7 +52,6 @@ import { DIALOG_CONTEXT } from './dialog-context';
         aria-modal="true"
       >
         <ng-content />
-        <!-- Close button -->
         @if (showClose()) {
           <button
             type="button"
@@ -71,44 +79,44 @@ import { DIALOG_CONTEXT } from './dialog-context';
           </button>
         }
       </div>
-    }
+    </Presence>
   `,
   host: {
+    'attr.data-slot': '"dialog-content"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DialogContent {
   constructor() {
-    // Handle body scroll lock based on open state
+    let wasOpen = false;
+
     effect(() => {
       const isOpen = this.context.isOpen();
-
-      // Force change detection since context.isOpen() might update outside of this component's hierarchy
-      // and we are using OnPush
       this._cdr.markForCheck();
 
       if (isOpen) {
+        wasOpen = true;
         this.lockBodyScroll();
       } else {
         this.unlockBodyScroll();
+        // Restore focus on any close path (overlay click, close button, Escape, programmatic)
+        if (wasOpen) {
+          this.restoreFocus();
+        }
+        wasOpen = false;
       }
     });
 
-    // Cleanup on destroy
     this._destroyRef.onDestroy(() => {
       this.unlockBodyScroll();
       this.restoreFocus();
     });
   }
 
-  /** Additional CSS classes */
   readonly class = input<string>('');
-  /** Whether to show close button */
   readonly showClose = input<boolean>(true);
-  /** Aria label for close button */
   readonly ariaCloselabel = input<string>('Close dialog');
-  /** Selector for initial focus element */
   readonly initialFocus = input<string | undefined>(undefined);
 
   private readonly _destroyRef = inject(DestroyRef);
@@ -129,8 +137,8 @@ export class DialogContent {
     ),
   );
 
-  /** Previous body overflow for restoration */
   private previousBodyOverflow = '';
+  private previousBodyPaddingRight = '';
 
   @HostListener('document:keydown.escape')
   onEscapeKey(): void {
@@ -148,25 +156,28 @@ 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 {
     const triggerEl = this.context.getTriggerElement();
     if (triggerEl) {
-      setTimeout(() => {
-        triggerEl.focus();
-      }, 0);
+      setTimeout(() => triggerEl.focus(), 0);
     }
   }
 }

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

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

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

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

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

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

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

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

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

@@ -9,6 +9,7 @@ import { DIALOG_CONTEXT } from './dialog-context';
   selector: 'DialogTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"dialog-trigger"',
     '(click)': 'onClick($event)',
     '[attr.aria-haspopup]': '"dialog"',
     '[attr.aria-expanded]': 'context.isOpen()',