@egose/shadcn-theme-ng 0.5.3 → 0.6.1

package/form-text-input/fesm2022/form-text-input.mjs

@@ -127,7 +127,7 @@ class EgFormTextInput {
     $hintClass = computed(() => hlm("mt-0", this._shared.hintClass, this._config.hintClass, this.hintClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormTextInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormTextInput, isStandalone: true, selector: "eg-form-text-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, autoError: { classPropertyName: "autoError", publicName: "autoError", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "$userClass()" } }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: "\n    @let lbl = label();\n    @let cnm = controlName();\n    @let hnt = hint();\n    @let rqrd = required();\n\n    <hlm-form-field>\n      @if (lbl) {\n        <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\"\n          >{{ lbl }}\n          @if (rqrd) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </label>\n      }\n\n      <input\n        hlmInput\n        [attr.aria-label]=\"lbl\"\n        [id]=\"effectiveId()\"\n        [name]=\"cnm || name()\"\n        [formControlName]=\"cnm\"\n        [class]=\"$inputClass()\"\n        [type]=\"type()\"\n        [placeholder]=\"placeholder()\"\n        [readonly]=\"readonly()\"\n        [attr.disabled]=\"effectiveDisabled() ? '' : null\"\n        [ariaDescribedby]=\"describedBy()\"\n        [max]=\"max()\"\n        [min]=\"min()\"\n        [maxlength]=\"maxlength()\"\n        [minlength]=\"minlength()\"\n        [pattern]=\"pattern()\"\n        [autocomplete]=\"autocomplete()\"\n        [autofocus]=\"autofocus()\"\n        [required]=\"rqrd\"\n      />\n\n      @if (showError()) {\n        <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n          {{ resolvedError() }}\n        </hlm-error>\n      }\n\n      @if (hnt) {\n        <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n          {{ hnt }}\n        </hlm-hint>\n      }\n    </hlm-form-field>\n  ", isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: HlmFormField, selector: "hlm-form-field", inputs: ["class"] }, { kind: "directive", type: HlmError, selector: "hlm-error", inputs: ["class"] }, { kind: "directive", type: HlmHint, selector: "hlm-hint", inputs: ["class"] }, { kind: "directive", type: HlmLabel, selector: "[hlmLabel]", inputs: ["class"] }, { kind: "directive", type: HlmInput, selector: "[hlmInput]", inputs: ["ariaDescribedby"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormTextInput, isStandalone: true, selector: "eg-form-text-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, autoError: { classPropertyName: "autoError", publicName: "autoError", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "$userClass()" } }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: "\n    @let lbl = label();\n    @let cnm = controlName();\n    @let hnt = hint();\n    @let rqrd = required();\n\n    <hlm-form-field>\n      @if (lbl) {\n        <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\"\n          >{{ lbl }}\n          @if (rqrd) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </label>\n      }\n\n      <input\n        hlmInput\n        [attr.aria-label]=\"lbl\"\n        [id]=\"effectiveId()\"\n        [name]=\"cnm || name()\"\n        [formControlName]=\"cnm\"\n        [class]=\"$inputClass()\"\n        [type]=\"type()\"\n        [placeholder]=\"placeholder()\"\n        [readonly]=\"readonly()\"\n        [attr.disabled]=\"effectiveDisabled() ? '' : null\"\n        [ariaDescribedby]=\"describedBy()\"\n        [max]=\"max()\"\n        [min]=\"min()\"\n        [maxlength]=\"maxlength()\"\n        [minlength]=\"minlength()\"\n        [pattern]=\"pattern()\"\n        [autocomplete]=\"autocomplete()\"\n        [autofocus]=\"autofocus()\"\n        [required]=\"rqrd\"\n      />\n\n      @if (showError()) {\n        <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n          {{ resolvedError() }}\n        </hlm-error>\n      }\n\n      @if (hnt) {\n        <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n          {{ hnt }}\n        </hlm-hint>\n      }\n    </hlm-form-field>\n  ", isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: HlmFormField, selector: "hlm-form-field", inputs: ["class"] }, { kind: "directive", type: HlmError, selector: "hlm-error", inputs: ["class"] }, { kind: "directive", type: HlmHint, selector: "hlm-hint", inputs: ["class"] }, { kind: "directive", type: HlmLabel, selector: "[hlmLabel]", inputs: ["class"] }, { kind: "directive", type: HlmInput, selector: "[hlmInput]", inputs: ["ariaDescribedby", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormTextInput, decorators: [{
             type: Component,

package/form-textarea/fesm2022/form-textarea.mjs

@@ -120,7 +120,7 @@ class EgFormTextarea {
     $hintClass = computed(() => hlm("mt-0", this._shared.hintClass, this._config.hintClass, this.hintClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormTextarea, isStandalone: true, selector: "eg-form-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, autoError: { classPropertyName: "autoError", publicName: "autoError", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, textareaClass: { classPropertyName: "textareaClass", publicName: "textareaClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "$userClass()" } }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: "\n    @let lbl = label();\n    @let cnm = controlName();\n    @let hnt = hint();\n    @let rqrd = required();\n\n    <hlm-form-field>\n      @if (lbl) {\n        <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\"\n          >{{ lbl }}\n          @if (rqrd) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </label>\n      }\n\n      <textarea\n        hlmInput\n        [attr.aria-label]=\"lbl\"\n        [id]=\"effectiveId()\"\n        [name]=\"cnm || name()\"\n        [formControlName]=\"cnm\"\n        [class]=\"$textareaClass()\"\n        [placeholder]=\"placeholder()\"\n        [readonly]=\"readonly()\"\n        [attr.disabled]=\"effectiveDisabled() ? '' : null\"\n        [ariaDescribedby]=\"describedBy()\"\n        [maxlength]=\"maxlength()\"\n        [minlength]=\"minlength()\"\n        [required]=\"rqrd\"\n        [rows]=\"rows()\"\n        [cols]=\"cols()\"\n      ></textarea>\n\n      @if (showError()) {\n        <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n          {{ resolvedError() }}\n        </hlm-error>\n      }\n\n      @if (hnt) {\n        <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n          {{ hnt }}\n        </hlm-hint>\n      }\n    </hlm-form-field>\n  ", isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: HlmFormField, selector: "hlm-form-field", inputs: ["class"] }, { kind: "directive", type: HlmError, selector: "hlm-error", inputs: ["class"] }, { kind: "directive", type: HlmHint, selector: "hlm-hint", inputs: ["class"] }, { kind: "directive", type: HlmLabel, selector: "[hlmLabel]", inputs: ["class"] }, { kind: "directive", type: HlmInput, selector: "[hlmInput]", inputs: ["ariaDescribedby"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormTextarea, isStandalone: true, selector: "eg-form-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, autoError: { classPropertyName: "autoError", publicName: "autoError", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, textareaClass: { classPropertyName: "textareaClass", publicName: "textareaClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "$userClass()" } }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: "\n    @let lbl = label();\n    @let cnm = controlName();\n    @let hnt = hint();\n    @let rqrd = required();\n\n    <hlm-form-field>\n      @if (lbl) {\n        <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\"\n          >{{ lbl }}\n          @if (rqrd) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </label>\n      }\n\n      <textarea\n        hlmInput\n        [attr.aria-label]=\"lbl\"\n        [id]=\"effectiveId()\"\n        [name]=\"cnm || name()\"\n        [formControlName]=\"cnm\"\n        [class]=\"$textareaClass()\"\n        [placeholder]=\"placeholder()\"\n        [readonly]=\"readonly()\"\n        [attr.disabled]=\"effectiveDisabled() ? '' : null\"\n        [ariaDescribedby]=\"describedBy()\"\n        [maxlength]=\"maxlength()\"\n        [minlength]=\"minlength()\"\n        [required]=\"rqrd\"\n        [rows]=\"rows()\"\n        [cols]=\"cols()\"\n      ></textarea>\n\n      @if (showError()) {\n        <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n          {{ resolvedError() }}\n        </hlm-error>\n      }\n\n      @if (hnt) {\n        <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n          {{ hnt }}\n        </hlm-hint>\n      }\n    </hlm-form-field>\n  ", isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: HlmFormField, selector: "hlm-form-field", inputs: ["class"] }, { kind: "directive", type: HlmError, selector: "hlm-error", inputs: ["class"] }, { kind: "directive", type: HlmHint, selector: "hlm-hint", inputs: ["class"] }, { kind: "directive", type: HlmLabel, selector: "[hlmLabel]", inputs: ["class"] }, { kind: "directive", type: HlmInput, selector: "[hlmInput]", inputs: ["ariaDescribedby", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormTextarea, decorators: [{
             type: Component,

package/form-toggle/README.md

@@ -77,23 +77,24 @@ Selector (from source): `eg-form-toggle` (standalone component, host `tw:w-full`
 
 Bind `formControlName` on the element; there is no `controlName` input.
 
-| Input         | Type                        | Default     | Description                                                                                                                                                                                      |
-| ------------- | --------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `label`       | `string \| undefined`       | —           | Label text beside the toggle (hidden when omitted).                                                                                                                                              |
-| `error`       | `string \| undefined`       | —           | Error text shown when invalid.                                                                                                                                                                   |
-| `autoError`   | `boolean`                   | `true`      | Auto-resolve the message from the control's `ValidationErrors` when `error` is unset. Explicit `error` always wins; `error=""` counts as unset. Global wording via `provideEgFormErrorMessages`. |
-| `hint`        | `string \| undefined`       | —           | Hint text shown otherwise.                                                                                                                                                                       |
-| `controlId`   | `string \| undefined`       | —           | Explicit id (first priority for `effectiveId`).                                                                                                                                                  |
-| `id`          | `string \| undefined`       | —           | Fallback id (second priority).                                                                                                                                                                   |
-| `disabled`    | `boolean`                   | `false`     | Locks interaction (form control stays enabled).                                                                                                                                                  |
-| `required`    | `boolean`                   | `false`     | Shows a red `*` next to the label.                                                                                                                                                               |
-| `variant`     | `'default' \| 'outline'`    | `'default'` | Toggle variant forwarded to `hlmToggle`.                                                                                                                                                         |
-| `size`        | `'default' \| 'sm' \| 'lg'` | `'default'` | Toggle size forwarded to `hlmToggle`.                                                                                                                                                            |
-| `class`       | `ClassValue`                | `''`        | Extra host classes (base `tw:w-full`).                                                                                                                                                           |
-| `toggleClass` | `string`                    | `''`        | Extra toggle-button classes.                                                                                                                                                                     |
-| `labelClass`  | `string`                    | `''`        | Extra label classes.                                                                                                                                                                             |
-| `errorClass`  | `string`                    | `''`        | Extra error classes (base `tw:mt-0`).                                                                                                                                                            |
-| `hintClass`   | `string`                    | `''`        | Extra hint classes (base `tw:mt-0`).                                                                                                                                                             |
+| Input              | Type                        | Default     | Description                                                                                                                                                                                      |
+| ------------------ | --------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `label`            | `string \| undefined`       | —           | Label text beside the toggle (hidden when omitted).                                                                                                                                              |
+| `error`            | `string \| undefined`       | —           | Error text shown when invalid.                                                                                                                                                                   |
+| `autoError`        | `boolean`                   | `true`      | Auto-resolve the message from the control's `ValidationErrors` when `error` is unset. Explicit `error` always wins; `error=""` counts as unset. Global wording via `provideEgFormErrorMessages`. |
+| `hint`             | `string \| undefined`       | —           | Hint text shown otherwise.                                                                                                                                                                       |
+| `aria-describedby` | `string \| null`            | `null`      | Consumer-owned description IDs merged with the displayed error or hint on the native button.                                                                                                     |
+| `controlId`        | `string \| undefined`       | —           | Explicit id (first priority for `effectiveId`).                                                                                                                                                  |
+| `id`               | `string \| undefined`       | —           | Fallback id (second priority).                                                                                                                                                                   |
+| `disabled`         | `boolean`                   | `false`     | Locks interaction (form control stays enabled).                                                                                                                                                  |
+| `required`         | `boolean`                   | `false`     | Shows a red `*` next to the label.                                                                                                                                                               |
+| `variant`          | `'default' \| 'outline'`    | `'default'` | Toggle variant forwarded to `hlmToggle`.                                                                                                                                                         |
+| `size`             | `'default' \| 'sm' \| 'lg'` | `'default'` | Toggle size forwarded to `hlmToggle`.                                                                                                                                                            |
+| `class`            | `ClassValue`                | `''`        | Extra host classes (base `tw:w-full`).                                                                                                                                                           |
+| `toggleClass`      | `string`                    | `''`        | Extra toggle-button classes.                                                                                                                                                                     |
+| `labelClass`       | `string`                    | `''`        | Extra label classes.                                                                                                                                                                             |
+| `errorClass`       | `string`                    | `''`        | Extra error classes (base `tw:mt-0`).                                                                                                                                                            |
+| `hintClass`        | `string`                    | `''`        | Extra hint classes (base `tw:mt-0`).                                                                                                                                                             |
 
 | Member               | Description                                                                    |
 | -------------------- | ------------------------------------------------------------------------------ |
@@ -163,7 +164,10 @@ export class ConsentToggleComponent {
 ## Accessibility notes
 
 - Label `for` ↔ button `id` wiring is automatic via `effectiveId` — always pass a `label`.
-- The required `*` is visual; pair with `Validators.requiredTrue` so assistive tech and validation agree.
+- The actual toggle button exposes `aria-pressed` and references the **currently displayed error or hint** with `aria-describedby`. Touch/dirty-only changes and submission update the description; correction/reset restore the hint when present. Removing a hint removes its reference.
+- Pass consumer-owned IDs with `[aria-describedby]="'notification-help notification-policy'"`. They precede the active wrapper message ID; whitespace is normalized and duplicate IDs are removed. Keep those external elements mounted. `${effectiveId}-error` and `${effectiveId}-hint` are reserved for wrapper messages; do not supply them as consumer IDs.
+- The button exposes `aria-invalid="true"` while its validation error is displayed and removes the attribute when feedback clears. The native label association and pressed state remain independent of validation.
+- The required `*` is visual; configure `Validators.requiredTrue` independently. Toggle buttons do not support `aria-required`.
 
 ## Theming / CSS variables
 

package/form-toggle/fesm2022/form-toggle.mjs

@@ -53,6 +53,8 @@ class EgFormToggle {
     ...(ngDevMode ? [{ debugName: "autoError" }] : /* istanbul ignore next */ []));
     hint = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Consumer-owned description IDs, merged with the displayed error or hint on the button. */
+    ariaDescribedBy = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedBy" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
     id = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -78,12 +80,14 @@ class EgFormToggle {
     ...(ngDevMode ? [{ debugName: "_status" }] : /* istanbul ignore next */ []));
     _submitted = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_submitted" }] : /* istanbul ignore next */ []));
+    _interacted = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_interacted" }] : /* istanbul ignore next */ []));
     /**
      * Displayed message: explicit `error()` wins; otherwise (when `autoError()`)
      * auto-resolved from the control's `ValidationErrors`. Plain method (not a
      * computed): `ValidationErrors` is not a signal, so the control must be read
      * fresh on every change-detection pass (`showError()` re-evaluates with it
-     * via the `_status`/`_submitted` signals).
+     * via the `_status`/`_submitted`/`_interacted` signals).
      */
     resolvedError() {
         const explicit = this.error();
@@ -96,20 +100,26 @@ class EgFormToggle {
     showError = computed(() => {
         this._status();
         this._submitted();
+        this._interacted();
         const control = this._controlDir?.control;
-        return (!!this.resolvedError() &&
-            !!control?.errors &&
-            (control.touched || control.dirty || !!this._formGroupDirective?.submitted));
+        return !!this.resolvedError() && !!control?.errors && (this._interacted() || this._submitted());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
     showHint = computed(() => !this.showError() && !!this.hint(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
+    describedBy() {
+        const ids = [this.ariaDescribedBy(), this.showError() ? this.errorId() : this.showHint() ? this.hintId() : null];
+        return [...new Set(ids.filter(Boolean).join(' ').split(/\s+/).filter(Boolean))].join(' ') || null;
+    }
     _onChange;
     _onTouched;
     ngDoCheck() {
         const submitted = !!this._formGroupDirective?.submitted;
         if (this._submitted() !== submitted)
             this._submitted.set(submitted);
+        // Keep silent interaction updates (emitEvent: false) visible on the next check too.
+        const control = this._controlDir?.control;
+        this._interacted.set(!!control && (control.touched || control.dirty));
     }
     ngAfterViewInit() {
         // Resolved here (not earlier): this component IS the value accessor for
@@ -119,8 +129,11 @@ class EgFormToggle {
         this._controlDir = this._injector.get(FormControlName, null, { self: true, optional: true }) ?? null;
         const control = this._controlDir?.control;
         this._status.set(control?.status ?? null);
-        control?.statusChanges.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((status) => {
-            this._status.set(status);
+        this._interacted.set(!!control && (control.touched || control.dirty));
+        // Touch/dirty/reset events must invalidate feedback even when status stays INVALID.
+        control?.events.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
+            this._status.set(control.status);
+            this._interacted.set(control.touched || control.dirty);
         });
     }
     _handleStateChange(state) {
@@ -167,7 +180,7 @@ class EgFormToggle {
     $hintClass = computed(() => hlm("mt-0", this._shared.hintClass, this._config.hintClass, this.hintClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormToggle, isStandalone: true, selector: "eg-form-toggle", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, autoError: { classPropertyName: "autoError", publicName: "autoError", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", 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 }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, toggleClass: { classPropertyName: "toggleClass", publicName: "toggleClass", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "$userClass()" } }, providers: [EG_FORM_TOGGLE_VALUE_ACCESSOR, provideIcons({ lucideCheck })], ngImport: i0, template: "\n    @let lbl = label();\n    @let rqrd = required();\n\n    <div>\n      <div class=\"flex items-center gap-1\">\n        <button\n          hlmToggle\n          type=\"button\"\n          [id]=\"effectiveId()\"\n          [state]=\"_state() ? 'on' : 'off'\"\n          (stateChange)=\"_handleStateChange($event)\"\n          [disabled]=\"_disabled()\"\n          [variant]=\"variant()\"\n          [size]=\"size()\"\n          [class]=\"$toggleClass()\"\n        >\n          @if (_state()) {\n            <ng-icon name=\"lucideCheck\" />\n          }\n        </button>\n        @if (lbl) {\n          <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\"\n            >{{ lbl }}\n            @if (rqrd) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n        }\n      </div>\n\n      @if (showError()) {\n        <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n          {{ resolvedError() }}\n        </hlm-error>\n      } @else if (showHint()) {\n        <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n          {{ hint() }}\n        </hlm-hint>\n      }\n    </div>\n  ", isInline: true, dependencies: [{ kind: "directive", type: HlmToggle, selector: "button[hlmToggle]", inputs: ["variant", "size"] }, { kind: "directive", type: HlmError, selector: "hlm-error", inputs: ["class"] }, { kind: "directive", type: HlmHint, selector: "hlm-hint", inputs: ["class"] }, { kind: "directive", type: HlmLabel, selector: "[hlmLabel]", inputs: ["class"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormToggle, isStandalone: true, selector: "eg-form-toggle", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, autoError: { classPropertyName: "autoError", publicName: "autoError", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", 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 }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, toggleClass: { classPropertyName: "toggleClass", publicName: "toggleClass", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "$userClass()" } }, providers: [EG_FORM_TOGGLE_VALUE_ACCESSOR, provideIcons({ lucideCheck })], ngImport: i0, template: "\n    @let lbl = label();\n    @let rqrd = required();\n\n    <div>\n      <div class=\"flex items-center gap-1\">\n        <button\n          hlmToggle\n          type=\"button\"\n          [id]=\"effectiveId()\"\n          [attr.aria-describedby]=\"describedBy()\"\n          [attr.aria-invalid]=\"showError() ? 'true' : null\"\n          [state]=\"_state() ? 'on' : 'off'\"\n          (stateChange)=\"_handleStateChange($event)\"\n          [disabled]=\"_disabled()\"\n          [variant]=\"variant()\"\n          [size]=\"size()\"\n          [class]=\"$toggleClass()\"\n        >\n          @if (_state()) {\n            <ng-icon name=\"lucideCheck\" />\n          }\n        </button>\n        @if (lbl) {\n          <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\"\n            >{{ lbl }}\n            @if (rqrd) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n        }\n      </div>\n\n      @if (showError()) {\n        <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n          {{ resolvedError() }}\n        </hlm-error>\n      } @else if (showHint()) {\n        <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n          {{ hint() }}\n        </hlm-hint>\n      }\n    </div>\n  ", isInline: true, dependencies: [{ kind: "directive", type: HlmToggle, selector: "button[hlmToggle]", inputs: ["variant", "size"] }, { kind: "directive", type: HlmError, selector: "hlm-error", inputs: ["class"] }, { kind: "directive", type: HlmHint, selector: "hlm-hint", inputs: ["class"] }, { kind: "directive", type: HlmLabel, selector: "[hlmLabel]", inputs: ["class"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormToggle, decorators: [{
             type: Component,
@@ -180,9 +193,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [HlmToggle, HlmError, HlmHint, HlmLabel, NgIcon],
                     providers: [EG_FORM_TOGGLE_VALUE_ACCESSOR, provideIcons({ lucideCheck })],
-                    template: "\n    @let lbl = label();\n    @let rqrd = required();\n\n    <div>\n      <div class=\"flex items-center gap-1\">\n        <button\n          hlmToggle\n          type=\"button\"\n          [id]=\"effectiveId()\"\n          [state]=\"_state() ? 'on' : 'off'\"\n          (stateChange)=\"_handleStateChange($event)\"\n          [disabled]=\"_disabled()\"\n          [variant]=\"variant()\"\n          [size]=\"size()\"\n          [class]=\"$toggleClass()\"\n        >\n          @if (_state()) {\n            <ng-icon name=\"lucideCheck\" />\n          }\n        </button>\n        @if (lbl) {\n          <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\"\n            >{{ lbl }}\n            @if (rqrd) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n        }\n      </div>\n\n      @if (showError()) {\n        <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n          {{ resolvedError() }}\n        </hlm-error>\n      } @else if (showHint()) {\n        <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n          {{ hint() }}\n        </hlm-hint>\n      }\n    </div>\n  ",
+                    template: "\n    @let lbl = label();\n    @let rqrd = required();\n\n    <div>\n      <div class=\"flex items-center gap-1\">\n        <button\n          hlmToggle\n          type=\"button\"\n          [id]=\"effectiveId()\"\n          [attr.aria-describedby]=\"describedBy()\"\n          [attr.aria-invalid]=\"showError() ? 'true' : null\"\n          [state]=\"_state() ? 'on' : 'off'\"\n          (stateChange)=\"_handleStateChange($event)\"\n          [disabled]=\"_disabled()\"\n          [variant]=\"variant()\"\n          [size]=\"size()\"\n          [class]=\"$toggleClass()\"\n        >\n          @if (_state()) {\n            <ng-icon name=\"lucideCheck\" />\n          }\n        </button>\n        @if (lbl) {\n          <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\"\n            >{{ lbl }}\n            @if (rqrd) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n        }\n      </div>\n\n      @if (showError()) {\n        <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n          {{ resolvedError() }}\n        </hlm-error>\n      } @else if (showHint()) {\n        <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n          {{ hint() }}\n        </hlm-hint>\n      }\n    </div>\n  ",
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], autoError: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoError", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], toggleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleClass", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], errorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorClass", required: false }] }], hintClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintClass", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], autoError: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoError", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], toggleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleClass", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], errorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorClass", required: false }] }], hintClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintClass", required: false }] }] } });
 
 /*
  * Public API Surface of form-toggle

package/form-toggle/types/form-toggle.d.ts

@@ -36,6 +36,8 @@ declare class EgFormToggle implements ControlValueAccessor, AfterViewInit, DoChe
      */
     autoError: _angular_core.InputSignal<boolean>;
     hint: _angular_core.InputSignal<string | undefined>;
+    /** Consumer-owned description IDs, merged with the displayed error or hint on the button. */
+    ariaDescribedBy: _angular_core.InputSignal<string | null>;
     id: _angular_core.InputSignal<string | undefined>;
     disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     required: _angular_core.InputSignal<boolean>;
@@ -49,16 +51,18 @@ declare class EgFormToggle implements ControlValueAccessor, AfterViewInit, DoChe
     protected readonly _disabled: _angular_core.Signal<boolean>;
     private readonly _status;
     private readonly _submitted;
+    private readonly _interacted;
     /**
      * Displayed message: explicit `error()` wins; otherwise (when `autoError()`)
      * auto-resolved from the control's `ValidationErrors`. Plain method (not a
      * computed): `ValidationErrors` is not a signal, so the control must be read
      * fresh on every change-detection pass (`showError()` re-evaluates with it
-     * via the `_status`/`_submitted` signals).
+     * via the `_status`/`_submitted`/`_interacted` signals).
      */
     protected resolvedError(): string | undefined;
     protected readonly showError: _angular_core.Signal<boolean>;
     protected readonly showHint: _angular_core.Signal<boolean>;
+    protected describedBy(): string | null;
     protected _onChange?: ChangeFn<boolean>;
     protected _onTouched?: TouchFn;
     ngDoCheck(): void;
@@ -80,7 +84,7 @@ declare class EgFormToggle implements ControlValueAccessor, AfterViewInit, DoChe
     $errorClass: _angular_core.Signal<string>;
     $hintClass: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgFormToggle, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgFormToggle, "eg-form-toggle", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "controlId": { "alias": "controlId"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "autoError": { "alias": "autoError"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "toggleClass": { "alias": "toggleClass"; "required": false; "isSignal": true; }; "labelClass": { "alias": "labelClass"; "required": false; "isSignal": true; }; "errorClass": { "alias": "errorClass"; "required": false; "isSignal": true; }; "hintClass": { "alias": "hintClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgFormToggle, "eg-form-toggle", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "controlId": { "alias": "controlId"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "autoError": { "alias": "autoError"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "toggleClass": { "alias": "toggleClass"; "required": false; "isSignal": true; }; "labelClass": { "alias": "labelClass"; "required": false; "isSignal": true; }; "errorClass": { "alias": "errorClass"; "required": false; "isSignal": true; }; "hintClass": { "alias": "hintClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 interface EgFormToggleConfig {

package/input/README.md

@@ -58,11 +58,12 @@ The directive matches `input[hlmInput]` usage in practice (selector `[hlmInput]`
 
 ### `[hlmInput]` — `HlmInput`
 
-| Input             | Type             | Default | Description                                                                                                         |
-| ----------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
-| `ariaDescribedby` | `string \| null` | `null`  | Bound to `aria-describedby`. Combine with `<hlm-error>`/`<hlm-hint>` ids (the form wrappers do this automatically). |
-| `id`              | (via `BrnInput`) | —       | Forwarded to the `BrnInput` host directive.                                                                         |
-| `forceInvalid`    | (via `BrnInput`) | —       | Forwarded to the `BrnInput` host directive; forces the `data-matches-spartan-invalid` error styles.                 |
+| Input             | Type                  | Default   | Description                                                                                                         |
+| ----------------- | --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `ariaDescribedby` | `string \| null`      | `null`    | Bound to `aria-describedby`. Combine with `<hlm-error>`/`<hlm-hint>` ids (the form wrappers do this automatically). |
+| `id`              | (via `BrnInput`)      | —         | Forwarded to the `BrnInput` host directive.                                                                         |
+| `forceInvalid`    | (via `BrnInput`)      | —         | Forwarded to the `BrnInput` host directive; forces the `data-matches-spartan-invalid` error styles.                 |
+| `size`            | `sm \| default \| lg` | `default` | Height density: `h-8` / `h-9` / `h-10`.                                                                             |
 
 No outputs. Visual states are attribute-driven: `data-matches-spartan-invalid=true` switches the border/ring to destructive; `disabled` applies `pointer-events-none`, `cursor-not-allowed`, `opacity-50`. Base geometry: `h-9`, `rounded-md`, `text-base` (`md:text-sm`), full width.
 
@@ -180,13 +181,7 @@ import { HlmError, HlmHint } from '@egose/shadcn-theme-ng/form-field';
   template: `
     <form [formGroup]="form">
       <label for="handle">Handle</label>
-      <input
-        hlmInput
-        id="handle"
-        formControlName="handle"
-        placeholder="@jane"
-        [ariaDescribedby]="describedBy()"
-      />
+      <input hlmInput id="handle" formControlName="handle" placeholder="@jane" [ariaDescribedby]="describedBy()" />
       @if (showError()) {
         <hlm-error id="handle-error">Use 3+ lowercase letters.</hlm-error>
       } @else {

package/input/fesm2022/input.mjs

@@ -4,16 +4,19 @@ import * as i2 from '@spartan-ng/brain/field';
 import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
 import * as i1 from '@spartan-ng/brain/input';
 import { BrnInput } from '@spartan-ng/brain/input';
-import { classes } from '@egose/shadcn-theme-ng/utils';
+import { classes, hlm } from '@egose/shadcn-theme-ng/utils';
 
 class HlmInput {
     ariaDescribedby = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    /** Height density. Merged after the base height class, so it wins via `twMerge`. */
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     constructor() {
-        classes(() => "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50");
+        classes(() => hlm("dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", this.size() === 'sm' ? "h-8" : this.size() === 'lg' ? "h-10" : ''));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmInput, isStandalone: true, selector: "[hlmInput]", inputs: { ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "input" }, properties: { "attr.aria-describedby": "ariaDescribedby()" } }, hostDirectives: [{ directive: i1.BrnInput, inputs: ["id", "id", "forceInvalid", "forceInvalid"] }, { directive: i2.BrnFieldControlDescribedBy }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmInput, isStandalone: true, selector: "[hlmInput]", inputs: { ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "input" }, properties: { "attr.aria-describedby": "ariaDescribedby()" } }, hostDirectives: [{ directive: i1.BrnInput, inputs: ["id", "id", "forceInvalid", "forceInvalid"] }, { directive: i2.BrnFieldControlDescribedBy }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmInput, decorators: [{
             type: Directive,
@@ -25,7 +28,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                         '[attr.aria-describedby]': 'ariaDescribedby()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /*
  * Public API Surface of input

package/input/types/input.d.ts

@@ -4,9 +4,11 @@ import * as i2 from '@spartan-ng/brain/field';
 
 declare class HlmInput {
     readonly ariaDescribedby: i0.InputSignal<string | null>;
+    /** Height density. Merged after the base height class, so it wins via `twMerge`. */
+    readonly size: i0.InputSignal<"sm" | "default" | "lg">;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<HlmInput, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmInput, "[hlmInput]", never, { "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.BrnInput; inputs: { "id": "id"; "forceInvalid": "forceInvalid"; }; outputs: {}; }, { directive: typeof i2.BrnFieldControlDescribedBy; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmInput, "[hlmInput]", never, { "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.BrnInput; inputs: { "id": "id"; "forceInvalid": "forceInvalid"; }; outputs: {}; }, { directive: typeof i2.BrnFieldControlDescribedBy; inputs: {}; outputs: {}; }]>;
 }
 
 declare const HlmInputImports: readonly [typeof HlmInput];

package/input-otp/README.md

@@ -61,7 +61,7 @@ import { HlmInputOtpModule } from '@egose/shadcn-theme-ng/input-otp';
 export class MyModule {}
 ```
 
-Exported from `src/public-api.ts`: `HlmInputOtp`, `HlmInputOtpGroup`, `HlmInputOtpSeparator`, `HlmInputOtpSlot`, `HlmInputOtpFakeCaret`, plus `HlmInputOtpImports` and `HlmInputOtpModule`.
+Exported from `src/public-api.ts`: `HlmInputOtp`, `HlmInputOtpControl`, `HlmInputOtpGroup`, `HlmInputOtpSeparator`, `HlmInputOtpSlot`, `HlmInputOtpFakeCaret`, plus `HlmInputOtpImports` and `HlmInputOtpModule`.
 
 ## Anatomy / Structure
 
@@ -88,6 +88,32 @@ Brain inputs on `brn-input-otp` (from `@spartan-ng/brain/input-otp`): `length` (
 
 ## API reference
 
+### `hlm-input-otp` — `HlmInputOtpControl`
+
+Use this component for native-input accessibility forwarding. It extends `BrnInputOtp` with
+a declarative input template and retains its inputs, outputs, CVA, paste and focus behavior.
+`HlmInputOtpImports` / `HlmInputOtpModule` include it; a separate brain import is unnecessary.
+Compose it with `HlmInputOtpSlot` (the raw brain slot's private injection token is not supported).
+
+- `[aria-describedby]` (`string | null`, default `null`) reaches the native input and merges
+  with enclosing Spartan field description IDs, deduplicated. Bind only IDs of mounted elements.
+- `required` (boolean-coerced, default `false`) exposes native `aria-required`. Add Angular
+  validators separately; native `aria-invalid` follows the bound form control.
+- `inputId` connects a normal `<label for>` to the one focusable native input.
+
+```html
+<label for="verification">Verification code</label>
+<hlm-input-otp [length]="4" inputId="verification" aria-describedby="verification-help" required>
+  <div hlmInputOtpGroup>
+    <hlm-input-otp-slot index="0" />
+    <hlm-input-otp-slot index="1" />
+    <hlm-input-otp-slot index="2" />
+    <hlm-input-otp-slot index="3" />
+  </div>
+</hlm-input-otp>
+<p id="verification-help">Enter the four-character code.</p>
+```
+
 ### `brn-input-otp[hlmInputOtp]` — `HlmInputOtp`
 
 Pure styling directive (`data-slot="input-otp"`, flex row, dims on `has-disabled`). No inputs/outputs — bind `length`, `value`, `disabled`, `inputId`, … on the `brn-input-otp` element itself.
@@ -102,7 +128,7 @@ Slot cluster wrapper (`data-slot="input-otp-group"`). No inputs/outputs. Use one
 | ------- | -------------------------------------------------- | -------------------------------------------------------- |
 | `index` | `number` (**required**, `numberAttribute` coerced) | Zero-based position of the character this slot displays. |
 
-Renders `<brn-input-otp-slot [index]>` internally; active slot gets the `ring` highlight, invalid state the destructive border.
+Under `brn-input-otp`, renders `<brn-input-otp-slot [index]>`; under `hlm-input-otp`, reads the adapter's public context and renders the same character/caret and state attributes declaratively. Active slots get the `ring` highlight.
 
 ### `hlm-input-otp-separator` — `HlmInputOtpSeparator`
 
@@ -267,17 +293,15 @@ export class LengthsExample {}
 
 ```ts
 import { Component, signal } from '@angular/core';
-import { BrnInputOtp } from '@spartan-ng/brain/input-otp';
 import { HlmInputOtpImports } from '@egose/shadcn-theme-ng/input-otp';
 import { HlmError } from '@egose/shadcn-theme-ng/form-field';
 
 @Component({
   standalone: true,
-  imports: [BrnInputOtp, HlmInputOtpImports, HlmError],
+  imports: [HlmInputOtpImports, HlmError],
   template: `
     <label for="otp-verify">Verification code</label>
-    <brn-input-otp
-      hlmInputOtp
+    <hlm-input-otp
       [length]="6"
       inputId="otp-verify"
       inputMode="numeric"
@@ -286,7 +310,7 @@ import { HlmError } from '@egose/shadcn-theme-ng/form-field';
       [value]="code()"
       (valueChange)="code.set($event); error.set(null)"
       (completed)="verify()"
-      aria-describedby="otp-error"
+      [aria-describedby]="error() ? 'otp-error' : null"
     >
       <div hlmInputOtpGroup>
         <hlm-input-otp-slot index="0" />
@@ -299,7 +323,7 @@ import { HlmError } from '@egose/shadcn-theme-ng/form-field';
         <hlm-input-otp-slot index="4" />
         <hlm-input-otp-slot index="5" />
       </div>
-    </brn-input-otp>
+    </hlm-input-otp>
     @if (error()) {
       <hlm-error id="otp-error">{{ error() }}</hlm-error>
     }
@@ -366,7 +390,7 @@ export class PasteExample {
 
 - Always render a visible `<label>` bound via `inputId` — the hidden native input is what AT focuses; without the label the purpose is unclear.
 - `inputMode="numeric"` (digits) vs `text` (alphanumeric) selects the right mobile keyboard; `inputAutocomplete="one-time-code"` lets browsers/OS autofill SMS codes.
-- Announce failures with a text error (`<hlm-error>` + `aria-describedby`), never by slot color alone.
+- Associate failures with text (`<hlm-error>` + `hlm-input-otp`'s `[aria-describedby]`), never by slot color alone. The legacy brain component has no native description input. `HlmError` is not a live region; browser DOM/focus tests do not establish screen-reader announcements.
 - Keep `length` aligned with what the backend expects and validate `minLength(length)` on the form control so incomplete codes cannot submit.
 
 ## Theming / CSS variables