@letsprogram/ng-oat 0.1.3 → 0.1.5

package/fesm2022/letsprogram-ng-oat.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { makeEnvironmentProviders, provideAppInitializer, inject, PLATFORM_ID, Injectable, ElementRef, DestroyRef, signal, output, afterNextRender, Directive, InjectionToken, Renderer2, ViewContainerRef, input, TemplateRef, effect, computed, Component, model, CUSTOM_ELEMENTS_SCHEMA, viewChild, viewChildren, contentChildren, contentChild } from '@angular/core';
+import { makeEnvironmentProviders, provideAppInitializer, inject, PLATFORM_ID, Injectable, ElementRef, DestroyRef, signal, output, afterNextRender, Directive, InjectionToken, Renderer2, ViewContainerRef, input, TemplateRef, effect, computed, Component, model, forwardRef, CUSTOM_ELEMENTS_SCHEMA, viewChild, viewChildren, contentChildren, contentChild, HostListener } from '@angular/core';
 import { DOCUMENT, isPlatformBrowser, NgTemplateOutlet, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 const DEFAULT_OPTIONS = {
     assets: { css: false },
@@ -1772,6 +1773,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }] } });
 
+/** Injection token provided by each value-type ng-oat form component. */
+const NG_OAT_VALUE_HOST = new InjectionToken('NG_OAT_VALUE_HOST');
+/** Injection token provided by each checkbox-type ng-oat form component. */
+const NG_OAT_CHECKBOX_HOST = new InjectionToken('NG_OAT_CHECKBOX_HOST');
+
 /**
  * Angular wrapper for Oat CSS toggle switch.
  * Implements `FormCheckboxControl` for seamless Signal Forms integration — no CVA needed.
@@ -1789,16 +1795,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 class NgOatSwitch {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
     value = undefined;
     changed = output();
     onInputChange(event) {
         const val = event.target.checked;
         this.checked.set(val);
+        this.touched.set(true);
         this.changed.emit(val);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NgOatSwitch, isStandalone: true, selector: "ng-oat-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", changed: "changed" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NgOatSwitch, isStandalone: true, selector: "ng-oat-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", touched: "touchedChange", changed: "changed" }, providers: [{ provide: NG_OAT_CHECKBOX_HOST, useExisting: forwardRef(() => NgOatSwitch) }], ngImport: i0, template: `
     <label>
       <input
         type="checkbox"
@@ -1815,6 +1823,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             type: Component,
             args: [{
                     selector: 'ng-oat-switch',
+                    providers: [{ provide: NG_OAT_CHECKBOX_HOST, useExisting: forwardRef(() => NgOatSwitch) }],
                     template: `
     <label>
       <input
@@ -1828,7 +1837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
     </label>
   `,
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /**
  * Angular wrapper for Oat CSS skeleton loader.
@@ -1979,7 +1988,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * <ng-oat-table
  *   [columns]="[{key:'name', label:'Name'}, {key:'email', label:'Email'}]"
  *   [data]="users"
- *   [striped]="true"
+ *   [scrollX]="true"
+ *   [scrollY]="'320px'"
  *   (rowClick)="onRowClick($event)">
  * </ng-oat-table>
  * ```
@@ -1990,13 +2000,17 @@ class NgOatTable {
     striped = input(false, ...(ngDevMode ? [{ debugName: "striped" }] : []));
     clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
     emptyText = input('No data available.', ...(ngDevMode ? [{ debugName: "emptyText" }] : []));
+    scrollX = input(false, ...(ngDevMode ? [{ debugName: "scrollX" }] : []));
+    scrollY = input('', ...(ngDevMode ? [{ debugName: "scrollY" }] : []));
     rowClick = output();
     onRowClick(row) {
         this.rowClick.emit(row);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgOatTable, isStandalone: true, selector: "ng-oat-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick" }, ngImport: i0, template: `
-    <div class="table">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgOatTable, isStandalone: true, selector: "ng-oat-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, scrollX: { classPropertyName: "scrollX", publicName: "scrollX", isSignal: true, isRequired: false, transformFunction: null }, scrollY: { classPropertyName: "scrollY", publicName: "scrollY", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick" }, ngImport: i0, template: `
+    <div class="table" [class.ng-oat-table-scroll-x]="scrollX()"
+         [style.max-height]="scrollY() || null"
+         [style.overflow-y]="scrollY() ? 'auto' : null">
       <table>
         <thead>
           <tr>
@@ -2024,12 +2038,14 @@ class NgOatTable {
         </tbody>
       </table>
     </div>
-  `, isInline: true, styles: [".clickable{cursor:pointer}.clickable:hover{background:var(--hover)}\n"] });
+  `, isInline: true, styles: [".clickable{cursor:pointer}.clickable:hover{background:var(--hover)}.ng-oat-table-scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}:host([scrollY]) thead th,.ng-oat-table-scroll-x thead th{position:sticky;top:0;z-index:1;background:var(--card, var(--background))}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatTable, decorators: [{
             type: Component,
             args: [{ selector: 'ng-oat-table', template: `
-    <div class="table">
+    <div class="table" [class.ng-oat-table-scroll-x]="scrollX()"
+         [style.max-height]="scrollY() || null"
+         [style.overflow-y]="scrollY() ? 'auto' : null">
       <table>
         <thead>
           <tr>
@@ -2057,8 +2073,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         </tbody>
       </table>
     </div>
-  `, styles: [".clickable{cursor:pointer}.clickable:hover{background:var(--hover)}\n"] }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }] } });
+  `, styles: [".clickable{cursor:pointer}.clickable:hover{background:var(--hover)}.ng-oat-table-scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}:host([scrollY]) thead th,.ng-oat-table-scroll-x thead th{position:sticky;top:0;z-index:1;background:var(--card, var(--background))}\n"] }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], scrollX: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollX", required: false }] }], scrollY: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollY", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }] } });
 
 /**
  * Angular component wrapper for Oat's dropdown.
@@ -3048,9 +3064,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 class NgOatInputOtp {
     length = input(6, ...(ngDevMode ? [{ debugName: "length" }] : []));
     separator = input(0, ...(ngDevMode ? [{ debugName: "separator" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     mask = input(false, ...(ngDevMode ? [{ debugName: "mask" }] : []));
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
     checked = undefined;
     slotInputRefs = viewChildren('slotInput', ...(ngDevMode ? [{ debugName: "slotInputRefs" }] : []));
     slots = computed(() => {
@@ -3062,6 +3079,7 @@ class NgOatInputOtp {
         const input = event.target;
         const char = input.value.replace(/\D/g, '').slice(-1);
         input.value = char;
+        this.touched.set(true);
         this.updateValueAt(index, char);
         // Auto-advance to next slot
         if (char && index < this.length() - 1) {
@@ -3127,7 +3145,7 @@ class NgOatInputOtp {
         this.focusSlot(0);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatInputOtp, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgOatInputOtp, isStandalone: true, selector: "ng-oat-input-otp", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "slotInputRefs", predicate: ["slotInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgOatInputOtp, isStandalone: true, selector: "ng-oat-input-otp", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", value: "valueChange", touched: "touchedChange" }, providers: [{ provide: NG_OAT_VALUE_HOST, useExisting: forwardRef(() => NgOatInputOtp) }], viewQueries: [{ propertyName: "slotInputRefs", predicate: ["slotInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="otp-group" role="group" [attr.aria-label]="'OTP input with ' + length() + ' digits'">
       @for (slot of slots(); track $index) {
         @if (separator() > 0 && $index === separator()) {
@@ -3155,7 +3173,7 @@ class NgOatInputOtp {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatInputOtp, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-oat-input-otp', template: `
+            args: [{ selector: 'ng-oat-input-otp', providers: [{ provide: NG_OAT_VALUE_HOST, useExisting: forwardRef(() => NgOatInputOtp) }], template: `
     <div class="otp-group" role="group" [attr.aria-label]="'OTP input with ' + length() + ' digits'">
       @for (slot of slots(); track $index) {
         @if (separator() > 0 && $index === separator()) {
@@ -3180,7 +3198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       }
     </div>
   `, styles: [":host{display:inline-block}\n"] }]
-        }], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], slotInputRefs: [{ type: i0.ViewChildren, args: ['slotInput', { isSignal: true }] }] } });
+        }], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], slotInputRefs: [{ type: i0.ViewChildren, args: ['slotInput', { isSignal: true }] }] } });
 
 /**
  * Search input with icon, clear button, optional keyboard shortcut badge, and built-in debounce.
@@ -3194,7 +3212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  */
 class NgOatSearchInput {
     placeholder = input('Search...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     shortcut = input('', ...(ngDevMode ? [{ debugName: "shortcut" }] : []));
     debounceMs = input(300, ...(ngDevMode ? [{ debugName: "debounceMs" }] : []));
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
@@ -3267,7 +3285,7 @@ class NgOatSearchInput {
         this.searchInputRef()?.nativeElement.focus(options);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatSearchInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgOatSearchInput, isStandalone: true, selector: "ng-oat-search-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "search", touched: "touchedChange" }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgOatSearchInput, isStandalone: true, selector: "ng-oat-search-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", value: "valueChange", search: "search", touched: "touchedChange" }, providers: [{ provide: NG_OAT_VALUE_HOST, useExisting: forwardRef(() => NgOatSearchInput) }], viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="search-input" [class.has-value]="hasValue()">
       <span class="search-input-icon" aria-hidden="true">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -3303,7 +3321,7 @@ class NgOatSearchInput {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatSearchInput, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-oat-search-input', template: `
+            args: [{ selector: 'ng-oat-search-input', providers: [{ provide: NG_OAT_VALUE_HOST, useExisting: forwardRef(() => NgOatSearchInput) }], template: `
     <div class="search-input" [class.has-value]="hasValue()">
       <span class="search-input-icon" aria-hidden="true">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -3336,7 +3354,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       }
     </div>
   `, styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcut", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], search: [{ type: i0.Output, args: ["search"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchEl', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcut", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], search: [{ type: i0.Output, args: ["search"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchEl', { isSignal: true }] }] } });
 
 /**
  * Separator component for visual content division. Renders as `<hr>` for
@@ -4985,7 +5003,7 @@ class NgOatInput {
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
     checked = undefined;
     // --- Signal Forms optional bindings ---
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
     invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
@@ -5000,7 +5018,7 @@ class NgOatInput {
     type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     showErrors = input(true, ...(ngDevMode ? [{ debugName: "showErrors" }] : []));
-    inputId = computed(() => `ng-oat-input-${++NgOatInput.nextId}`, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
+    inputId = `ng-oat-input-${++NgOatInput.nextId}`;
     onInput(event) {
         const val = event.target.value;
         this.value.set(val);
@@ -5009,23 +5027,23 @@ class NgOatInput {
         this.touched.set(true);
     }
     focus(options) {
-        const input = document.getElementById(this.inputId());
+        const input = document.getElementById(this.inputId);
         input?.focus(options);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgOatInput, isStandalone: true, selector: "ng-oat-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showErrors: { classPropertyName: "showErrors", publicName: "showErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgOatInput, isStandalone: true, selector: "ng-oat-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showErrors: { classPropertyName: "showErrors", publicName: "showErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", touched: "touchedChange" }, providers: [{ provide: NG_OAT_VALUE_HOST, useExisting: forwardRef(() => NgOatInput) }], ngImport: i0, template: `
     @if (label()) {
-      <label [attr.for]="inputId()">{{ label() }}</label>
+      <label [attr.for]="inputId">{{ label() }}</label>
     }
     <input
-      [id]="inputId()"
+      [id]="inputId"
       [type]="type()"
       [value]="value()"
       [placeholder]="placeholder()"
       [disabled]="disabled()"
       [readOnly]="readonly()"
       [required]="required()"
-      [attr.aria-invalid]="invalid() || null"
+      [attr.aria-invalid]="(invalid() && touched()) || null"
       [attr.min]="min() ?? null"
       [attr.max]="max() ?? null"
       [attr.minlength]="minLength() ?? null"
@@ -5033,28 +5051,28 @@ class NgOatInput {
       (input)="onInput($event)"
       (blur)="onBlur()"
     />
-    @if (showErrors()) {
+    <!-- @if (showErrors() && touched()) {
       @for (err of errors(); track $index) {
         <small class="error">{{ err.message }}</small>
       }
-    }
+    } -->
   `, isInline: true, styles: [":host{display:block}.error{color:var(--danger);display:block;font-size:var(--text-8);margin-block-start:var(--space-1)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatInput, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-oat-input', template: `
+            args: [{ selector: 'ng-oat-input', providers: [{ provide: NG_OAT_VALUE_HOST, useExisting: forwardRef(() => NgOatInput) }], template: `
     @if (label()) {
-      <label [attr.for]="inputId()">{{ label() }}</label>
+      <label [attr.for]="inputId">{{ label() }}</label>
     }
     <input
-      [id]="inputId()"
+      [id]="inputId"
       [type]="type()"
       [value]="value()"
       [placeholder]="placeholder()"
       [disabled]="disabled()"
       [readOnly]="readonly()"
       [required]="required()"
-      [attr.aria-invalid]="invalid() || null"
+      [attr.aria-invalid]="(invalid() && touched()) || null"
       [attr.min]="min() ?? null"
       [attr.max]="max() ?? null"
       [attr.minlength]="minLength() ?? null"
@@ -5062,13 +5080,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       (input)="onInput($event)"
       (blur)="onBlur()"
     />
-    @if (showErrors()) {
+    <!-- @if (showErrors() && touched()) {
       @for (err of errors(); track $index) {
         <small class="error">{{ err.message }}</small>
       }
-    }
+    } -->
   `, styles: [":host{display:block}.error{color:var(--danger);display:block;font-size:var(--text-8);margin-block-start:var(--space-1)}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrors", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrors", required: false }] }] } });
 
 /**
  * Oat-styled textarea implementing `FormValueControl<string>`.
@@ -5088,7 +5106,7 @@ class NgOatTextarea {
     static nextId = 0;
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
     checked = undefined;
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
     invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
@@ -5101,7 +5119,7 @@ class NgOatTextarea {
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     rows = input(4, ...(ngDevMode ? [{ debugName: "rows" }] : []));
     showErrors = input(true, ...(ngDevMode ? [{ debugName: "showErrors" }] : []));
-    textareaId = computed(() => `ng-oat-ta-${++NgOatTextarea.nextId}`, ...(ngDevMode ? [{ debugName: "textareaId" }] : []));
+    textareaId = `ng-oat-ta-${++NgOatTextarea.nextId}`;
     onInput(event) {
         const val = event.target.value;
         this.value.set(val);
@@ -5110,29 +5128,29 @@ class NgOatTextarea {
         this.touched.set(true);
     }
     focus(options) {
-        const el = document.getElementById(this.textareaId());
+        const el = document.getElementById(this.textareaId);
         el?.focus(options);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgOatTextarea, isStandalone: true, selector: "ng-oat-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, showErrors: { classPropertyName: "showErrors", publicName: "showErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgOatTextarea, isStandalone: true, selector: "ng-oat-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, showErrors: { classPropertyName: "showErrors", publicName: "showErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", touched: "touchedChange" }, providers: [{ provide: NG_OAT_VALUE_HOST, useExisting: forwardRef(() => NgOatTextarea) }], ngImport: i0, template: `
     @if (label()) {
-      <label [attr.for]="textareaId()">{{ label() }}</label>
+      <label [attr.for]="textareaId">{{ label() }}</label>
     }
     <textarea
-      [id]="textareaId()"
+      [id]="textareaId"
       [value]="value()"
       [placeholder]="placeholder()"
       [disabled]="disabled()"
       [readOnly]="readonly()"
       [required]="required()"
       [rows]="rows()"
-      [attr.aria-invalid]="invalid() || null"
+      [attr.aria-invalid]="(invalid() && touched()) || null"
       [attr.minlength]="minLength() ?? null"
       [attr.maxlength]="maxLength() ?? null"
       (input)="onInput($event)"
       (blur)="onBlur()"
     ></textarea>
-    @if (showErrors()) {
+    @if (showErrors() && touched()) {
       @for (err of errors(); track $index) {
         <small class="error">{{ err.message }}</small>
       }
@@ -5141,31 +5159,31 @@ class NgOatTextarea {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatTextarea, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-oat-textarea', template: `
+            args: [{ selector: 'ng-oat-textarea', providers: [{ provide: NG_OAT_VALUE_HOST, useExisting: forwardRef(() => NgOatTextarea) }], template: `
     @if (label()) {
-      <label [attr.for]="textareaId()">{{ label() }}</label>
+      <label [attr.for]="textareaId">{{ label() }}</label>
     }
     <textarea
-      [id]="textareaId()"
+      [id]="textareaId"
       [value]="value()"
       [placeholder]="placeholder()"
       [disabled]="disabled()"
       [readOnly]="readonly()"
       [required]="required()"
       [rows]="rows()"
-      [attr.aria-invalid]="invalid() || null"
+      [attr.aria-invalid]="(invalid() && touched()) || null"
       [attr.minlength]="minLength() ?? null"
       [attr.maxlength]="maxLength() ?? null"
       (input)="onInput($event)"
       (blur)="onBlur()"
     ></textarea>
-    @if (showErrors()) {
+    @if (showErrors() && touched()) {
       @for (err of errors(); track $index) {
         <small class="error">{{ err.message }}</small>
       }
     }
   `, styles: [":host{display:block}.error{color:var(--danger);display:block;font-size:var(--text-8);margin-block-start:var(--space-1)}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], showErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrors", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], showErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrors", required: false }] }] } });
 
 /**
  * Oat-styled select implementing `FormValueControl<string>`.
@@ -5186,7 +5204,7 @@ class NgOatSelect {
     checked = undefined;
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
     // --- Signal Forms optional bindings ---
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
     invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
     errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : []));
@@ -5196,7 +5214,7 @@ class NgOatSelect {
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
     showErrors = input(true, ...(ngDevMode ? [{ debugName: "showErrors" }] : []));
-    selectId = computed(() => `ng-oat-sel-${++NgOatSelect.nextId}`, ...(ngDevMode ? [{ debugName: "selectId" }] : []));
+    selectId = `ng-oat-sel-${++NgOatSelect.nextId}`;
     onChange(event) {
         const val = event.target.value;
         this.value.set(val);
@@ -5205,20 +5223,20 @@ class NgOatSelect {
         this.touched.set(true);
     }
     focus(options) {
-        const el = document.getElementById(this.selectId());
+        const el = document.getElementById(this.selectId);
         el?.focus(options);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgOatSelect, isStandalone: true, selector: "ng-oat-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, showErrors: { classPropertyName: "showErrors", publicName: "showErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgOatSelect, isStandalone: true, selector: "ng-oat-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, showErrors: { classPropertyName: "showErrors", publicName: "showErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", touched: "touchedChange" }, providers: [{ provide: NG_OAT_VALUE_HOST, useExisting: forwardRef(() => NgOatSelect) }], ngImport: i0, template: `
     @if (label()) {
-      <label [attr.for]="selectId()">{{ label() }}</label>
+      <label [attr.for]="selectId">{{ label() }}</label>
     }
     <select
-      [id]="selectId()"
+      [id]="selectId"
       [value]="value()"
       [disabled]="disabled()"
       [required]="required()"
-      [attr.aria-invalid]="invalid() || null"
+      [attr.aria-invalid]="(invalid() && touched()) || null"
       (change)="onChange($event)"
       (blur)="onBlur()"
     >
@@ -5234,7 +5252,7 @@ class NgOatSelect {
         </option>
       }
     </select>
-    @if (showErrors()) {
+    @if (showErrors() && touched()) {
       @for (err of errors(); track $index) {
         <small class="error">{{ err.message }}</small>
       }
@@ -5243,16 +5261,16 @@ class NgOatSelect {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-oat-select', template: `
+            args: [{ selector: 'ng-oat-select', providers: [{ provide: NG_OAT_VALUE_HOST, useExisting: forwardRef(() => NgOatSelect) }], template: `
     @if (label()) {
-      <label [attr.for]="selectId()">{{ label() }}</label>
+      <label [attr.for]="selectId">{{ label() }}</label>
     }
     <select
-      [id]="selectId()"
+      [id]="selectId"
       [value]="value()"
       [disabled]="disabled()"
       [required]="required()"
-      [attr.aria-invalid]="invalid() || null"
+      [attr.aria-invalid]="(invalid() && touched()) || null"
       (change)="onChange($event)"
       (blur)="onBlur()"
     >
@@ -5268,13 +5286,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         </option>
       }
     </select>
-    @if (showErrors()) {
+    @if (showErrors() && touched()) {
       @for (err of errors(); track $index) {
         <small class="error">{{ err.message }}</small>
       }
     }
   `, styles: [":host{display:block}.error{color:var(--danger);display:block;font-size:var(--text-8);margin-block-start:var(--space-1)}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], showErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrors", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], showErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrors", required: false }] }] } });
 
 /**
  * Oat-styled checkbox implementing `FormCheckboxControl`.
@@ -5292,7 +5310,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  */
 class NgOatCheckbox {
     checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
     /** FormCheckboxControl requires `value` to be undefined */
     value = undefined;
     // --- Component-specific inputs ---
@@ -5300,9 +5319,10 @@ class NgOatCheckbox {
     onChange(event) {
         const val = event.target.checked;
         this.checked.set(val);
+        this.touched.set(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NgOatCheckbox, isStandalone: true, selector: "ng-oat-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NgOatCheckbox, isStandalone: true, selector: "ng-oat-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", touched: "touchedChange" }, providers: [{ provide: NG_OAT_CHECKBOX_HOST, useExisting: forwardRef(() => NgOatCheckbox) }], ngImport: i0, template: `
     <label>
       <input
         type="checkbox"
@@ -5318,6 +5338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             type: Component,
             args: [{
                     selector: 'ng-oat-checkbox',
+                    providers: [{ provide: NG_OAT_CHECKBOX_HOST, useExisting: forwardRef(() => NgOatCheckbox) }],
                     template: `
     <label>
       <input
@@ -5330,7 +5351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
     </label>
   `,
                 }]
-        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
 /**
  * Oat-styled radio group implementing `FormValueControl<string>`.
@@ -5357,7 +5378,7 @@ class NgOatRadioGroup {
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
     checked = undefined;
     // --- Signal Forms optional bindings ---
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
     invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
     errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : []));
@@ -5366,13 +5387,13 @@ class NgOatRadioGroup {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
     showErrors = input(true, ...(ngDevMode ? [{ debugName: "showErrors" }] : []));
-    groupName = computed(() => `ng-oat-radio-${++NgOatRadioGroup.nextId}`, ...(ngDevMode ? [{ debugName: "groupName" }] : []));
+    groupName = `ng-oat-radio-${++NgOatRadioGroup.nextId}`;
     onSelect(val) {
         this.value.set(val);
         this.touched.set(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgOatRadioGroup, isStandalone: true, selector: "ng-oat-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, showErrors: { classPropertyName: "showErrors", publicName: "showErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgOatRadioGroup, isStandalone: true, selector: "ng-oat-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, showErrors: { classPropertyName: "showErrors", publicName: "showErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", touched: "touchedChange" }, providers: [{ provide: NG_OAT_VALUE_HOST, useExisting: forwardRef(() => NgOatRadioGroup) }], ngImport: i0, template: `
     @if (label()) {
       <fieldset>
         <legend>{{ label() }}</legend>
@@ -5380,7 +5401,7 @@ class NgOatRadioGroup {
           <label>
             <input
               type="radio"
-              [name]="groupName()"
+              [name]="groupName"
               [value]="opt.value"
               [checked]="opt.value === value()"
               [disabled]="disabled() || (opt.disabled ?? false)"
@@ -5395,7 +5416,7 @@ class NgOatRadioGroup {
         <label>
           <input
             type="radio"
-            [name]="groupName()"
+            [name]="groupName"
             [value]="opt.value"
             [checked]="opt.value === value()"
             [disabled]="disabled() || (opt.disabled ?? false)"
@@ -5405,7 +5426,7 @@ class NgOatRadioGroup {
         </label>
       }
     }
-    @if (showErrors()) {
+    @if (showErrors() && touched()) {
       @for (err of errors(); track $index) {
         <small class="error">{{ err.message }}</small>
       }
@@ -5414,7 +5435,7 @@ class NgOatRadioGroup {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatRadioGroup, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-oat-radio-group', template: `
+            args: [{ selector: 'ng-oat-radio-group', providers: [{ provide: NG_OAT_VALUE_HOST, useExisting: forwardRef(() => NgOatRadioGroup) }], template: `
     @if (label()) {
       <fieldset>
         <legend>{{ label() }}</legend>
@@ -5422,7 +5443,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
           <label>
             <input
               type="radio"
-              [name]="groupName()"
+              [name]="groupName"
               [value]="opt.value"
               [checked]="opt.value === value()"
               [disabled]="disabled() || (opt.disabled ?? false)"
@@ -5437,7 +5458,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         <label>
           <input
             type="radio"
-            [name]="groupName()"
+            [name]="groupName"
             [value]="opt.value"
             [checked]="opt.value === value()"
             [disabled]="disabled() || (opt.disabled ?? false)"
@@ -5447,35 +5468,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         </label>
       }
     }
-    @if (showErrors()) {
+    @if (showErrors() && touched()) {
       @for (err of errors(); track $index) {
         <small class="error">{{ err.message }}</small>
       }
     }
   `, styles: [":host{display:block}fieldset{border:none;padding:0;margin:0}legend{font-size:var(--text-7);font-weight:var(--font-medium);margin-block-end:var(--space-1)}label{display:flex;align-items:center;gap:var(--space-2);margin-block-end:var(--space-1)}.error{color:var(--danger);display:block;font-size:var(--text-8);margin-block-start:var(--space-1)}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], showErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrors", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], showErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrors", required: false }] }] } });
 
 /**
- * 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" />
+ * ```
  */
 class NgOatFormError {
-    control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
+    /** Signal Forms FieldState — for automatic error display. */
+    control = input(...(ngDevMode ? [undefined, { debugName: "control" }] : []));
+    /** Plain error message strings — for Reactive / Template-driven forms. */
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : []));
+    /** External visibility flag — for Reactive / Template-driven forms. */
+    show = input(false, ...(ngDevMode ? [{ debugName: "show" }] : []));
+    /** Unified list of error message strings. */
+    errorMessages = computed(() => {
+        const ctrl = this.control();
+        if (ctrl) {
+            return ctrl.errors().map(e => e.message);
+        }
+        return this.errors();
+    }, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
     shouldShowError = computed(() => {
-        const field = this.control();
-        return !field.valid() && field.touched();
+        const ctrl = this.control();
+        if (ctrl) {
+            return !ctrl.valid() && ctrl.touched();
+        }
+        return this.show() && this.errors().length > 0;
     }, ...(ngDevMode ? [{ debugName: "shouldShowError" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatFormError, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgOatFormError, isStandalone: true, selector: "ng-oat-form-error", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgOatFormError, isStandalone: true, selector: "ng-oat-form-error", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @if (shouldShowError()) {
-      @for (error of control().errors(); track error.kind) {
-        <small class="error">{{ error.message }}</small>
+      @for (msg of errorMessages(); track $index) {
+        <small class="error">{{ msg }}</small>
       }
     }
   `, isInline: true, styles: [":host{display:block}.error{display:block;font-size:var(--text-8);font-weight:var(--font-normal);color:var(--danger);margin-block-start:var(--space-1)}\n"] });
@@ -5484,12 +5524,175 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             type: Component,
             args: [{ selector: 'ng-oat-form-error', template: `
     @if (shouldShowError()) {
-      @for (error of control().errors(); track error.kind) {
-        <small class="error">{{ error.message }}</small>
+      @for (msg of errorMessages(); track $index) {
+        <small class="error">{{ msg }}</small>
       }
     }
   `, styles: [":host{display:block}.error{display:block;font-size:var(--text-8);font-weight:var(--font-normal);color:var(--danger);margin-block-start:var(--space-1)}\n"] }]
-        }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }] } });
+        }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }] } });
+
+/**
+ * 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" />
+ * ```
+ */
+class NgOatValueCva {
+    host = inject(NG_OAT_VALUE_HOST);
+    onChange = () => { };
+    onTouched = () => { };
+    /**
+     * Listen for native `input` and `change` events that bubble from the inner
+     * `<input>`, `<textarea>`, or `<select>` element up to the host component.
+     */
+    onHostValueChange() {
+        this.onChange(this.host.value());
+    }
+    /** Mark as touched when focus leaves the host element tree. */
+    onHostBlur() {
+        this.host.touched.set(true);
+        this.onTouched();
+    }
+    // --- ControlValueAccessor ---
+    writeValue(val) {
+        this.host.value.set(val ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.host.disabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatValueCva, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: NgOatValueCva, isStandalone: true, selector: "ng-oat-input[formControlName],ng-oat-input[formControl],ng-oat-input[ngModel],\nng-oat-textarea[formControlName],ng-oat-textarea[formControl],ng-oat-textarea[ngModel],\nng-oat-select[formControlName],ng-oat-select[formControl],ng-oat-select[ngModel],\nng-oat-radio-group[formControlName],ng-oat-radio-group[formControl],ng-oat-radio-group[ngModel],\nng-oat-search-input[formControlName],ng-oat-search-input[formControl],ng-oat-search-input[ngModel],\nng-oat-input-otp[formControlName],ng-oat-input-otp[formControl],ng-oat-input-otp[ngModel]", host: { listeners: { "input": "onHostValueChange()", "change": "onHostValueChange()", "focusout": "onHostBlur()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NgOatValueCva),
+                multi: true,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatValueCva, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `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]`,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NgOatValueCva),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], propDecorators: { onHostValueChange: [{
+                type: HostListener,
+                args: ['input']
+            }, {
+                type: HostListener,
+                args: ['change']
+            }], onHostBlur: [{
+                type: HostListener,
+                args: ['focusout']
+            }] } });
+
+/**
+ * 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" />
+ * ```
+ */
+class NgOatCheckboxCva {
+    host = inject(NG_OAT_CHECKBOX_HOST);
+    onChange = () => { };
+    onTouched = () => { };
+    /**
+     * Listen for native `change` events that bubble from the inner
+     * `<input type="checkbox">` up to the host component.
+     */
+    onHostChange() {
+        this.onChange(this.host.checked());
+        this.host.touched.set(true);
+        this.onTouched();
+    }
+    /** Mark as touched when focus leaves the host element tree. */
+    onHostBlur() {
+        this.host.touched.set(true);
+        this.onTouched();
+    }
+    // --- ControlValueAccessor ---
+    writeValue(val) {
+        this.host.checked.set(!!val);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.host.disabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatCheckboxCva, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: NgOatCheckboxCva, isStandalone: true, selector: "ng-oat-checkbox[formControlName],ng-oat-checkbox[formControl],ng-oat-checkbox[ngModel],\nng-oat-switch[formControlName],ng-oat-switch[formControl],ng-oat-switch[ngModel]", host: { listeners: { "change": "onHostChange()", "focusout": "onHostBlur()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NgOatCheckboxCva),
+                multi: true,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatCheckboxCva, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `ng-oat-checkbox[formControlName],ng-oat-checkbox[formControl],ng-oat-checkbox[ngModel],
+ng-oat-switch[formControlName],ng-oat-switch[formControl],ng-oat-switch[ngModel]`,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NgOatCheckboxCva),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], propDecorators: { onHostChange: [{
+                type: HostListener,
+                args: ['change']
+            }], onHostBlur: [{
+                type: HostListener,
+                args: ['focusout']
+            }] } });
+
+// Forms barrel export
+/** Convenience array — import both CVA adapters at once. */
+const NgOatFormsCva = [NgOatValueCva, NgOatCheckboxCva];
 
 // Components barrel export
 
@@ -5510,5 +5713,5 @@ const OAT_VERSION_TOKEN = new InjectionToken('OAT_VERSION', {
  * Generated bundle index. Do not edit.
  */
 
-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 { 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 };
 //# sourceMappingURL=letsprogram-ng-oat.mjs.map