@egose/shadcn-theme-ng 0.3.0 → 0.5.0

package/README.md

@@ -138,7 +138,7 @@ Import by component name. Component `NameX` is reachable at `@egose/shadcn-theme
 
 <!-- BEGIN GENERATED SUBPATHS -->
 
-`accordion`, `alert`, `alert-dialog`, `aspect-ratio`, `autocomplete`, `avatar`, `badge`, `basic-alert`, `breadcrumb`, `button`, `button-group`, `calendar`, `card`, `carousel`, `checkbox`, `collapsible`, `combobox`, `command`, `confirmation-dialog`, `context-menu`, `date-picker`, `dialog`, `drawer`, `dropdown-menu`, `empty`, `field`, `form-autocomplete`, `form-checkbox`, `form-combobox`, `form-date-picker`, `form-date-picker-multi`, `form-date-range-picker`, `form-field`, `form-field-simple`, `form-input-otp`, `form-month-year-picker`, `form-native-select`, `form-phone-input`, `form-radio-group`, `form-searchable-multiselect`, `form-select`, `form-slider`, `form-switch`, `form-text-input`, `form-textarea`, `form-toggle`, `form-toggle-group`, `hover-card`, `icon`, `input`, `input-group`, `input-otp`, `item`, `kbd`, `label`, `layout-simple`, `menu`, `menubar`, `native-select`, `navigation-menu`, `pagination`, `phone-input`, `popover`, `progress`, `radio-group`, `resizable`, `scroll-area`, `searchable-multiselect`, `select`, `separator`, `sheet`, `sidebar`, `skeleton`, `slider`, `sonner`, `spinner`, `switch`, `table`, `tabs`, `textarea`, `toggle`, `toggle-group`, `tooltip`, `typography`, `utils`.
+`accordion`, `alert`, `alert-dialog`, `aspect-ratio`, `autocomplete`, `avatar`, `badge`, `basic-alert`, `breadcrumb`, `button`, `button-group`, `calendar`, `card`, `carousel`, `checkbox`, `collapsible`, `combobox`, `command`, `confirmation-dialog`, `context-menu`, `date-picker`, `dialog`, `drawer`, `dropdown-menu`, `empty`, `field`, `form-autocomplete`, `form-checkbox`, `form-combobox`, `form-date-picker`, `form-date-picker-multi`, `form-date-range-picker`, `form-field`, `form-field-simple`, `form-input-otp`, `form-month-year-picker`, `form-native-select`, `form-phone-input`, `form-radio-group`, `form-searchable-multiselect`, `form-select`, `form-slider`, `form-switch`, `form-text-input`, `form-textarea`, `form-toggle`, `form-toggle-group`, `hover-card`, `icon`, `input`, `input-group`, `input-otp`, `item`, `kbd`, `label`, `layout-simple`, `menu`, `menubar`, `native-select`, `navigation-menu`, `pagination`, `phone-input`, `popover`, `progress`, `radio-group`, `resizable`, `scroll-area`, `searchable-multiselect`, `select`, `separator`, `sheet`, `sidebar`, `skeleton`, `slider`, `sonner`, `spinner`, `stepper`, `switch`, `table`, `tabs`, `textarea`, `toggle`, `toggle-group`, `tooltip`, `typography`, `utils`.
 
 <!-- END GENERATED SUBPATHS -->
 

package/form-autocomplete/README.md

@@ -53,25 +53,26 @@ Selector (from source): `eg-form-autocomplete` (standalone component, host `tw:w
 
 ### `EgFormAutocomplete` — `eg-form-autocomplete`
 
-| Input          | Type                  | Default             | Description                                                        |
-| -------------- | --------------------- | ------------------- | ------------------------------------------------------------------ |
-| `controlName`  | `string`              | `''`                | `formControlName` key inside the parent `FormGroup`. **Required.** |
-| `label`        | `string \| undefined` | —                   | Label text (hidden when omitted).                                  |
-| `error`        | `string \| undefined` | —                   | Error text shown when invalid.                                     |
-| `hint`         | `string \| undefined` | —                   | Hint text shown otherwise.                                         |
-| `controlId`    | `string \| undefined` | —                   | Explicit id (first priority for `effectiveId`).                    |
-| `id`           | `string \| undefined` | —                   | Fallback id (second priority).                                     |
-| `placeholder`  | `string`              | `'Type to search…'` | Input placeholder.                                                 |
-| `emptyText`    | `string`              | `'No result.'`      | Text shown when no option matches.                                 |
-| `disabled`     | `boolean`             | `false`             | Locks interaction (form control stays enabled).                    |
-| `required`     | `boolean`             | `false`             | Shows a red `*` next to the label.                                 |
-| `options`      | `string[]`            | `[]`                | Rendered as `hlm-autocomplete-item` entries.                       |
-| `class`        | `ClassValue`          | `''`                | Extra host classes (base `tw:w-full`).                             |
-| `labelClass`   | `string`              | `''`                | Extra label classes (base `tw:mb-1`).                              |
-| `controlClass` | `string`              | `''`                | Extra autocomplete-root classes.                                   |
-| `inputClass`   | `string`              | `''`                | Extra text-input classes.                                          |
-| `errorClass`   | `string`              | `''`                | Extra error classes (base `tw:mt-0`).                              |
-| `hintClass`    | `string`              | `''`                | Extra hint classes (base `tw:mt-0`).                               |
+| Input          | Type                  | Default             | Description                                                                                                                                                                                      |
+| -------------- | --------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `controlName`  | `string`              | `''`                | `formControlName` key inside the parent `FormGroup`. **Required.**                                                                                                                               |
+| `label`        | `string \| undefined` | —                   | Label text (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).                                                                                                                                                                   |
+| `placeholder`  | `string`              | `'Type to search…'` | Input placeholder.                                                                                                                                                                               |
+| `emptyText`    | `string`              | `'No result.'`      | Text shown when no option matches.                                                                                                                                                               |
+| `disabled`     | `boolean`             | `false`             | Locks interaction (form control stays enabled).                                                                                                                                                  |
+| `required`     | `boolean`             | `false`             | Shows a red `*` next to the label.                                                                                                                                                               |
+| `options`      | `string[]`            | `[]`                | Rendered as `hlm-autocomplete-item` entries.                                                                                                                                                     |
+| `class`        | `ClassValue`          | `''`                | Extra host classes (base `tw:w-full`).                                                                                                                                                           |
+| `labelClass`   | `string`              | `''`                | Extra label classes (base `tw:mb-1`).                                                                                                                                                            |
+| `controlClass` | `string`              | `''`                | Extra autocomplete-root classes.                                                                                                                                                                 |
+| `inputClass`   | `string`              | `''`                | Extra text-input classes.                                                                                                                                                                        |
+| `errorClass`   | `string`              | `''`                | Extra error classes (base `tw:mt-0`).                                                                                                                                                            |
+| `hintClass`    | `string`              | `''`                | Extra hint classes (base `tw:mt-0`).                                                                                                                                                             |
 
 | Member               | Description                                                                        |
 | -------------------- | ---------------------------------------------------------------------------------- |

package/form-autocomplete/fesm2022/form-autocomplete.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { InjectionToken, inject, input, computed, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormGroupDirective, ReactiveFormsModule, ControlContainer } from '@angular/forms';
-import { HlmFormIdGenerator, HlmFormField, HlmError, HlmHint } from '@egose/shadcn-theme-ng/form-field';
+import { injectEgFormErrorMessages, HlmFormIdGenerator, injectEgFormSharedConfig, resolveEgFormError, HlmFormField, HlmError, HlmHint } from '@egose/shadcn-theme-ng/form-field';
 import { HlmLabel } from '@egose/shadcn-theme-ng/label';
 import { HlmAutocomplete, HlmAutocompleteContent, HlmAutocompleteEmpty, HlmAutocompleteGroup, HlmAutocompleteInput, HlmAutocompleteItem, HlmAutocompleteList, HlmAutocompleteLabel } from '@egose/shadcn-theme-ng/autocomplete';
 import { hlm } from '@egose/shadcn-theme-ng/utils';
@@ -17,8 +17,10 @@ function injectEgFormAutocompleteConfig() {
 
 class EgFormAutocomplete {
     formGroupDirective = inject(FormGroupDirective);
+    _errorMessages = injectEgFormErrorMessages();
     generatedId = inject(HlmFormIdGenerator).generate('eg-form-autocomplete');
     _config = injectEgFormAutocompleteConfig();
+    _shared = injectEgFormSharedConfig();
     label = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     controlId = input(undefined, /* @ts-ignore */
@@ -27,6 +29,13 @@ class EgFormAutocomplete {
     ...(ngDevMode ? [{ debugName: "controlName" }] : /* istanbul ignore next */ []));
     error = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /**
+     * Auto-resolve the displayed message from the control's `ValidationErrors`
+     * when `error()` is unset. Explicit `error()` always wins. Set to `false`
+     * for manual-only messages.
+     */
+    autoError = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoError" }] : /* istanbul ignore next */ []));
     hint = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     id = input(undefined, /* @ts-ignore */
@@ -47,6 +56,32 @@ class EgFormAutocomplete {
     ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
     hintId = computed(() => `${this.effectiveId()}-hint`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hintId" }] : /* 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.
+     */
+    resolvedError() {
+        const explicit = this.error();
+        if (explicit)
+            return explicit;
+        if (!this.autoError())
+            return undefined;
+        const control = this.formGroupDirective.form.get(this.controlName());
+        return resolveEgFormError(control?.errors ?? null, this.label(), this._errorMessages);
+    }
+    /**
+     * Whether the error is surfaced: message present + control invalid +
+     * touched/dirty/submitted. Gates the visual `<hlm-error>` (and
+     * `describedBy()`, where present) so sighted and screen-reader output agree.
+     */
+    showError() {
+        const control = this.formGroupDirective.form.get(this.controlName());
+        return (!!this.resolvedError() &&
+            !!control?.invalid &&
+            (control.dirty || control.touched || this.formGroupDirective.submitted));
+    }
     /**
      * Combined lock for the brain `linkedSignal`-based disabled state: the raw
      * input write always carries the resolved value, so a same-pass
@@ -72,18 +107,18 @@ class EgFormAutocomplete {
     // ids render without an input-level describedby link.
     $userClass = computed(() => hlm("w-full", this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "$userClass" }] : /* istanbul ignore next */ []));
-    $labelClass = computed(() => hlm("mb-1", this._config.labelClass, this.labelClass()), /* @ts-ignore */
+    $labelClass = computed(() => hlm("mb-1", this._shared.labelClass, this._config.labelClass, this.labelClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "$labelClass" }] : /* istanbul ignore next */ []));
-    $controlClass = computed(() => hlm(this._config.controlClass, this.controlClass()), /* @ts-ignore */
+    $controlClass = computed(() => hlm(this._shared.controlClass, this._config.controlClass, this.controlClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "$controlClass" }] : /* istanbul ignore next */ []));
-    $inputClass = computed(() => hlm(this._config.inputClass, this.inputClass()), /* @ts-ignore */
+    $inputClass = computed(() => hlm(this._shared.inputClass, this._config.inputClass, this.inputClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "$inputClass" }] : /* istanbul ignore next */ []));
-    $errorClass = computed(() => hlm("mt-0", this._config.errorClass, this.errorClass()), /* @ts-ignore */
+    $errorClass = computed(() => hlm("mt-0", this._shared.errorClass, this._config.errorClass, this.errorClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "$errorClass" }] : /* istanbul ignore next */ []));
-    $hintClass = computed(() => hlm("mt-0", this._config.hintClass, this.hintClass()), /* @ts-ignore */
+    $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: EgFormAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormAutocomplete, isStandalone: true, selector: "eg-form-autocomplete", 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 }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", 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 }, options: { classPropertyName: "options", publicName: "options", 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 }, controlClass: { classPropertyName: "controlClass", publicName: "controlClass", 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 err = error();\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      <div hlmAutocomplete [formControlName]=\"cnm\" [disabled]=\"effectiveDisabled()\" [class]=\"$controlClass()\">\n        <hlm-autocomplete-input [inputId]=\"effectiveId()\" [placeholder]=\"placeholder()\" [class]=\"$inputClass()\" />\n        <hlm-autocomplete-content>\n          <div hlmAutocompleteList>\n            <div hlmAutocompleteGroup>\n              @for (option of options(); track option) {\n                <hlm-autocomplete-item [value]=\"option\">{{ option }}</hlm-autocomplete-item>\n              }\n            </div>\n          </div>\n          <div hlmAutocompleteEmpty>{{ emptyText() }}</div>\n        </hlm-autocomplete-content>\n      </div>\n\n      @if (err) {\n        <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n          {{ err }}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: HlmAutocomplete, selector: "[hlmAutocomplete],hlm-autocomplete" }, { kind: "directive", type: HlmAutocompleteContent, selector: "[hlmAutocompleteContent],hlm-autocomplete-content" }, { kind: "directive", type: HlmAutocompleteEmpty, selector: "[hlmAutocompleteEmpty],hlm-autocomplete-empty" }, { kind: "directive", type: HlmAutocompleteGroup, selector: "[hlmAutocompleteGroup]" }, { kind: "component", type: HlmAutocompleteInput, selector: "hlm-autocomplete-input", inputs: ["inputId", "placeholder", "showSearch", "showClear", "forceInvalid", "aria-invalid"] }, { kind: "component", type: HlmAutocompleteItem, selector: "hlm-autocomplete-item" }, { kind: "directive", type: HlmAutocompleteList, selector: "[hlmAutocompleteList]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormAutocomplete, isStandalone: true, selector: "eg-form-autocomplete", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", 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 }, options: { classPropertyName: "options", publicName: "options", 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 }, controlClass: { classPropertyName: "controlClass", publicName: "controlClass", 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      <div hlmAutocomplete [formControlName]=\"cnm\" [disabled]=\"effectiveDisabled()\" [class]=\"$controlClass()\">\n        <hlm-autocomplete-input [inputId]=\"effectiveId()\" [placeholder]=\"placeholder()\" [class]=\"$inputClass()\" />\n        <hlm-autocomplete-content>\n          <div hlmAutocompleteList>\n            <div hlmAutocompleteGroup>\n              @for (option of options(); track option) {\n                <hlm-autocomplete-item [value]=\"option\">{{ option }}</hlm-autocomplete-item>\n              }\n            </div>\n          </div>\n          <div hlmAutocompleteEmpty>{{ emptyText() }}</div>\n        </hlm-autocomplete-content>\n      </div>\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: HlmAutocomplete, selector: "[hlmAutocomplete],hlm-autocomplete" }, { kind: "directive", type: HlmAutocompleteContent, selector: "[hlmAutocompleteContent],hlm-autocomplete-content" }, { kind: "directive", type: HlmAutocompleteEmpty, selector: "[hlmAutocompleteEmpty],hlm-autocomplete-empty" }, { kind: "directive", type: HlmAutocompleteGroup, selector: "[hlmAutocompleteGroup]" }, { kind: "component", type: HlmAutocompleteInput, selector: "hlm-autocomplete-input", inputs: ["inputId", "placeholder", "showSearch", "showClear", "forceInvalid", "aria-invalid"] }, { kind: "component", type: HlmAutocompleteItem, selector: "hlm-autocomplete-item" }, { kind: "directive", type: HlmAutocompleteList, selector: "[hlmAutocompleteList]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormAutocomplete, decorators: [{
             type: Component,
@@ -109,9 +144,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                         HlmAutocompleteList,
                     ],
                     providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
-                    template: "\n    @let lbl = label();\n    @let cnm = controlName();\n    @let err = error();\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      <div hlmAutocomplete [formControlName]=\"cnm\" [disabled]=\"effectiveDisabled()\" [class]=\"$controlClass()\">\n        <hlm-autocomplete-input [inputId]=\"effectiveId()\" [placeholder]=\"placeholder()\" [class]=\"$inputClass()\" />\n        <hlm-autocomplete-content>\n          <div hlmAutocompleteList>\n            <div hlmAutocompleteGroup>\n              @for (option of options(); track option) {\n                <hlm-autocomplete-item [value]=\"option\">{{ option }}</hlm-autocomplete-item>\n              }\n            </div>\n          </div>\n          <div hlmAutocompleteEmpty>{{ emptyText() }}</div>\n        </hlm-autocomplete-content>\n      </div>\n\n      @if (err) {\n        <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n          {{ err }}\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  ",
+                    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      <div hlmAutocomplete [formControlName]=\"cnm\" [disabled]=\"effectiveDisabled()\" [class]=\"$controlClass()\">\n        <hlm-autocomplete-input [inputId]=\"effectiveId()\" [placeholder]=\"placeholder()\" [class]=\"$inputClass()\" />\n        <hlm-autocomplete-content>\n          <div hlmAutocompleteList>\n            <div hlmAutocompleteGroup>\n              @for (option of options(); track option) {\n                <hlm-autocomplete-item [value]=\"option\">{{ option }}</hlm-autocomplete-item>\n              }\n            </div>\n          </div>\n          <div hlmAutocompleteEmpty>{{ emptyText() }}</div>\n        </hlm-autocomplete-content>\n      </div>\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  ",
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], controlClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlClass", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", 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 }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", 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 }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], controlClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlClass", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", 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-autocomplete

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

@@ -4,12 +4,20 @@ import { ClassValue } from 'clsx';
 
 declare class EgFormAutocomplete {
     private readonly formGroupDirective;
+    private readonly _errorMessages;
     private readonly generatedId;
     private readonly _config;
+    private readonly _shared;
     label: _angular_core.InputSignal<string | undefined>;
     controlId: _angular_core.InputSignal<string | undefined>;
     controlName: _angular_core.InputSignal<string>;
     error: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Auto-resolve the displayed message from the control's `ValidationErrors`
+     * when `error()` is unset. Explicit `error()` always wins. Set to `false`
+     * for manual-only messages.
+     */
+    autoError: _angular_core.InputSignal<boolean>;
     hint: _angular_core.InputSignal<string | undefined>;
     id: _angular_core.InputSignal<string | undefined>;
     placeholder: _angular_core.InputSignal<string>;
@@ -20,6 +28,19 @@ declare class EgFormAutocomplete {
     readonly effectiveId: _angular_core.Signal<string>;
     readonly errorId: _angular_core.Signal<string>;
     readonly hintId: _angular_core.Signal<string>;
+    /**
+     * 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.
+     */
+    protected resolvedError(): string | undefined;
+    /**
+     * Whether the error is surfaced: message present + control invalid +
+     * touched/dirty/submitted. Gates the visual `<hlm-error>` (and
+     * `describedBy()`, where present) so sighted and screen-reader output agree.
+     */
+    protected showError(): boolean;
     /**
      * Combined lock for the brain `linkedSignal`-based disabled state: the raw
      * input write always carries the resolved value, so a same-pass
@@ -39,7 +60,7 @@ declare class EgFormAutocomplete {
     $errorClass: _angular_core.Signal<string>;
     $hintClass: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgFormAutocomplete, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgFormAutocomplete, "eg-form-autocomplete", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "controlId": { "alias": "controlId"; "required": false; "isSignal": true; }; "controlName": { "alias": "controlName"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "labelClass": { "alias": "labelClass"; "required": false; "isSignal": true; }; "controlClass": { "alias": "controlClass"; "required": false; "isSignal": true; }; "inputClass": { "alias": "inputClass"; "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<EgFormAutocomplete, "eg-form-autocomplete", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "controlId": { "alias": "controlId"; "required": false; "isSignal": true; }; "controlName": { "alias": "controlName"; "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; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "labelClass": { "alias": "labelClass"; "required": false; "isSignal": true; }; "controlClass": { "alias": "controlClass"; "required": false; "isSignal": true; }; "inputClass": { "alias": "inputClass"; "required": false; "isSignal": true; }; "errorClass": { "alias": "errorClass"; "required": false; "isSignal": true; }; "hintClass": { "alias": "hintClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 interface EgFormAutocompleteConfig {

package/form-checkbox/README.md

@@ -83,29 +83,30 @@ Selector (from source): `eg-form-checkbox` (standalone component).
 
 ### `EgFormCheckbox` — `eg-form-checkbox`
 
-| Input           | Type                  | Default | Description                                                                                 |
-| --------------- | --------------------- | ------- | ------------------------------------------------------------------------------------------- |
-| `controlName`   | `string`              | `''`    | `formControlName` key inside the parent `FormGroup`. **Required.**                          |
-| `label`         | `string`              | `''`    | Label text next to the checkbox.                                                            |
-| `error`         | `string \| undefined` | —       | Error text shown when the control is invalid + touched/dirty (via `EgFormField` switching). |
-| `hint`          | `string \| undefined` | —       | Hint text shown when there is no error to display.                                          |
-| `controlId`     | `string \| undefined` | —       | Explicit control id (first priority for `effectiveId`).                                     |
-| `id`            | `string \| undefined` | —       | Fallback id (second priority).                                                              |
-| `name`          | `string \| undefined` | —       | Checkbox `name` attribute (defaults to `controlName`).                                      |
-| `checked`       | `boolean`             | `false` | Initial checked state passed to `hlm-checkbox`.                                             |
-| `required`      | `boolean`             | `false` | Shows a red `*` and sets checkbox `required`.                                               |
-| `disabled`      | `boolean`             | `false` | Locks interaction via checkbox `wrapperDisabled` (does not write to the form control).      |
-| `class`         | `ClassValue`          | `''`    | Extra host classes.                                                                         |
-| `checkboxClass` | `string`              | `''`    | Extra classes for `hlm-checkbox`.                                                           |
-| `labelClass`    | `string`              | `''`    | Extra classes for the label.                                                                |
-| `errorClass`    | `string`              | `''`    | Extra classes for `hlm-error`.                                                              |
-| `hintClass`     | `string`              | `''`    | Extra classes for `hlm-hint`.                                                               |
+| Input           | Type                  | Default | Description                                                                                                                                                                                      |
+| --------------- | --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `controlName`   | `string`              | `''`    | `formControlName` key inside the parent `FormGroup`. **Required.**                                                                                                                               |
+| `label`         | `string`              | `''`    | Label text next to the checkbox.                                                                                                                                                                 |
+| `error`         | `string \| undefined` | —       | Error text shown when the control is invalid + touched/dirty/submitted (via `EgFormField` switching).                                                                                           |
+| `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 when there is no error to display.                                                                                                                                               |
+| `controlId`     | `string \| undefined` | —       | Explicit control id (first priority for `effectiveId`).                                                                                                                                          |
+| `id`            | `string \| undefined` | —       | Fallback id (second priority).                                                                                                                                                                   |
+| `name`          | `string \| undefined` | —       | Checkbox `name` attribute (defaults to `controlName`).                                                                                                                                           |
+| `checked`       | `boolean`             | `false` | Initial checked state passed to `hlm-checkbox`.                                                                                                                                                  |
+| `required`      | `boolean`             | `false` | Shows a red `*` and sets checkbox `required`.                                                                                                                                                    |
+| `disabled`      | `boolean`             | `false` | Locks interaction via checkbox `wrapperDisabled` (does not write to the form control).                                                                                                           |
+| `class`         | `ClassValue`          | `''`    | Extra host classes.                                                                                                                                                                              |
+| `checkboxClass` | `string`              | `''`    | Extra classes for `hlm-checkbox`.                                                                                                                                                                |
+| `labelClass`    | `string`              | `''`    | Extra classes for the label.                                                                                                                                                                     |
+| `errorClass`    | `string`              | `''`    | Extra classes for `hlm-error`.                                                                                                                                                                   |
+| `hintClass`     | `string`              | `''`    | Extra classes for `hlm-hint`.                                                                                                                                                                    |
 
 | Member               | Description                                                                                                                          |
 | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
 | `effectiveId`        | `controlId() \|\| id() \|\| generated` — wired to checkbox `id` and label `for`.                                                     |
 | `errorId` / `hintId` | `effectiveId + '-error' / '-hint'` for `aria-describedby`.                                                                           |
-| `describedBy()`      | Returns `errorId` when `error()` is set and the control is invalid + dirty/touched, else `hintId` when `hint()` is set, else `null`. |
+| `describedBy()`      | Returns `errorId` when `error()` is set and the control is invalid + dirty/touched/submitted, else `hintId` when `hint()` is set, else `null`. |
 
 Requires a `[formGroup]` ancestor: the component injects `FormGroupDirective` and provides
 `ControlContainer → FormGroupDirective` so `formControlName` resolves.
@@ -297,7 +298,7 @@ export class SubmitCheckComponent {
 ## Accessibility notes
 
 - The checkbox `id` and label `for` are generated (`eg-form-checkbox-<app>-<n>`) unless `controlId`/`id` is given — labels are always programmatically associated.
-- `aria-describedby` points at the error id only while the control is invalid + touched/dirty, otherwise at the hint id — screen readers hear the right message in each state.
+- `aria-describedby` points at the error id only while the control is invalid + touched/dirty/submitted, otherwise at the hint id — screen readers hear the right message in each state.
 - The required marker (`*`) is visual; the underlying `hlm-checkbox` also receives `required` so assistive tech announces it.
 - Keep the component inside a `<form>` with a submit path; the row itself is a single tab stop (the checkbox).
 

package/form-checkbox/fesm2022/form-checkbox.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { InjectionToken, inject, signal, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormGroupDirective, ReactiveFormsModule, ControlContainer } from '@angular/forms';
 import { HlmLabel } from '@egose/shadcn-theme-ng/label';
 import { HlmCheckbox } from '@egose/shadcn-theme-ng/checkbox';
-import { HlmFormIdGenerator, HlmError, HlmHint } from '@egose/shadcn-theme-ng/form-field';
+import { injectEgFormErrorMessages, HlmFormIdGenerator, injectEgFormSharedConfig, resolveEgFormError, HlmError, HlmHint } from '@egose/shadcn-theme-ng/form-field';
 import { EgFormField } from '@egose/shadcn-theme-ng/form-field-simple';
 import { hlm } from '@egose/shadcn-theme-ng/utils';
 
@@ -18,8 +18,24 @@ function injectEgFormCheckboxConfig() {
 
 class EgFormCheckbox {
     formGroupDirective = inject(FormGroupDirective);
+    _errorMessages = injectEgFormErrorMessages();
     generatedId = inject(HlmFormIdGenerator).generate('eg-form-checkbox');
     _config = injectEgFormCheckboxConfig();
+    _shared = injectEgFormSharedConfig();
+    /**
+     * Mirrors control status + parent submit state into signals so `showError`
+     * stays reactive under OnPush. `FormGroupDirective.submitted` and
+     * `ValidationErrors` are plain (non-signal) values, so without this the
+     * error would not appear on submit when the control was never
+     * touched/dirty (OnPush child is otherwise skipped). Same pattern as
+     * `EgFormToggle`.
+     */
+    _status = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_status" }] : /* istanbul ignore next */ []));
+    _submitted = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_submitted" }] : /* istanbul ignore next */ []));
+    _trackedControl = null;
+    _controlSub = null;
     // Classes
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     _computedClass = computed(() => hlm('', this.userClass()), /* @ts-ignore */
@@ -33,6 +49,13 @@ class EgFormCheckbox {
     ...(ngDevMode ? [{ debugName: "controlName" }] : /* istanbul ignore next */ []));
     error = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /**
+     * Auto-resolve the displayed message from the control's `ValidationErrors`
+     * when `error()` is unset. Explicit `error()` always wins. Set to `false`
+     * for manual-only messages.
+     */
+    autoError = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoError" }] : /* istanbul ignore next */ []));
     hint = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     id = input(undefined, /* @ts-ignore */
@@ -51,13 +74,74 @@ class EgFormCheckbox {
     ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
     hintId = computed(() => `${this.effectiveId()}-hint`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
-    describedBy() {
+    /**
+     * 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 evaluation (`showError()` re-evaluates with it via the
+     * `_status`/`_submitted` signals).
+     */
+    resolvedError() {
+        const explicit = this.error();
+        if (explicit)
+            return explicit;
+        if (!this.autoError())
+            return undefined;
+        const control = this.formGroupDirective.form.get(this.controlName());
+        return resolveEgFormError(control?.errors ?? null, this.label(), this._errorMessages);
+    }
+    /**
+     * Whether the error is surfaced: message present + control invalid +
+     * touched/dirty/submitted. Gates the visual `<hlm-error>` (and
+     * `describedBy()`, where present) so sighted and screen-reader output agree.
+     * Computed over `_status`/`_submitted` signals so it re-evaluates under
+     * OnPush when the parent form is submitted or the control status changes.
+     */
+    showError = computed(() => {
+        this._status();
+        this._submitted();
         const control = this.formGroupDirective.form.get(this.controlName());
-        return this.error() && control?.invalid && (control.dirty || control.touched)
-            ? this.errorId()
-            : this.hint()
-                ? this.hintId()
-                : null;
+        return (!!this.resolvedError() &&
+            !!control?.invalid &&
+            (control.dirty || control.touched || this._submitted()));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    describedBy() {
+        return this.showError() ? this.errorId() : this.hint() ? this.hintId() : null;
+    }
+    ngAfterContentInit() {
+        this._trackControl();
+    }
+    ngDoCheck() {
+        const submitted = !!this.formGroupDirective?.submitted;
+        if (this._submitted() !== submitted)
+            this._submitted.set(submitted);
+        const control = this.formGroupDirective.form.get(this.controlName()) ?? null;
+        if (control !== this._trackedControl) {
+            this._trackControl();
+        }
+        else if (control && this._status() !== control.status) {
+            // Fallback poll: catches status changes missed by the subscription
+            // (e.g. control replaced without re-init).
+            this._status.set(control.status);
+        }
+    }
+    ngOnDestroy() {
+        this._controlSub?.unsubscribe();
+        this._controlSub = null;
+    }
+    _trackControl() {
+        this._controlSub?.unsubscribe();
+        this._controlSub = null;
+        const control = this.formGroupDirective.form.get(this.controlName()) ?? null;
+        this._trackedControl = control;
+        this._status.set(control?.status ?? null);
+        if (control) {
+            this._controlSub = control.statusChanges.subscribe((status) => {
+                if (this._status() !== status)
+                    this._status.set(status);
+            });
+        }
     }
     // Styling
     checkboxClass = input('', /* @ts-ignore */
@@ -69,16 +153,16 @@ class EgFormCheckbox {
     hintClass = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hintClass" }] : /* istanbul ignore next */ []));
     // Computed styling (library base < global config < per-instance)
-    $checkboxClass = computed(() => hlm(this._config.checkboxClass, this.checkboxClass()), /* @ts-ignore */
+    $checkboxClass = computed(() => hlm(this._shared.checkboxClass, this._config.checkboxClass, this.checkboxClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "$checkboxClass" }] : /* istanbul ignore next */ []));
-    $labelClass = computed(() => hlm(this._config.labelClass, this.labelClass()), /* @ts-ignore */
+    $labelClass = computed(() => hlm(this._shared.labelClass, this._config.labelClass, this.labelClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "$labelClass" }] : /* istanbul ignore next */ []));
-    $errorClass = computed(() => hlm(this._config.errorClass, this.errorClass()), /* @ts-ignore */
+    $errorClass = computed(() => hlm(this._shared.errorClass, this._config.errorClass, this.errorClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "$errorClass" }] : /* istanbul ignore next */ []));
-    $hintClass = computed(() => hlm(this._config.hintClass, this.hintClass()), /* @ts-ignore */
+    $hintClass = computed(() => hlm(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: EgFormCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormCheckbox, isStandalone: true, selector: "eg-form-checkbox", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, 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 }, 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 }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checkboxClass: { classPropertyName: "checkboxClass", publicName: "checkboxClass", 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": "_computedClass()" } }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: "\n    @let lbl = label();\n    @let cnm = controlName();\n    @let err = error();\n    @let hnt = hint();\n    @let rqrd = required();\n\n    <eg-form-field>\n      <div class=\"flex items-center gap-1\">\n        <hlm-checkbox\n          [id]=\"effectiveId()\"\n          [name]=\"cnm || name() || null\"\n          [formControlName]=\"cnm\"\n          [class]=\"$checkboxClass()\"\n          [checked]=\"checked()\"\n          [required]=\"rqrd\"\n          [wrapperDisabled]=\"disabled()\"\n          [aria-describedby]=\"describedBy()\"\n        />\n        <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\">\n          {{ lbl }}\n          @if (rqrd) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </label>\n      </div>\n\n      @if (err) {\n        <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n          {{ err }}\n        </hlm-error>\n      }\n\n      @if (hnt) {\n        <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n          {{ hnt }}\n        </hlm-hint>\n      }\n    </eg-form-field>\n  ", isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: HlmCheckbox, selector: "hlm-checkbox", inputs: ["class", "id", "aria-label", "aria-labelledby", "aria-describedby", "checked", "name", "required", "disabled", "wrapperDisabled"], outputs: ["checkedChange", "changed"] }, { kind: "directive", type: HlmLabel, selector: "[hlmLabel]", inputs: ["class"] }, { kind: "component", type: EgFormField, selector: "eg-form-field", inputs: ["class"] }, { kind: "directive", type: HlmError, selector: "hlm-error", inputs: ["class"] }, { kind: "directive", type: HlmHint, selector: "hlm-hint", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormCheckbox, isStandalone: true, selector: "eg-form-checkbox", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, 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 }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checkboxClass: { classPropertyName: "checkboxClass", publicName: "checkboxClass", 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": "_computedClass()" } }, 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    <eg-form-field>\n      <div class=\"flex items-center gap-1\">\n        <hlm-checkbox\n          [id]=\"effectiveId()\"\n          [name]=\"cnm || name() || null\"\n          [formControlName]=\"cnm\"\n          [class]=\"$checkboxClass()\"\n          [checked]=\"checked()\"\n          [required]=\"rqrd\"\n          [wrapperDisabled]=\"disabled()\"\n          [aria-describedby]=\"describedBy()\"\n        />\n        <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\">\n          {{ lbl }}\n          @if (rqrd) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </label>\n      </div>\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    </eg-form-field>\n  ", isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: HlmCheckbox, selector: "hlm-checkbox", inputs: ["class", "id", "aria-label", "aria-labelledby", "aria-describedby", "checked", "name", "required", "disabled", "wrapperDisabled"], outputs: ["checkedChange", "changed"] }, { kind: "directive", type: HlmLabel, selector: "[hlmLabel]", inputs: ["class"] }, { kind: "component", type: EgFormField, selector: "eg-form-field", inputs: ["class"] }, { kind: "directive", type: HlmError, selector: "hlm-error", inputs: ["class"] }, { kind: "directive", type: HlmHint, selector: "hlm-hint", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormCheckbox, decorators: [{
             type: Component,
@@ -91,9 +175,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [ReactiveFormsModule, HlmCheckbox, HlmLabel, EgFormField, HlmError, HlmHint],
                     providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
-                    template: "\n    @let lbl = label();\n    @let cnm = controlName();\n    @let err = error();\n    @let hnt = hint();\n    @let rqrd = required();\n\n    <eg-form-field>\n      <div class=\"flex items-center gap-1\">\n        <hlm-checkbox\n          [id]=\"effectiveId()\"\n          [name]=\"cnm || name() || null\"\n          [formControlName]=\"cnm\"\n          [class]=\"$checkboxClass()\"\n          [checked]=\"checked()\"\n          [required]=\"rqrd\"\n          [wrapperDisabled]=\"disabled()\"\n          [aria-describedby]=\"describedBy()\"\n        />\n        <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\">\n          {{ lbl }}\n          @if (rqrd) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </label>\n      </div>\n\n      @if (err) {\n        <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n          {{ err }}\n        </hlm-error>\n      }\n\n      @if (hnt) {\n        <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n          {{ hnt }}\n        </hlm-hint>\n      }\n    </eg-form-field>\n  ",
+                    template: "\n    @let lbl = label();\n    @let cnm = controlName();\n    @let hnt = hint();\n    @let rqrd = required();\n\n    <eg-form-field>\n      <div class=\"flex items-center gap-1\">\n        <hlm-checkbox\n          [id]=\"effectiveId()\"\n          [name]=\"cnm || name() || null\"\n          [formControlName]=\"cnm\"\n          [class]=\"$checkboxClass()\"\n          [checked]=\"checked()\"\n          [required]=\"rqrd\"\n          [wrapperDisabled]=\"disabled()\"\n          [aria-describedby]=\"describedBy()\"\n        />\n        <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\">\n          {{ lbl }}\n          @if (rqrd) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </label>\n      </div>\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    </eg-form-field>\n  ",
                 }]
-        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checkboxClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxClass", 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: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", 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 }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checkboxClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxClass", 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-checkbox