ngx-com 0.0.19 → 0.0.21

package/types/ngx-com-components-checkbox.d.ts

@@ -85,8 +85,12 @@ declare class ComCheckbox implements ControlValueAccessor {
     readonly checked: ModelSignal<boolean>;
     readonly indeterminate: ModelSignal<boolean>;
     readonly disabled: ModelSignal<boolean>;
-    readonly value: InputSignal<string | undefined>;
+    readonly htmlValue: InputSignal<string | undefined>;
     readonly name: InputSignal<string | undefined>;
+    readonly touched: ModelSignal<boolean>;
+    readonly invalid: InputSignal<boolean>;
+    readonly sfErrors: InputSignal<readonly unknown[]>;
+    readonly sfRequired: InputSignal<boolean>;
     readonly id: InputSignal<string | undefined>;
     readonly ariaLabel: InputSignal<string | null>;
     readonly ariaLabelledby: InputSignal<string | null>;
@@ -103,13 +107,14 @@ declare class ComCheckbox implements ControlValueAccessor {
     registerOnChange(fn: (value: boolean) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
+    protected onBlur(): void;
     protected onInputChange(event: Event): void;
     /** Focuses this checkbox's input element. */
     focus(): void;
     /** Toggles the checkbox state programmatically. */
     toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComCheckbox, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ComCheckbox, "com-checkbox", ["comCheckbox"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "indeterminate": "indeterminateChange"; "disabled": "disabledChange"; "changed": "changed"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComCheckbox, "com-checkbox", ["comCheckbox"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "htmlValue": { "alias": "value"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "sfErrors": { "alias": "errors"; "required": false; "isSignal": true; }; "sfRequired": { "alias": "required"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "indeterminate": "indeterminateChange"; "disabled": "disabledChange"; "touched": "touchedChange"; "changed": "changed"; }, never, ["*"], true, never>;
 }
 
 export { CHECKBOX_ICON_SIZES, CHECKBOX_LABEL_SIZES, ComCheckbox, checkboxBoxVariants };

package/types/ngx-com-components-code-block.d.ts

@@ -0,0 +1,66 @@
+import * as i0 from '@angular/core';
+import { InputSignal, OutputEmitterRef, WritableSignal, Signal } from '@angular/core';
+import { VariantProps } from 'class-variance-authority';
+
+type CodeBlockVariant = 'filled' | 'outlined';
+/**
+ * CVA variants for the code block container.
+ *
+ * @tokens `--color-muted`, `--color-foreground`,
+ *         `--color-border`, `--color-border-subtle`,
+ *         `--radius-card`, `--font-mono`
+ */
+declare const codeBlockVariants: (props?: {
+    variant?: CodeBlockVariant;
+}) => string;
+type CodeBlockVariants = VariantProps<typeof codeBlockVariants>;
+
+/**
+ * Code block component for displaying code snippets with a language label
+ * and copy-to-clipboard functionality.
+ *
+ * Renders plain monospace text in a styled container — no syntax highlighting.
+ * The header bar shows an optional language label and a copy button that
+ * provides visual feedback (checkmark icon for 2 seconds) after copying.
+ *
+ * @tokens `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,
+ *         `--color-foreground`, `--color-border`, `--color-border-subtle`,
+ *         `--color-ring`, `--color-success`,
+ *         `--font-mono`, `--radius-card`
+ *
+ * @example Basic usage with language label
+ * ```html
+ * <com-code-block code="const x = 42;" language="TypeScript" />
+ * ```
+ *
+ * @example Outlined variant
+ * ```html
+ * <com-code-block [code]="htmlSnippet" language="HTML" variant="outlined" />
+ * ```
+ */
+declare class ComCodeBlockComponent {
+    /** The raw code string to display. */
+    readonly code: InputSignal<string>;
+    /** Language label shown in the header (e.g. 'TypeScript', 'HTML'). */
+    readonly language: InputSignal<string | undefined>;
+    /** Visual variant. */
+    readonly variant: InputSignal<CodeBlockVariant>;
+    /** Consumer CSS classes — merged with variant classes. */
+    readonly userClass: InputSignal<string>;
+    /** Emitted when code is successfully copied to clipboard. */
+    readonly copied: OutputEmitterRef<void>;
+    /** @internal Tracks copy feedback state. */
+    protected readonly isCopied: WritableSignal<boolean>;
+    /** @internal Computed host element classes. */
+    protected readonly hostClasses: Signal<string>;
+    private readonly clipboard;
+    private readonly destroyRef;
+    private copyTimeoutId;
+    /** Copies the code to clipboard and shows feedback for 2 seconds. */
+    protected copyToClipboard(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComCodeBlockComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComCodeBlockComponent, "com-code-block", ["comCodeBlock"], { "code": { "alias": "code"; "required": true; "isSignal": true; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "copied": "copied"; }, never, never, true, never>;
+}
+
+export { ComCodeBlockComponent, codeBlockVariants };
+export type { CodeBlockVariant, CodeBlockVariants };

package/types/ngx-com-components-confirm.d.ts

@@ -31,7 +31,7 @@ interface ConfirmTemplateContext {
  * and emits `true` (confirmed) or `false` (cancelled) through its output.
  *
  * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`,
- *         `--color-foreground`, `--color-muted-foreground`, `--color-background`,
+ *         `--color-foreground`, `--color-muted-foreground`, `--color-backdrop`,
  *         `--shadow-lg`, `--radius-popover`
  *
  * @example Basic confirmation
@@ -126,7 +126,7 @@ declare class ComConfirm {
 /**
  * CVA variants for the confirmation panel backdrop.
  *
- * @tokens `--color-background`
+ * @tokens `--color-backdrop`
  */
 declare const confirmBackdropVariants: (props?: {
     visible?: boolean;

package/types/ngx-com-components-dialog.d.ts

@@ -0,0 +1,264 @@
+import { Observable } from 'rxjs';
+import { OverlayRef } from '@angular/cdk/overlay';
+import * as i0 from '@angular/core';
+import { TemplateRef, OnInit, WritableSignal, InputSignal, InjectionToken, Provider } from '@angular/core';
+import { ComponentType } from '@angular/cdk/portal';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Reference to an open dialog instance.
+ * Returned by `ComDialog.open()` for programmatic control.
+ */
+declare class ComDialogRef<R = unknown> {
+    private readonly afterClosedSubject;
+    private readonly backdropClickSubject;
+    private closed;
+    /** @internal */
+    _overlayRef: OverlayRef | null;
+    /** @internal */
+    _closeFn: ((result?: R) => void) | null;
+    /**
+     * Close the dialog, optionally passing a result value.
+     */
+    close(result?: R): void;
+    /**
+     * Emits the result once after the dialog is fully closed and disposed.
+     */
+    afterClosed(): Observable<R | undefined>;
+    /**
+     * Emits each time the backdrop is clicked.
+     */
+    backdropClick(): Observable<MouseEvent>;
+    /**
+     * Proxies keydown events from the overlay.
+     */
+    keydownEvents(): Observable<KeyboardEvent>;
+    /** @internal Called by the service after exit animation completes. */
+    _notifyClosed(result?: R): void;
+    /** @internal Forward backdrop click from overlay. */
+    _notifyBackdropClick(event: MouseEvent): void;
+}
+
+/** Available dialog size variants. */
+type ComDialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/** Configuration for opening a dialog. */
+interface ComDialogConfig<D = unknown> {
+    /** Data to inject via COM_DIALOG_DATA. */
+    data?: D;
+    /** Dialog panel width variant. */
+    size?: ComDialogSize;
+    /** Prevent Escape and backdrop click from closing. */
+    disableClose?: boolean;
+    /** Show backdrop overlay. */
+    hasBackdrop?: boolean;
+    /** Additional CSS class on the backdrop. */
+    backdropClass?: string;
+    /** Additional CSS class on the container panel. */
+    panelClass?: string;
+    /** Where to send focus on open. */
+    autoFocus?: 'first-tabbable' | 'dialog' | false;
+    /** Return focus to trigger element on close. */
+    restoreFocus?: boolean;
+    /** Fallback aria-label if no comDialogTitle is projected. */
+    ariaLabel?: string;
+}
+/** Content that can be opened in a dialog. */
+type ComDialogContent$1<T = unknown> = ComponentType<T> | TemplateRef<T>;
+/** Template context when opening a TemplateRef dialog. */
+interface ComDialogTemplateContext<R = unknown, D = unknown> {
+    $implicit: ComDialogRef<R>;
+    data: D;
+}
+
+/**
+ * Service for opening dialog modals imperatively.
+ *
+ * @example
+ * ```typescript
+ * const dialog = inject(ComDialog);
+ *
+ * // Open a component
+ * const ref = dialog.open<boolean>(ConfirmComponent, { data: { id: 123 } });
+ * ref.afterClosed().subscribe(result => {
+ *   if (result) performAction();
+ * });
+ *
+ * // Open a template
+ * dialog.open(templateRef, { size: 'sm' });
+ * ```
+ */
+declare class ComDialog {
+    private readonly overlay;
+    private readonly injector;
+    private readonly destroyRef;
+    private readonly platformId;
+    private readonly document;
+    private readonly globalConfig;
+    private readonly openDialogs;
+    /**
+     * Open a dialog with the given component or template.
+     *
+     * @param content - The component class or TemplateRef to render inside the dialog.
+     * @param config - Optional dialog configuration.
+     * @returns A reference to the opened dialog.
+     */
+    open<R = unknown, D = unknown>(content: ComDialogContent$1, config?: ComDialogConfig<D>): ComDialogRef<R>;
+    /** Close all open dialogs. */
+    closeAll(): void;
+    /** Number of currently open dialogs. */
+    get openDialogCount(): number;
+    private resolveConfig;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComDialog, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ComDialog>;
+}
+
+/**
+ * Marks an element as the dialog title. Sets up aria-labelledby
+ * binding on the dialog container.
+ *
+ * @example
+ * ```html
+ * <h2 comDialogTitle>Delete item</h2>
+ * ```
+ *
+ * @tokens `--color-foreground`
+ */
+declare class ComDialogTitle implements OnInit {
+    private readonly containerRef;
+    /** Unique ID for aria-labelledby binding. */
+    readonly id: WritableSignal<string>;
+    /** Computed CSS classes. */
+    readonly classes: WritableSignal<string>;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComDialogTitle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComDialogTitle, "[comDialogTitle]", ["comDialogTitle"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Marks an element as the dialog content area. Sets up aria-describedby
+ * binding on the dialog container.
+ *
+ * @example
+ * ```html
+ * <div comDialogContent>
+ *   <p>Are you sure you want to delete this item?</p>
+ * </div>
+ * ```
+ *
+ * @tokens `--color-muted-foreground`
+ */
+declare class ComDialogContent implements OnInit {
+    private readonly containerRef;
+    /** Unique ID for aria-describedby binding. */
+    readonly id: WritableSignal<string>;
+    /** Computed CSS classes. */
+    readonly classes: WritableSignal<string>;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComDialogContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComDialogContent, "[comDialogContent]", ["comDialogContent"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Marks an element as the dialog actions area (footer with buttons).
+ *
+ * @example
+ * ```html
+ * <div comDialogActions>
+ *   <button comButton variant="outline" [comDialogClose]="false">Cancel</button>
+ *   <button comButton [comDialogClose]="true">Confirm</button>
+ * </div>
+ * ```
+ */
+declare class ComDialogActions {
+    /** Computed CSS classes. */
+    readonly classes: WritableSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComDialogActions, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComDialogActions, "[comDialogActions]", ["comDialogActions"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Closes the nearest dialog when the host element is clicked.
+ * Optionally passes a result value.
+ *
+ * @example
+ * ```html
+ * <button comButton [comDialogClose]="false">Cancel</button>
+ * <button comButton [comDialogClose]="true">Confirm</button>
+ * ```
+ */
+declare class ComDialogClose {
+    private readonly dialogRef;
+    /** The result value to pass when closing the dialog. */
+    readonly comDialogClose: InputSignal<unknown>;
+    protected onClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComDialogClose, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComDialogClose, "[comDialogClose]", ["comDialogClose"], { "comDialogClose": { "alias": "comDialogClose"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Injection token for data passed to a dialog component.
+ *
+ * @example
+ * ```typescript
+ * readonly data = inject<MyData>(COM_DIALOG_DATA);
+ * ```
+ */
+declare const COM_DIALOG_DATA: InjectionToken<unknown>;
+/**
+ * Injection token for global dialog configuration defaults.
+ * @internal
+ */
+declare const COM_DIALOG_CONFIG: InjectionToken<ComDialogConfig>;
+/**
+ * Provides global dialog configuration defaults.
+ *
+ * @example
+ * ```typescript
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideComDialogConfig({ size: 'lg', hasBackdrop: true }),
+ *   ],
+ * });
+ * ```
+ */
+declare function provideComDialogConfig(config: ComDialogConfig): Provider;
+
+/**
+ * CVA variants for the dialog backdrop.
+ *
+ * @tokens `--color-backdrop`
+ */
+declare const dialogBackdropVariants: (props?: {
+    visible?: boolean;
+}) => string;
+/**
+ * CVA variants for the dialog panel container.
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`,
+ *         `--shadow-xl`, `--radius-overlay`
+ */
+declare const dialogPanelVariants: (props?: {
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    visible?: boolean;
+}) => string;
+/** Type helper for dialog panel variant props. */
+type DialogPanelVariantProps = VariantProps<typeof dialogPanelVariants>;
+/**
+ * CVA variants for the dialog title.
+ *
+ * @tokens `--color-foreground`
+ */
+declare const dialogTitleVariants: () => string;
+/**
+ * CVA variants for the dialog content area.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+declare const dialogContentVariants: () => string;
+/**
+ * CVA variants for the dialog actions area.
+ */
+declare const dialogActionsVariants: () => string;
+
+export { COM_DIALOG_CONFIG, COM_DIALOG_DATA, ComDialog, ComDialogActions, ComDialogClose, ComDialogContent, ComDialogRef, ComDialogTitle, dialogActionsVariants, dialogBackdropVariants, dialogContentVariants, dialogPanelVariants, dialogTitleVariants, provideComDialogConfig };
+export type { ComDialogConfig, ComDialogSize, ComDialogTemplateContext, DialogPanelVariantProps };

package/types/ngx-com-components-dropdown.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { TemplateRef, Signal, InputSignal, OutputEmitterRef, WritableSignal, OnInit } from '@angular/core';
+import { TemplateRef, Signal, InputSignal, ModelSignal, OutputEmitterRef, WritableSignal, OnInit } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { FormFieldControl, ErrorStateMatcher, FormFieldAppearance } from 'ngx-com/components/form-field';
 import { VariantProps } from 'class-variance-authority';
@@ -473,7 +473,7 @@ declare class ComDropdown<T> implements ControlValueAccessor, FormFieldControl<T
     /** Array of options to display. */
     readonly options: InputSignal<T[]>;
     /** Current value (single or array for multiple). */
-    readonly value: InputSignal<T | T[] | null>;
+    readonly value: ModelSignal<T | T[] | null>;
     /** Placeholder text when no value is selected. */
     readonly placeholder: InputSignal<string>;
     /** Enable multi-select mode. */
@@ -518,8 +518,9 @@ declare class ComDropdown<T> implements ControlValueAccessor, FormFieldControl<T
     readonly maxVisibleTags: InputSignal<number | null>;
     /** Custom error state matcher for determining when to show errors. */
     readonly errorStateMatcher: InputSignal<ErrorStateMatcher | undefined>;
-    /** Emitted when the value changes. */
-    readonly valueChange: OutputEmitterRef<T | T[] | null>;
+    readonly touched: ModelSignal<boolean>;
+    readonly invalid: InputSignal<boolean>;
+    readonly sfErrors: InputSignal<readonly unknown[]>;
     /** Emitted when search query changes. */
     readonly searchChange: OutputEmitterRef<string>;
     /** Emitted when panel opens. */
@@ -556,6 +557,8 @@ declare class ComDropdown<T> implements ControlValueAccessor, FormFieldControl<T
     readonly shouldLabelFloat: Signal<boolean>;
     /** Whether the control is in an error state. Implements FormFieldControl. */
     readonly errorState: Signal<boolean>;
+    /** Structured validation errors from Signal Forms, exposed for the parent form field. */
+    readonly errors: Signal<readonly unknown[] | null>;
     /** Unique ID for the control. Implements FormFieldControl. */
     readonly id: Signal<string>;
     /**
@@ -659,7 +662,7 @@ declare class ComDropdown<T> implements ControlValueAccessor, FormFieldControl<T
     private typeAhead;
     private announce;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComDropdown<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ComDropdown<any>, "com-dropdown", ["comDropdown"], { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "filterWith": { "alias": "filterWith"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "searchDebounceMs": { "alias": "searchDebounceMs"; "required": false; "isSignal": true; }; "virtualScrollThreshold": { "alias": "virtualScrollThreshold"; "required": false; "isSignal": true; }; "maxVisibleTags": { "alias": "maxVisibleTags"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "searchChange": "searchChange"; "opened": "opened"; "closed": "closed"; }, ["optionTemplate", "selectedTemplate", "emptyTemplate", "groupTemplate", "tagTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComDropdown<any>, "com-dropdown", ["comDropdown"], { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "filterWith": { "alias": "filterWith"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "searchDebounceMs": { "alias": "searchDebounceMs"; "required": false; "isSignal": true; }; "virtualScrollThreshold": { "alias": "virtualScrollThreshold"; "required": false; "isSignal": true; }; "maxVisibleTags": { "alias": "maxVisibleTags"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "sfErrors": { "alias": "errors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "searchChange": "searchChange"; "opened": "opened"; "closed": "closed"; }, ["optionTemplate", "selectedTemplate", "emptyTemplate", "groupTemplate", "tagTemplate"], never, true, never>;
 }
 
 /**

package/types/ngx-com-components-form-field.d.ts

@@ -35,6 +35,8 @@ declare abstract class FormFieldControl<T = unknown> {
     abstract readonly errorState: Signal<boolean>;
     /** Unique ID for the control element. */
     abstract readonly id: Signal<string>;
+    /** Structured validation errors (Signal Forms path). */
+    readonly errors?: Signal<readonly unknown[] | null>;
     /** Called when the form field container is clicked. */
     abstract onContainerClick(event: MouseEvent): void;
 }
@@ -131,8 +133,10 @@ declare class ComHint {
  */
 declare class ComError {
     readonly id: string;
-    /** Reference to the form control, set by the parent form field. */
+    /** Reference to the form control (Reactive Forms path). */
     private readonly _control;
+    /** Structured errors from Signal Forms. */
+    private readonly _signalErrors;
     /**
      * Show this error only when a specific validation error key is present.
      * If empty, the error is always shown when the control is in error state.
@@ -145,10 +149,15 @@ declare class ComError {
      */
     readonly shouldShow: Signal<boolean>;
     /**
-     * Sets the form control reference.
+     * Sets the form control reference (Reactive Forms).
      * Called by the parent form field component.
      */
     setControl(control: AbstractControl | null): void;
+    /**
+     * Sets structured validation errors (Signal Forms).
+     * Called by the parent form field component.
+     */
+    setSignalErrors(errors: readonly unknown[]): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComError, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<ComError, "[comError]", ["comError"], { "match": { "alias": "match"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -414,6 +423,11 @@ declare class ComInput implements FormFieldControl<string>, OnInit, DoCheck {
     readonly inputRequired: InputSignalWithTransform<boolean, unknown>;
     readonly userAriaDescribedBy: InputSignal<string>;
     readonly errorStateMatcher: InputSignal<ErrorStateMatcher | undefined>;
+    readonly sfInvalid: InputSignal<boolean>;
+    readonly sfTouched: InputSignalWithTransform<boolean, unknown>;
+    readonly sfErrors: InputSignal<readonly unknown[]>;
+    /** Whether the form system is Signal Forms (no NgControl present). */
+    private readonly isSignalForms;
     private readonly _focused;
     private readonly _autofilled;
     private readonly _empty;
@@ -426,6 +440,8 @@ declare class ComInput implements FormFieldControl<string>, OnInit, DoCheck {
     readonly disabled: Signal<boolean>;
     readonly required: Signal<boolean>;
     readonly errorState: Signal<boolean>;
+    /** Structured validation errors from Signal Forms, exposed for the parent form field. */
+    readonly errors: Signal<readonly unknown[] | null>;
     /** Combined aria-describedby including user-provided and form-field-generated IDs. */
     private readonly _describedByIds;
     readonly ariaDescribedBy: Signal<string>;
@@ -452,7 +468,7 @@ declare class ComInput implements FormFieldControl<string>, OnInit, DoCheck {
     /** Focus the native element. */
     focus(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComInput, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ComInput, "input[comInput], textarea[comInput]", ["comInput"], { "inputId": { "alias": "id"; "required": false; "isSignal": true; }; "inputDisabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "inputRequired": { "alias": "required"; "required": false; "isSignal": true; }; "userAriaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComInput, "input[comInput], textarea[comInput]", ["comInput"], { "inputId": { "alias": "id"; "required": false; "isSignal": true; }; "inputDisabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "inputRequired": { "alias": "required"; "required": false; "isSignal": true; }; "userAriaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "sfInvalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "sfTouched": { "alias": "touched"; "required": false; "isSignal": true; }; "sfErrors": { "alias": "errors"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**

package/types/ngx-com-components-radio.d.ts

@@ -130,8 +130,10 @@ declare class ComRadioGroup implements ControlValueAccessor {
     readonly variant: InputSignal<RadioVariant>;
     readonly errorMessage: InputSignal<string>;
     readonly errorStateMatcher: InputSignal<ErrorStateMatcher | undefined>;
-    /** Internal signal to track when control is touched, used to trigger error state re-evaluation. */
-    private readonly _touched;
+    /** Tracks touched state — writable by both CVA callback and Signal Forms [formField]. */
+    readonly touched: ModelSignal<boolean>;
+    readonly invalid: InputSignal<boolean>;
+    readonly sfErrors: InputSignal<readonly unknown[]>;
     readonly ariaLabel: InputSignal<string | null>;
     readonly ariaLabelledby: InputSignal<string | null>;
     readonly ariaDescribedby: InputSignal<string | null>;
@@ -169,7 +171,7 @@ declare class ComRadioGroup implements ControlValueAccessor {
     /** Focuses the previous non-disabled radio (with cyclic wrap). */
     focusPrevious(currentValue: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComRadioGroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ComRadioGroup, "com-radio-group", ["comRadioGroup"], { "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "selectionChange": "selectionChange"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComRadioGroup, "com-radio-group", ["comRadioGroup"], { "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "sfErrors": { "alias": "errors"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "touched": "touchedChange"; "selectionChange": "selectionChange"; }, never, ["*"], true, never>;
 }
 
 /** Event emitted when a radio is selected. */

package/types/ngx-com-components-separator.d.ts

@@ -0,0 +1,75 @@
+import * as i0 from '@angular/core';
+import { InputSignal, InputSignalWithTransform, Signal } from '@angular/core';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Orientation type for separator direction.
+ */
+type SeparatorOrientation = 'horizontal' | 'vertical';
+/**
+ * Variant type for separator appearance.
+ */
+type SeparatorVariant = 'default' | 'subtle';
+/**
+ * CVA variants for the separator directive.
+ *
+ * @tokens `--color-border`, `--color-border-subtle`
+ */
+declare const separatorVariants: (props?: {
+    orientation?: SeparatorOrientation;
+    variant?: SeparatorVariant;
+}) => string;
+type SeparatorVariants = VariantProps<typeof separatorVariants>;
+
+/**
+ * Separator directive — applies a visual divider to any host element.
+ *
+ * Works on `<hr>`, `<div>`, or any other element. Supports horizontal and
+ * vertical orientations, a subtle color variant, and a decorative mode that
+ * hides the separator from assistive technology.
+ *
+ * @tokens `--color-border`, `--color-border-subtle`
+ *
+ * @example Horizontal divider
+ * ```html
+ * <hr comSeparator />
+ * ```
+ *
+ * @example Vertical divider
+ * ```html
+ * <div comSeparator orientation="vertical" class="h-6"></div>
+ * ```
+ *
+ * @example Subtle variant
+ * ```html
+ * <hr comSeparator variant="subtle" />
+ * ```
+ *
+ * @example Decorative (hidden from screen readers)
+ * ```html
+ * <hr comSeparator decorative />
+ * ```
+ */
+declare class ComSeparator {
+    /** Direction of the separator line */
+    readonly orientation: InputSignal<SeparatorOrientation>;
+    /** Color intensity — `default` uses border-border, `subtle` uses border-border-subtle */
+    readonly variant: InputSignal<SeparatorVariant>;
+    /** When true, hides the separator from assistive technology */
+    readonly decorative: InputSignalWithTransform<boolean, unknown>;
+    /** Consumer CSS classes — merged with variant classes via mergeClasses() */
+    readonly userClass: InputSignal<string>;
+    /** @internal Computed host class from CVA + consumer overrides */
+    protected readonly computedClass: Signal<string>;
+    /** @internal Role attribute — separator when semantic, none when decorative */
+    protected readonly computedRole: Signal<string>;
+    /** @internal Aria-orientation — set only when not decorative */
+    protected readonly computedAriaOrientation: Signal<string | null>;
+    /** @internal Aria-hidden — true only when decorative */
+    protected readonly computedAriaHidden: Signal<'true' | null>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComSeparator, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComSeparator, "[comSeparator]", ["comSeparator"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { ComSeparator, separatorVariants };
+export type { SeparatorOrientation, SeparatorVariant, SeparatorVariants };