@egose/shadcn-theme-ng-tw 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-tw/form-field';
 import { HlmLabel } from '@egose/shadcn-theme-ng-tw/label';
 import { HlmAutocomplete, HlmAutocompleteContent, HlmAutocompleteEmpty, HlmAutocompleteGroup, HlmAutocompleteInput, HlmAutocompleteItem, HlmAutocompleteList, HlmAutocompleteLabel } from '@egose/shadcn-theme-ng-tw/autocomplete';
 import { hlm } from '@egose/shadcn-theme-ng-tw/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('tw:w-full', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "$userClass" }] : /* istanbul ignore next */ []));
     $labelClass = computed(() => hlm('tw:mb-1', this._shared.labelClass, this._config.labelClass, this.labelClass()), /* @ts-ignore */
@@ -118,7 +131,7 @@ class EgFormAutocomplete {
     $hintClass = computed(() => hlm('tw: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: `
+    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: `
     @let lbl = label();
     @let cnm = controlName();
     @let hnt = hint();
@@ -135,7 +148,13 @@ class EgFormAutocomplete {
       }
 
       <div hlmAutocomplete [formControlName]="cnm" [disabled]="effectiveDisabled()" [class]="$controlClass()">
-        <hlm-autocomplete-input [inputId]="effectiveId()" [placeholder]="placeholder()" [class]="$inputClass()" />
+        <hlm-autocomplete-input
+          [inputId]="effectiveId()"
+          [placeholder]="placeholder()"
+          [aria-describedby]="describedBy()"
+          [required]="rqrd"
+          [class]="$inputClass()"
+        />
         <hlm-autocomplete-content>
           <div hlmAutocompleteList>
             <div hlmAutocompleteGroup>
@@ -160,7 +179,7 @@ class EgFormAutocomplete {
         </hlm-hint>
       }
     </hlm-form-field>
-  `, 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]" }] });
+  `, 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,
@@ -203,7 +222,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
       }
 
       <div hlmAutocomplete [formControlName]="cnm" [disabled]="effectiveDisabled()" [class]="$controlClass()">
-        <hlm-autocomplete-input [inputId]="effectiveId()" [placeholder]="placeholder()" [class]="$inputClass()" />
+        <hlm-autocomplete-input
+          [inputId]="effectiveId()"
+          [placeholder]="placeholder()"
+          [aria-describedby]="describedBy()"
+          [required]="rqrd"
+          [class]="$inputClass()"
+        />
         <hlm-autocomplete-content>
           <div hlmAutocompleteList>
             <div hlmAutocompleteGroup>
@@ -230,7 +255,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
     </hlm-form-field>
   `,
                 }]
-        }], 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