@ng-cn/core 1.0.15 → 1.0.17

package/src/app/lib/components/ui/typography/typography-inline-code.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * Typography InlineCode component
@@ -16,6 +11,7 @@ import {
   selector: 'TypographyInlineCode',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"typography-inline-code"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -25,7 +21,7 @@ export class TypographyInlineCode {
   protected readonly computedClass = computed(() =>
     cn(
       'relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/typography/typography-large.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * Typography Large component
@@ -16,13 +11,12 @@ import {
   selector: 'TypographyLarge',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"typography-large"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TypographyLarge {
   readonly class = input<string>('');
-  protected readonly computedClass = computed(() =>
-    cn('text-lg font-semibold', this.class())
-  );
+  protected readonly computedClass = computed(() => cn('text-lg font-semibold', this.class()));
 }

package/src/app/lib/components/ui/typography/typography-lead.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * Typography Lead component - larger intro text
@@ -18,6 +13,7 @@ import {
   selector: 'TypographyLead',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"typography-lead"',
     '[class]': 'computedClass()',
     style: 'display: block',
   },
@@ -26,6 +22,6 @@ import {
 export class TypographyLead {
   readonly class = input<string>('');
   protected readonly computedClass = computed(() =>
-    cn('text-xl text-muted-foreground', this.class())
+    cn('text-xl text-muted-foreground', this.class()),
   );
 }

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

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * Typography List component (unordered list)
@@ -19,6 +14,7 @@ import {
   selector: 'TypographyList',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"typography-list"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -26,6 +22,6 @@ import {
 export class TypographyList {
   readonly class = input<string>('');
   protected readonly computedClass = computed(() =>
-    cn('my-6 ml-6 list-disc [&>li]:mt-2', this.class())
+    cn('my-6 ml-6 list-disc [&>li]:mt-2', this.class()),
   );
 }

package/src/app/lib/components/ui/typography/typography-muted.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * Typography Muted component
@@ -16,6 +11,7 @@ import {
   selector: 'TypographyMuted',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"typography-muted"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -23,6 +19,6 @@ import {
 export class TypographyMuted {
   readonly class = input<string>('');
   protected readonly computedClass = computed(() =>
-    cn('text-sm text-muted-foreground', this.class())
+    cn('text-sm text-muted-foreground', this.class()),
   );
 }

package/src/app/lib/components/ui/typography/typography-p.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * Typography P (paragraph) component
@@ -16,6 +11,7 @@ import {
   selector: 'TypographyP',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"typography-p"',
     '[class]': 'computedClass()',
     style: 'display: block',
   },
@@ -24,6 +20,6 @@ import {
 export class TypographyP {
   readonly class = input<string>('');
   protected readonly computedClass = computed(() =>
-    cn('leading-7 [&:not(:first-child)]:mt-6', this.class())
+    cn('leading-7 [&:not(:first-child)]:mt-6', this.class()),
   );
 }

package/src/app/lib/components/ui/typography/typography-small.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * Typography Small component
@@ -16,6 +11,7 @@ import {
   selector: 'TypographySmall',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"typography-small"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -23,6 +19,6 @@ import {
 export class TypographySmall {
   readonly class = input<string>('');
   protected readonly computedClass = computed(() =>
-    cn('text-sm font-medium leading-none', this.class())
+    cn('text-sm font-medium leading-none', this.class()),
   );
 }

package/src/app/lib/utils/accessibility/click-outside.directive.ts

@@ -1,11 +1,4 @@
-import {
-    Directive,
-    ElementRef,
-    OnDestroy,
-    afterNextRender,
-    inject,
-    output,
-} from '@angular/core';
+import { Directive, ElementRef, OnDestroy, afterNextRender, inject, output } from '@angular/core';
 
 /**
  * Directive that detects clicks outside the host element.

package/src/app/lib/utils/accessibility/focus-management.service.ts

@@ -52,10 +52,7 @@ export class FocusManagementService {
    * @param options - Focus options
    * @returns The element that was focused, or null if none found
    */
-  focusFirstFocusable(
-    container: HTMLElement,
-    options: FocusOptions = {}
-  ): HTMLElement | null {
+  focusFirstFocusable(container: HTMLElement, options: FocusOptions = {}): HTMLElement | null {
     const focusable = this.getFocusableElements(container);
     if (focusable.length > 0) {
       const target = focusable[0];
@@ -71,10 +68,7 @@ export class FocusManagementService {
    * @param options - Focus options
    * @returns The element that was focused, or null if none found
    */
-  focusLastFocusable(
-    container: HTMLElement,
-    options: FocusOptions = {}
-  ): HTMLElement | null {
+  focusLastFocusable(container: HTMLElement, options: FocusOptions = {}): HTMLElement | null {
     const focusable = this.getFocusableElements(container);
     if (focusable.length > 0) {
       const target = focusable[focusable.length - 1];
@@ -124,9 +118,7 @@ export class FocusManagementService {
       'details > summary:first-of-type',
     ].join(', ');
 
-    const elements = Array.from(
-      container.querySelectorAll<HTMLElement>(selector)
-    );
+    const elements = Array.from(container.querySelectorAll<HTMLElement>(selector));
 
     return elements.filter((el) => this.isElementVisible(el));
   }
@@ -195,10 +187,7 @@ export class FocusManagementService {
     let parent = element.parentElement;
     while (parent) {
       const parentStyle = getComputedStyle(parent);
-      if (
-        parentStyle.display === 'none' ||
-        parentStyle.visibility === 'hidden'
-      ) {
+      if (parentStyle.display === 'none' || parentStyle.visibility === 'hidden') {
         return false;
       }
       if (parent.hasAttribute('hidden')) return false;

package/src/app/lib/utils/accessibility/focus-trap.directive.ts

@@ -1,18 +1,11 @@
 import { DOCUMENT } from '@angular/common';
-import {
-  Directive,
-  ElementRef,
-  OnDestroy,
-  OnInit,
-  inject,
-  input,
-  output,
-} from '@angular/core';
+import { Directive, ElementRef, OnDestroy, OnInit, inject, input, output } from '@angular/core';
 import { FocusManagementService } from './focus-management.service';
 
 /**
  * Directive to trap focus within a container element.
  * Essential for modals, dialogs, and other overlay components.
+ * Uses simplified Tab key handling without focus sentinels to prevent infinite loops.
  *
  * @example
  * ```html
@@ -24,8 +17,9 @@ import { FocusManagementService } from './focus-management.service';
  */
 @Directive({
   selector: '[hlmFocusTrap]',
+  standalone: true,
   host: {
-    '(keydown)': 'handleKeydown($event)',
+    '(keydown)': 'onKeydown($event)',
   },
 })
 export class FocusTrapDirective implements OnInit, OnDestroy {
@@ -49,16 +43,12 @@ export class FocusTrapDirective implements OnInit, OnDestroy {
   readonly focusEscaped = output<void>();
 
   private previouslyFocused: HTMLElement | null = null;
-  private focusSentinelStart: HTMLElement | null = null;
-  private focusSentinelEnd: HTMLElement | null = null;
 
   ngOnInit(): void {
     if (this.restoreFocus()) {
       this.previouslyFocused = this.focusManager.saveFocus();
     }
 
-    this.createFocusSentinels();
-
     if (this.autoFocus() && this.trapFocus()) {
       // Delay to ensure DOM is ready
       setTimeout(() => this.setInitialFocus(), 0);
@@ -66,64 +56,61 @@ export class FocusTrapDirective implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.removeFocusSentinels();
-
-    if (this.restoreFocus()) {
+    if (this.restoreFocus() && this.previouslyFocused) {
       this.focusManager.restoreFocus();
     }
   }
 
   /**
-   * Handles keydown events to manage Tab navigation within the trap.
+   * Handles keydown events and filters for Tab key
+   */
+  onKeydown(event: Event): void {
+    const keyEvent = event as KeyboardEvent;
+    if (keyEvent.key === 'Tab') {
+      this.handleTabKey(keyEvent);
+    }
+  }
+
+  /**
+   * Handles Tab key press to manage focus within the trap.
+   * Simplified approach without sentinels to prevent infinite focus loops.
    */
-  handleKeydown(event: KeyboardEvent): void {
-    if (!this.trapFocus() || event.key !== 'Tab') return;
+  private handleTabKey(event: KeyboardEvent): void {
+    if (!this.trapFocus()) return;
 
     const container = this.elementRef.nativeElement;
     const focusable = this.focusManager.getTabbableElements(container);
 
+    // No focusable elements - nothing to trap
     if (focusable.length === 0) {
-      // No focusable elements, prevent tab
       event.preventDefault();
       return;
     }
 
+    const activeElement = this.document.activeElement as HTMLElement;
     const firstFocusable = focusable[0];
     const lastFocusable = focusable[focusable.length - 1];
-    const activeElement = this.document.activeElement as HTMLElement;
+
+    // Check if active element is within the container
+    const isInContainer = container.contains(activeElement);
 
     if (event.shiftKey) {
-      // Shift+Tab: going backward
-      if (activeElement === firstFocusable || !container.contains(activeElement)) {
+      // Shift+Tab: moving backward
+      if (!isInContainer || activeElement === firstFocusable) {
         event.preventDefault();
-        lastFocusable.focus();
+        lastFocusable.focus({ preventScroll: true });
       }
     } else {
-      // Tab: going forward
-      if (activeElement === lastFocusable || !container.contains(activeElement)) {
+      // Tab: moving forward
+      if (!isInContainer || activeElement === lastFocusable) {
         event.preventDefault();
-        firstFocusable.focus();
+        firstFocusable.focus({ preventScroll: true });
       }
     }
   }
 
   /**
-   * Manually focuses the first or specified initial element.
-   */
-  focusFirst(): void {
-    this.setInitialFocus();
-  }
-
-  /**
-   * Manually focuses the last focusable element.
-   */
-  focusLast(): void {
-    const container = this.elementRef.nativeElement;
-    this.focusManager.focusLastFocusable(container);
-  }
-
-  /**
-   * Sets the initial focus based on configuration.
+   * Sets initial focus based on configuration
    */
   private setInitialFocus(): void {
     const container = this.elementRef.nativeElement;
@@ -132,72 +119,11 @@ export class FocusTrapDirective implements OnInit, OnDestroy {
     if (selector) {
       const target = container.querySelector(selector) as HTMLElement | null;
       if (target && this.focusManager.isElementFocusable(target)) {
-        target.focus();
+        target.focus({ preventScroll: true });
         return;
       }
     }
 
     this.focusManager.focusFirstFocusable(container);
   }
-
-  /**
-   * Creates invisible sentinel elements at the start and end of the container.
-   * These catch focus when tabbing out of the trap.
-   */
-  private createFocusSentinels(): void {
-    const container = this.elementRef.nativeElement;
-
-    // Create start sentinel
-    this.focusSentinelStart = this.createSentinel('start');
-    container.insertBefore(this.focusSentinelStart, container.firstChild);
-
-    // Create end sentinel
-    this.focusSentinelEnd = this.createSentinel('end');
-    container.appendChild(this.focusSentinelEnd);
-
-    // Add focus listeners to sentinels
-    this.focusSentinelStart.addEventListener('focus', () => {
-      if (this.trapFocus()) {
-        this.focusManager.focusLastFocusable(container);
-      }
-    });
-
-    this.focusSentinelEnd.addEventListener('focus', () => {
-      if (this.trapFocus()) {
-        this.focusManager.focusFirstFocusable(container);
-      }
-    });
-  }
-
-  /**
-   * Creates a focus sentinel element.
-   */
-  private createSentinel(position: 'start' | 'end'): HTMLElement {
-    const sentinel = this.document.createElement('span');
-    sentinel.setAttribute('tabindex', '0');
-    sentinel.setAttribute('aria-hidden', 'true');
-    sentinel.setAttribute('data-focus-sentinel', position);
-    sentinel.style.cssText = `
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      padding: 0;
-      margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap;
-      border: 0;
-    `;
-    return sentinel;
-  }
-
-  /**
-   * Removes focus sentinel elements.
-   */
-  private removeFocusSentinels(): void {
-    this.focusSentinelStart?.remove();
-    this.focusSentinelEnd?.remove();
-    this.focusSentinelStart = null;
-    this.focusSentinelEnd = null;
-  }
 }

package/src/app/lib/utils/accessibility/index.ts

@@ -2,16 +2,28 @@
 // Provides WCAG AA compliant accessibility infrastructure
 
 // Services
-export { AriaIdService, type AriaAccordionIds, type AriaDialogIds, type AriaMenuIds, type AriaTabIds } from './aria-id.service';
+export {
+  AriaIdService,
+  type AriaAccordionIds,
+  type AriaDialogIds,
+  type AriaMenuIds,
+  type AriaTabIds,
+} from './aria-id.service';
 export { FocusManagementService, type FocusOptions } from './focus-management.service';
-export { LiveAnnouncerService, type Announcement, type AnnouncementPriority } from './live-region.directive';
+export {
+  LiveAnnouncerService,
+  type Announcement,
+  type AnnouncementPriority,
+} from './live-region.directive';
 
 // Directives
 export { ClickOutsideDirective } from './click-outside.directive';
 export { FocusTrapDirective } from './focus-trap.directive';
 export {
-    KeyboardNavigationDirective, type KeyboardNavigationConfig, type NavigationDirection,
-    type NavigationEvent
+  KeyboardNavigationDirective,
+  type KeyboardNavigationConfig,
+  type NavigationDirection,
+  type NavigationEvent,
 } from './keyboard-navigation.directive';
 export { LiveRegionDirective, StatusAnnouncerDirective } from './live-region.directive';
 
@@ -20,4 +32,3 @@ export { VisuallyHidden, VisuallyHiddenInput } from './visually-hidden.component
 
 // Touch Target Utilities
 export { MinTouchTarget, TouchTargetDirective } from './touch-target.directive';
-

package/src/app/lib/utils/accessibility/keyboard-navigation.directive.ts

@@ -87,7 +87,9 @@ export class KeyboardNavigationDirective implements OnInit, OnDestroy {
   readonly moveFocus = input<boolean>(true);
 
   /** CSS selector for navigable items */
-  readonly itemSelector = input<string>('[role="menuitem"], [role="option"], [role="tab"], [role="treeitem"], li, button');
+  readonly itemSelector = input<string>(
+    '[role="menuitem"], [role="option"], [role="tab"], [role="treeitem"], li, button',
+  );
 
   /** Enable typeahead search */
   readonly typeahead = input<boolean>(true);
@@ -127,7 +129,7 @@ export class KeyboardNavigationDirective implements OnInit, OnDestroy {
     const selector = this.itemSelector();
     const elements = Array.from(container.querySelectorAll(selector)) as HTMLElement[];
     return elements.filter(
-      (el) => !el.hasAttribute('disabled') && el.getAttribute('aria-disabled') !== 'true'
+      (el) => !el.hasAttribute('disabled') && el.getAttribute('aria-disabled') !== 'true',
     );
   }
 
@@ -383,12 +385,7 @@ export class KeyboardNavigationDirective implements OnInit, OnDestroy {
    */
   private isTypeaheadKey(event: KeyboardEvent): boolean {
     // Single printable character
-    return (
-      event.key.length === 1 &&
-      !event.ctrlKey &&
-      !event.metaKey &&
-      !event.altKey
-    );
+    return event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
   }
 
   /**

package/src/app/lib/utils/accessibility/live-region.directive.ts

@@ -1,13 +1,13 @@
 import { DOCUMENT } from '@angular/common';
 import {
-    Directive,
-    ElementRef,
-    Injectable,
-    OnDestroy,
-    OnInit,
-    inject,
-    input,
-    signal,
+  Directive,
+  ElementRef,
+  Injectable,
+  OnDestroy,
+  OnInit,
+  inject,
+  input,
+  signal,
 } from '@angular/core';
 
 /**
@@ -47,7 +47,7 @@ export class LiveAnnouncerService implements OnDestroy {
   announce(
     message: string,
     priority: AnnouncementPriority = 'polite',
-    clearAfter: number = 1000
+    clearAfter: number = 1000,
   ): void {
     this.ensureLiveRegions();
 
@@ -67,10 +67,7 @@ export class LiveAnnouncerService implements OnDestroy {
       region.textContent = message;
 
       // Track announcement
-      this.announcements.update((list) => [
-        ...list,
-        { message, priority, timestamp: Date.now() },
-      ]);
+      this.announcements.update((list) => [...list, { message, priority, timestamp: Date.now() }]);
 
       // Clear after delay
       this.clearTimeoutId = setTimeout(() => {

package/src/app/lib/utils/accessibility/touch-target.directive.ts

@@ -1,11 +1,4 @@
-import {
-    Directive,
-    ElementRef,
-    OnInit,
-    Renderer2,
-    inject,
-    input,
-} from '@angular/core';
+import { Directive, ElementRef, OnInit, Renderer2, inject, input } from '@angular/core';
 
 /**
  * TouchTarget directive - expands the clickable/tappable area of an element

package/src/app/lib/utils/animation/animation.utils.ts

@@ -38,7 +38,7 @@ export const ANIMATION_PRESETS = {
  * Manages the 4-state animation lifecycle
  */
 export function createAnimationState(
-  initialState: AnimationState = 'closed'
+  initialState: AnimationState = 'closed',
 ): Signal<AnimationState> {
   return signal<AnimationState>(initialState);
 }
@@ -49,7 +49,7 @@ export function createAnimationState(
 export function getAnimationClasses(
   state: AnimationState,
   direction?: AnimationSide,
-  animate: boolean = true
+  animate: boolean = true,
 ): string {
   if (!animate) return '';
 
@@ -76,10 +76,7 @@ export function getAnimationClasses(
 /**
  * Get slide animation classes based on direction
  */
-export function getSlideAnimationClasses(
-  state: AnimationState,
-  direction: AnimationSide
-): string {
+export function getSlideAnimationClasses(state: AnimationState, direction: AnimationSide): string {
   const baseClasses = ['duration-200'];
 
   const directionMap: Record<AnimationState, Record<AnimationSide, string>> = {
@@ -118,7 +115,7 @@ export function getSlideAnimationClasses(
 export function buildAnimationAttributes(
   state: AnimationState,
   side?: AnimationSide,
-  align?: AnimationAlign
+  align?: AnimationAlign,
 ): Record<string, string | undefined> {
   return {
     'data-state': state,

package/src/app/lib/utils/animation/index.ts

@@ -3,15 +3,25 @@
  * Exports all animation utilities and services
  */
 
-export type { AnimatedElementAttributes, AnimationAlign, AnimationConfig, AnimationSide, AnimationState, PresenceToken } from './animation.types';
+export type {
+  AnimatedElementAttributes,
+  AnimationAlign,
+  AnimationConfig,
+  AnimationSide,
+  AnimationState,
+  PresenceToken,
+} from './animation.types';
 
 export { AnimatedDirective } from './animated.directive';
 export { AnimationTokensService } from './animation-tokens.service';
 export {
-    ANIMATION_PRESETS, areAnimationsEnabled, buildAnimationAttributes, createAnimationState,
-    getAnimationClasses,
-    getSlideAnimationClasses, waitForAnimation
+  ANIMATION_PRESETS,
+  areAnimationsEnabled,
+  buildAnimationAttributes,
+  createAnimationState,
+  getAnimationClasses,
+  getSlideAnimationClasses,
+  waitForAnimation,
 } from './animation.utils';
 export { Presence, type PresenceState } from './presence.component';
 export { PresenceIfDirective, PresenceService } from './presence.directive';
-

package/src/app/lib/utils/animation/presence.component.ts

@@ -19,7 +19,7 @@ import {
   effect,
   input,
   OnDestroy,
-  signal
+  signal,
 } from '@angular/core';
 
 /**