@letsprogram/ng-oat 0.1.4 → 0.1.6

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.
@@ -2396,10 +2405,23 @@ const MOBILE_BREAKPOINT = 768;
 /**
  * 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>
+ *   <aside data-sidebar>Navigation</aside>
+ *   <main>Main content</main>
+ * </ng-oat-sidebar>
+ * ```
+ *
+ * Usage (overlay — mobile-style drawer at all sizes):
  * ```html
- * <ng-oat-sidebar [scrollLock]="true" (openChange)="onToggle($event)">
- *   <aside sidebar>Navigation</aside>
+ * <ng-oat-sidebar mode="overlay">
+ *   <aside data-sidebar>Navigation</aside>
  *   <main>Main content</main>
  * </ng-oat-sidebar>
  * ```
@@ -2410,11 +2432,19 @@ class NgOatSidebarComponent {
     destroyRef = inject(DestroyRef);
     platformId = inject(PLATFORM_ID);
     doc = inject(DOCUMENT);
-    /** 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.
+     */
+    mode = input('fixed', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    /** Whether scroll lock is applied when sidebar is open */
     scrollLock = input(true, ...(ngDevMode ? [{ debugName: "scrollLock" }] : []));
     initialOpen = input(false, ...(ngDevMode ? [{ debugName: "initialOpen" }] : []));
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     openChange = output();
+    /** Whether the sidebar is in overlay mode */
+    isOverlay = computed(() => this.mode() === 'overlay', ...(ngDevMode ? [{ debugName: "isOverlay" }] : []));
     cleanupFns = [];
     constructor() {
         afterNextRender(() => {
@@ -2424,16 +2454,16 @@ class NgOatSidebarComponent {
                 this.isOpen.set(true);
             }
             this.listen(this.doc, 'keydown', (e) => {
-                if (e.key === KEYS.ESCAPE && this.isOpen() && this.isMobile()) {
+                if (e.key === KEYS.ESCAPE && this.isOpen() && this.shouldAutoClose()) {
                     this.close();
                 }
             });
-            // Outside click to close on mobile
+            // Outside click to close
             this.listen(this.doc, 'click', (e) => {
                 const target = e.target;
                 if (this.isOpen() &&
-                    this.isMobile() &&
-                    !target.closest('[sidebar]') &&
+                    this.shouldAutoClose() &&
+                    !target.closest('[data-sidebar]') &&
                     !target.closest('aside') &&
                     !target.closest('[data-sidebar-toggle]')) {
                     this.close();
@@ -2449,7 +2479,7 @@ class NgOatSidebarComponent {
     open() {
         this.isOpen.set(true);
         this.openChange.emit(true);
-        if (this.scrollLock() && this.isMobile()) {
+        if (this.scrollLock() && this.shouldAutoClose()) {
             this.lockScroll();
         }
     }
@@ -2466,6 +2496,15 @@ class NgOatSidebarComponent {
             this.open();
         }
     }
+    /**
+     * Whether the sidebar should auto-close on outside click / ESC.
+     * In overlay mode: always. In fixed mode: only on mobile.
+     */
+    shouldAutoClose() {
+        if (this.mode() === 'overlay')
+            return true;
+        return typeof window !== 'undefined' && window.innerWidth < MOBILE_BREAKPOINT;
+    }
     isMobile() {
         return typeof window !== 'undefined' && window.innerWidth < MOBILE_BREAKPOINT;
     }
@@ -2480,15 +2519,26 @@ class NgOatSidebarComponent {
         this.cleanupFns.push(() => el.removeEventListener(event, handler));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NgOatSidebarComponent, isStandalone: true, selector: "ng-oat-sidebar", inputs: { scrollLock: { classPropertyName: "scrollLock", publicName: "scrollLock", isSignal: true, isRequired: false, transformFunction: null }, initialOpen: { classPropertyName: "initialOpen", publicName: "initialOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, host: { properties: { "attr.data-sidebar-layout": "\"\"", "attr.data-sidebar-open": "isOpen() ? \"\" : null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgOatSidebarComponent, isStandalone: true, selector: "ng-oat-sidebar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, scrollLock: { classPropertyName: "scrollLock", publicName: "scrollLock", isSignal: true, isRequired: false, transformFunction: null }, initialOpen: { classPropertyName: "initialOpen", publicName: "initialOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, host: { properties: { "attr.data-sidebar-layout": "\"\"", "attr.data-sidebar-open": "isOpen() ? \"\" : null", "attr.data-sidebar-mode": "mode()" } }, ngImport: i0, template: `
+    @if (isOpen() && isOverlay()) {
+      <div class="ng-oat-sidebar-backdrop" (click)="close()"></div>
+    }
+    <ng-content />
+  `, isInline: true, styles: [":host[data-sidebar-mode=overlay]{grid-template-columns:1fr!important}:host[data-sidebar-mode=overlay]>::ng-deep aside[data-sidebar]{position:fixed!important;left:0;top:var(--topnav-offset, 0px);width:16rem;height:calc(100dvh - var(--topnav-offset, 0px));z-index:20;transform:translate(-100%);transition:transform var(--transition, .3s ease);box-shadow:var(--shadow-large)}:host[data-sidebar-mode=overlay][data-sidebar-open]>::ng-deep aside[data-sidebar]{transform:translate(0)}.ng-oat-sidebar-backdrop{position:fixed;inset:0;z-index:19;background:#0006}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatSidebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-oat-sidebar', host: {
                         '[attr.data-sidebar-layout]': '""',
                         '[attr.data-sidebar-open]': 'isOpen() ? "" : null',
-                    }, template: `<ng-content />`, styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { scrollLock: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollLock", required: false }] }], initialOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialOpen", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
+                        '[attr.data-sidebar-mode]': 'mode()',
+                    }, template: `
+    @if (isOpen() && isOverlay()) {
+      <div class="ng-oat-sidebar-backdrop" (click)="close()"></div>
+    }
+    <ng-content />
+  `, styles: [":host[data-sidebar-mode=overlay]{grid-template-columns:1fr!important}:host[data-sidebar-mode=overlay]>::ng-deep aside[data-sidebar]{position:fixed!important;left:0;top:var(--topnav-offset, 0px);width:16rem;height:calc(100dvh - var(--topnav-offset, 0px));z-index:20;transform:translate(-100%);transition:transform var(--transition, .3s ease);box-shadow:var(--shadow-large)}:host[data-sidebar-mode=overlay][data-sidebar-open]>::ng-deep aside[data-sidebar]{transform:translate(0)}.ng-oat-sidebar-backdrop{position:fixed;inset:0;z-index:19;background:#0006}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], scrollLock: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollLock", required: false }] }], initialOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialOpen", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
 
 /**
  * Angular component wrapper for Oat's tabs.
@@ -3055,9 +3105,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(() => {
@@ -3069,6 +3120,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) {
@@ -3134,7 +3186,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()) {
@@ -3162,7 +3214,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()) {
@@ -3187,7 +3239,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.
@@ -3201,7 +3253,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" }] : []));
@@ -3274,7 +3326,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">
@@ -3310,7 +3362,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">
@@ -3343,7 +3395,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
@@ -4992,7 +5044,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" }] : []));
@@ -5002,12 +5054,13 @@ class NgOatInput {
     max = input(undefined, ...(ngDevMode ? [{ debugName: "max" }] : []));
     minLength = input(undefined, ...(ngDevMode ? [{ debugName: "minLength" }] : []));
     maxLength = input(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : []));
+    autocomplete = input(undefined, ...(ngDevMode ? [{ debugName: "autocomplete" }] : []));
     // --- Component-specific inputs ---
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     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);
@@ -5016,66 +5069,68 @@ 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 }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", 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"
+      [attr.autocomplete]="autocomplete() ?? null"
       [attr.maxlength]="maxLength() ?? null"
       (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"
+      [attr.autocomplete]="autocomplete() ?? null"
       [attr.maxlength]="maxLength() ?? null"
       (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 }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", 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>`.
@@ -5095,7 +5150,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" }] : []));
@@ -5108,7 +5163,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);
@@ -5117,29 +5172,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>
       }
@@ -5148,31 +5203,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>`.
@@ -5193,7 +5248,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" }] : []));
@@ -5203,7 +5258,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);
@@ -5212,20 +5267,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()"
     >
@@ -5241,7 +5296,7 @@ class NgOatSelect {
         </option>
       }
     </select>
-    @if (showErrors()) {
+    @if (showErrors() && touched()) {
       @for (err of errors(); track $index) {
         <small class="error">{{ err.message }}</small>
       }
@@ -5250,16 +5305,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()"
     >
@@ -5275,13 +5330,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`.
@@ -5299,7 +5354,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 ---
@@ -5307,9 +5363,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"
@@ -5325,6 +5382,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
@@ -5337,7 +5395,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>`.
@@ -5364,7 +5422,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" }] : []));
@@ -5373,13 +5431,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>
@@ -5387,7 +5445,7 @@ class NgOatRadioGroup {
           <label>
             <input
               type="radio"
-              [name]="groupName()"
+              [name]="groupName"
               [value]="opt.value"
               [checked]="opt.value === value()"
               [disabled]="disabled() || (opt.disabled ?? false)"
@@ -5402,7 +5460,7 @@ class NgOatRadioGroup {
         <label>
           <input
             type="radio"
-            [name]="groupName()"
+            [name]="groupName"
             [value]="opt.value"
             [checked]="opt.value === value()"
             [disabled]="disabled() || (opt.disabled ?? false)"
@@ -5412,7 +5470,7 @@ class NgOatRadioGroup {
         </label>
       }
     }
-    @if (showErrors()) {
+    @if (showErrors() && touched()) {
       @for (err of errors(); track $index) {
         <small class="error">{{ err.message }}</small>
       }
@@ -5421,7 +5479,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>
@@ -5429,7 +5487,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)"
@@ -5444,7 +5502,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)"
@@ -5454,35 +5512,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"] });
@@ -5491,12 +5568,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
 
@@ -5517,5 +5757,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