@letsprogram/ng-oat 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@letsprogram/ng-oat",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Angular component library built on top of the Oat CSS framework — signals-first, lightweight, and accessible.",
   "license": "MIT",
   "author": "SashiKumar Yadav",

package/types/letsprogram-ng-oat.d.ts

@@ -1,6 +1,7 @@
 import * as _angular_core from '@angular/core';
-import { EnvironmentProviders, TemplateRef, ViewContainerRef, OnInit, OnDestroy, InjectionToken, AfterViewInit } from '@angular/core';
+import { EnvironmentProviders, TemplateRef, ViewContainerRef, OnInit, OnDestroy, InjectionToken, AfterViewInit, ModelSignal } from '@angular/core';
 import { FormCheckboxControl, FormValueControl, ValidationError, FieldState } from '@angular/forms/signals';
+import { ControlValueAccessor } from '@angular/forms';
 
 /** Configuration for provideNgOat() */
 interface NgOatOptions {
@@ -707,12 +708,13 @@ declare class NgOatSpinner {
 declare class NgOatSwitch implements FormCheckboxControl {
     readonly label: _angular_core.InputSignal<string>;
     readonly checked: _angular_core.ModelSignal<boolean>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.ModelSignal<boolean>;
+    readonly touched: _angular_core.ModelSignal<boolean>;
     readonly value: undefined;
     readonly changed: _angular_core.OutputEmitterRef<boolean>;
     onInputChange(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOatSwitch, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatSwitch, "ng-oat-switch", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "changed": "changed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatSwitch, "ng-oat-switch", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "disabled": "disabledChange"; "touched": "touchedChange"; "changed": "changed"; }, never, never, true, never>;
 }
 
 type NgOatSkeletonType = 'line' | 'box';
@@ -916,13 +918,27 @@ declare class NgOatTooltipComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatTooltipComponent, "ng-oat-tooltip", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "template": { "alias": "template"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "delay": { "alias": "delay"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+type NgOatSidebarMode = 'fixed' | 'overlay';
 /**
  * Angular component wrapper for Oat's sidebar layout.
  *
- * Usage:
+ * Supports two modes:
+ * - `fixed` (default): Permanent sidebar on desktop, slide-out drawer on mobile.
+ * - `overlay`: Slide-out drawer at all screen sizes (ideal for app shells
+ *   that already have a toolbar with nav links).
+ *
+ * Usage (fixed — permanent desktop sidebar):
  * ```html
- * <ng-oat-sidebar [scrollLock]="true" (openChange)="onToggle($event)">
- *   <aside sidebar>Navigation</aside>
+ * <ng-oat-sidebar>
+ *   <aside data-sidebar>Navigation</aside>
+ *   <main>Main content</main>
+ * </ng-oat-sidebar>
+ * ```
+ *
+ * Usage (overlay — mobile-style drawer at all sizes):
+ * ```html
+ * <ng-oat-sidebar mode="overlay">
+ *   <aside data-sidebar>Navigation</aside>
  *   <main>Main content</main>
  * </ng-oat-sidebar>
  * ```
@@ -933,22 +949,35 @@ declare class NgOatSidebarComponent {
     private destroyRef;
     private platformId;
     private doc;
-    /** Whether scroll lock is applied on mobile when sidebar is open */
+    /**
+     * Layout mode:
+     * - `'fixed'` (default) — permanent sidebar on desktop, drawer on mobile.
+     * - `'overlay'` — always a slide-out drawer at any screen size.
+     */
+    readonly mode: _angular_core.InputSignal<NgOatSidebarMode>;
+    /** Whether scroll lock is applied when sidebar is open */
     readonly scrollLock: _angular_core.InputSignal<boolean>;
     readonly initialOpen: _angular_core.InputSignal<boolean>;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
     readonly openChange: _angular_core.OutputEmitterRef<boolean>;
+    /** Whether the sidebar is in overlay mode */
+    readonly isOverlay: _angular_core.Signal<boolean>;
     private cleanupFns;
     constructor();
     open(): void;
     close(): void;
     toggle(): void;
+    /**
+     * Whether the sidebar should auto-close on outside click / ESC.
+     * In overlay mode: always. In fixed mode: only on mobile.
+     */
+    private shouldAutoClose;
     private isMobile;
     private lockScroll;
     private restoreScroll;
     private listen;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOatSidebarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatSidebarComponent, "ng-oat-sidebar", never, { "scrollLock": { "alias": "scrollLock"; "required": false; "isSignal": true; }; "initialOpen": { "alias": "initialOpen"; "required": false; "isSignal": true; }; }, { "openChange": "openChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatSidebarComponent, "ng-oat-sidebar", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "scrollLock": { "alias": "scrollLock"; "required": false; "isSignal": true; }; "initialOpen": { "alias": "initialOpen"; "required": false; "isSignal": true; }; }, { "openChange": "openChange"; }, never, ["*"], true, never>;
 }
 
 interface NgOatTabItem {
@@ -1109,9 +1138,10 @@ declare class NgOatFileUpload {
 declare class NgOatInputOtp implements FormValueControl<string> {
     readonly length: _angular_core.InputSignal<number>;
     readonly separator: _angular_core.InputSignal<number>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.ModelSignal<boolean>;
     readonly mask: _angular_core.InputSignal<boolean>;
     readonly value: _angular_core.ModelSignal<string>;
+    readonly touched: _angular_core.ModelSignal<boolean>;
     readonly checked: undefined;
     private slotInputRefs;
     protected slots: _angular_core.Signal<string[]>;
@@ -1123,7 +1153,7 @@ declare class NgOatInputOtp implements FormValueControl<string> {
     private focusSlot;
     focus(options?: FocusOptions): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOatInputOtp, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatInputOtp, "ng-oat-input-otp", never, { "length": { "alias": "length"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatInputOtp, "ng-oat-input-otp", never, { "length": { "alias": "length"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "value": "valueChange"; "touched": "touchedChange"; }, never, never, true, never>;
 }
 
 /**
@@ -1138,7 +1168,7 @@ declare class NgOatInputOtp implements FormValueControl<string> {
  */
 declare class NgOatSearchInput implements FormValueControl<string>, OnInit, OnDestroy {
     readonly placeholder: _angular_core.InputSignal<string>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.ModelSignal<boolean>;
     readonly shortcut: _angular_core.InputSignal<string>;
     readonly debounceMs: _angular_core.InputSignal<number>;
     readonly value: _angular_core.ModelSignal<string>;
@@ -1160,7 +1190,7 @@ declare class NgOatSearchInput implements FormValueControl<string>, OnInit, OnDe
     focus(options?: FocusOptions): void;
     private focusInput;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOatSearchInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatSearchInput, "ng-oat-search-input", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "shortcut": { "alias": "shortcut"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "search": "search"; "touched": "touchedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatSearchInput, "ng-oat-search-input", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "shortcut": { "alias": "shortcut"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "value": "valueChange"; "search": "search"; "touched": "touchedChange"; }, never, never, true, never>;
 }
 
 type NgOatSeparatorOrientation = 'horizontal' | 'vertical';
@@ -1714,7 +1744,7 @@ declare class NgOatInput implements FormValueControl<string> {
     private static nextId;
     readonly value: _angular_core.ModelSignal<string>;
     readonly checked: undefined;
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.ModelSignal<boolean>;
     readonly readonly: _angular_core.InputSignal<boolean>;
     readonly required: _angular_core.InputSignal<boolean>;
     readonly invalid: _angular_core.InputSignal<boolean>;
@@ -1724,16 +1754,17 @@ declare class NgOatInput implements FormValueControl<string> {
     readonly max: _angular_core.InputSignal<number | undefined>;
     readonly minLength: _angular_core.InputSignal<number | undefined>;
     readonly maxLength: _angular_core.InputSignal<number | undefined>;
+    readonly autocomplete: _angular_core.InputSignal<string | undefined>;
     readonly label: _angular_core.InputSignal<string>;
     readonly type: _angular_core.InputSignal<NgOatInputType>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly showErrors: _angular_core.InputSignal<boolean>;
-    protected inputId: _angular_core.Signal<string>;
+    protected readonly inputId: string;
     onInput(event: Event): void;
     onBlur(): void;
     focus(options?: FocusOptions): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOatInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatInput, "ng-oat-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "showErrors": { "alias": "showErrors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatInput, "ng-oat-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "showErrors": { "alias": "showErrors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "touched": "touchedChange"; }, never, never, true, never>;
 }
 
 /**
@@ -1754,7 +1785,7 @@ declare class NgOatTextarea implements FormValueControl<string> {
     private static nextId;
     readonly value: _angular_core.ModelSignal<string>;
     readonly checked: undefined;
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.ModelSignal<boolean>;
     readonly readonly: _angular_core.InputSignal<boolean>;
     readonly required: _angular_core.InputSignal<boolean>;
     readonly invalid: _angular_core.InputSignal<boolean>;
@@ -1766,12 +1797,12 @@ declare class NgOatTextarea implements FormValueControl<string> {
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly rows: _angular_core.InputSignal<number>;
     readonly showErrors: _angular_core.InputSignal<boolean>;
-    protected textareaId: _angular_core.Signal<string>;
+    protected readonly textareaId: string;
     onInput(event: Event): void;
     onBlur(): void;
     focus(options?: FocusOptions): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOatTextarea, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatTextarea, "ng-oat-textarea", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "showErrors": { "alias": "showErrors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatTextarea, "ng-oat-textarea", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "showErrors": { "alias": "showErrors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "touched": "touchedChange"; }, never, never, true, never>;
 }
 
 interface NgOatSelectOption {
@@ -1800,7 +1831,7 @@ declare class NgOatSelect implements FormValueControl<string> {
     private static nextId;
     readonly checked: undefined;
     readonly value: _angular_core.ModelSignal<string>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.ModelSignal<boolean>;
     readonly required: _angular_core.InputSignal<boolean>;
     readonly invalid: _angular_core.InputSignal<boolean>;
     readonly errors: _angular_core.InputSignal<readonly ValidationError.WithOptionalFieldTree[]>;
@@ -1809,12 +1840,12 @@ declare class NgOatSelect implements FormValueControl<string> {
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly options: _angular_core.InputSignal<NgOatSelectOption[]>;
     readonly showErrors: _angular_core.InputSignal<boolean>;
-    protected selectId: _angular_core.Signal<string>;
+    protected readonly selectId: string;
     onChange(event: Event): void;
     onBlur(): void;
     focus(options?: FocusOptions): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOatSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatSelect, "ng-oat-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "showErrors": { "alias": "showErrors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatSelect, "ng-oat-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "showErrors": { "alias": "showErrors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "touched": "touchedChange"; }, never, never, true, never>;
 }
 
 /**
@@ -1833,13 +1864,14 @@ declare class NgOatSelect implements FormValueControl<string> {
  */
 declare class NgOatCheckbox implements FormCheckboxControl {
     readonly checked: _angular_core.ModelSignal<boolean>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.ModelSignal<boolean>;
+    readonly touched: _angular_core.ModelSignal<boolean>;
     /** FormCheckboxControl requires `value` to be undefined */
     readonly value: undefined;
     readonly label: _angular_core.InputSignal<string>;
     onChange(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOatCheckbox, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatCheckbox, "ng-oat-checkbox", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatCheckbox, "ng-oat-checkbox", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "disabled": "disabledChange"; "touched": "touchedChange"; }, never, never, true, never>;
 }
 
 interface NgOatRadioOption {
@@ -1874,7 +1906,7 @@ declare class NgOatRadioGroup implements FormValueControl<string> {
     private static nextId;
     readonly value: _angular_core.ModelSignal<string>;
     readonly checked: undefined;
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.ModelSignal<boolean>;
     readonly required: _angular_core.InputSignal<boolean>;
     readonly invalid: _angular_core.InputSignal<boolean>;
     readonly errors: _angular_core.InputSignal<readonly ValidationError.WithOptionalFieldTree[]>;
@@ -1882,29 +1914,134 @@ declare class NgOatRadioGroup implements FormValueControl<string> {
     readonly label: _angular_core.InputSignal<string>;
     readonly options: _angular_core.InputSignal<NgOatRadioOption[]>;
     readonly showErrors: _angular_core.InputSignal<boolean>;
-    protected groupName: _angular_core.Signal<string>;
+    protected readonly groupName: string;
     onSelect(val: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOatRadioGroup, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatRadioGroup, "ng-oat-radio-group", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "showErrors": { "alias": "showErrors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatRadioGroup, "ng-oat-radio-group", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "showErrors": { "alias": "showErrors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "touched": "touchedChange"; }, never, never, true, never>;
 }
 
 /**
- * Displays validation errors for a Signal Forms field.
- * Shows errors only when the field has been touched and is invalid.
+ * Displays validation errors for form fields.
  *
- * Usage:
+ * **Signal Forms** — pass the `FieldState` directly:
  * ```html
- * <ng-oat-input label="Email" [formField]="myForm.email" />
  * <ng-oat-form-error [control]="myForm.email" />
  * ```
+ *
+ * **Reactive / Template-driven** — pass error strings and a visibility flag:
+ * ```html
+ * <ng-oat-form-error [errors]="['Email is required']" [show]="email.touched && email.invalid" />
+ * ```
  */
 declare class NgOatFormError {
-    readonly control: _angular_core.InputSignal<FieldState<unknown, string | number>>;
+    /** Signal Forms FieldState — for automatic error display. */
+    readonly control: _angular_core.InputSignal<FieldState<unknown, string | number> | undefined>;
+    /** Plain error message strings — for Reactive / Template-driven forms. */
+    readonly errors: _angular_core.InputSignal<string[]>;
+    /** External visibility flag — for Reactive / Template-driven forms. */
+    readonly show: _angular_core.InputSignal<boolean>;
+    /** Unified list of error message strings. */
+    protected readonly errorMessages: _angular_core.Signal<(string | undefined)[]>;
     protected readonly shouldShowError: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOatFormError, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatFormError, "ng-oat-form-error", never, { "control": { "alias": "control"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatFormError, "ng-oat-form-error", never, { "control": { "alias": "control"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "show": { "alias": "show"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * ControlValueAccessor adapter for ng-oat **value-type** components.
+ *
+ * Auto-activates when a Reactive Forms or Template-driven directive is present
+ * (`formControlName`, `[formControl]`, or `[(ngModel)]`).
+ *
+ * Add this directive to your component's `imports` alongside the form component:
+ * ```typescript
+ * imports: [ReactiveFormsModule, NgOatInput, NgOatValueCva]
+ * ```
+ *
+ * ```html
+ * <ng-oat-input label="Email" formControlName="email" />
+ * <ng-oat-input label="Name" [(ngModel)]="name" />
+ * ```
+ */
+declare class NgOatValueCva implements ControlValueAccessor {
+    private readonly host;
+    private onChange;
+    private onTouched;
+    /**
+     * Listen for native `input` and `change` events that bubble from the inner
+     * `<input>`, `<textarea>`, or `<select>` element up to the host component.
+     */
+    onHostValueChange(): void;
+    /** Mark as touched when focus leaves the host element tree. */
+    onHostBlur(): void;
+    writeValue(val: string): void;
+    registerOnChange(fn: (val: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOatValueCva, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgOatValueCva, "ng-oat-input[formControlName],ng-oat-input[formControl],ng-oat-input[ngModel],ng-oat-textarea[formControlName],ng-oat-textarea[formControl],ng-oat-textarea[ngModel],ng-oat-select[formControlName],ng-oat-select[formControl],ng-oat-select[ngModel],ng-oat-radio-group[formControlName],ng-oat-radio-group[formControl],ng-oat-radio-group[ngModel],ng-oat-search-input[formControlName],ng-oat-search-input[formControl],ng-oat-search-input[ngModel],ng-oat-input-otp[formControlName],ng-oat-input-otp[formControl],ng-oat-input-otp[ngModel]", never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * ControlValueAccessor adapter for ng-oat **checkbox-type** components.
+ *
+ * Auto-activates when a Reactive Forms or Template-driven directive is present
+ * (`formControlName`, `[formControl]`, or `[(ngModel)]`).
+ *
+ * Add this directive to your component's `imports` alongside the form component:
+ * ```typescript
+ * imports: [ReactiveFormsModule, NgOatCheckbox, NgOatCheckboxCva]
+ * ```
+ *
+ * ```html
+ * <ng-oat-checkbox label="Accept terms" formControlName="accepted" />
+ * <ng-oat-switch label="Alerts" [(ngModel)]="alertsOn" />
+ * ```
+ */
+declare class NgOatCheckboxCva implements ControlValueAccessor {
+    private readonly host;
+    private onChange;
+    private onTouched;
+    /**
+     * Listen for native `change` events that bubble from the inner
+     * `<input type="checkbox">` up to the host component.
+     */
+    onHostChange(): void;
+    /** Mark as touched when focus leaves the host element tree. */
+    onHostBlur(): void;
+    writeValue(val: boolean): void;
+    registerOnChange(fn: (val: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOatCheckboxCva, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgOatCheckboxCva, "ng-oat-checkbox[formControlName],ng-oat-checkbox[formControl],ng-oat-checkbox[ngModel],ng-oat-switch[formControlName],ng-oat-switch[formControl],ng-oat-switch[ngModel]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Host interface for ng-oat components that carry a string `value`.
+ * Used by the CVA adapter directives to bridge Reactive & Template-driven forms.
+ */
+interface NgOatValueHost {
+    readonly value: ModelSignal<string>;
+    readonly touched: ModelSignal<boolean>;
+    readonly disabled: ModelSignal<boolean>;
+}
+/**
+ * Host interface for ng-oat checkbox-style components that carry a boolean `checked`.
+ */
+interface NgOatCheckboxHost {
+    readonly checked: ModelSignal<boolean>;
+    readonly touched: ModelSignal<boolean>;
+    readonly disabled: ModelSignal<boolean>;
+}
+/** Injection token provided by each value-type ng-oat form component. */
+declare const NG_OAT_VALUE_HOST: InjectionToken<NgOatValueHost>;
+/** Injection token provided by each checkbox-type ng-oat form component. */
+declare const NG_OAT_CHECKBOX_HOST: InjectionToken<NgOatCheckboxHost>;
+
+/** Convenience array — import both CVA adapters at once. */
+declare const NgOatFormsCva: readonly [typeof NgOatValueCva, typeof NgOatCheckboxCva];
+
 /** Upstream Oat version this build is synced to. */
 declare const OAT_VERSION = "0.0.0-vendored";
 
@@ -1923,5 +2060,5 @@ interface TooltipPositioner {
 /** DI token for tooltip positioning strategy */
 declare const TOOLTIP_POSITIONER: InjectionToken<TooltipPositioner>;
 
-export { NG_OAT_CHIP_GROUP, NG_OAT_TOGGLE_GROUP, NgOatAccordion, NgOatAlert, NgOatAvatar, NgOatBadge, NgOatBreadcrumb, NgOatButton, NgOatCard, NgOatCardCarousel, NgOatCardFooter, NgOatCardHeader, NgOatCarousel, NgOatCheckbox, NgOatChip, NgOatChipGroup, NgOatChipInput, NgOatDialog, NgOatDialogComponent, NgOatDropdown, NgOatDropdownComponent, NgOatFileUpload, NgOatFormError, NgOatInput, NgOatInputOtp, NgOatMeter, NgOatPagination, NgOatProgress, NgOatRadioGroup, NgOatSearchInput, NgOatSelect, NgOatSeparator, NgOatSidebar, NgOatSidebarComponent, NgOatSkeleton, NgOatSpinner, NgOatSplitButton, NgOatSwitch, NgOatTable, NgOatTabs, NgOatTabsComponent, NgOatTextarea, NgOatThemeRef, NgOatThemeSelector, NgOatThemeSelectorIcon, NgOatToast, NgOatToggle, NgOatToggleGroup, NgOatToolbar, NgOatToolbarRow, NgOatTooltip, NgOatTooltipComponent, OAT_TOKEN_MAP, OAT_VERSION, OAT_VERSION_TOKEN, TOOLTIP_POSITIONER, provideNgOat, provideNgOatTheme };
-export type { NgOatAccordionItem, NgOatAlertVariant, NgOatAvatarSize, NgOatBadgeVariant, NgOatButtonSize, NgOatButtonStyle, NgOatButtonVariant, NgOatCarouselAspectRatio, NgOatCarouselOrientation, NgOatCarouselSlide, NgOatChipGroupHost, NgOatChipSize, NgOatChipVariant, NgOatInputType, NgOatOptions, NgOatProductCard, NgOatRadioOption, NgOatSelectOption, NgOatSeparatorOrientation, NgOatSkeletonType, NgOatSpinnerSize, NgOatTabItem, NgOatTableColumn, NgOatTheme, NgOatThemeConfig, NgOatThemeOption, NgOatToastOptions, NgOatToastPlacement, NgOatToastVariant, NgOatToggleGroupHost, NgOatToggleGroupSize, NgOatToggleGroupVariant, NgOatToggleSize, NgOatToggleVariant, NgOatToolbarColor, OatBreadcrumbItem, OatTokens, Placement, TooltipPositioner };
+export { NG_OAT_CHECKBOX_HOST, NG_OAT_CHIP_GROUP, NG_OAT_TOGGLE_GROUP, NG_OAT_VALUE_HOST, NgOatAccordion, NgOatAlert, NgOatAvatar, NgOatBadge, NgOatBreadcrumb, NgOatButton, NgOatCard, NgOatCardCarousel, NgOatCardFooter, NgOatCardHeader, NgOatCarousel, NgOatCheckbox, NgOatCheckboxCva, NgOatChip, NgOatChipGroup, NgOatChipInput, NgOatDialog, NgOatDialogComponent, NgOatDropdown, NgOatDropdownComponent, NgOatFileUpload, NgOatFormError, NgOatFormsCva, NgOatInput, NgOatInputOtp, NgOatMeter, NgOatPagination, NgOatProgress, NgOatRadioGroup, NgOatSearchInput, NgOatSelect, NgOatSeparator, NgOatSidebar, NgOatSidebarComponent, NgOatSkeleton, NgOatSpinner, NgOatSplitButton, NgOatSwitch, NgOatTable, NgOatTabs, NgOatTabsComponent, NgOatTextarea, NgOatThemeRef, NgOatThemeSelector, NgOatThemeSelectorIcon, NgOatToast, NgOatToggle, NgOatToggleGroup, NgOatToolbar, NgOatToolbarRow, NgOatTooltip, NgOatTooltipComponent, NgOatValueCva, OAT_TOKEN_MAP, OAT_VERSION, OAT_VERSION_TOKEN, TOOLTIP_POSITIONER, provideNgOat, provideNgOatTheme };
+export type { NgOatAccordionItem, NgOatAlertVariant, NgOatAvatarSize, NgOatBadgeVariant, NgOatButtonSize, NgOatButtonStyle, NgOatButtonVariant, NgOatCarouselAspectRatio, NgOatCarouselOrientation, NgOatCarouselSlide, NgOatCheckboxHost, NgOatChipGroupHost, NgOatChipSize, NgOatChipVariant, NgOatInputType, NgOatOptions, NgOatProductCard, NgOatRadioOption, NgOatSelectOption, NgOatSeparatorOrientation, NgOatSkeletonType, NgOatSpinnerSize, NgOatTabItem, NgOatTableColumn, NgOatTheme, NgOatThemeConfig, NgOatThemeOption, NgOatToastOptions, NgOatToastPlacement, NgOatToastVariant, NgOatToggleGroupHost, NgOatToggleGroupSize, NgOatToggleGroupVariant, NgOatToggleSize, NgOatToggleVariant, NgOatToolbarColor, NgOatValueHost, OatBreadcrumbItem, OatTokens, Placement, TooltipPositioner };