@ng-cn/core 1.0.15 → 1.0.17

package/src/app/lib/components/ui/resizable/resizable-panel.component.ts

@@ -1,12 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  inject,
-  input
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, inject, input } from '@angular/core';
 import { RESIZABLE_CONTEXT } from './resizable-context';
 
 let panelIdCounter = 0;
@@ -24,6 +17,7 @@ let panelIdCounter = 0;
   selector: 'ResizablePanel',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"resizable-panel"',
     '[class]': 'computedClass()',
     '[style.flex-basis.%]': 'currentSize()',
     '[attr.data-panel]': 'true',
@@ -32,46 +26,33 @@ let panelIdCounter = 0;
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ResizablePanel {
-  private readonly context = inject(RESIZABLE_CONTEXT);
+  constructor() {
+    effect(() => {
+      this._context.registerPanel(this.panelId, this.minSize(), this.maxSize(), this.defaultSize());
+    });
+  }
 
   /** Default size as percentage */
   readonly defaultSize = input<number>(50);
-
   /** Minimum size as percentage */
   readonly minSize = input<number>(0);
-
   /** Maximum size as percentage */
   readonly maxSize = input<number>(100);
-
   /** Collapsible */
   readonly collapsible = input<boolean>(false);
-
   /** Collapsed size when collapsible */
   readonly collapsedSize = input<number>(0);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  /** Unique panel ID */
-  readonly panelId = `panel-${panelIdCounter++}`;
+  private readonly _context = inject(RESIZABLE_CONTEXT);
 
   /** Current panel size */
   readonly currentSize = computed(() => {
-    return this.context.getPanelSize(this.panelId);
+    return this._context.getPanelSize(this.panelId);
   });
+  protected readonly computedClass = computed(() => cn('flex-shrink-0 flex-grow-0', this.class()));
 
-  constructor() {
-    effect(() => {
-      this.context.registerPanel(
-        this.panelId,
-        this.minSize(),
-        this.maxSize(),
-        this.defaultSize()
-      );
-    });
-  }
-
-  protected readonly computedClass = computed(() =>
-    cn('flex-shrink-0 flex-grow-0', this.class())
-  );
+  /** Unique panel ID */
+  readonly panelId = `panel-${panelIdCounter++}`;
 }

package/src/app/lib/components/ui/scroll-area/index.ts

@@ -1,8 +1,7 @@
 export {
-    ScrollArea,
-    type ScrollAreaProps,
-    type ScrollAreaScrollbarVisibility,
-    type ScrollAreaType
+  ScrollArea,
+  type ScrollAreaProps,
+  type ScrollAreaScrollbarVisibility,
+  type ScrollAreaType,
 } from './scroll-area.component';
 export { ScrollBar, type ScrollBarOrientation, type ScrollBarProps } from './scroll-bar.component';
-

package/src/app/lib/components/ui/scroll-area/scroll-area.component.ts

@@ -1,15 +1,6 @@
 import { cn } from '@/lib/utils';
 import { CdkScrollable } from '@angular/cdk/scrolling';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
-
-// ============================================================================
-// Types
-// ============================================================================
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 export type ScrollAreaType = 'auto' | 'always' | 'scroll' | 'hover';
 export type ScrollAreaScrollbarVisibility = 'always' | 'scroll' | 'auto' | 'hover';
@@ -29,10 +20,6 @@ export interface ScrollAreaProps {
   class?: string;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component ScrollArea
  *
@@ -97,6 +84,7 @@ export interface ScrollAreaProps {
     <ng-content select="ScrollBar" />
   `,
   host: {
+    'attr.data-slot': '"scroll-area"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -108,9 +96,7 @@ export class ScrollArea {
   /** Describes the nature of scrollbar visibility */
   readonly type = input<ScrollAreaType>('hover');
 
-  protected readonly computedClass = computed(() =>
-    cn('relative overflow-hidden', this.class())
-  );
+  protected readonly computedClass = computed(() => cn('relative overflow-hidden', this.class()));
 
   protected readonly viewportClass = computed(() =>
     cn(
@@ -120,7 +106,7 @@ export class ScrollArea {
       '[&::-webkit-scrollbar]:hidden',
       '[-ms-overflow-style:none]',
       '[scrollbar-width:none]',
-      'overflow-auto'
-    )
+      'overflow-auto',
+    ),
   );
 }

package/src/app/lib/components/ui/scroll-area/scroll-bar.component.ts

@@ -1,14 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
-
-// ============================================================================
-// Types
-// ============================================================================
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 export type ScrollBarOrientation = 'vertical' | 'horizontal';
 
@@ -23,10 +14,6 @@ export interface ScrollBarProps {
   class?: string;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component ScrollBar
  *
@@ -57,10 +44,9 @@ export interface ScrollBarProps {
  */
 @Component({
   selector: 'ScrollBar',
-  template: `
-    <div [class]="thumbClass()"></div>
-  `,
+  template: ` <div [class]="thumbClass()"></div> `,
   host: {
+    'attr.data-slot': '"scroll-bar"',
     '[class]': 'computedClass()',
     '[attr.data-orientation]': 'orientation()',
   },
@@ -76,18 +62,13 @@ export class ScrollBar {
   protected readonly computedClass = computed(() =>
     cn(
       'flex touch-none select-none transition-colors',
-      this.orientation() === 'vertical' &&
-        'h-full w-2.5 border-l border-l-transparent p-[1px]',
-      this.orientation() === 'horizontal' &&
-        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
-      this.class()
-    )
+      this.orientation() === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      this.orientation() === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      this.class(),
+    ),
   );
 
   protected readonly thumbClass = computed(() =>
-    cn(
-      'relative rounded-full bg-border',
-      this.orientation() === 'vertical' && 'flex-1'
-    )
+    cn('relative rounded-full bg-border', this.orientation() === 'vertical' && 'flex-1'),
   );
 }

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

@@ -1,13 +1,9 @@
-export {
-    SEGMENTED_CONTEXT,
-    type SegmentedContext
-} from './segmented-context';
+export { SEGMENTED_CONTEXT, type SegmentedContext } from './segmented-context';
 export { SegmentedItem } from './segmented-item.component';
 export {
-    segmentedItemVariants,
-    segmentedVariants,
-    type SegmentedItemVariants,
-    type SegmentedVariants
+  segmentedItemVariants,
+  segmentedVariants,
+  type SegmentedItemVariants,
+  type SegmentedVariants,
 } from './segmented-variants';
 export { Segmented } from './segmented.component';
-

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

@@ -6,6 +6,4 @@ export interface SegmentedContext {
   onValueChange: (value: string) => void;
 }
 
-export const SEGMENTED_CONTEXT = new InjectionToken<SegmentedContext>(
-  'SegmentedContext'
-);
+export const SEGMENTED_CONTEXT = new InjectionToken<SegmentedContext>('SegmentedContext');

package/src/app/lib/components/ui/segmented/segmented-item.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 { SEGMENTED_CONTEXT } from './segmented-context';
 import { segmentedItemVariants } from './segmented-variants';
 
@@ -20,8 +14,9 @@ import { segmentedItemVariants } from './segmented-variants';
   template: `<ng-content />`,
   host: {
     '[class]': 'computedClass()',
-    role: 'tab',
-    '[attr.aria-selected]': 'isSelected()',
+    '[attr.role]': 'itemRole()',
+    '[attr.aria-selected]': 'itemRole() === "tab" ? isSelected() : null',
+    '[attr.aria-pressed]': 'itemRole() === "button" ? isSelected() : null',
     '[attr.data-state]': 'isSelected() ? "active" : "inactive"',
     '[attr.disabled]': 'isDisabled() || null',
     '[tabindex]': 'isDisabled() ? -1 : 0',
@@ -32,41 +27,38 @@ import { segmentedItemVariants } from './segmented-variants';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SegmentedItem {
-  private readonly context = inject(SEGMENTED_CONTEXT, { optional: true });
-
   /** The value of this item */
   readonly value = input.required<string>();
 
   /** Whether this item is disabled */
   readonly disabled = input<boolean>(false);
-
+  /** ARIA role to apply on the segmented item */
+  readonly role = input<'tab' | 'button'>('tab');
   /** Additional CSS classes to apply */
   readonly class = input<string>('');
 
-  /** Whether this item is selected */
-  protected readonly isSelected = computed(
-    () => this.context?.value() === this.value()
-  );
+  private readonly _context = inject(SEGMENTED_CONTEXT, { optional: true });
 
+  /** Whether this item is selected */
+  protected readonly isSelected = computed(() => this._context?.value() === this.value());
+  /** Effective ARIA role for this item */
+  protected readonly itemRole = computed(() => this.role());
   /** Whether this item is disabled */
-  protected readonly isDisabled = computed(
-    () => this.disabled() || this.context?.disabled()
-  );
-
-  /** Handle click */
-  protected onClick(): void {
-    if (!this.isDisabled()) {
-      this.context?.onValueChange(this.value());
-    }
-  }
-
+  protected readonly isDisabled = computed(() => this.disabled() || this._context?.disabled());
   /** Computed class combining variants and custom classes */
   protected readonly computedClass = computed(() =>
     cn(
       segmentedItemVariants({
         size: 'default',
       }),
-      this.class()
-    )
+      this.class(),
+    ),
   );
+
+  /** Handle click */
+  protected onClick(): void {
+    if (!this.isDisabled()) {
+      this._context?.onValueChange(this.value());
+    }
+  }
 }

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

@@ -17,7 +17,7 @@ export const segmentedVariants = cva(
     defaultVariants: {
       size: 'default',
     },
-  }
+  },
 );
 
 export const segmentedItemVariants = cva(
@@ -33,7 +33,7 @@ export const segmentedItemVariants = cva(
     defaultVariants: {
       size: 'default',
     },
-  }
+  },
 );
 
 export type SegmentedVariants = VariantProps<typeof segmentedVariants>;

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

@@ -9,14 +9,8 @@ import {
   model,
   signal,
 } from '@angular/core';
-import {
-  SEGMENTED_CONTEXT,
-  type SegmentedContext,
-} from './segmented-context';
-import {
-  segmentedVariants,
-  type SegmentedVariants,
-} from './segmented-variants';
+import { SEGMENTED_CONTEXT, type SegmentedContext } from './segmented-context';
+import { segmentedVariants, type SegmentedVariants } from './segmented-variants';
 
 /**
  * Segmented component - iOS-style segmented control buttons.
@@ -53,28 +47,6 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Segmented {
-  /** The current selected value */
-  readonly value = model<string>('');
-
-  /** The size of the segmented control */
-  readonly size = input<SegmentedVariants['size']>('default');
-
-  /** Whether the segmented control is disabled */
-  readonly disabled = input<boolean>(false);
-
-  /** Additional CSS classes to apply */
-  readonly class = input<string>('');
-
-  /** Context for child SegmentedItem components */
-  readonly context: SegmentedContext = {
-    value: signal(this.value()),
-    disabled: signal(this.disabled()),
-    onValueChange: (newValue: string) => {
-      this.value.set(newValue);
-      this.context.value.set(newValue);
-    },
-  };
-
   constructor() {
     // Sync value changes to context
     effect(() => {
@@ -87,13 +59,33 @@ export class Segmented {
     });
   }
 
+  /** The current selected value */
+  readonly value = model<string>('');
+
+  /** The size of the segmented control */
+  readonly size = input<SegmentedVariants['size']>('default');
+  /** Whether the segmented control is disabled */
+  readonly disabled = input<boolean>(false);
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
   /** Computed class combining variants and custom classes */
   protected readonly computedClass = computed(() =>
     cn(
       segmentedVariants({
         size: this.size(),
       }),
-      this.class()
-    )
+      this.class(),
+    ),
   );
+
+  /** Context for child SegmentedItem components */
+  readonly context: SegmentedContext = {
+    value: signal(this.value()),
+    disabled: signal(this.disabled()),
+    onValueChange: (newValue: string) => {
+      this.value.set(newValue);
+      this.context.value.set(newValue);
+    },
+  };
 }

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

@@ -1,10 +1,10 @@
 // Context and types
 export {
-    SELECT_CONTEXT,
-    SELECT_GROUP_CONTEXT,
-    type SelectContext,
-    type SelectGroupContext,
-    type SelectPosition
+  SELECT_CONTEXT,
+  SELECT_GROUP_CONTEXT,
+  type SelectContext,
+  type SelectGroupContext,
+  type SelectPosition,
 } from './select-context';
 
 // Components and their types
@@ -16,4 +16,3 @@ export { SelectSeparator } from './select-separator.component';
 export { SelectTrigger } from './select-trigger.component';
 export { SelectValue } from './select-value.component';
 export { Select, type SelectProps, type SelectState } from './select.component';
-

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

@@ -1,97 +1,69 @@
-import { cn, Presence } from '@/lib/utils';
-import { ClickOutsideDirective } from '@/lib/utils/accessibility';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    inject,
-    input,
-} from '@angular/core';
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { SELECT_CONTEXT } from './select-context';
 
 /**
  * SelectContent component - the dropdown content container.
- * Implements proper ARIA listbox pattern.
- *
- * @example
- * <SelectContent>
- *   <SelectItem value="option1">Option 1</SelectItem>
- *   <SelectItem value="option2">Option 2</SelectItem>
- * </SelectContent>
+ * Uses simple absolute positioning inside the Select root for reliable
+ * full-width dropdown rendering in forms.
  */
 @Component({
   selector: 'SelectContent',
-  imports: [ClickOutsideDirective, Presence],
   template: `
-    <Presence [present]="context?.open() ?? false">
-      <div
-        [class]="dropdownClass()"
-        [attr.id]="context?.contentId"
-        [attr.data-state]="context?.open() ? 'open' : 'closed'"
-        [attr.data-side]="side()"
-        [attr.data-align]="align()"
-        role="listbox"
-        aria-label="Options"
-        (clickOutside)="onClickOutside()"
-        (keydown.escape)="onEscape()"
-      >
-        <div [class]="viewportClass()">
-          <ng-content />
-        </div>
+    <div
+      [class]="dropdownClass()"
+      [attr.id]="context?.contentId"
+      [attr.data-state]="context?.open() ? 'open' : 'closed'"
+      [attr.data-side]="side()"
+      [attr.data-align]="align()"
+      role="listbox"
+      aria-label="Options"
+      (keydown.escape)="onEscape()"
+    >
+      <div [class]="viewportClass()">
+        <ng-content />
       </div>
-    </Presence>
+    </div>
   `,
   host: {
-    'class': 'contents',
+    class: 'contents',
     'data-slot': 'select-content',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SelectContent {
-  protected readonly context = inject(SELECT_CONTEXT, { optional: true });
-
   /** The side of the trigger to show the content */
   readonly side = input<'top' | 'bottom'>('bottom');
 
   /** The alignment of the content */
   readonly align = input<'start' | 'center' | 'end'>('start');
-
   /** Position strategy */
   readonly position = input<'popper' | 'item-aligned'>('popper');
 
   /** Additional CSS classes to apply */
   readonly class = input<string>('');
 
-  protected onClickOutside(): void {
-    this.context?.open.set(false);
-  }
-
-  protected onEscape(): void {
-    this.context?.open.set(false);
-    // Restore focus to trigger
-    const trigger = this.context?.triggerElement();
-    if (trigger) {
-      setTimeout(() => trigger.focus());
-    }
-  }
+  protected readonly context = inject(SELECT_CONTEXT, { optional: true });
 
   /** Computed class combining base styles and custom classes */
   protected readonly dropdownClass = computed(() =>
     cn(
-      'bg-popover text-popover-foreground absolute z-50 mt-1 max-h-60 min-w-[8rem] overflow-hidden rounded-md border shadow-md',
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-      'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2',
-      this.position() === 'popper' &&
-        'data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1',
-      this.class()
-    )
+      'bg-popover text-popover-foreground absolute left-0 top-full z-50 mt-1 w-full overflow-hidden rounded-md border shadow-md',
+      'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+      'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+      'data-[state=closed]:pointer-events-none',
+      this.class(),
+    ),
   );
 
   /** Viewport class */
-  protected readonly viewportClass = computed(() =>
-    cn(
-      'p-1 overflow-y-auto max-h-60',
-      this.position() === 'popper' && 'w-full min-w-[var(--radix-select-trigger-width)]'
-    )
-  );
+  protected readonly viewportClass = computed(() => cn('max-h-60 overflow-y-auto p-1'));
+
+  protected onEscape(): void {
+    this.context?.setOpen(false);
+    const trigger = this.context?.triggerElement();
+    if (trigger) {
+      setTimeout(() => trigger.focus());
+    }
+  }
 }

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

@@ -1,9 +1,5 @@
 import { InjectionToken, WritableSignal } from '@angular/core';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type SelectPosition = 'popper' | 'item-aligned';
 
 export interface SelectContext {
@@ -11,6 +7,8 @@ export interface SelectContext {
   value: WritableSignal<string>;
   /** Whether the select is open */
   open: WritableSignal<boolean>;
+  /** Set the open state and emit related events */
+  setOpen: (open: boolean) => void;
   /** Whether the select is disabled */
   disabled: WritableSignal<boolean>;
   /** Placeholder text when no value is selected */
@@ -40,14 +38,6 @@ export interface SelectGroupContext {
   label: WritableSignal<string>;
 }
 
-// ============================================================================
-// Injection Tokens
-// ============================================================================
-
-export const SELECT_CONTEXT = new InjectionToken<SelectContext>(
-  'SelectContext'
-);
+export const SELECT_CONTEXT = new InjectionToken<SelectContext>('SelectContext');
 
-export const SELECT_GROUP_CONTEXT = new InjectionToken<SelectGroupContext>(
-  'SelectGroupContext'
-);
+export const SELECT_GROUP_CONTEXT = new InjectionToken<SelectGroupContext>('SelectGroupContext');

package/src/app/lib/components/ui/select/select-group.component.ts

@@ -24,7 +24,7 @@ import { SELECT_GROUP_CONTEXT, type SelectGroupContext } from './select-context'
   template: `<ng-content />`,
   host: {
     '[class]': 'computedClass()',
-    'role': 'group',
+    role: 'group',
     '[attr.aria-labelledby]': 'labelId()',
     'data-slot': 'select-group',
   },
@@ -40,17 +40,16 @@ import { SELECT_GROUP_CONTEXT, type SelectGroupContext } from './select-context'
 export class SelectGroup {
   /** Additional CSS classes to apply */
   readonly class = input<string>('');
-
   /** Label ID for accessibility */
   readonly labelId = input<string>();
 
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('overflow-hidden p-1 text-foreground', this.class()),
+  );
+
   /** Context for child components */
   readonly context: SelectGroupContext = {
     label: signal(''),
   };
-
-  /** Computed class combining base styles and custom classes */
-  protected readonly computedClass = computed(() =>
-    cn('overflow-hidden p-1 text-foreground', this.class())
-  );
 }