@egose/shadcn-theme-ng 0.6.0 → 0.6.1

package/date-picker/types/date-picker.d.ts

@@ -11,7 +11,23 @@ import * as _spartan_ng_brain_popover from '@spartan-ng/brain/popover';
 import { BrnPopover } from '@spartan-ng/brain/popover';
 import * as i1$1 from '@spartan-ng/brain/field';
 
-declare class HlmDateMultiInput<T> extends BrnDateInput<T[]> implements BrnDatePickerTriggerBase {
+/** Internal input lifecycle shared by the single, range and multi pickers. */
+declare abstract class HlmConstrainedDateInput<V> extends BrnDateInput<V> {
+    private readonly _commitState;
+    protected abstract readonly: () => boolean;
+    protected readonly _inputValue: _angular_core.WritableSignal<string>;
+    /** Rejected text stays invalid until a successful commit, clear, or external value write. */
+    readonly inputInvalid: _angular_core.WritableSignal<boolean>;
+    protected _commitDate(): void;
+    protected _handleBlur(): void;
+    protected _handleEnter(event: Event): void;
+    protected _handleFocus(): void;
+    protected _clear(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HlmConstrainedDateInput<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HlmConstrainedDateInput<any>, never, never, {}, {}, never, never, true, never>;
+}
+
+declare class HlmDateMultiInput<T> extends HlmConstrainedDateInput<T[]> implements BrnDatePickerTriggerBase {
     private readonly _config;
     /** Native `name` attribute forwarded to the inner `<input>`. */
     readonly name: _angular_core.InputSignal<string | undefined>;
@@ -26,9 +42,9 @@ declare class HlmDateMultiInput<T> extends BrnDateInput<T[]> implements BrnDateP
     protected readonly $inputClass: _angular_core.Signal<string>;
     constructor();
     /**
-     * Parses input text into dates. Return `null` for invalid input - the
-     * picker's dates are cleared while the text is preserved so the user can
-     * fix it.
+     * Parses input text into dates. Return `null` for invalid input. Rejected
+     * text stays editable and aria-invalid; the committed value is preserved.
+     * Empty text explicitly clears on blur/Enter.
      *
      * Defaults to `parseDate` from `HlmDatePickerMultiConfig`.
      */
@@ -53,6 +69,10 @@ declare const HLM_DATE_PICKER_VALUE_ACCESSOR: {
 };
 declare class HlmDatePicker<T> implements BrnDatePickerBase<T>, ControlValueAccessor {
     private readonly _config;
+    private readonly _dateAdapter;
+    private readonly _commitState;
+    private readonly _calendar;
+    private _restoringCalendar;
     readonly popover: _angular_core.Signal<BrnPopover>;
     private readonly _trigger;
     /** Show dropdowns to navigate between months or years. */
@@ -91,13 +111,12 @@ declare class HlmDatePicker<T> implements BrnDatePickerBase<T>, ControlValueAcce
     protected _onStateChange(state: BrnOverlayState): void;
     protected _handleChange(value: T | undefined): void;
     /**
-     * Commit a date to the picker. Updates the internal model, notifies form
-     * controls, and emits `dateChange`. Unlike `_handleChange`, this does not
-     * close the popover - it's intended to be called from a text input that
-     * is parsing user-entered values while typing.
+     * Commit a user value (null clears). Returns false without changing/emitting
+     * the model when disabled or when the raw/transformed date is invalid or
+     * outside the adapter's inclusive whole-day min/max bounds.
      */
-    updateDate(value: T | null): void;
-    /** CONTROL VALUE ACCESSOR */
+    updateDate(value: T | null): boolean;
+    /** Programmatic CVA write: transforms without enforcing user constraints or emitting. Clears rejected text. */
     writeValue(value: T | null): void;
     registerOnChange(fn: ChangeFn<T | null>): void;
     registerOnTouched(fn: TouchFn): void;
@@ -120,7 +139,7 @@ declare class HlmDatePickerAnchor {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HlmDatePickerAnchor, "[hlmDatePickerAnchor]", never, { "hlmDatePickerAnchorForInput": { "alias": "hlmDatePickerAnchorFor"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class HlmDatePickerInput<T> extends BrnDateInput<T> implements BrnDatePickerTriggerBase {
+declare class HlmDatePickerInput<T> extends HlmConstrainedDateInput<T> implements BrnDatePickerTriggerBase {
     private readonly _config;
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly ariaDescribedby: _angular_core.InputSignal<string | null>;
@@ -136,8 +155,8 @@ declare class HlmDatePickerInput<T> extends BrnDateInput<T> implements BrnDatePi
     constructor();
     /**
      * Parses input text into a date value. Return `null` for invalid
-     * input - the picker's date is cleared while the text is preserved so
-     * the user can fix it.
+     * input. Rejected text stays editable and aria-invalid; the committed value
+     * is preserved. Empty text explicitly clears on blur/Enter.
      *
      * Defaults to `parseDate` from `HlmDatePickerConfig`.
      */
@@ -162,6 +181,10 @@ declare const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR: {
 };
 declare class HlmDatePickerMulti<T> implements BrnDatePickerBase<T[]>, ControlValueAccessor {
     private readonly _config;
+    private readonly _dateAdapter;
+    private readonly _commitState;
+    private readonly _calendar;
+    private _restoringCalendar;
     readonly popover: _angular_core.Signal<BrnPopover>;
     private readonly _trigger;
     /** Show dropdowns to navigate between months or years. */
@@ -170,7 +193,7 @@ declare class HlmDatePickerMulti<T> implements BrnDatePickerBase<T[]>, ControlVa
     readonly min: _angular_core.InputSignal<T | undefined>;
     /** The maximum date that can be selected. */
     readonly max: _angular_core.InputSignal<T | undefined>;
-    /** The minimum selectable dates.  */
+    /** Deselection floor; selection can grow from empty below this count. Explicit clear is allowed. */
     readonly minSelection: _angular_core.InputSignalWithTransform<number | undefined, NumberInput>;
     /** The maximum selectable dates.  */
     readonly maxSelection: _angular_core.InputSignalWithTransform<number | undefined, NumberInput>;
@@ -201,13 +224,15 @@ declare class HlmDatePickerMulti<T> implements BrnDatePickerBase<T[]>, ControlVa
     protected _onStateChange(state: BrnOverlayState): void;
     protected _handleChange(value: T[] | undefined): void;
     /**
-     * Commit dates to the picker. Updates the internal model, notifies form
-     * controls, and emits `dateChange`. Intended to be called from a text input
-     * that parses user-entered values. Pass `null` to clear the selection.
+     * Commit user dates, validating raw and transformed dates/counts. Returns
+     * false without changing/emitting on rejection. Min selection prevents
+     * reductions below the floor, but permits growth from empty. Null explicitly
+     * clears (emits []), bypassing the selection floor and transform.
      */
-    updateDate(value: T[] | null): void;
+    updateDate(value: T[] | null): boolean;
+    private _isSelectionAllowed;
     touched(): void;
-    /** CONTROL VALUE ACCESSOR */
+    /** Programmatic CVA write: transforms without enforcing user constraints or emitting. Clears rejected text. */
     writeValue(value: T[] | null): void;
     registerOnChange(fn: ChangeFn<T[]>): void;
     registerOnTouched(fn: TouchFn): void;
@@ -246,7 +271,7 @@ declare class HlmDatePickerTrigger implements BrnDatePickerTriggerBase {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<HlmDatePickerTrigger, "hlm-date-picker-trigger", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "buttonId": { "alias": "buttonId"; "required": false; "isSignal": true; }; "forceInvalid": { "alias": "forceInvalid"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "showTrigger": { "alias": "showTrigger"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-declare class HlmDateRangeInput<T> extends BrnDateInput<[T, T]> implements BrnDatePickerTriggerBase {
+declare class HlmDateRangeInput<T> extends HlmConstrainedDateInput<[T, T]> implements BrnDatePickerTriggerBase {
     private readonly _config;
     /** Native `name` attribute forwarded to the inner `<input>`. */
     readonly name: _angular_core.InputSignal<string | undefined>;
@@ -262,8 +287,8 @@ declare class HlmDateRangeInput<T> extends BrnDateInput<[T, T]> implements BrnDa
     constructor();
     /**
      * Parses input text into a date range. Return `null` for invalid
-     * input - the picker's range is cleared while the text is preserved so
-     * the user can fix it.
+     * input. Rejected text stays editable and aria-invalid; the committed value
+     * is preserved. Empty text explicitly clears on blur/Enter.
      *
      * Defaults to `parseDate` from `HlmDateRangePickerConfig`.
      */
@@ -288,6 +313,10 @@ declare const HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR: {
 };
 declare class HlmDateRangePicker<T> implements BrnDatePickerBase<[T, T]>, ControlValueAccessor {
     private readonly _config;
+    private readonly _dateAdapter;
+    private readonly _commitState;
+    private readonly _calendar;
+    private _restoringCalendar;
     readonly popover: _angular_core.Signal<BrnPopover>;
     private readonly _trigger;
     /** Show dropdowns to navigate between months or years. */
@@ -325,14 +354,16 @@ declare class HlmDateRangePicker<T> implements BrnDatePickerBase<[T, T]>, Contro
     protected _onStateChange(state: BrnOverlayState): void;
     protected _handleStartDayChange(value: T | undefined): void;
     protected _handleEndDateChange(value: T | undefined): void;
+    private _restoreCalendar;
     /**
-     * Commit a range to the picker. Updates the internal model, notifies form
-     * controls, and emits `dateChange`. Intended to be called from a text input
-     * that parses user-entered values. Pass `null` to clear the range.
+     * Commit a user range (null clears). Both raw/transformed endpoints must
+     * satisfy adapter whole-day bounds; the transformed range must be ordered.
+     * Returns false without changing/emitting the model on rejection or disabled.
      */
-    updateDate(value: [T, T] | null): void;
+    updateDate(value: [T, T] | null): boolean;
+    private _isRangeAllowed;
     touched(): void;
-    /** CONTROL VALUE ACCESSOR */
+    /** Programmatic CVA write: transforms without enforcing user constraints or emitting. Clears rejected text. */
     writeValue(value: [T, T] | null): void;
     registerOnChange(fn: ChangeFn<[T, T] | null>): void;
     registerOnTouched(fn: TouchFn): void;

package/form-autocomplete/README.md

@@ -151,8 +151,10 @@ export class CityComponent {
 ## Accessibility notes
 
 - Label `for` ↔ input `inputId` wiring is automatic via `effectiveId` — always pass a `label`.
-- The autocomplete input exposes no `aria-describedby`, so error/hint ids render without an input-level link.
-- The required `*` is visual; pair with `Validators.required` so assistive tech and validation agree.
+- The native input's `aria-describedby` references the displayed error when invalid and touched/dirty/submitted, otherwise the hint. Correction/reset restores the hint; absent messages leave no wrapper-owned reference.
+- Optional `[aria-describedby]` (`string | null`, default `null`) adds consumer-owned IDs before the current message ID, with whitespace normalization and deduplication. Keep those external elements mounted; reserve `<effectiveId>-error` and `<effectiveId>-hint` for the wrapper. Use the input binding, not `[attr.aria-describedby]` on the wrapper host.
+- `required` supplies the visual `*` and native `aria-required`; configure `Validators.required` independently. Native invalid state continues to follow the form control.
+- Verification covers rendered DOM relationships and focus, not screen-reader announcement behavior. `HlmError` itself is not a live region.
 
 ## Theming / CSS variables
 

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

@@ -1,11 +1,12 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, computed, Component } from '@angular/core';
+import { InjectionToken, inject, ChangeDetectorRef, DestroyRef, input, computed, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormGroupDirective, ReactiveFormsModule, ControlContainer } from '@angular/forms';
 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';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 const EgFormAutocompleteConfigToken = new InjectionToken('EgFormAutocompleteConfig');
 function provideEgFormAutocompleteConfig(config) {
@@ -21,6 +22,14 @@ class EgFormAutocomplete {
     generatedId = inject(HlmFormIdGenerator).generate('eg-form-autocomplete');
     _config = injectEgFormAutocompleteConfig();
     _shared = injectEgFormSharedConfig();
+    _cdr = inject(ChangeDetectorRef);
+    _destroyRef = inject(DestroyRef);
+    ngOnInit() {
+        // Submit/reset may change message visibility without changing the field's value or validity.
+        this.formGroupDirective.form.events
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => this._cdr.markForCheck());
+    }
     label = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     controlId = input(undefined, /* @ts-ignore */
@@ -38,6 +47,8 @@ class EgFormAutocomplete {
     ...(ngDevMode ? [{ debugName: "autoError" }] : /* istanbul ignore next */ []));
     hint = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Consumer-owned description IDs, merged with the current error and hint IDs. */
+    ariaDescribedBy = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedBy" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
     id = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     placeholder = input('Type to search…', /* @ts-ignore */
@@ -90,6 +101,10 @@ class EgFormAutocomplete {
     effectiveDisabled() {
         return this.disabled() || !!this.formGroupDirective.form.get(this.controlName())?.disabled;
     }
+    describedBy() {
+        const ids = [this.ariaDescribedBy(), this.showError() ? this.errorId() : this.hint() ? this.hintId() : null];
+        return [...new Set(ids.filter(Boolean).join(' ').split(/\s+/).filter(Boolean))].join(' ') || null;
+    }
     // Styling
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     labelClass = input('', /* @ts-ignore */
@@ -103,8 +118,6 @@ class EgFormAutocomplete {
     hintClass = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hintClass" }] : /* istanbul ignore next */ []));
     // Computed classes (library base < global config < per-instance).
-    // NOTE: the autocomplete input exposes no aria-describedby, so error/hint
-    // 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._shared.labelClass, this._config.labelClass, this.labelClass()), /* @ts-ignore */
@@ -118,7 +131,7 @@ class EgFormAutocomplete {
     $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 }, 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]" }] });
+    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 }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", 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\n          [inputId]=\"effectiveId()\"\n          [placeholder]=\"placeholder()\"\n          [aria-describedby]=\"describedBy()\"\n          [required]=\"rqrd\"\n          [class]=\"$inputClass()\"\n        />\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", "aria-describedby", "required", "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,
@@ -144,9 +157,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 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  ",
+                    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\n          [inputId]=\"effectiveId()\"\n          [placeholder]=\"placeholder()\"\n          [aria-describedby]=\"describedBy()\"\n          [required]=\"rqrd\"\n          [class]=\"$inputClass()\"\n        />\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 }] }], 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 }] }] } });
+        }], 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 }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", 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

@@ -1,13 +1,16 @@
 import * as _angular_core from '@angular/core';
-import { ValueProvider } from '@angular/core';
+import { OnInit, ValueProvider } from '@angular/core';
 import { ClassValue } from 'clsx';
 
-declare class EgFormAutocomplete {
+declare class EgFormAutocomplete implements OnInit {
     private readonly formGroupDirective;
     private readonly _errorMessages;
     private readonly generatedId;
     private readonly _config;
     private readonly _shared;
+    private readonly _cdr;
+    private readonly _destroyRef;
+    ngOnInit(): void;
     label: _angular_core.InputSignal<string | undefined>;
     controlId: _angular_core.InputSignal<string | undefined>;
     controlName: _angular_core.InputSignal<string>;
@@ -19,6 +22,8 @@ declare class EgFormAutocomplete {
      */
     autoError: _angular_core.InputSignal<boolean>;
     hint: _angular_core.InputSignal<string | undefined>;
+    /** Consumer-owned description IDs, merged with the current error and hint IDs. */
+    ariaDescribedBy: _angular_core.InputSignal<string | null>;
     id: _angular_core.InputSignal<string | undefined>;
     placeholder: _angular_core.InputSignal<string>;
     emptyText: _angular_core.InputSignal<string>;
@@ -47,6 +52,7 @@ declare class EgFormAutocomplete {
      * wrapper-toggle + `control.disable()` cannot clobber CVA state.
      */
     effectiveDisabled(): boolean;
+    protected describedBy(): string | null;
     userClass: _angular_core.InputSignal<ClassValue>;
     labelClass: _angular_core.InputSignal<string>;
     controlClass: _angular_core.InputSignal<string>;
@@ -60,7 +66,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; }; "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>;
+    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; }; "ariaDescribedBy": { "alias": "aria-describedby"; "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-combobox/README.md

@@ -176,8 +176,10 @@ export class FruitSingleComponent {
 ## Accessibility notes
 
 - Label `for` ↔ chip-search-input `id` wiring is automatic via `effectiveId` — always pass a `label`.
-- The chip search input exposes no `aria-describedby`, so error/hint ids render without an input-level link.
-- The required `*` is visual; pair with `Validators.required` so assistive tech and validation agree.
+- Multiple mode connects the native chip input to the displayed error (invalid + touched/dirty/submitted), otherwise the hint. Single mode connects both the native trigger button and portaled search input. Correction/reset restores hint descriptions and obsolete message IDs disappear.
+- Optional `[aria-describedby]` (`string | null`, default `null`) adds consumer-owned IDs before the current message ID, with whitespace normalization and deduplication. Keep external elements mounted and reserve `<effectiveId>-error` / `-hint` for the wrapper. Use the input binding rather than `[attr.aria-describedby]` on the wrapper host.
+- Single mode uses `<effectiveId>` for the labeled trigger and `<effectiveId>-search` for its search input, labeled by `<effectiveId>-label`; this avoids duplicate IDs while open. The search filters options, so required/invalid state belongs to the selected-value trigger. Multiple mode exposes that state on its chip input.
+- `required` supplies the visual `*` and `aria-required` on the selected-value control; configure `Validators.required` independently. `HlmError` is not a live region; rendered DOM/focus tests do not establish screen-reader announcement behavior.
 
 ## Theming / CSS variables
 

package/form-combobox/fesm2022/form-combobox.mjs

@@ -1,12 +1,14 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, viewChild, input, computed, Component } from '@angular/core';
+import { InjectionToken, inject, viewChild, ChangeDetectorRef, DestroyRef, input, computed, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormGroupDirective, ReactiveFormsModule, ControlContainer } from '@angular/forms';
 import { injectEgFormErrorMessages, HlmFormIdGenerator, injectEgFormSharedConfig, resolveEgFormError, HlmFormField, HlmError, HlmHint } from '@egose/shadcn-theme-ng/form-field';
 import { HlmLabel } from '@egose/shadcn-theme-ng/label';
 import { HlmCombobox, HlmComboboxChip, HlmComboboxChipInput, HlmComboboxChips, HlmComboboxContent, HlmComboboxEmpty, HlmComboboxInput, HlmComboboxItem, HlmComboboxList, HlmComboboxMultiple, HlmComboboxPortal, HlmComboboxTrigger } from '@egose/shadcn-theme-ng/combobox';
 import { BrnComboboxMultiple, BrnCombobox } from '@spartan-ng/brain/combobox';
+import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
 import { hlm } from '@egose/shadcn-theme-ng/utils';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 const EgFormComboboxConfigToken = new InjectionToken('EgFormComboboxConfig');
 function provideEgFormComboboxConfig(config) {
@@ -26,6 +28,14 @@ class EgFormCombobox {
     ...(ngDevMode ? [{ debugName: "_picker" }] : /* istanbul ignore next */ []));
     _single = viewChild((BrnCombobox), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_single" }] : /* istanbul ignore next */ []));
+    _cdr = inject(ChangeDetectorRef);
+    _destroyRef = inject(DestroyRef);
+    ngOnInit() {
+        // Submit/reset may change message visibility without changing the field's value or validity.
+        this.formGroupDirective.form.events
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => this._cdr.markForCheck());
+    }
     label = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     controlId = input(undefined, /* @ts-ignore */
@@ -43,6 +53,8 @@ class EgFormCombobox {
     ...(ngDevMode ? [{ debugName: "autoError" }] : /* istanbul ignore next */ []));
     hint = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Consumer-owned description IDs, merged with the current error and hint IDs in both modes. */
+    ariaDescribedBy = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedBy" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
     id = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     placeholder = input('Pick…', /* @ts-ignore */
@@ -64,6 +76,8 @@ class EgFormCombobox {
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     effectiveId = computed(() => this.controlId() || this.id() || this.generatedId, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveId" }] : /* istanbul ignore next */ []));
+    labelId = computed(() => `${this.effectiveId()}-label`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
     errorId = computed(() => `${this.effectiveId()}-error`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
     hintId = computed(() => `${this.effectiveId()}-hint`, /* @ts-ignore */
@@ -108,6 +122,10 @@ class EgFormCombobox {
     effectiveDisabled() {
         return this.disabled() || !!this.formGroupDirective.form.get(this.controlName())?.disabled;
     }
+    describedBy() {
+        const ids = [this.ariaDescribedBy(), this.showError() ? this.errorId() : this.hint() ? this.hintId() : null];
+        return [...new Set(ids.filter(Boolean).join(' ').split(/\s+/).filter(Boolean))].join(' ') || null;
+    }
     // Styling
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     labelClass = input('', /* @ts-ignore */
@@ -121,8 +139,6 @@ class EgFormCombobox {
     hintClass = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hintClass" }] : /* istanbul ignore next */ []));
     // Computed classes (library base < global config < per-instance).
-    // NOTE: the chip search input exposes no aria-describedby, so error/hint
-    // 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._shared.labelClass, this._config.labelClass, this.labelClass()), /* @ts-ignore */
@@ -136,7 +152,7 @@ class EgFormCombobox {
     $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: EgFormCombobox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormCombobox, isStandalone: true, selector: "eg-form-combobox", 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 }, mode: { classPropertyName: "mode", publicName: "mode", 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 }, chipsClass: { classPropertyName: "chipsClass", publicName: "chipsClass", 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 }], viewQueries: [{ propertyName: "_picker", first: true, predicate: (BrnComboboxMultiple), descendants: true, isSignal: true }, { propertyName: "_single", first: true, predicate: (BrnCombobox), descendants: true, isSignal: true }], 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      @if (mode() === 'single') {\n        <hlm-combobox [formControlName]=\"cnm\" [disabled]=\"effectiveDisabled()\">\n          <hlm-combobox-trigger [buttonId]=\"effectiveId()\" [class]=\"$controlClass()\">\n            {{ singleDisplay() ?? placeholder() }}\n          </hlm-combobox-trigger>\n          <hlm-combobox-content *hlmComboboxPortal>\n            <hlm-combobox-input [inputId]=\"effectiveId()\" [placeholder]=\"placeholder()\" />\n            <div hlmComboboxList>\n              @for (option of options(); track option) {\n                <hlm-combobox-item [value]=\"option\">{{ option }}</hlm-combobox-item>\n              }\n            </div>\n            <div hlmComboboxEmpty>{{ emptyText() }}</div>\n          </hlm-combobox-content>\n        </hlm-combobox>\n      } @else {\n        <hlm-combobox-multiple [formControlName]=\"cnm\" [disabled]=\"effectiveDisabled()\" [class]=\"$controlClass()\">\n          <hlm-combobox-chips [class]=\"$chipsClass()\">\n            @for (v of selectedValues(); track v) {\n              <hlm-combobox-chip [value]=\"v\">{{ v }}</hlm-combobox-chip>\n            }\n            <input hlmComboboxChipInput [id]=\"effectiveId()\" [placeholder]=\"placeholder()\" />\n          </hlm-combobox-chips>\n          <hlm-combobox-content *hlmComboboxPortal>\n            <div hlmComboboxList>\n              @for (option of options(); track option) {\n                <hlm-combobox-item [value]=\"option\">{{ option }}</hlm-combobox-item>\n              }\n            </div>\n            <div hlmComboboxEmpty>{{ emptyText() }}</div>\n          </hlm-combobox-content>\n        </hlm-combobox-multiple>\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.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: HlmCombobox, selector: "[hlmCombobox],hlm-combobox" }, { kind: "component", type: HlmComboboxChip, selector: "hlm-combobox-chip", inputs: ["showRemove"] }, { kind: "directive", type: HlmComboboxChipInput, selector: "input[hlmComboboxChipInput]" }, { kind: "directive", type: HlmComboboxChips, selector: "[hlmComboboxChips],hlm-combobox-chips", inputs: ["forceInvalid"] }, { kind: "directive", type: HlmComboboxContent, selector: "[hlmComboboxContent],hlm-combobox-content" }, { kind: "directive", type: HlmComboboxEmpty, selector: "[hlmComboboxEmpty],hlm-combobox-empty" }, { kind: "component", type: HlmComboboxInput, selector: "hlm-combobox-input", inputs: ["inputId", "placeholder", "showTrigger", "showClear", "forceInvalid", "aria-invalid"] }, { kind: "component", type: HlmComboboxItem, selector: "hlm-combobox-item" }, { kind: "directive", type: HlmComboboxList, selector: "[hlmComboboxList]" }, { kind: "directive", type: HlmComboboxMultiple, selector: "[hlmComboboxMultiple],hlm-combobox-multiple" }, { kind: "directive", type: HlmComboboxPortal, selector: "[hlmComboboxPortal]" }, { kind: "component", type: HlmComboboxTrigger, selector: "hlm-combobox-trigger", inputs: ["class", "buttonId", "variant", "forceInvalid"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormCombobox, isStandalone: true, selector: "eg-form-combobox", 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 }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", 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 }, mode: { classPropertyName: "mode", publicName: "mode", 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 }, chipsClass: { classPropertyName: "chipsClass", publicName: "chipsClass", 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 }], viewQueries: [{ propertyName: "_picker", first: true, predicate: (BrnComboboxMultiple), descendants: true, isSignal: true }, { propertyName: "_single", first: true, predicate: (BrnCombobox), descendants: true, isSignal: true }], 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 [id]=\"labelId()\" [for]=\"effectiveId()\" [class]=\"$labelClass()\"\n          >{{ lbl }}\n          @if (rqrd) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </label>\n      }\n\n      @if (mode() === 'single') {\n        <hlm-combobox [formControlName]=\"cnm\" [disabled]=\"effectiveDisabled()\">\n          <hlm-combobox-trigger\n            [buttonId]=\"effectiveId()\"\n            [aria-describedby]=\"describedBy()\"\n            [required]=\"rqrd\"\n            [class]=\"$controlClass()\"\n          >\n            {{ singleDisplay() ?? placeholder() }}\n          </hlm-combobox-trigger>\n          <hlm-combobox-content *hlmComboboxPortal>\n            <hlm-combobox-input\n              [inputId]=\"effectiveId() + '-search'\"\n              [aria-labelledby]=\"lbl ? labelId() : null\"\n              [aria-describedby]=\"describedBy()\"\n              [placeholder]=\"placeholder()\"\n            />\n            <div hlmComboboxList>\n              @for (option of options(); track option) {\n                <hlm-combobox-item [value]=\"option\">{{ option }}</hlm-combobox-item>\n              }\n            </div>\n            <div hlmComboboxEmpty>{{ emptyText() }}</div>\n          </hlm-combobox-content>\n        </hlm-combobox>\n      } @else {\n        <hlm-combobox-multiple [formControlName]=\"cnm\" [disabled]=\"effectiveDisabled()\" [class]=\"$controlClass()\">\n          <hlm-combobox-chips [class]=\"$chipsClass()\">\n            @for (v of selectedValues(); track v) {\n              <hlm-combobox-chip [value]=\"v\">{{ v }}</hlm-combobox-chip>\n            }\n            <input\n              hlmComboboxChipInput\n              [id]=\"effectiveId()\"\n              [placeholder]=\"placeholder()\"\n              brnFieldControlDescribedBy\n              [aria-describedby]=\"describedBy()\"\n              [attr.aria-required]=\"rqrd || null\"\n            />\n          </hlm-combobox-chips>\n          <hlm-combobox-content *hlmComboboxPortal>\n            <div hlmComboboxList>\n              @for (option of options(); track option) {\n                <hlm-combobox-item [value]=\"option\">{{ option }}</hlm-combobox-item>\n              }\n            </div>\n            <div hlmComboboxEmpty>{{ emptyText() }}</div>\n          </hlm-combobox-content>\n        </hlm-combobox-multiple>\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.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: HlmCombobox, selector: "[hlmCombobox],hlm-combobox" }, { kind: "component", type: HlmComboboxChip, selector: "hlm-combobox-chip", inputs: ["showRemove"] }, { kind: "directive", type: HlmComboboxChipInput, selector: "input[hlmComboboxChipInput]" }, { kind: "directive", type: HlmComboboxChips, selector: "[hlmComboboxChips],hlm-combobox-chips", inputs: ["forceInvalid"] }, { kind: "directive", type: HlmComboboxContent, selector: "[hlmComboboxContent],hlm-combobox-content" }, { kind: "directive", type: HlmComboboxEmpty, selector: "[hlmComboboxEmpty],hlm-combobox-empty" }, { kind: "component", type: HlmComboboxInput, selector: "hlm-combobox-input", inputs: ["inputId", "placeholder", "aria-describedby", "aria-labelledby", "showTrigger", "showClear", "forceInvalid", "aria-invalid"] }, { kind: "component", type: HlmComboboxItem, selector: "hlm-combobox-item" }, { kind: "directive", type: HlmComboboxList, selector: "[hlmComboboxList]" }, { kind: "directive", type: HlmComboboxMultiple, selector: "[hlmComboboxMultiple],hlm-combobox-multiple" }, { kind: "directive", type: HlmComboboxPortal, selector: "[hlmComboboxPortal]" }, { kind: "component", type: HlmComboboxTrigger, selector: "hlm-combobox-trigger", inputs: ["class", "buttonId", "aria-describedby", "required", "variant", "forceInvalid"] }, { kind: "directive", type: BrnFieldControlDescribedBy, selector: "[brnFieldControlDescribedBy]", inputs: ["aria-describedby"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormCombobox, decorators: [{
             type: Component,
@@ -164,11 +180,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                         HlmComboboxMultiple,
                         HlmComboboxPortal,
                         HlmComboboxTrigger,
+                        BrnFieldControlDescribedBy,
                     ],
                     providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
-                    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      @if (mode() === 'single') {\n        <hlm-combobox [formControlName]=\"cnm\" [disabled]=\"effectiveDisabled()\">\n          <hlm-combobox-trigger [buttonId]=\"effectiveId()\" [class]=\"$controlClass()\">\n            {{ singleDisplay() ?? placeholder() }}\n          </hlm-combobox-trigger>\n          <hlm-combobox-content *hlmComboboxPortal>\n            <hlm-combobox-input [inputId]=\"effectiveId()\" [placeholder]=\"placeholder()\" />\n            <div hlmComboboxList>\n              @for (option of options(); track option) {\n                <hlm-combobox-item [value]=\"option\">{{ option }}</hlm-combobox-item>\n              }\n            </div>\n            <div hlmComboboxEmpty>{{ emptyText() }}</div>\n          </hlm-combobox-content>\n        </hlm-combobox>\n      } @else {\n        <hlm-combobox-multiple [formControlName]=\"cnm\" [disabled]=\"effectiveDisabled()\" [class]=\"$controlClass()\">\n          <hlm-combobox-chips [class]=\"$chipsClass()\">\n            @for (v of selectedValues(); track v) {\n              <hlm-combobox-chip [value]=\"v\">{{ v }}</hlm-combobox-chip>\n            }\n            <input hlmComboboxChipInput [id]=\"effectiveId()\" [placeholder]=\"placeholder()\" />\n          </hlm-combobox-chips>\n          <hlm-combobox-content *hlmComboboxPortal>\n            <div hlmComboboxList>\n              @for (option of options(); track option) {\n                <hlm-combobox-item [value]=\"option\">{{ option }}</hlm-combobox-item>\n              }\n            </div>\n            <div hlmComboboxEmpty>{{ emptyText() }}</div>\n          </hlm-combobox-content>\n        </hlm-combobox-multiple>\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  ",
+                    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 [id]=\"labelId()\" [for]=\"effectiveId()\" [class]=\"$labelClass()\"\n          >{{ lbl }}\n          @if (rqrd) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </label>\n      }\n\n      @if (mode() === 'single') {\n        <hlm-combobox [formControlName]=\"cnm\" [disabled]=\"effectiveDisabled()\">\n          <hlm-combobox-trigger\n            [buttonId]=\"effectiveId()\"\n            [aria-describedby]=\"describedBy()\"\n            [required]=\"rqrd\"\n            [class]=\"$controlClass()\"\n          >\n            {{ singleDisplay() ?? placeholder() }}\n          </hlm-combobox-trigger>\n          <hlm-combobox-content *hlmComboboxPortal>\n            <hlm-combobox-input\n              [inputId]=\"effectiveId() + '-search'\"\n              [aria-labelledby]=\"lbl ? labelId() : null\"\n              [aria-describedby]=\"describedBy()\"\n              [placeholder]=\"placeholder()\"\n            />\n            <div hlmComboboxList>\n              @for (option of options(); track option) {\n                <hlm-combobox-item [value]=\"option\">{{ option }}</hlm-combobox-item>\n              }\n            </div>\n            <div hlmComboboxEmpty>{{ emptyText() }}</div>\n          </hlm-combobox-content>\n        </hlm-combobox>\n      } @else {\n        <hlm-combobox-multiple [formControlName]=\"cnm\" [disabled]=\"effectiveDisabled()\" [class]=\"$controlClass()\">\n          <hlm-combobox-chips [class]=\"$chipsClass()\">\n            @for (v of selectedValues(); track v) {\n              <hlm-combobox-chip [value]=\"v\">{{ v }}</hlm-combobox-chip>\n            }\n            <input\n              hlmComboboxChipInput\n              [id]=\"effectiveId()\"\n              [placeholder]=\"placeholder()\"\n              brnFieldControlDescribedBy\n              [aria-describedby]=\"describedBy()\"\n              [attr.aria-required]=\"rqrd || null\"\n            />\n          </hlm-combobox-chips>\n          <hlm-combobox-content *hlmComboboxPortal>\n            <div hlmComboboxList>\n              @for (option of options(); track option) {\n                <hlm-combobox-item [value]=\"option\">{{ option }}</hlm-combobox-item>\n              }\n            </div>\n            <div hlmComboboxEmpty>{{ emptyText() }}</div>\n          </hlm-combobox-content>\n        </hlm-combobox-multiple>\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  ",
                 }]
-        }], propDecorators: { _picker: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnComboboxMultiple), { isSignal: true }] }], _single: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnCombobox), { isSignal: true }] }], 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 }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", 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 }] }], chipsClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipsClass", 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: { _picker: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnComboboxMultiple), { isSignal: true }] }], _single: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnCombobox), { isSignal: true }] }], 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 }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", 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 }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", 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 }] }], chipsClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipsClass", 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-combobox

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

@@ -1,8 +1,8 @@
 import * as _angular_core from '@angular/core';
-import { ValueProvider } from '@angular/core';
+import { OnInit, ValueProvider } from '@angular/core';
 import { ClassValue } from 'clsx';
 
-declare class EgFormCombobox {
+declare class EgFormCombobox implements OnInit {
     private readonly formGroupDirective;
     private readonly _errorMessages;
     private readonly generatedId;
@@ -10,6 +10,9 @@ declare class EgFormCombobox {
     private readonly _shared;
     private readonly _picker;
     private readonly _single;
+    private readonly _cdr;
+    private readonly _destroyRef;
+    ngOnInit(): void;
     label: _angular_core.InputSignal<string | undefined>;
     controlId: _angular_core.InputSignal<string | undefined>;
     controlName: _angular_core.InputSignal<string>;
@@ -21,6 +24,8 @@ declare class EgFormCombobox {
      */
     autoError: _angular_core.InputSignal<boolean>;
     hint: _angular_core.InputSignal<string | undefined>;
+    /** Consumer-owned description IDs, merged with the current error and hint IDs in both modes. */
+    ariaDescribedBy: _angular_core.InputSignal<string | null>;
     id: _angular_core.InputSignal<string | undefined>;
     placeholder: _angular_core.InputSignal<string>;
     emptyText: _angular_core.InputSignal<string>;
@@ -34,6 +39,7 @@ declare class EgFormCombobox {
     mode: _angular_core.InputSignal<"single" | "multiple">;
     options: _angular_core.InputSignal<string[]>;
     readonly effectiveId: _angular_core.Signal<string>;
+    readonly labelId: _angular_core.Signal<string>;
     readonly errorId: _angular_core.Signal<string>;
     readonly hintId: _angular_core.Signal<string>;
     /**
@@ -59,6 +65,7 @@ declare class EgFormCombobox {
      * wrapper-toggle + `control.disable()` cannot clobber CVA state.
      */
     effectiveDisabled(): boolean;
+    protected describedBy(): string | null;
     userClass: _angular_core.InputSignal<ClassValue>;
     labelClass: _angular_core.InputSignal<string>;
     controlClass: _angular_core.InputSignal<string>;
@@ -72,7 +79,7 @@ declare class EgFormCombobox {
     $errorClass: _angular_core.Signal<string>;
     $hintClass: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgFormCombobox, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgFormCombobox, "eg-form-combobox", 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; }; "mode": { "alias": "mode"; "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; }; "chipsClass": { "alias": "chipsClass"; "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<EgFormCombobox, "eg-form-combobox", 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; }; "ariaDescribedBy": { "alias": "aria-describedby"; "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; }; "mode": { "alias": "mode"; "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; }; "chipsClass": { "alias": "chipsClass"; "required": false; "isSignal": true; }; "errorClass": { "alias": "errorClass"; "required": false; "isSignal": true; }; "hintClass": { "alias": "hintClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 interface EgFormComboboxConfig {