@ng-cn/core 1.0.17 → 1.0.20

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

@@ -43,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

@@ -19,7 +19,12 @@ import { CONTEXT_MENU_SUB_CONTEXT } from './context-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,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,6 +28,7 @@ export const CONTEXT_MENU_SUB_CONTEXT = new InjectionToken<ContextMenuSubContext
       provide: CONTEXT_MENU_SUB_CONTEXT,
       useFactory: (): ContextMenuSubContext => ({
         open: signal(false),
+        isMouseInSubContent: signal(false),
       }),
     },
   ],

package/src/app/lib/components/ui/country-selector/country-data.ts

@@ -0,0 +1,63 @@
+export interface Country {
+  code: string;     // ISO 2-letter code: "US", "GB", "JP"
+  name: string;     // "United States", "United Kingdom"
+  dialCode: string; // "+1", "+44", "+81"
+  flag: string;     // emoji flag: "🇺🇸", "🇬🇧"
+}
+
+export const COUNTRIES: Country[] = [
+  { code: 'US', name: 'United States',        dialCode: '+1',   flag: '🇺🇸' },
+  { code: 'GB', name: 'United Kingdom',       dialCode: '+44',  flag: '🇬🇧' },
+  { code: 'CA', name: 'Canada',               dialCode: '+1',   flag: '🇨🇦' },
+  { code: 'AU', name: 'Australia',            dialCode: '+61',  flag: '🇦🇺' },
+  { code: 'NZ', name: 'New Zealand',          dialCode: '+64',  flag: '🇳🇿' },
+  { code: 'DE', name: 'Germany',              dialCode: '+49',  flag: '🇩🇪' },
+  { code: 'FR', name: 'France',               dialCode: '+33',  flag: '🇫🇷' },
+  { code: 'ES', name: 'Spain',                dialCode: '+34',  flag: '🇪🇸' },
+  { code: 'IT', name: 'Italy',                dialCode: '+39',  flag: '🇮🇹' },
+  { code: 'PT', name: 'Portugal',             dialCode: '+351', flag: '🇵🇹' },
+  { code: 'NL', name: 'Netherlands',          dialCode: '+31',  flag: '🇳🇱' },
+  { code: 'BE', name: 'Belgium',              dialCode: '+32',  flag: '🇧🇪' },
+  { code: 'SE', name: 'Sweden',               dialCode: '+46',  flag: '🇸🇪' },
+  { code: 'NO', name: 'Norway',               dialCode: '+47',  flag: '🇳🇴' },
+  { code: 'DK', name: 'Denmark',              dialCode: '+45',  flag: '🇩🇰' },
+  { code: 'FI', name: 'Finland',              dialCode: '+358', flag: '🇫🇮' },
+  { code: 'CH', name: 'Switzerland',          dialCode: '+41',  flag: '🇨🇭' },
+  { code: 'AT', name: 'Austria',              dialCode: '+43',  flag: '🇦🇹' },
+  { code: 'PL', name: 'Poland',               dialCode: '+48',  flag: '🇵🇱' },
+  { code: 'CZ', name: 'Czech Republic',       dialCode: '+420', flag: '🇨🇿' },
+  { code: 'HU', name: 'Hungary',              dialCode: '+36',  flag: '🇭🇺' },
+  { code: 'RO', name: 'Romania',              dialCode: '+40',  flag: '🇷🇴' },
+  { code: 'GR', name: 'Greece',               dialCode: '+30',  flag: '🇬🇷' },
+  { code: 'JP', name: 'Japan',                dialCode: '+81',  flag: '🇯🇵' },
+  { code: 'CN', name: 'China',                dialCode: '+86',  flag: '🇨🇳' },
+  { code: 'KR', name: 'South Korea',          dialCode: '+82',  flag: '🇰🇷' },
+  { code: 'IN', name: 'India',                dialCode: '+91',  flag: '🇮🇳' },
+  { code: 'PK', name: 'Pakistan',             dialCode: '+92',  flag: '🇵🇰' },
+  { code: 'BD', name: 'Bangladesh',           dialCode: '+880', flag: '🇧🇩' },
+  { code: 'NG', name: 'Nigeria',              dialCode: '+234', flag: '🇳🇬' },
+  { code: 'ZA', name: 'South Africa',         dialCode: '+27',  flag: '🇿🇦' },
+  { code: 'EG', name: 'Egypt',                dialCode: '+20',  flag: '🇪🇬' },
+  { code: 'SA', name: 'Saudi Arabia',         dialCode: '+966', flag: '🇸🇦' },
+  { code: 'AE', name: 'United Arab Emirates', dialCode: '+971', flag: '🇦🇪' },
+  { code: 'TR', name: 'Turkey',               dialCode: '+90',  flag: '🇹🇷' },
+  { code: 'MX', name: 'Mexico',               dialCode: '+52',  flag: '🇲🇽' },
+  { code: 'BR', name: 'Brazil',               dialCode: '+55',  flag: '🇧🇷' },
+  { code: 'AR', name: 'Argentina',            dialCode: '+54',  flag: '🇦🇷' },
+  { code: 'CO', name: 'Colombia',             dialCode: '+57',  flag: '🇨🇴' },
+  { code: 'CL', name: 'Chile',                dialCode: '+56',  flag: '🇨🇱' },
+  { code: 'PE', name: 'Peru',                 dialCode: '+51',  flag: '🇵🇪' },
+  { code: 'VE', name: 'Venezuela',            dialCode: '+58',  flag: '🇻🇪' },
+  { code: 'ID', name: 'Indonesia',            dialCode: '+62',  flag: '🇮🇩' },
+  { code: 'PH', name: 'Philippines',          dialCode: '+63',  flag: '🇵🇭' },
+  { code: 'TH', name: 'Thailand',             dialCode: '+66',  flag: '🇹🇭' },
+  { code: 'VN', name: 'Vietnam',              dialCode: '+84',  flag: '🇻🇳' },
+  { code: 'MY', name: 'Malaysia',             dialCode: '+60',  flag: '🇲🇾' },
+  { code: 'SG', name: 'Singapore',            dialCode: '+65',  flag: '🇸🇬' },
+  { code: 'HK', name: 'Hong Kong',            dialCode: '+852', flag: '🇭🇰' },
+  { code: 'TW', name: 'Taiwan',               dialCode: '+886', flag: '🇹🇼' },
+];
+
+export function getCountryByCode(code: string): Country | undefined {
+  return COUNTRIES.find((c) => c.code === code);
+}

package/src/app/lib/components/ui/country-selector/country-selector.component.ts

@@ -0,0 +1,199 @@
+import { cn } from '@/lib/utils';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  forwardRef,
+  input,
+  output,
+  signal,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Command } from '../command/command.component';
+import { CommandEmpty } from '../command/command-empty.component';
+import { CommandInput } from '../command/command-input.component';
+import { CommandItem } from '../command/command-item.component';
+import { CommandList } from '../command/command-list.component';
+import { Popover } from '../popover/popover.component';
+import { PopoverContent } from '../popover/popover-content.component';
+import { PopoverTrigger } from '../popover/popover-trigger.component';
+import { COUNTRIES, type Country, getCountryByCode } from './country-data';
+
+/**
+ * CountrySelector component
+ *
+ * A searchable country dropdown that integrates with Angular Forms via ControlValueAccessor.
+ * The value is the ISO 2-letter country code (e.g. "US").
+ *
+ * @example
+ * ```html
+ * <CountrySelector [(ngModel)]="countryCode" />
+ * <CountrySelector [value]="'US'" (countryChange)="onCountryChange($event)" />
+ * ```
+ */
+@Component({
+  selector: 'CountrySelector',
+  imports: [Popover, PopoverTrigger, PopoverContent, Command, CommandInput, CommandList, CommandItem, CommandEmpty],
+  template: `
+    <Popover>
+      <PopoverTrigger>
+        <button
+          type="button"
+          [disabled]="isDisabled()"
+          [class]="triggerClass()"
+          [attr.aria-label]="selectedCountry() ? selectedCountry()!.name : placeholder()"
+        >
+          @if (selectedCountry()) {
+            <span class="text-base leading-none">{{ selectedCountry()!.flag }}</span>
+            <span class="truncate">{{ selectedCountry()!.name }}</span>
+          } @else {
+            <span class="text-muted-foreground truncate">{{ placeholder() }}</span>
+          }
+          <svg
+            class="ml-auto h-4 w-4 shrink-0 opacity-50"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="m7 15 5 5 5-5" />
+            <path d="m7 9 5-5 5 5" />
+          </svg>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent [matchTriggerWidth]="true" class="p-0">
+        <Command>
+          <CommandInput placeholder="Search country..." />
+          <CommandEmpty>No country found.</CommandEmpty>
+          <CommandList>
+            @for (country of countries; track country.code) {
+              <CommandItem
+                [value]="country.name"
+                [keywords]="[country.code, country.dialCode]"
+                (onSelect)="selectCountry(country)"
+                [class]="country.code === selectedCode() ? 'bg-accent text-accent-foreground' : ''"
+              >
+                <span class="text-base leading-none mr-2">{{ country.flag }}</span>
+                <span class="flex-1">{{ country.name }}</span>
+                <span class="text-muted-foreground text-xs ml-auto">{{ country.dialCode }}</span>
+                @if (country.code === selectedCode()) {
+                  <svg
+                    class="ml-2 h-4 w-4 shrink-0"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                  >
+                    <path d="M20 6 9 17l-5-5" />
+                  </svg>
+                }
+              </CommandItem>
+            }
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  `,
+  host: {
+    'attr.data-slot': '"country-selector"',
+    '[class]': 'hostClass()',
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CountrySelector),
+      multi: true,
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CountrySelector implements ControlValueAccessor {
+  /** Placeholder text shown when no country is selected */
+  readonly placeholder = input<string>('Select country');
+  /** Whether the selector is disabled */
+  readonly disabled = input<boolean>(false);
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+  /**
+   * Direct value binding (ISO 2-letter country code).
+   * Takes precedence when set — syncs to internal state.
+   */
+  readonly value = input<string>('');
+
+  /** Emits the full Country object when selection changes */
+  readonly countryChange = output<Country>();
+
+  /** All available countries */
+  protected readonly countries = COUNTRIES;
+
+  /** Internal selected country code */
+  protected readonly selectedCode = signal<string>('');
+  /** Internal disabled state (from CVA) */
+  private readonly _isDisabledFromCVA = signal<boolean>(false);
+
+  constructor() {
+    // Sync the value input to internal signal
+    effect(() => {
+      const v = this.value();
+      if (v) {
+        this.selectedCode.set(v);
+      }
+    });
+  }
+
+  protected readonly isDisabled = computed(() => this.disabled() || this._isDisabledFromCVA());
+
+  protected readonly selectedCountry = computed(() => {
+    const code = this.selectedCode();
+    return code ? getCountryByCode(code) : undefined;
+  });
+
+  protected readonly hostClass = computed(() => cn('block', this.class()));
+
+  protected readonly triggerClass = computed(() =>
+    cn(
+      'flex h-10 w-full items-center gap-2 rounded-xl border px-3 py-2 text-sm text-left',
+      'bg-zinc-50 dark:bg-zinc-800/50 border-zinc-300 dark:border-zinc-700/50',
+      'text-zinc-900 dark:text-zinc-50',
+      '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 = () => {};
+  private onTouched: () => void = () => {};
+
+  writeValue(value: string): void {
+    this.selectedCode.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 selectCountry(country: Country): void {
+    this.selectedCode.set(country.code);
+    this.onChange(country.code);
+    this.onTouched();
+    this.countryChange.emit(country);
+  }
+}

package/src/app/lib/components/ui/country-selector/index.ts

@@ -0,0 +1,2 @@
+export { CountrySelector } from './country-selector.component';
+export { COUNTRIES, getCountryByCode, type Country } from './country-data';

package/src/app/lib/components/ui/date-picker/date-picker.component.ts

@@ -3,11 +3,14 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
+  forwardRef,
   input,
   model,
   output,
+  signal,
   viewChild,
 } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { CalendarIcon, LucideAngularModule } from 'lucide-angular';
 import { buttonVariants } from '../button';
 import { Calendar } from '../calendar';
@@ -16,6 +19,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 /**
  * DatePicker component - date selection with calendar popover.
  * Matches shadcn/ui React DatePicker exactly.
+ * Implements ControlValueAccessor for Angular Forms integration.
  */
 @Component({
   selector: 'DatePicker',
@@ -38,33 +42,55 @@ import { Popover, PopoverContent, PopoverTrigger } from '../popover';
           [selected]="date()"
           (onSelect)="onDateSelect($event)"
           [disabled]="disabledDates()"
+          [minDate]="minDate()"
+          [maxDate]="maxDate()"
+          [locale]="locale()"
           class="w-full"
         />
       </PopoverContent>
     </Popover>
   `,
   host: {
+    'attr.data-slot': '"date-picker"',
     class: 'contents',
   },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => DatePicker),
+      multi: true,
+    },
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DatePicker {
+export class DatePicker implements ControlValueAccessor {
   private readonly popover = viewChild(Popover);
 
   /** Date select event */
   readonly onSelect = output<Date | undefined>();
 
-  /** Selected date */
+  /** Selected date (model input for two-way binding) */
   readonly date = model<Date | undefined>(undefined);
 
   /** Additional CSS classes */
   readonly class = input<string>('');
   /** Placeholder text */
   readonly placeholder = input<string>('Pick a date');
-  /** Date format */
-  readonly dateFormat = input<string>('PPP');
   /** Disabled dates function */
   readonly disabledDates = input<((date: Date) => boolean) | undefined>(undefined);
+  /** Minimum selectable date — passed to Calendar */
+  readonly minDate = input<Date | undefined>(undefined);
+  /** Maximum selectable date — passed to Calendar */
+  readonly maxDate = input<Date | undefined>(undefined);
+  /** Locale used for date formatting (e.g. 'en-US', 'fr-FR') */
+  readonly locale = input<string>('en-US');
+
+  /** Internal disabled state set by ControlValueAccessor */
+  protected readonly isDisabled = signal<boolean>(false);
+
+  /** ControlValueAccessor callbacks */
+  private onChange: (value: Date | undefined) => void = () => {};
+  private onTouched: () => void = () => {};
 
   protected readonly computedButtonClass = computed(() =>
     cn(
@@ -73,6 +99,7 @@ export class DatePicker {
       this.popover()?.isOpen() &&
         'border-primary/30 ring-primary/20 ring-2 dark:border-white/30 dark:ring-white/20',
       !this.date() && 'text-muted-foreground',
+      this.isDisabled() && 'pointer-events-none cursor-not-allowed opacity-50',
       this.class(),
     ),
   );
@@ -80,7 +107,7 @@ export class DatePicker {
   protected readonly CalendarIconRef = CalendarIcon;
 
   protected formatDate(date: Date): string {
-    return date.toLocaleDateString('en-US', {
+    return date.toLocaleDateString(this.locale(), {
       year: 'numeric',
       month: 'long',
       day: 'numeric',
@@ -89,6 +116,22 @@ export class DatePicker {
   protected onDateSelect(date: Date | undefined): void {
     this.date.set(date);
     this.onSelect.emit(date);
+    this.onChange(date);
+    this.onTouched();
     this.popover()?.setOpen(false);
   }
+
+  // ControlValueAccessor implementation
+  writeValue(value: Date | undefined): void {
+    this.date.set(value ?? undefined);
+  }
+  registerOnChange(fn: (value: Date | undefined) => void): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+  setDisabledState(isDisabled: boolean): void {
+    this.isDisabled.set(isDisabled);
+  }
 }

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 {
@@ -153,18 +155,23 @@ export class DialogContent {
   }
 
   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 {

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';