@ng-cn/core 1.0.17 → 1.0.20

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

@@ -0,0 +1,30 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * ItemHeader component - full-width header row inside an Item.
+ *
+ * @example
+ * <Item>
+ *   <ItemHeader>Header content</ItemHeader>
+ *   <ItemContent>...</ItemContent>
+ * </Item>
+ */
+@Component({
+  selector: 'ItemHeader',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"item-header"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItemHeader {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('flex basis-full items-center justify-between gap-2', this.class()),
+  );
+}

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

@@ -0,0 +1,63 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+/**
+ * ItemMedia variants using class-variance-authority.
+ * Matches shadcn/ui React item-media exactly.
+ */
+export const itemMediaVariants = cva(
+  'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+        image: 'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export type ItemMediaVariants = VariantProps<typeof itemMediaVariants>;
+export type ItemMediaVariant = 'default' | 'icon' | 'image';
+
+/**
+ * ItemMedia component - leading media (icon, image or avatar) for an Item.
+ *
+ * @example
+ * <!-- Icon -->
+ * <ItemMedia variant="icon">
+ *   <lucide-icon [img]="Music" />
+ * </ItemMedia>
+ *
+ * <!-- Image -->
+ * <ItemMedia variant="image">
+ *   <img src="..." alt="..." />
+ * </ItemMedia>
+ */
+@Component({
+  selector: 'ItemMedia',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"item-media"',
+    '[attr.data-variant]': 'variant()',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItemMedia {
+  /** The visual style variant of the media container */
+  readonly variant = input<ItemMediaVariant>('default');
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles, variants and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(itemMediaVariants({ variant: this.variant() }), this.class()),
+  );
+}

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

@@ -0,0 +1,33 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * ItemSeparator component - horizontal divider between items in an ItemGroup.
+ *
+ * @example
+ * <ItemGroup>
+ *   <Item>...</Item>
+ *   <ItemSeparator />
+ *   <Item>...</Item>
+ * </ItemGroup>
+ */
+@Component({
+  selector: 'ItemSeparator',
+  template: ``,
+  host: {
+    'attr.data-slot': '"item-separator"',
+    role: 'none',
+    'attr.data-orientation': '"horizontal"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItemSeparator {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('bg-border shrink-0 h-px w-full my-0', this.class()),
+  );
+}

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

@@ -0,0 +1,27 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * ItemTitle component - title text for an Item.
+ *
+ * @example
+ * <ItemTitle>Basic Item</ItemTitle>
+ */
+@Component({
+  selector: 'ItemTitle',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"item-title"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItemTitle {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium', this.class()),
+  );
+}

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

@@ -0,0 +1,77 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+/**
+ * Item variants using class-variance-authority.
+ * Matches shadcn/ui React item exactly.
+ */
+export const itemVariants = cva(
+  'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border-border',
+        muted: 'bg-muted/50',
+      },
+      size: {
+        default: 'p-4 gap-4',
+        sm: 'py-3 px-4 gap-2.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export type ItemVariants = VariantProps<typeof itemVariants>;
+export type ItemVariant = 'default' | 'outline' | 'muted';
+export type ItemSize = 'default' | 'sm';
+
+/**
+ * Item component - a flexible row for displaying content with
+ * media, title, description and actions.
+ *
+ * @example
+ * <Item variant="outline">
+ *   <ItemMedia variant="icon">
+ *     <lucide-icon [img]="User" />
+ *   </ItemMedia>
+ *   <ItemContent>
+ *     <ItemTitle>Profile</ItemTitle>
+ *     <ItemDescription>Manage your profile settings.</ItemDescription>
+ *   </ItemContent>
+ *   <ItemActions>
+ *     <Button size="sm">Edit</Button>
+ *   </ItemActions>
+ * </Item>
+ */
+@Component({
+  selector: 'Item',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"item"',
+    '[attr.data-variant]': 'variant()',
+    '[attr.data-size]': 'size()',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Item {
+  /** The visual style variant of the item */
+  readonly variant = input<ItemVariant>('default');
+
+  /** The size of the item */
+  readonly size = input<ItemSize>('default');
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles, variants and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(itemVariants({ variant: this.variant(), size: this.size() }), this.class()),
+  );
+}

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

@@ -114,7 +114,7 @@ export class MenubarContent implements OnDestroy {
     if (content) {
       this.menuItems = Array.from(
         content.querySelectorAll(
-          '[role="menuitem"]:not([aria-disabled="true"]):not([data-disabled])',
+          '[role="menuitem"]:not([data-disabled=""]), [role="menuitemcheckbox"]:not([data-disabled=""]), [role="menuitemradio"]:not([data-disabled=""])',
         ),
       );
     }

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

@@ -18,7 +18,13 @@ import { NAVIGATION_MENU_CONTEXT, NAVIGATION_MENU_ITEM_CONTEXT } from './navigat
   imports: [Presence],
   template: `
     <Presence [present]="itemContext.open()">
-      <div [class]="computedClass()" [attr.data-state]="itemContext.open() ? 'open' : 'closed'">
+      <div
+        [class]="computedClass()"
+        [attr.id]="itemContext.contentId"
+        [attr.data-state]="itemContext.open() ? 'open' : 'closed'"
+        [attr.aria-labelledby]="itemContext.triggerId"
+        role="region"
+      >
         <ng-content />
       </div>
     </Presence>

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

@@ -22,6 +22,16 @@ export interface NavigationMenuContextValue {
   activeItem: WritableSignal<string | null>;
   /** Layout orientation of the menu */
   orientation: WritableSignal<NavigationMenuOrientation>;
+  /** Ordered list of registered trigger element IDs */
+  triggerIds: WritableSignal<string[]>;
+  /** Register a trigger ID (called by NavigationMenuTrigger on init) */
+  registerTrigger: (triggerId: string) => void;
+  /** Unregister a trigger ID (called by NavigationMenuTrigger on destroy) */
+  unregisterTrigger: (triggerId: string) => void;
+  /** Move DOM focus to the next trigger in document order */
+  focusNextTrigger: (currentTriggerId: string) => void;
+  /** Move DOM focus to the previous trigger in document order */
+  focusPreviousTrigger: (currentTriggerId: string) => void;
 }
 
 export const NAVIGATION_MENU_CONTEXT = new InjectionToken<NavigationMenuContextValue>(
@@ -38,6 +48,10 @@ export const NAVIGATION_MENU_CONTEXT = new InjectionToken<NavigationMenuContextV
 export interface NavigationMenuItemContextValue {
   /** Unique identifier for this item */
   itemId: string;
+  /** DOM id for the trigger element (used for aria-controls / aria-labelledby) */
+  triggerId: string;
+  /** DOM id for the content element (used for aria-controls) */
+  contentId: string;
   /** Whether this item's content is open */
   open: WritableSignal<boolean>;
 }

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

@@ -17,10 +17,15 @@ let itemIdCounter = 0;
   providers: [
     {
       provide: NAVIGATION_MENU_ITEM_CONTEXT,
-      useFactory: (): NavigationMenuItemContextValue => ({
-        itemId: `nav-item-${itemIdCounter++}`,
-        open: signal(false),
-      }),
+      useFactory: (): NavigationMenuItemContextValue => {
+        const id = itemIdCounter++;
+        return {
+          itemId: `nav-item-${id}`,
+          triggerId: `nav-trigger-${id}`,
+          contentId: `nav-content-${id}`,
+          open: signal(false),
+        };
+      },
     },
   ],
   host: {

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

@@ -1,5 +1,13 @@
 import { cn } from '@/lib/utils';
-import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
 import { ChevronDown, LucideAngularModule } from 'lucide-angular';
 import { NAVIGATION_MENU_CONTEXT, NAVIGATION_MENU_ITEM_CONTEXT } from './navigation-menu-context';
 import { navigationMenuTriggerStyle } from './navigation-menu-trigger-style';
@@ -22,13 +30,19 @@ import { navigationMenuTriggerStyle } from './navigation-menu-trigger-style';
   host: {
     'attr.data-slot': '"navigation-menu-trigger"',
     '[class]': 'computedClass()',
+    '[attr.id]': 'itemContext.triggerId',
     '[attr.data-state]': 'itemContext.open() ? "open" : "closed"',
+    '[attr.role]': '"button"',
+    '[attr.aria-expanded]': 'itemContext.open()',
+    '[attr.aria-haspopup]': '"menu"',
+    '[attr.aria-controls]': 'itemContext.contentId',
     '(click)': 'toggle()',
     '(mouseenter)': 'onMouseEnter()',
+    '(keydown)': 'onKeyDown($event)',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NavigationMenuTrigger {
+export class NavigationMenuTrigger implements OnInit, OnDestroy {
   /** Additional CSS classes */
   readonly class = input<string>('');
 
@@ -41,6 +55,14 @@ export class NavigationMenuTrigger {
 
   protected readonly ChevronDownIcon = ChevronDown;
 
+  ngOnInit(): void {
+    this.context.registerTrigger(this.itemContext.triggerId);
+  }
+
+  ngOnDestroy(): void {
+    this.context.unregisterTrigger(this.itemContext.triggerId);
+  }
+
   protected toggle(): void {
     this.itemContext.open.update((v) => !v);
     if (this.itemContext.open()) {
@@ -49,6 +71,7 @@ export class NavigationMenuTrigger {
       this.context.activeItem.set(null);
     }
   }
+
   protected onMouseEnter(): void {
     const activeItem = this.context.activeItem();
     if (activeItem && activeItem !== this.itemContext.itemId) {
@@ -56,4 +79,48 @@ export class NavigationMenuTrigger {
       this.itemContext.open.set(true);
     }
   }
+
+  protected onKeyDown(event: KeyboardEvent): void {
+    switch (event.key) {
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        this.toggle();
+        if (this.itemContext.open()) {
+          this.focusFirstContentItem();
+        }
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        if (!this.itemContext.open()) {
+          this.itemContext.open.set(true);
+          this.context.activeItem.set(this.itemContext.itemId);
+        }
+        this.focusFirstContentItem();
+        break;
+      case 'ArrowRight':
+        event.preventDefault();
+        this.context.focusNextTrigger(this.itemContext.triggerId);
+        break;
+      case 'ArrowLeft':
+        event.preventDefault();
+        this.context.focusPreviousTrigger(this.itemContext.triggerId);
+        break;
+      case 'Escape':
+        if (this.itemContext.open()) {
+          this.itemContext.open.set(false);
+          this.context.activeItem.set(null);
+          document.getElementById(this.itemContext.triggerId)?.focus();
+        }
+        break;
+    }
+  }
+
+  private focusFirstContentItem(): void {
+    setTimeout(() => {
+      const content = document.getElementById(this.itemContext.contentId);
+      const focusable = content?.querySelector<HTMLElement>('a, button, [tabindex]');
+      focusable?.focus();
+    }, 10);
+  }
 }

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

@@ -7,6 +7,37 @@ import {
 } from './navigation-menu-context';
 import { NavigationMenuViewport } from './navigation-menu-viewport.component';
 
+function createNavigationMenuContext(): NavigationMenuContextValue {
+  const triggerIds = signal<string[]>([]);
+  return {
+    activeItem: signal(null),
+    orientation: signal('horizontal'),
+    triggerIds,
+    registerTrigger: (triggerId: string) => {
+      triggerIds.update((ids) => [...ids, triggerId]);
+    },
+    unregisterTrigger: (triggerId: string) => {
+      triggerIds.update((ids) => ids.filter((id) => id !== triggerId));
+    },
+    focusNextTrigger: (currentTriggerId: string) => {
+      const ids = triggerIds();
+      const idx = ids.indexOf(currentTriggerId);
+      const nextId = idx < ids.length - 1 ? ids[idx + 1] : ids[0];
+      if (nextId) {
+        document.getElementById(nextId)?.focus();
+      }
+    },
+    focusPreviousTrigger: (currentTriggerId: string) => {
+      const ids = triggerIds();
+      const idx = ids.indexOf(currentTriggerId);
+      const prevId = idx > 0 ? ids[idx - 1] : ids[ids.length - 1];
+      if (prevId) {
+        document.getElementById(prevId)?.focus();
+      }
+    },
+  };
+}
+
 /**
  * Props for the NavigationMenu component
  */
@@ -121,10 +152,7 @@ export interface NavigationMenuProps {
   providers: [
     {
       provide: NAVIGATION_MENU_CONTEXT,
-      useFactory: (): NavigationMenuContextValue => ({
-        activeItem: signal(null),
-        orientation: signal('horizontal'),
-      }),
+      useFactory: createNavigationMenuContext,
     },
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -29,12 +29,14 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   host: {
     'attr.data-slot': '"pagination"',
     role: 'navigation',
-    '[attr.aria-label]': '"pagination"',
+    '[attr.aria-label]': 'ariaLabel()',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Pagination {
+  /** Accessible label for the navigation landmark */
+  readonly ariaLabel = input<string>('Pagination');
   /** Additional CSS classes */
   readonly class = input<string>('');
 

package/src/app/lib/components/ui/phone-input/index.ts

@@ -0,0 +1 @@
+export { PhoneInput } from './phone-input.component';

package/src/app/lib/components/ui/phone-input/phone-input.component.ts

@@ -0,0 +1,169 @@
+import { cn } from '@/lib/utils';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  signal,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { CountrySelector } from '../country-selector/country-selector.component';
+import { COUNTRIES, type Country, getCountryByCode } from '../country-selector/country-data';
+
+/**
+ * PhoneInput component
+ *
+ * Combines a CountrySelector (dial code) with a number input.
+ * Implements ControlValueAccessor — value is the full phone string (e.g. "+1 555-123-4567").
+ *
+ * @example
+ * ```html
+ * <PhoneInput [(ngModel)]="phone" placeholder="Enter phone number" />
+ * ```
+ */
+@Component({
+  selector: 'PhoneInput',
+  imports: [CountrySelector],
+  template: `
+    <div [class]="containerClass()">
+      <CountrySelector
+        [disabled]="isDisabled()"
+        [class]="'rounded-r-none border-r-0 shrink-0 w-auto min-w-[120px]'"
+        [placeholder]="'Country'"
+        [value]="selectedCountryCode()"
+        (countryChange)="onCountryChange($event)"
+      />
+      <input
+        type="tel"
+        [placeholder]="placeholder()"
+        [disabled]="isDisabled()"
+        [value]="localNumber()"
+        (input)="onNumberInput($event)"
+        (blur)="onTouched()"
+        [class]="inputClass()"
+      />
+    </div>
+  `,
+  host: {
+    'attr.data-slot': '"phone-input"',
+    '[class]': 'hostClass()',
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => PhoneInput),
+      multi: true,
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PhoneInput implements ControlValueAccessor {
+  /** Placeholder for the number input */
+  readonly placeholder = input<string>('Phone number');
+  /** Whether the input is disabled */
+  readonly disabled = input<boolean>(false);
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  /** Internal country code (ISO 2-letter) */
+  protected readonly selectedCountryCode = signal<string>('US');
+  /** Internal local number (without dial code) */
+  protected readonly localNumber = signal<string>('');
+  /** Internal disabled state from CVA */
+  private readonly _isDisabledFromCVA = signal<boolean>(false);
+
+  protected readonly isDisabled = computed(() => this.disabled() || this._isDisabledFromCVA());
+
+  protected readonly hostClass = computed(() => cn('block', this.class()));
+
+  protected readonly containerClass = computed(() =>
+    cn(
+      'flex items-stretch w-full',
+      this.isDisabled() && 'pointer-events-none opacity-50',
+    ),
+  );
+
+  protected readonly inputClass = computed(() =>
+    cn(
+      'flex-1 min-w-0 h-10 rounded-xl rounded-l-none border px-3 py-2 text-sm',
+      'bg-zinc-50 dark:bg-zinc-800/50 border-zinc-300 dark:border-zinc-700/50',
+      'text-zinc-900 dark:text-zinc-50 placeholder:text-zinc-500',
+      'shadow-xs transition-[color,box-shadow] outline-none',
+      'focus-visible:border-primary/30 dark:focus-visible:border-white/30 focus-visible:ring-primary/20 dark:focus-visible:ring-white/20 focus-visible:ring-2',
+      'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+    ),
+  );
+
+  /** ControlValueAccessor callbacks */
+  private onChange: (value: string) => void = () => {};
+  protected onTouched: () => void = () => {};
+
+  writeValue(value: string): void {
+    if (!value) {
+      this.localNumber.set('');
+      return;
+    }
+    // Parse: if value starts with a known dial code, split it
+    const country = getCountryByCode(this.selectedCountryCode());
+    const dialCode = country?.dialCode ?? '';
+    if (dialCode && value.startsWith(dialCode)) {
+      this.localNumber.set(value.slice(dialCode.length).trimStart());
+    } else if (value.startsWith('+')) {
+      // Try to find a matching dial code
+      const matched = this.findCountryByDialCode(value);
+      if (matched) {
+        this.selectedCountryCode.set(matched.code);
+        this.localNumber.set(value.slice(matched.dialCode.length).trimStart());
+      } else {
+        this.localNumber.set(value);
+      }
+    } else {
+      this.localNumber.set(value);
+    }
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._isDisabledFromCVA.set(isDisabled);
+  }
+
+  protected onCountryChange(country: Country): void {
+    this.selectedCountryCode.set(country.code);
+    this.emitValue();
+    this.onTouched();
+  }
+
+  protected onNumberInput(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.localNumber.set(target.value);
+    this.emitValue();
+  }
+
+  private emitValue(): void {
+    const country = getCountryByCode(this.selectedCountryCode());
+    const dialCode = country?.dialCode ?? '';
+    const number = this.localNumber().trim();
+    const fullValue = number ? `${dialCode} ${number}` : dialCode;
+    this.onChange(fullValue);
+  }
+
+  private findCountryByDialCode(phone: string): Country | undefined {
+    let best: Country | undefined;
+    let bestLen = 0;
+    for (const c of COUNTRIES) {
+      if (phone.startsWith(c.dialCode) && c.dialCode.length > bestLen) {
+        best = c;
+        bestLen = c.dialCode.length;
+      }
+    }
+    return best;
+  }
+}

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

@@ -100,6 +100,7 @@ export interface PopoverContentProps {
         [attr.data-align]="computedAlign()"
         [style]="mergedStyles()"
         role="dialog"
+        tabindex="-1"
         [attr.aria-modal]="context.modal() || null"
       >
         <ng-content />
@@ -277,5 +278,15 @@ export class PopoverContent {
       '--radix-popover-content-transform-origin': transformOrigin,
     });
     this.isPositioned.set(true);
+
+    // Move focus into the popover for keyboard accessibility
+    setTimeout(() => {
+      const dialog = this._elementRef.nativeElement.querySelector('[role="dialog"]') as HTMLElement;
+      if (!dialog) return;
+      const firstFocusable = dialog.querySelector<HTMLElement>(
+        'button:not([disabled]):not([data-disabled=""]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+      );
+      (firstFocusable ?? dialog).focus({ preventScroll: true });
+    }, 0);
   }
 }