ngx-com 0.0.20 → 0.0.22

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

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, InputSignal, TemplateRef, OutputEmitterRef, Signal, WritableSignal, Provider, OnDestroy } from '@angular/core';
+import { InjectionToken, InputSignal, TemplateRef, OutputEmitterRef, Signal, WritableSignal, Provider, OnDestroy, ModelSignal } from '@angular/core';
 import { VariantProps } from 'class-variance-authority';
-import { ControlValueAccessor, Validator, ValidationErrors } from '@angular/forms';
+import { ControlValueAccessor, Validator, NgControl, ValidationErrors } from '@angular/forms';
 import { IconSize } from 'ngx-com/components/icon';
+import { FormFieldControl, ErrorStateMatcher, FormFieldAppearance } from 'ngx-com/components/form-field';
 
 /**
  * Calendar shared types and interfaces
@@ -1210,7 +1211,7 @@ type DatepickerPanelWidth = 'auto' | 'trigger' | `${number}px` | `${number}rem`;
 /** Size variants for datepicker components */
 type DatepickerSize = 'sm' | 'default' | 'lg';
 /** Visual variant for datepicker trigger */
-type DatepickerVariant = 'default' | 'outline' | 'ghost' | 'filled';
+type DatepickerVariant = 'default' | 'outline' | 'ghost' | 'filled' | 'naked';
 /** Validation state for datepicker */
 type DatepickerState = 'default' | 'error' | 'success';
 /** Configuration for datepicker footer actions */
@@ -1347,7 +1348,7 @@ declare function generateTimePickerId(): string;
 /** Size variants for time picker */
 type TimePickerSize = 'sm' | 'default' | 'lg';
 /** Visual variant */
-type TimePickerVariant = 'standalone' | 'embedded';
+type TimePickerVariant = 'standalone' | 'embedded' | 'naked';
 /** Validation state */
 type TimePickerState = 'default' | 'error' | 'success';
 /** Period for 12-hour format */
@@ -1377,15 +1378,18 @@ type TimeSegment = 'hours' | 'minutes' | 'seconds';
  * />
  * ```
  */
-declare class ComDatepicker<D> implements ControlValueAccessor, Validator, OnDestroy {
+declare class ComDatepicker<D> implements ControlValueAccessor, FormFieldControl<D | null>, Validator, OnDestroy {
     private readonly elementRef;
     private readonly destroyRef;
     private readonly overlay;
     private readonly viewContainerRef;
     private readonly document;
     private readonly dateAdapter;
-    /** Optional NgControl for form integration. */
-    private readonly ngControl;
+    /** NgControl bound to this datepicker (if using reactive forms). */
+    readonly ngControl: NgControl | null;
+    private readonly defaultErrorStateMatcher;
+    private readonly parentForm;
+    private readonly parentFormGroup;
     /** Reference to the trigger element. */
     private readonly triggerRef;
     /** Reference to the input element. */
@@ -1397,7 +1401,7 @@ declare class ComDatepicker<D> implements ControlValueAccessor, Validator, OnDes
     /** Unique ID for the datepicker. */
     private readonly datepickerId;
     /** Current value. */
-    readonly value: InputSignal<D | null>;
+    readonly value: ModelSignal<D | null>;
     /** Minimum selectable date. */
     readonly min: InputSignal<D | null>;
     /** Maximum selectable date. */
@@ -1444,6 +1448,11 @@ declare class ComDatepicker<D> implements ControlValueAccessor, Validator, OnDes
     readonly ariaLabel: InputSignal<string | null>;
     /** ID of element describing the input. */
     readonly ariaDescribedBy: InputSignal<string | null>;
+    /** Custom error state matcher for determining when to show errors. */
+    readonly errorStateMatcher: InputSignal<ErrorStateMatcher | undefined>;
+    readonly touched: ModelSignal<boolean>;
+    readonly invalid: InputSignal<boolean>;
+    readonly sfErrors: InputSignal<readonly unknown[]>;
     /** Whether to show the time picker below the calendar. */
     readonly showTimePicker: InputSignal<boolean>;
     /** 12h vs 24h format for the time picker. `null` = auto-detect. */
@@ -1466,7 +1475,30 @@ declare class ComDatepicker<D> implements ControlValueAccessor, Validator, OnDes
     readonly calendarActiveDate: WritableSignal<D>;
     /** Live announcements for screen readers. */
     readonly liveAnnouncement: WritableSignal<string>;
-    /** Input element ID. */
+    /** Whether the input is focused (not panel). */
+    private readonly _inputFocused;
+    /** IDs for aria-describedby (set by form-field). */
+    private readonly _describedByIds;
+    /** Form field appearance (set by form-field). */
+    private readonly _appearance;
+    /** Whether the datepicker is focused (input focused or panel open). Implements FormFieldControl. */
+    readonly focused: Signal<boolean>;
+    /** Whether the label should float. Label floats when focused or has a value. */
+    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>;
+    /**
+     * Effective state combining manual state with automatic error detection.
+     * Manual state takes precedence over auto-detected error state.
+     */
+    readonly effectiveState: Signal<DatepickerState>;
+    /** Combined aria-describedby from form-field and manual input. */
+    readonly effectiveAriaDescribedBy: Signal<string | null>;
+    /** Input element ID (alias for FormFieldControl id). */
     readonly inputId: Signal<string>;
     /** Panel element ID. */
     readonly panelId: Signal<string>;
@@ -1521,6 +1553,7 @@ declare class ComDatepicker<D> implements ControlValueAccessor, Validator, OnDes
     clear(event?: Event): void;
     /** Selects today's date. */
     selectToday(): void;
+    protected onInputFocus(): void;
     protected onTriggerClick(): void;
     protected onTriggerKeydown(event: KeyboardEvent): void;
     protected onInputKeydown(event: KeyboardEvent): void;
@@ -1530,6 +1563,21 @@ declare class ComDatepicker<D> implements ControlValueAccessor, Validator, OnDes
     protected onDateSelected(date: D): void;
     protected onTimeChange(time: ComTimeValue | null): void;
     protected onActiveDateChange(date: D): void;
+    /**
+     * Called when the form field container is clicked.
+     * Implements FormFieldControl.
+     */
+    onContainerClick(event: MouseEvent): void;
+    /**
+     * Sets the describedBy IDs from the form field.
+     * Called by the parent form field component.
+     */
+    setDescribedByIds(ids: string): void;
+    /**
+     * Sets the appearance for styling.
+     * Called by the parent form field component.
+     */
+    setAppearance(appearance: FormFieldAppearance): void;
     private createOverlay;
     private destroyOverlay;
     private updateValue;
@@ -1537,7 +1585,7 @@ declare class ComDatepicker<D> implements ControlValueAccessor, Validator, OnDes
     private isDateValid;
     private announce;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComDatepicker<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ComDatepicker<any>, "com-datepicker", ["comDatepicker"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; "isSignal": true; }; "showFooterClearButton": { "alias": "showFooterClearButton"; "required": false; "isSignal": true; }; "keepOpen": { "alias": "keepOpen"; "required": false; "isSignal": true; }; "allowManualInput": { "alias": "allowManualInput"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "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; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "showTimePicker": { "alias": "showTimePicker"; "required": false; "isSignal": true; }; "use12HourFormat": { "alias": "use12HourFormat"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; }, { "dateChange": "dateChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComDatepicker<any>, "com-datepicker", ["comDatepicker"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; "isSignal": true; }; "showFooterClearButton": { "alias": "showFooterClearButton"; "required": false; "isSignal": true; }; "keepOpen": { "alias": "keepOpen"; "required": false; "isSignal": true; }; "allowManualInput": { "alias": "allowManualInput"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "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; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "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; }; "showTimePicker": { "alias": "showTimePicker"; "required": false; "isSignal": true; }; "use12HourFormat": { "alias": "use12HourFormat"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "dateChange": "dateChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
 }
 
 /**
@@ -1563,15 +1611,18 @@ declare class ComDatepicker<D> implements ControlValueAccessor, Validator, OnDes
  * />
  * ```
  */
-declare class ComDateRangePicker<D> implements ControlValueAccessor, Validator, OnDestroy {
+declare class ComDateRangePicker<D> implements ControlValueAccessor, FormFieldControl<DateRangeValue<D> | null>, Validator, OnDestroy {
     private readonly elementRef;
     private readonly destroyRef;
     private readonly overlay;
     private readonly viewContainerRef;
     private readonly document;
     private readonly dateAdapter;
-    /** Optional NgControl for form integration. */
-    private readonly ngControl;
+    /** NgControl bound to this date range picker (if using reactive forms). */
+    readonly ngControl: NgControl | null;
+    private readonly defaultErrorStateMatcher;
+    private readonly parentForm;
+    private readonly parentFormGroup;
     /** Reference to the trigger element. */
     private readonly triggerRef;
     /** Reference to the start input element. */
@@ -1585,7 +1636,7 @@ declare class ComDateRangePicker<D> implements ControlValueAccessor, Validator,
     /** Unique ID for the datepicker. */
     private readonly datepickerId;
     /** Current value. */
-    readonly value: InputSignal<DateRangeValue<D> | null>;
+    readonly value: ModelSignal<DateRangeValue<D> | null>;
     /** Minimum selectable date. */
     readonly min: InputSignal<D | null>;
     /** Maximum selectable date. */
@@ -1634,6 +1685,11 @@ declare class ComDateRangePicker<D> implements ControlValueAccessor, Validator,
     readonly startAriaLabel: InputSignal<string | null>;
     /** Accessible label for the end input. */
     readonly endAriaLabel: InputSignal<string | null>;
+    /** Custom error state matcher for determining when to show errors. */
+    readonly errorStateMatcher: InputSignal<ErrorStateMatcher | undefined>;
+    readonly touched: ModelSignal<boolean>;
+    readonly invalid: InputSignal<boolean>;
+    readonly sfErrors: InputSignal<readonly unknown[]>;
     /** Whether to show time pickers below the calendar. */
     readonly showTimePicker: InputSignal<boolean>;
     /** 12h vs 24h format for the time pickers. `null` = auto-detect. */
@@ -1658,7 +1714,29 @@ declare class ComDateRangePicker<D> implements ControlValueAccessor, Validator,
     readonly calendarActiveDate: WritableSignal<D>;
     /** Live announcements for screen readers. */
     readonly liveAnnouncement: WritableSignal<string>;
-    /** Start input element ID. */
+    /** Whether any input is focused. */
+    private readonly _inputFocused;
+    /** IDs for aria-describedby (set by form-field). */
+    private readonly _describedByIds;
+    /** Form field appearance (set by form-field). */
+    private readonly _appearance;
+    /** Whether the date range picker is focused. Implements FormFieldControl. */
+    readonly focused: Signal<boolean>;
+    /** Whether the label should float. */
+    readonly shouldLabelFloat: Signal<boolean>;
+    /** Whether the control is in an error state. Implements FormFieldControl. */
+    readonly errorState: Signal<boolean>;
+    /** Structured validation errors from Signal Forms. */
+    readonly errors: Signal<readonly unknown[] | null>;
+    /** Unique ID for the control (maps to start input). Implements FormFieldControl. */
+    readonly id: Signal<string>;
+    /**
+     * Effective state combining manual state with automatic error detection.
+     */
+    readonly effectiveState: Signal<DatepickerState>;
+    /** Combined aria-describedby from form-field. */
+    readonly effectiveAriaDescribedBy: Signal<string | null>;
+    /** Start input element ID (alias for FormFieldControl id). */
     readonly startInputId: Signal<string>;
     /** End input element ID. */
     readonly endInputId: Signal<string>;
@@ -1739,6 +1817,21 @@ declare class ComDateRangePicker<D> implements ControlValueAccessor, Validator,
     protected onActiveDateChange(date: D): void;
     protected onStartTimeChange(time: ComTimeValue | null): void;
     protected onEndTimeChange(time: ComTimeValue | null): void;
+    /**
+     * Called when the form field container is clicked.
+     * Implements FormFieldControl.
+     */
+    onContainerClick(event: MouseEvent): void;
+    /**
+     * Sets the describedBy IDs from the form field.
+     * Called by the parent form field component.
+     */
+    setDescribedByIds(ids: string): void;
+    /**
+     * Sets the appearance for styling.
+     * Called by the parent form field component.
+     */
+    setAppearance(appearance: FormFieldAppearance): void;
     private createOverlay;
     private destroyOverlay;
     private updateValue;
@@ -1748,7 +1841,7 @@ declare class ComDateRangePicker<D> implements ControlValueAccessor, Validator,
     private formatDate;
     private announce;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComDateRangePicker<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ComDateRangePicker<any>, "com-date-range-picker", ["comDateRangePicker"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "startPlaceholder": { "alias": "startPlaceholder"; "required": false; "isSignal": true; }; "endPlaceholder": { "alias": "endPlaceholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; "isSignal": true; }; "showFooterClearButton": { "alias": "showFooterClearButton"; "required": false; "isSignal": true; }; "keepOpen": { "alias": "keepOpen"; "required": false; "isSignal": true; }; "allowManualInput": { "alias": "allowManualInput"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "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; }; "startAriaLabel": { "alias": "startAriaLabel"; "required": false; "isSignal": true; }; "endAriaLabel": { "alias": "endAriaLabel"; "required": false; "isSignal": true; }; "showTimePicker": { "alias": "showTimePicker"; "required": false; "isSignal": true; }; "use12HourFormat": { "alias": "use12HourFormat"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; }, { "rangeChange": "rangeChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComDateRangePicker<any>, "com-date-range-picker", ["comDateRangePicker"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "startPlaceholder": { "alias": "startPlaceholder"; "required": false; "isSignal": true; }; "endPlaceholder": { "alias": "endPlaceholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; "isSignal": true; }; "showFooterClearButton": { "alias": "showFooterClearButton"; "required": false; "isSignal": true; }; "keepOpen": { "alias": "keepOpen"; "required": false; "isSignal": true; }; "allowManualInput": { "alias": "allowManualInput"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "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; }; "startAriaLabel": { "alias": "startAriaLabel"; "required": false; "isSignal": true; }; "endAriaLabel": { "alias": "endAriaLabel"; "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; }; "showTimePicker": { "alias": "showTimePicker"; "required": false; "isSignal": true; }; "use12HourFormat": { "alias": "use12HourFormat"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "rangeChange": "rangeChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
 }
 
 /**
@@ -1845,18 +1938,21 @@ type TimepickerLabelVariants = VariantProps<typeof timepickerLabelVariants>;
  * <com-time-picker variant="embedded" [value]="time" (timeChange)="onTime($event)" />
  * ```
  */
-declare class ComTimePicker implements ControlValueAccessor, Validator {
+declare class ComTimePicker implements ControlValueAccessor, FormFieldControl<ComTimeValue | null>, Validator {
     private readonly localeId;
-    private readonly ngControl;
+    readonly ngControl: NgControl | null;
+    private readonly defaultErrorStateMatcher;
+    private readonly parentForm;
+    private readonly parentFormGroup;
     private readonly timepickerId;
     private readonly hoursInputRef;
     private readonly minutesInputRef;
     private readonly secondsInputRef;
     private readonly periodButtonRef;
     /** Current time value. */
-    readonly value: InputSignal<ComTimeValue | null>;
+    readonly value: ModelSignal<ComTimeValue | null>;
     /** Whether the time picker is disabled. */
-    readonly disabled: InputSignal<boolean>;
+    readonly disabled: ModelSignal<boolean>;
     /** Whether the time picker is required. */
     readonly required: InputSignal<boolean>;
     /** Whether to show the seconds segment. */
@@ -1883,6 +1979,11 @@ declare class ComTimePicker implements ControlValueAccessor, Validator {
     readonly userClass: InputSignal<string>;
     /** Placeholder text for empty segments. */
     readonly placeholder: InputSignal<string>;
+    /** Custom error state matcher for determining when to show errors. */
+    readonly errorStateMatcher: InputSignal<ErrorStateMatcher | undefined>;
+    readonly touched: ModelSignal<boolean>;
+    readonly invalid: InputSignal<boolean>;
+    readonly sfErrors: InputSignal<readonly unknown[]>;
     /** Emitted when time value changes. */
     readonly timeChange: OutputEmitterRef<ComTimeValue | null>;
     /** Internal value state. */
@@ -1893,6 +1994,26 @@ declare class ComTimePicker implements ControlValueAccessor, Validator {
     readonly pendingDigits: WritableSignal<string>;
     /** Live announcements for screen readers. */
     readonly liveAnnouncement: WritableSignal<string>;
+    /** IDs for aria-describedby (set by form-field). */
+    private readonly _describedByIds;
+    /** Form field appearance (set by form-field). */
+    private readonly _appearance;
+    /** Whether the time picker is focused. Implements FormFieldControl. */
+    readonly focused: Signal<boolean>;
+    /** Whether the label should float. */
+    readonly shouldLabelFloat: Signal<boolean>;
+    /** Whether the control is in an error state. Implements FormFieldControl. */
+    readonly errorState: Signal<boolean>;
+    /** Structured validation errors from Signal Forms. */
+    readonly errors: Signal<readonly unknown[] | null>;
+    /** Unique ID for the control (maps to hours input). Implements FormFieldControl. */
+    readonly id: Signal<string>;
+    /**
+     * Effective state combining manual state with automatic error detection.
+     */
+    readonly effectiveState: Signal<TimePickerState>;
+    /** Combined aria-describedby from form-field. */
+    readonly effectiveAriaDescribedBy: Signal<string | null>;
     /** Whether to use 12-hour format. */
     readonly is12Hour: Signal<boolean>;
     /** Current period (AM/PM). */
@@ -1920,7 +2041,7 @@ declare class ComTimePicker implements ControlValueAccessor, Validator {
     writeValue(value: ComTimeValue | null): void;
     registerOnChange(fn: (value: ComTimeValue | null) => void): void;
     registerOnTouched(fn: () => void): void;
-    setDisabledState(_isDisabled: boolean): void;
+    setDisabledState(isDisabled: boolean): void;
     validate(): ValidationErrors | null;
     registerOnValidatorChange(fn: () => void): void;
     protected onSegmentFocus(segment: TimeSegment): void;
@@ -1929,6 +2050,21 @@ declare class ComTimePicker implements ControlValueAccessor, Validator {
     protected onSegmentKeydown(event: KeyboardEvent, segment: TimeSegment): void;
     protected onPeriodKeydown(event: KeyboardEvent): void;
     protected togglePeriod(): void;
+    /**
+     * Called when the form field container is clicked.
+     * Implements FormFieldControl.
+     */
+    onContainerClick(_event: MouseEvent): void;
+    /**
+     * Sets the describedBy IDs from the form field.
+     * Called by the parent form field component.
+     */
+    setDescribedByIds(ids: string): void;
+    /**
+     * Sets the appearance for styling.
+     * Called by the parent form field component.
+     */
+    setAppearance(appearance: FormFieldAppearance): void;
     private setPeriod;
     private incrementSegment;
     private handleDigitInput;
@@ -1939,7 +2075,7 @@ declare class ComTimePicker implements ControlValueAccessor, Validator {
     private focusPrevSegment;
     private updateValue;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComTimePicker, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ComTimePicker, "com-time-picker", ["comTimePicker"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "use12HourFormat": { "alias": "use12HourFormat"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "secondStep": { "alias": "secondStep"; "required": false; "isSignal": true; }; "minTime": { "alias": "minTime"; "required": false; "isSignal": true; }; "maxTime": { "alias": "maxTime"; "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; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, { "timeChange": "timeChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComTimePicker, "com-time-picker", ["comTimePicker"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "use12HourFormat": { "alias": "use12HourFormat"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "secondStep": { "alias": "secondStep"; "required": false; "isSignal": true; }; "minTime": { "alias": "minTime"; "required": false; "isSignal": true; }; "maxTime": { "alias": "maxTime"; "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; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "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"; "disabled": "disabledChange"; "touched": "touchedChange"; "timeChange": "timeChange"; }, never, never, true, never>;
 }
 
 export { CALENDAR_SELECTION_STRATEGY, CalendarSelectionStrategy, CalendarViewBase, ComCalendar, ComCalendarCell, ComCalendarHeader, ComCalendarMonthView, ComCalendarMultiYearView, ComCalendarYearView, ComDateRangePicker, ComDatepicker, ComTimePicker, DATE_ADAPTER, DAYS_PER_WEEK, DateAdapter, MONTHS_PER_ROW, MultiSelectionStrategy, NativeDateAdapter, RangeSelectionStrategy, SingleSelectionStrategy, WEEKS_PER_MONTH, WeekSelectionStrategy, YEARS_PER_PAGE, YEARS_PER_ROW, calendarCellVariants, calendarCellWrapperVariants, calendarHeaderButtonVariants, calendarHeaderVariants, calendarVariants, compareTime, createCalendarCell, createDateRange, createDateRangeValue, createGrid, createTimeValue, datepickerClearVariants, datepickerDisabledVariants, datepickerFooterButtonVariants, datepickerFooterVariants, datepickerIconVariants, datepickerInputVariants, datepickerPanelVariants, datepickerRangeSeparatorVariants, datepickerTriggerVariants, generateDatepickerId, generateTimePickerId, getMultiYearStartingYear, getWeekdayHeaders, isDateDisabled, isMonthDisabled, isYearDisabled, navigateGrid, provideMultiSelectionStrategy, provideNativeDateAdapter, provideRangeSelectionStrategy, provideSingleSelectionStrategy, provideWeekSelectionStrategy, timepickerContainerVariants, timepickerDisabledVariants, timepickerLabelVariants, timepickerPeriodVariants, timepickerSectionVariants, timepickerSegmentVariants, timepickerSeparatorVariants };

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-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>;
 }
 
 /**