@ng-cn/core 1.0.15 → 1.0.17

package/schematics/ng-add/schema.json

@@ -20,8 +20,14 @@
         "message": "Which theme variant would you like to use?",
         "type": "list",
         "items": [
-          { "value": "shadcn", "label": "shadcn - The default clean, minimal, and professional theme" },
-          { "value": "github", "label": "GitHub - Inspired by GitHub's clean developer-focused design" },
+          {
+            "value": "shadcn",
+            "label": "shadcn - The default clean, minimal, and professional theme"
+          },
+          {
+            "value": "github",
+            "label": "GitHub - Inspired by GitHub's clean developer-focused design"
+          },
           { "value": "vercel", "label": "Vercel - Bold black and white design aesthetic" },
           { "value": "apple", "label": "Apple - Elegant, sophisticated design language" },
           { "value": "openai", "label": "OpenAI - Modern, tech-forward aesthetic" },

package/schematics/test-schematic.js

@@ -82,7 +82,7 @@ async function runTests() {
       '/src/app/lib/utils/cn.ts',
       '/src/app/lib/utils/index.ts',
       '/src/app/lib/components/ui/.gitkeep',
-      '/src/ng-cn.scss'
+      '/src/ng-cn.scss',
     ];
 
     console.log('📄 Checking created files:');
@@ -132,7 +132,6 @@ async function runTests() {
     }
 
     console.log('\n✨ All tests passed!\n');
-
   } catch (error) {
     console.error('\n❌ Schematic failed with error:');
     console.error(error);

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

@@ -1,16 +1,11 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    inject,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { ACCORDION_ITEM_CONTEXT } from './accordion-context';
 
 /**
  * AccordionContent component - expandable content area.
- * Uses role="region" and aria-labelledby to associate with trigger.
+ * Uses CSS grid animation (grid-template-rows: 0fr → 1fr) for smooth open/close.
+ * Content is always in the DOM; visibility is controlled by the grid row height.
  *
  * @example
  * <AccordionContent>
@@ -20,34 +15,31 @@ import { ACCORDION_ITEM_CONTEXT } from './accordion-context';
 @Component({
   selector: 'AccordionContent',
   template: `
-    @if (item.isOpen()) {
-      <div [class]="innerClass()">
-        <ng-content />
-      </div>
-    }
+    <div [class]="innerClass()">
+      <ng-content />
+    </div>
   `,
   host: {
-    'role': 'region',
+    'attr.data-slot': '"accordion-content"',
+    role: 'region',
     '[class]': 'computedClass()',
     '[attr.id]': 'item.contentId',
     '[attr.data-state]': 'item.isOpen() ? "open" : "closed"',
     '[attr.aria-labelledby]': 'item.triggerId',
-    '[attr.aria-hidden]': '!item.isOpen()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AccordionContent {
-  protected readonly item = inject(ACCORDION_ITEM_CONTEXT);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly computedClass = computed(() =>
-    cn(
-      'overflow-hidden text-sm',
-      'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down'
-    )
-  );
+  protected readonly item = inject(ACCORDION_ITEM_CONTEXT);
+
+  // No overflow-hidden on the host — grid-template-rows handles expansion.
+  // Global CSS ([data-slot='accordion-content'] > div { overflow: hidden }) clips the inner div.
+  protected readonly computedClass = computed(() => cn('text-sm', this.class()));
 
-  protected readonly innerClass = computed(() => cn('pb-4 pt-2 px-1 text-muted-foreground leading-relaxed', this.class()));
+  protected readonly innerClass = computed(() =>
+    cn('pb-4 pt-2 px-1 text-muted-foreground leading-relaxed'),
+  );
 }

package/src/app/lib/components/ui/accordion/accordion-context.ts

@@ -1,9 +1,5 @@
 import { InjectionToken, WritableSignal } from '@angular/core';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type AccordionType = 'single' | 'multiple';
 
 export interface AccordionContext {
@@ -20,14 +16,13 @@ export interface AccordionItemContext {
   value: () => string;
   isOpen: () => boolean;
   toggle: () => void;
+  disabled: () => boolean;
   /** Unique IDs for ARIA relationships */
   triggerId: string;
   contentId: string;
 }
 
-// ============================================================================
-// Injection Tokens
-// ============================================================================
-
 export const ACCORDION_CONTEXT = new InjectionToken<AccordionContext>('AccordionContext');
-export const ACCORDION_ITEM_CONTEXT = new InjectionToken<AccordionItemContext>('AccordionItemContext');
+export const ACCORDION_ITEM_CONTEXT = new InjectionToken<AccordionItemContext>(
+  'AccordionItemContext',
+);

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

@@ -1,19 +1,20 @@
 import { cn } from '@/lib/utils';
 import { AriaIdService } from '@/lib/utils/accessibility';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    forwardRef,
-    inject,
-    input,
-    OnDestroy,
-    OnInit,
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  inject,
+  input,
+  OnDestroy,
+  OnInit,
 } from '@angular/core';
 import {
-    ACCORDION_CONTEXT,
-    ACCORDION_ITEM_CONTEXT,
-    AccordionItemContext,
+  ACCORDION_CONTEXT,
+  ACCORDION_ITEM_CONTEXT,
+  AccordionItemContext,
 } from './accordion-context';
 
 /**
@@ -30,9 +31,12 @@ import {
   selector: 'AccordionItem',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"accordion-item"',
     '[class]': 'computedClass()',
     '[attr.data-state]': 'isOpen() ? "open" : "closed"',
     '[attr.data-value]': 'value()',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+    '[attr.aria-disabled]': 'disabled() || null',
   },
   providers: [
     {
@@ -43,44 +47,44 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AccordionItem implements AccordionItemContext, OnInit, OnDestroy {
-  private readonly accordion = inject(ACCORDION_CONTEXT);
-  private readonly ariaIdService = inject(AriaIdService);
-  private readonly ariaIds = this.ariaIdService.generateAccordionIds('accordion');
-
   /** Unique value for this accordion item */
   readonly value = input.required<string>();
 
+  /** Whether this item is disabled */
+  readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });
+
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  /** ARIA IDs for relationships */
-  readonly triggerId = this.ariaIds.generateTriggerId();
-  readonly contentId = this.ariaIds.generateContentId(0);
+  private readonly _accordion = inject(ACCORDION_CONTEXT);
+  private readonly _ariaIdService = inject(AriaIdService);
 
   /** Whether this item is currently open */
-  readonly isOpen = computed(() => this.accordion.isItemOpen(this.value()));
+  readonly isOpen = computed(() => this._accordion.isItemOpen(this.value()));
+  protected readonly computedClass = computed(() => cn('border-b w-full', this.class()));
 
-  /** Toggle this item's open state */
-  toggle(): void {
-    this.accordion.onValueChange(this.value());
-  }
+  private readonly ariaIds = this._ariaIdService.generateAccordionIds('accordion');
+  /** ARIA IDs for relationships */
+  readonly triggerId = this.ariaIds.generateTriggerId();
+  readonly contentId = this.ariaIds.generateContentId(0);
 
   ngOnInit(): void {
     // Register this item's value for keyboard navigation
-    this.accordion.itemValues.update(values => {
+    this._accordion.itemValues.update((values) => {
       if (!values.includes(this.value())) {
         return [...values, this.value()];
       }
       return values;
     });
   }
-
   ngOnDestroy(): void {
     // Unregister this item's value
-    this.accordion.itemValues.update(values =>
-      values.filter(v => v !== this.value())
-    );
+    this._accordion.itemValues.update((values) => values.filter((v) => v !== this.value()));
   }
 
-  protected readonly computedClass = computed(() => cn('border-b w-full', this.class()));
+  /** Toggle this item's open state */
+  toggle(): void {
+    if (this.disabled()) return;
+    this._accordion.onValueChange(this.value());
+  }
 }

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

@@ -1,11 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { ACCORDION_ITEM_CONTEXT } from './accordion-context';
 
 /**
@@ -21,7 +15,6 @@ import { ACCORDION_ITEM_CONTEXT } from './accordion-context';
     <span class="me-2"><ng-content /></span>
     <svg
       class="size-4 shrink-0 ms-auto text-muted-foreground transition-transform duration-200"
-      [class.rotate-180]="item.isOpen()"
       xmlns="http://www.w3.org/2000/svg"
       width="24"
       height="24"
@@ -36,38 +29,42 @@ import { ACCORDION_ITEM_CONTEXT } from './accordion-context';
     </svg>
   `,
   host: {
+    'attr.data-slot': '"accordion-trigger"',
     '[class]': 'computedClass()',
     '[attr.id]': 'item.triggerId',
     '[attr.data-state]': 'item.isOpen() ? "open" : "closed"',
     '[attr.aria-expanded]': 'item.isOpen()',
     '[attr.aria-controls]': 'item.contentId',
+    '[attr.aria-disabled]': 'item.disabled() || null',
     '(click)': 'onClick()',
     '(keydown.enter)': 'onClick()',
     '(keydown.space)': 'onSpace($event)',
     '[attr.tabindex]': '0',
-    'role': 'button',
+    role: 'button',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AccordionTrigger {
-  protected readonly item = inject(ACCORDION_ITEM_CONTEXT);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  protected readonly item = inject(ACCORDION_ITEM_CONTEXT);
+
   protected readonly computedClass = computed(() =>
     cn(
       'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180 cursor-pointer w-full',
-      this.class()
-    )
+      this.item.disabled() && 'cursor-not-allowed opacity-50 hover:no-underline',
+      this.class(),
+    ),
   );
 
   protected onClick(): void {
+    if (this.item.disabled()) return;
     this.item.toggle();
   }
-
   protected onSpace(event: Event): void {
     event.preventDefault();
+    if (this.item.disabled()) return;
     this.item.toggle();
   }
 }

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

@@ -1,19 +1,16 @@
 import { cn } from '@/lib/utils';
 import {
-    booleanAttribute,
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    effect,
-    forwardRef,
-    input,
-    signal,
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  forwardRef,
+  input,
+  output,
+  signal,
 } from '@angular/core';
-import {
-    ACCORDION_CONTEXT,
-    AccordionContext,
-    AccordionType,
-} from './accordion-context';
+import { ACCORDION_CONTEXT, AccordionContext, AccordionType } from './accordion-context';
 
 /**
  * Accordion component - root container for accordion items.
@@ -32,6 +29,7 @@ import {
   selector: 'Accordion',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"accordion"',
     '[class]': 'computedClass()',
     '[attr.data-orientation]': '"vertical"',
     '(keydown)': 'onKeydown($event)',
@@ -45,30 +43,6 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Accordion implements AccordionContext {
-  /** Type of accordion: 'single' allows one item open, 'multiple' allows many */
-  readonly type = input<AccordionType>('single');
-
-  /** Whether the accordion can be fully collapsed (only for single type) */
-  readonly collapsible = input<boolean, unknown>(false, { transform: booleanAttribute });
-
-  /** Default value(s) to be open initially */
-  readonly defaultValue = input<string | string[] | undefined>(undefined);
-
-  /** Controlled value - external control of open state */
-  readonly controlledValue = input<string | string[] | undefined>(undefined, { alias: 'value' });
-
-  /** Additional CSS classes */
-  readonly class = input<string>('');
-
-  /** Internal state for open items */
-  private readonly openItems = signal<Set<string>>(new Set());
-
-  /** Registry of item values for keyboard navigation */
-  readonly itemValues = signal<string[]>([]);
-
-  /** Flag to track if initialized */
-  private initialized = false;
-
   constructor() {
     // Initialize with default value
     effect(() => {
@@ -86,6 +60,21 @@ export class Accordion implements AccordionContext {
     });
   }
 
+  /** Type of accordion: 'single' allows one item open, 'multiple' allows many */
+  readonly type = input<AccordionType>('single');
+  /** Whether the accordion can be fully collapsed (only for single type) */
+  readonly collapsible = input<boolean, unknown>(false, { transform: booleanAttribute });
+  /** Default value(s) to be open initially */
+  readonly defaultValue = input<string | string[] | undefined>(undefined);
+  /** Controlled value - external control of open state */
+  readonly controlledValue = input<string | string[] | undefined>(undefined, { alias: 'value' });
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  /** Emits the new value whenever the open state changes */
+  readonly valueChange = output<string | string[] | undefined>();
+
+  protected readonly computedClass = computed(() => cn('w-full', this.class()));
   /** Get current value(s) */
   readonly value = computed(() => {
     const controlled = this.controlledValue();
@@ -99,6 +88,14 @@ export class Accordion implements AccordionContext {
     return Array.from(items);
   });
 
+  /** Internal state for open items */
+  private readonly openItems = signal<Set<string>>(new Set());
+  /** Registry of item values for keyboard navigation */
+  readonly itemValues = signal<string[]>([]);
+
+  /** Flag to track if initialized */
+  private initialized = false;
+
   /** Handle value change from accordion items */
   onValueChange(itemValue: string): void {
     const currentType = this.type();
@@ -127,8 +124,8 @@ export class Accordion implements AccordionContext {
 
       return newSet;
     });
+    this.valueChange.emit(this.value());
   }
-
   /** Check if an item is open */
   isItemOpen(itemValue: string): boolean {
     const controlled = this.controlledValue();
@@ -140,7 +137,6 @@ export class Accordion implements AccordionContext {
     }
     return this.openItems().has(itemValue);
   }
-
   /** Handle keyboard navigation */
   onKeydown(event: KeyboardEvent): void {
     const values = this.itemValues();
@@ -153,8 +149,13 @@ export class Accordion implements AccordionContext {
 
     // Find current index by looking at the accordion item
     const accordionItem = currentTrigger.closest('AccordionItem');
-    const itemValue = accordionItem?.getAttribute('data-value') ||
-                     values.find(v => document.querySelector(`AccordionItem[data-state][data-value="${v}"]`)?.contains(currentTrigger));
+    const itemValue =
+      accordionItem?.getAttribute('data-value') ||
+      values.find((v) =>
+        document
+          .querySelector(`AccordionItem[data-state][data-value="${v}"]`)
+          ?.contains(currentTrigger),
+      );
 
     if (!itemValue) return;
     const currentIndex = values.indexOf(itemValue);
@@ -184,14 +185,24 @@ export class Accordion implements AccordionContext {
 
     if (handled) {
       event.preventDefault();
-      // Focus the trigger of the new item
-      const newValue = values[newIndex];
-      const newTrigger = document.querySelector(
-        `AccordionItem[data-value="${newValue}"] AccordionTrigger, [data-accordion-trigger="${newValue}"]`
-      ) as HTMLElement;
-      newTrigger?.focus();
+      const direction =
+        event.key === 'ArrowDown' || event.key === 'End' ? 1 : -1;
+      let attempts = 0;
+      while (attempts < values.length) {
+        const candidateValue = values[newIndex];
+        const candidateItem = document.querySelector(
+          `AccordionItem[data-value="${candidateValue}"]`,
+        );
+        if (!candidateItem?.hasAttribute('data-disabled')) {
+          const trigger = document.querySelector(
+            `AccordionItem[data-value="${candidateValue}"] AccordionTrigger`,
+          ) as HTMLElement;
+          trigger?.focus();
+          break;
+        }
+        newIndex = (newIndex + direction + values.length) % values.length;
+        attempts++;
+      }
     }
   }
-
-  protected readonly computedClass = computed(() => cn('w-full', this.class()));
 }

package/src/app/lib/components/ui/accordion/index.ts

@@ -1,10 +1,10 @@
 // Context and types
 export {
-    ACCORDION_CONTEXT,
-    ACCORDION_ITEM_CONTEXT,
-    type AccordionContext,
-    type AccordionItemContext,
-    type AccordionType
+  ACCORDION_CONTEXT,
+  ACCORDION_ITEM_CONTEXT,
+  type AccordionContext,
+  type AccordionItemContext,
+  type AccordionType,
 } from './accordion-context';
 
 // Components
@@ -12,4 +12,3 @@ export { AccordionContent } from './accordion-content.component';
 export { AccordionItem } from './accordion-item.component';
 export { AccordionTrigger } from './accordion-trigger.component';
 export { Accordion } from './accordion.component';
-

package/src/app/lib/components/ui/alert/alert-description.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';
 
 /**
  * Alert description component.
@@ -27,7 +22,7 @@ export class AlertDescription {
   protected readonly computedClass = computed(() =>
     cn(
       'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/alert/alert-title.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';
 
 /**
  * Alert title component.
@@ -25,6 +20,6 @@ export class AlertTitle {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', this.class())
+    cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', this.class()),
   );
 }

package/src/app/lib/components/ui/alert/alert-variants.ts

@@ -1,23 +1,37 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 
 /**
- * Alert variants using class-variance-authority
- * WCAG AA compliant contrast ratios for all variants
+ * Alert variants using class-variance-authority.
+ * Selectors cover both native <svg> and lucide-angular's <lucide-icon> element.
  */
 export const alertVariants = cva(
-  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+  [
+    'relative w-full rounded-lg border px-4 py-3 text-sm',
+    // Grid base — 1-col by default, switches to 2-col when icon is present
+    'grid grid-cols-[0_1fr]',
+    'has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr]',
+    'has-[>lucide-icon]:grid-cols-[calc(var(--spacing)*4)_1fr]',
+    // Column gap when icon present
+    'has-[>svg]:gap-x-3',
+    'has-[>lucide-icon]:gap-x-3',
+    'gap-y-0.5 items-start',
+    // Icon sizing and alignment — native SVG
+    '[&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+    // Icon sizing and alignment — lucide-angular
+    '[&>lucide-icon]:size-4 [&>lucide-icon]:translate-y-0.5 [&>lucide-icon]:text-current',
+  ].join(' '),
   {
     variants: {
       variant: {
         default: 'bg-card text-card-foreground border-border',
         destructive:
-          'bg-destructive/10 text-destructive border-destructive/30 [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+          'bg-destructive/10 text-destructive border-destructive/30 [&>svg]:text-current [&>lucide-icon]:text-current *:data-[slot=alert-description]:text-destructive/90',
       },
     },
     defaultVariants: {
       variant: 'default',
     },
-  }
+  },
 );
 
 export type AlertVariants = VariantProps<typeof alertVariants>;

package/src/app/lib/components/ui/alert/alert.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';
 import { alertVariants, type AlertVariants } from './alert-variants';
 
 /**
@@ -42,9 +37,6 @@ export class Alert {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn(
-      alertVariants({ variant: this.variant() }),
-      this.class()
-    )
+    cn(alertVariants({ variant: this.variant() }), this.class()),
   );
 }

package/src/app/lib/components/ui/alert/index.ts

@@ -2,4 +2,3 @@ export { AlertDescription } from './alert-description.component';
 export { AlertTitle } from './alert-title.component';
 export { alertVariants, type AlertVariants } from './alert-variants';
 export { Alert } from './alert.component';
-

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

@@ -1,11 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    inject,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { buttonVariants } from '../button/button-variants';
 import { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
 
@@ -21,20 +15,19 @@ import { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
   selector: 'AlertDialogAction',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"alert-dialog-action"',
     '[class]': 'computedClass()',
     '(click)': 'onClick($event)',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AlertDialogAction {
-  protected readonly context = inject(ALERT_DIALOG_CONTEXT);
-
   /** Additional CSS classes to apply */
   readonly class = input<string>('');
 
-  protected readonly computedClass = computed(() =>
-    cn(buttonVariants(), this.class())
-  );
+  protected readonly context = inject(ALERT_DIALOG_CONTEXT);
+
+  protected readonly computedClass = computed(() => cn(buttonVariants(), this.class()));
 
   onClick(event: Event): void {
     // Allow the click to propagate for custom handlers