@memberjunction/ng-ui-components 6.1.0-edge.4 → 6.1.0-edge.6

package/dist/lib/dropdown/dropdown.component.d.ts

@@ -7,9 +7,27 @@ import * as i0 from "@angular/core";
  *
  * Replaces `<kendo-dropdownlist>`.
  *
- * @example
+ * Every dropdown needs an ACCESSIBLE NAME, or it announces as "combobox, collapsed" with no hint of
+ * what it selects (WCAG 2.1 4.1.2). Use {@link AriaLabelledBy} when a visible label already exists —
+ * `<label for>` cannot name a `div[role=combobox]` — and {@link AriaLabel} when none does.
+ *
+ * @example With a visible label (preferred)
+ * ```html
+ * <span id="persona-label">Interview persona</span>
+ * <mj-dropdown
+ *   AriaLabelledBy="persona-label"
+ *   [Data]="items"
+ *   TextField="name"
+ *   ValueField="id"
+ *   [(ngModel)]="selectedId"
+ *   [ValuePrimitive]="true">
+ * </mj-dropdown>
+ * ```
+ *
+ * @example With no visible label
  * ```html
  * <mj-dropdown
+ *   AriaLabel="Interview persona"
  *   [Data]="items"
  *   TextField="name"
  *   ValueField="id"
@@ -21,12 +39,43 @@ import * as i0 from "@angular/core";
  * ```
  */
 export declare class MJDropdownComponent implements ControlValueAccessor, OnDestroy {
+    /**
+     * Accessible name for the combobox (#3860). Without one — and with no visible label wired via
+     * {@link AriaLabelledBy} — the control announces as an UNNAMED combobox, which fails WCAG 2.1
+     * 4.1.2 (Name, Role, Value): "combobox, collapsed" with no hint of what it selects. Applied as
+     * `aria-label` on the trigger AND on the popup listbox, so both halves announce the same name.
+     */
+    AriaLabel: string;
+    /**
+     * The id of a VISIBLE label element that names this control — the preferred wiring when a label
+     * already exists on screen (an `aria-label` would duplicate its text and drift on rename). This,
+     * not `<label for>`, is the visible-label path: the trigger is a `div[role=combobox]`, and the
+     * label-for association only names labelable form elements. `aria-labelledby` beats `AriaLabel`
+     * in the accessible-name computation where both are present. Applied to trigger AND listbox.
+     */
+    AriaLabelledBy: string;
+    /**
+     * `id` for the combobox trigger, so other markup can REFERENCE it — `aria-controls`, hint text,
+     * test hooks. It is deliberately not documented as a `<label for>` target: the trigger is a div,
+     * which `label[for]` neither names nor focuses. To name the control from a visible label, put an
+     * id on the LABEL and pass it as {@link AriaLabelledBy}.
+     */
+    InputId: string;
+    /** `aria-describedby` passthrough for hint/error text — same shape of gap as the name. */
+    AriaDescribedBy: string;
     Data: Record<string, unknown>[] | string[] | readonly unknown[] | null;
     TextField: string;
     ValueField: string;
     Filterable: boolean;
     ValuePrimitive: boolean;
-    Disabled: boolean;
+    /**
+     * Host-driven disable. Composed with Angular Forms' `setDisabledState()` into `IsDisabled`
+     * (the actual gate) — see `syncDisabled`. A setter, not a bare field, because this input is
+     * routinely bound to an expression that changes over the control's lifetime
+     * (`[Disabled]="!draft.CompanyID"`), and the gate has to follow it every time.
+     */
+    set Disabled(value: boolean);
+    get Disabled(): boolean;
     Placeholder: string;
     DefaultItem: Record<string, unknown> | string | null;
     FilterChange: EventEmitter<string>;
@@ -40,7 +89,35 @@ export declare class MJDropdownComponent implements ControlValueAccessor, OnDest
     private cdr;
     private static nextId;
     DropdownId: number;
+    /**
+     * Id of the popup listbox, so the trigger can point `aria-controls` at it while open — the half of
+     * the combobox pattern that makes "collapsed/expanded" refer to something a screen reader can
+     * find. Generated per instance from the same `static nextId` counter `dialog`, `window` and
+     * `accordion` use in this package.
+     */
+    get ListboxId(): string;
+    /** Id of the hidden "Filter" word, composed into the filter box's name via an id list. */
+    get FilterWordId(): string;
+    /**
+     * `aria-labelledby` for the filter box when the dropdown is named by a VISIBLE label: "Filter"
+     * plus that label's own text, composed by the accessibility tree. Empty when there is no such
+     * label, in which case {@link FilterLabel} supplies a string instead.
+     */
+    get FilterLabelledBy(): string;
+    /**
+     * `aria-label` for the filter box in the no-visible-label case.
+     *
+     * The "filter" guard is not cosmetic: this repo's house habit is `AriaLabel="Filter roles"`, and
+     * an unconditional prefix announces that box as "Filter Filter roles". A name that already begins
+     * with the word is used as-is.
+     */
+    get FilterLabel(): string;
     IsOpen: boolean;
+    /**
+     * The single gate on `Toggle()` / `Open()` — true when EITHER the `Disabled` input or Angular
+     * Forms says so. Never assign it directly; go through `syncDisabled()` so both sources are
+     * always composed and a lock closes an open panel.
+     */
     IsDisabled: boolean;
     HighlightedIndex: number;
     SelectedValue: unknown;
@@ -49,12 +126,35 @@ export declare class MJDropdownComponent implements ControlValueAccessor, OnDest
     Positions: ConnectedPosition[];
     private onChange;
     private onTouched;
+    /** Backing field for the `Disabled` input. */
+    private disabledInput;
+    /** The forms-driven disabled state, kept SEPARATE so neither source can stomp the other. */
+    private formDisabled;
+    /**
+     * Recompute the gate from both of its sources. Called whenever either changes.
+     *
+     * `IsDisabled` is derived state, and the only thing that assigned it was `setDisabledState()`.
+     * The forms-driven half was in fact fine — `setUpControl` also wires `registerOnDisabledChange`,
+     * so that hook fires on every `control.disable()`/`enable()`, not just at registration. What had
+     * no recompute path at all was the `Disabled` @Input: a plain field, so the gate froze at
+     * whatever the first compose produced and every later change to the input was dropped.
+     *
+     * That is how a `[Disabled]="!draft.CompanyID"` picker stayed dead for the life of the
+     * component after the company was finally chosen.
+     */
+    private syncDisabled;
     get FilteredItems(): unknown[];
     get HasValue(): boolean;
     get DisplayText(): string;
     Toggle(): void;
     Open(): void;
     Close(): void;
+    /**
+     * Panel state only — no change detection. Split out of `Close()` because `syncDisabled()` can
+     * run from an @Input setter, i.e. DURING the parent's change-detection pass, where a nested
+     * `detectChanges()` re-enters CD and trips NG0100 on the parent's own bindings.
+     */
+    private resetPanelState;
     SelectItem(item: unknown | null, event?: Event): void;
     IsItemSelected(item: unknown): boolean;
     OnFilterInput(event: Event): void;
@@ -70,6 +170,6 @@ export declare class MJDropdownComponent implements ControlValueAccessor, OnDest
     ngOnDestroy(): void;
     private getSelectedIndex;
     static ɵfac: i0.ɵɵFactoryDeclaration<MJDropdownComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MJDropdownComponent, "mj-dropdown", never, { "Data": { "alias": "Data"; "required": false; }; "TextField": { "alias": "TextField"; "required": false; }; "ValueField": { "alias": "ValueField"; "required": false; }; "Filterable": { "alias": "Filterable"; "required": false; }; "ValuePrimitive": { "alias": "ValuePrimitive"; "required": false; }; "Disabled": { "alias": "Disabled"; "required": false; }; "Placeholder": { "alias": "Placeholder"; "required": false; }; "DefaultItem": { "alias": "DefaultItem"; "required": false; }; }, { "FilterChange": "FilterChange"; "ValueChange": "ValueChange"; }, ["itemTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJDropdownComponent, "mj-dropdown", never, { "AriaLabel": { "alias": "AriaLabel"; "required": false; }; "AriaLabelledBy": { "alias": "AriaLabelledBy"; "required": false; }; "InputId": { "alias": "InputId"; "required": false; }; "AriaDescribedBy": { "alias": "AriaDescribedBy"; "required": false; }; "Data": { "alias": "Data"; "required": false; }; "TextField": { "alias": "TextField"; "required": false; }; "ValueField": { "alias": "ValueField"; "required": false; }; "Filterable": { "alias": "Filterable"; "required": false; }; "ValuePrimitive": { "alias": "ValuePrimitive"; "required": false; }; "Disabled": { "alias": "Disabled"; "required": false; }; "Placeholder": { "alias": "Placeholder"; "required": false; }; "DefaultItem": { "alias": "DefaultItem"; "required": false; }; }, { "FilterChange": "FilterChange"; "ValueChange": "ValueChange"; }, ["itemTemplate"], never, true, never>;
 }
 //# sourceMappingURL=dropdown.component.d.ts.map

package/dist/lib/dropdown/dropdown.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.component.d.ts","sourceRoot":"","sources":["../../../src/lib/dropdown/dropdown.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,YAAY,EAMZ,WAAW,EACX,SAAS,EAGV,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAqB,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACzE,OAAO,EAAiB,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;;AAExE;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAsFa,mBAAoB,YAAW,oBAAoB,EAAE,SAAS;IAChE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,MAAM,EAAE,GAAG,SAAS,OAAO,EAAE,GAAG,IAAI,CAAM;IAC5E,SAAS,SAAM;IACf,UAAU,SAAM;IAChB,UAAU,UAAS;IACnB,cAAc,UAAS;IACvB,QAAQ,UAAS;IACjB,WAAW,SAAe;IAC1B,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,GAAG,IAAI,CAAQ;IAE3D,YAAY,uBAA8B;IAC1C,WAAW,wBAA+B;IAEpB,YAAY,EAAE,WAAW,CAAC;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE,CAAC,GAAG,IAAI,CAAQ;IAE1E,OAAO,CAAC,SAAS,CAA2B;IACxC,OAAO,CAAC,aAAa,CAA2C;IAEnD,QAAQ,CAAC,SAAS,QAAQ;IAEjE,OAAO,CAAC,GAAG,CAA6B;IACxC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAK;IAE1B,UAAU,SAAgC;IAC1C,MAAM,UAAS;IACf,UAAU,UAAS;IACnB,gBAAgB,SAAM;IACtB,aAAa,EAAE,OAAO,CAAQ;IAC9B,YAAY,SAAK;IAEjB,UAAU,SAAM;IAEhB,SAAS,EAAE,iBAAiB,EAAE,CAG5B;IAEF,OAAO,CAAC,QAAQ,CAAsC;IACtD,OAAO,CAAC,SAAS,CAAwB;IAEzC,IAAI,aAAa,IAAI,OAAO,EAAE,CAK7B;IAED,IAAI,QAAQ,IAAI,OAAO,CAAuC;IAE9D,IAAI,WAAW,IAAI,MAAM,CAUxB;IAED,MAAM,IAAI,IAAI;IAKd,IAAI,IAAI,IAAI;IASZ,KAAK,IAAI,IAAI;IAQb,UAAU,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI;IAmBrD,cAAc,CAAC,IAAI,EAAE,OAAO,GAAG,OAAO;IAQtC,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAMjC,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAwBrC,MAAM,IAAI,IAAI;IAEd,WAAW,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM;IAOlC,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,OAAO;IAMpC,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAEnC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAChC,gBAAgB,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,GAAG,IAAI;IACpD,iBAAiB,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI;IACvC,gBAAgB,CAAC,UAAU,EAAE,OAAO,GAAG,IAAI;IAC3C,WAAW,IAAI,IAAI;IAEnB,OAAO,CAAC,gBAAgB;yCAnKb,mBAAmB;2CAAnB,mBAAmB;CAuK/B"}
+{"version":3,"file":"dropdown.component.d.ts","sourceRoot":"","sources":["../../../src/lib/dropdown/dropdown.component.ts"],"names":[],"mappings":"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"}

package/dist/lib/dropdown/dropdown.component.js

@@ -9,59 +9,65 @@ const _c1 = ["trigger"];
 const _c2 = ["filterInput"];
 const _c3 = a0 => ({ $implicit: a0 });
 function MJDropdownComponent_ng_template_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 7)(1, "input", 11, 1);
-    i0.ɵɵlistener("input", function MJDropdownComponent_ng_template_6_Conditional_1_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnFilterInput($event)); })("keydown", function MJDropdownComponent_ng_template_6_Conditional_1_Template_input_keydown_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnKeyDown($event)); });
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7)(1, "span", 11);
+    i0.ɵɵtext(2, "Filter");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "input", 12, 1);
+    i0.ɵɵlistener("input", function MJDropdownComponent_ng_template_6_Conditional_1_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnFilterInput($event)); })("keydown", function MJDropdownComponent_ng_template_6_Conditional_1_Template_input_keydown_3_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnKeyDown($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("value", ctx_r2.filterText);
+    i0.ɵɵattribute("id", ctx_r1.FilterWordId);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("value", ctx_r1.filterText);
+    i0.ɵɵattribute("aria-labelledby", ctx_r1.FilterLabelledBy)("aria-label", ctx_r1.FilterLabelledBy ? null : ctx_r1.FilterLabel);
 } }
 function MJDropdownComponent_ng_template_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 12);
-    i0.ɵɵlistener("click", function MJDropdownComponent_ng_template_6_Conditional_2_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SelectItem(null, $event)); });
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 13);
+    i0.ɵɵlistener("click", function MJDropdownComponent_ng_template_6_Conditional_2_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SelectItem(null, $event)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("mj-dropdown-option--selected", ctx_r2.SelectedValue == null)("mj-dropdown-option--highlighted", ctx_r2.HighlightedIndex === -1);
-    i0.ɵɵattribute("aria-selected", ctx_r2.SelectedValue == null);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("mj-dropdown-option--selected", ctx_r1.SelectedValue == null)("mj-dropdown-option--highlighted", ctx_r1.HighlightedIndex === -1);
+    i0.ɵɵattribute("aria-selected", ctx_r1.SelectedValue == null);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.GetItemText(ctx_r2.DefaultItem), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.GetItemText(ctx_r1.DefaultItem), " ");
 } }
 function MJDropdownComponent_ng_template_6_For_4_Conditional_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
 function MJDropdownComponent_ng_template_6_For_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, MJDropdownComponent_ng_template_6_For_4_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 14);
+    i0.ɵɵtemplate(0, MJDropdownComponent_ng_template_6_For_4_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 15);
 } if (rf & 2) {
-    const item_r6 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.itemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c3, item_r6));
+    const item_r5 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.itemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c3, item_r5));
 } }
 function MJDropdownComponent_ng_template_6_For_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
-    const item_r6 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.GetItemText(item_r6), " ");
+    const item_r5 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.GetItemText(item_r5), " ");
 } }
 function MJDropdownComponent_ng_template_6_For_4_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 13);
-    i0.ɵɵlistener("click", function MJDropdownComponent_ng_template_6_For_4_Template_div_click_0_listener($event) { const item_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SelectItem(item_r6, $event)); });
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵlistener("click", function MJDropdownComponent_ng_template_6_For_4_Template_div_click_0_listener($event) { const item_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SelectItem(item_r5, $event)); });
     i0.ɵɵconditionalCreate(1, MJDropdownComponent_ng_template_6_For_4_Conditional_1_Template, 1, 4, "ng-container")(2, MJDropdownComponent_ng_template_6_For_4_Conditional_2_Template, 1, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r6 = ctx.$implicit;
-    const $index_r7 = ctx.$index;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("mj-dropdown-option--selected", ctx_r2.IsItemSelected(item_r6))("mj-dropdown-option--highlighted", ctx_r2.HighlightedIndex === $index_r7);
-    i0.ɵɵattribute("aria-selected", ctx_r2.IsItemSelected(item_r6));
+    const item_r5 = ctx.$implicit;
+    const $index_r6 = ctx.$index;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("mj-dropdown-option--selected", ctx_r1.IsItemSelected(item_r5))("mj-dropdown-option--highlighted", ctx_r1.HighlightedIndex === $index_r6);
+    i0.ɵɵattribute("aria-selected", ctx_r1.IsItemSelected(item_r5));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.itemTemplate ? 1 : 2);
+    i0.ɵɵconditional(ctx_r1.itemTemplate ? 1 : 2);
 } }
 function MJDropdownComponent_ng_template_6_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 10);
@@ -70,30 +76,49 @@ function MJDropdownComponent_ng_template_6_Conditional_5_Template(rf, ctx) { if
 } }
 function MJDropdownComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 6);
-    i0.ɵɵconditionalCreate(1, MJDropdownComponent_ng_template_6_Conditional_1_Template, 3, 1, "div", 7);
+    i0.ɵɵconditionalCreate(1, MJDropdownComponent_ng_template_6_Conditional_1_Template, 5, 4, "div", 7);
     i0.ɵɵconditionalCreate(2, MJDropdownComponent_ng_template_6_Conditional_2_Template, 2, 6, "div", 8);
     i0.ɵɵrepeaterCreate(3, MJDropdownComponent_ng_template_6_For_4_Template, 3, 6, "div", 9, i0.ɵɵcomponentInstance().TrackByIndex, true);
     i0.ɵɵconditionalCreate(5, MJDropdownComponent_ng_template_6_Conditional_5_Template, 2, 0, "div", 10);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("id", ctx_r1.ListboxId)("aria-label", ctx_r1.AriaLabel || null)("aria-labelledby", ctx_r1.AriaLabelledBy || null);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.Filterable ? 1 : -1);
+    i0.ɵɵconditional(ctx_r1.Filterable ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.DefaultItem != null ? 2 : -1);
+    i0.ɵɵconditional(ctx_r1.DefaultItem != null ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r2.FilteredItems);
+    i0.ɵɵrepeater(ctx_r1.FilteredItems);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.FilteredItems.length === 0 ? 5 : -1);
+    i0.ɵɵconditional(ctx_r1.FilteredItems.length === 0 ? 5 : -1);
 } }
 /**
  * mj-dropdown — Dropdown select component using CDK Overlay.
  *
  * Replaces `<kendo-dropdownlist>`.
  *
- * @example
+ * Every dropdown needs an ACCESSIBLE NAME, or it announces as "combobox, collapsed" with no hint of
+ * what it selects (WCAG 2.1 4.1.2). Use {@link AriaLabelledBy} when a visible label already exists —
+ * `<label for>` cannot name a `div[role=combobox]` — and {@link AriaLabel} when none does.
+ *
+ * @example With a visible label (preferred)
+ * ```html
+ * <span id="persona-label">Interview persona</span>
+ * <mj-dropdown
+ *   AriaLabelledBy="persona-label"
+ *   [Data]="items"
+ *   TextField="name"
+ *   ValueField="id"
+ *   [(ngModel)]="selectedId"
+ *   [ValuePrimitive]="true">
+ * </mj-dropdown>
+ * ```
+ *
+ * @example With no visible label
  * ```html
  * <mj-dropdown
+ *   AriaLabel="Interview persona"
  *   [Data]="items"
  *   TextField="name"
  *   ValueField="id"
@@ -105,12 +130,48 @@ function MJDropdownComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
  * ```
  */
 export class MJDropdownComponent {
+    /**
+     * Accessible name for the combobox (#3860). Without one — and with no visible label wired via
+     * {@link AriaLabelledBy} — the control announces as an UNNAMED combobox, which fails WCAG 2.1
+     * 4.1.2 (Name, Role, Value): "combobox, collapsed" with no hint of what it selects. Applied as
+     * `aria-label` on the trigger AND on the popup listbox, so both halves announce the same name.
+     */
+    AriaLabel = '';
+    /**
+     * The id of a VISIBLE label element that names this control — the preferred wiring when a label
+     * already exists on screen (an `aria-label` would duplicate its text and drift on rename). This,
+     * not `<label for>`, is the visible-label path: the trigger is a `div[role=combobox]`, and the
+     * label-for association only names labelable form elements. `aria-labelledby` beats `AriaLabel`
+     * in the accessible-name computation where both are present. Applied to trigger AND listbox.
+     */
+    AriaLabelledBy = '';
+    /**
+     * `id` for the combobox trigger, so other markup can REFERENCE it — `aria-controls`, hint text,
+     * test hooks. It is deliberately not documented as a `<label for>` target: the trigger is a div,
+     * which `label[for]` neither names nor focuses. To name the control from a visible label, put an
+     * id on the LABEL and pass it as {@link AriaLabelledBy}.
+     */
+    InputId = '';
+    /** `aria-describedby` passthrough for hint/error text — same shape of gap as the name. */
+    AriaDescribedBy = '';
     Data = [];
     TextField = '';
     ValueField = '';
     Filterable = false;
     ValuePrimitive = false;
-    Disabled = false;
+    /**
+     * Host-driven disable. Composed with Angular Forms' `setDisabledState()` into `IsDisabled`
+     * (the actual gate) — see `syncDisabled`. A setter, not a bare field, because this input is
+     * routinely bound to an expression that changes over the control's lifetime
+     * (`[Disabled]="!draft.CompanyID"`), and the gate has to follow it every time.
+     */
+    set Disabled(value) {
+        this.disabledInput = value;
+        this.syncDisabled();
+    }
+    get Disabled() {
+        return this.disabledInput;
+    }
     Placeholder = 'Select...';
     DefaultItem = null;
     FilterChange = new EventEmitter();
@@ -122,7 +183,40 @@ export class MJDropdownComponent {
     cdr = inject(ChangeDetectorRef);
     static nextId = 0;
     DropdownId = MJDropdownComponent.nextId++;
+    /**
+     * Id of the popup listbox, so the trigger can point `aria-controls` at it while open — the half of
+     * the combobox pattern that makes "collapsed/expanded" refer to something a screen reader can
+     * find. Generated per instance from the same `static nextId` counter `dialog`, `window` and
+     * `accordion` use in this package.
+     */
+    get ListboxId() { return `mj-dropdown-listbox-${this.DropdownId}`; }
+    /** Id of the hidden "Filter" word, composed into the filter box's name via an id list. */
+    get FilterWordId() { return `mj-dropdown-filter-word-${this.DropdownId}`; }
+    /**
+     * `aria-labelledby` for the filter box when the dropdown is named by a VISIBLE label: "Filter"
+     * plus that label's own text, composed by the accessibility tree. Empty when there is no such
+     * label, in which case {@link FilterLabel} supplies a string instead.
+     */
+    get FilterLabelledBy() { return this.AriaLabelledBy ? `${this.FilterWordId} ${this.AriaLabelledBy}` : ''; }
+    /**
+     * `aria-label` for the filter box in the no-visible-label case.
+     *
+     * The "filter" guard is not cosmetic: this repo's house habit is `AriaLabel="Filter roles"`, and
+     * an unconditional prefix announces that box as "Filter Filter roles". A name that already begins
+     * with the word is used as-is.
+     */
+    get FilterLabel() {
+        const name = this.AriaLabel.trim();
+        if (!name)
+            return 'Filter options';
+        return /^filter\b/i.test(name) ? name : `Filter ${name}`;
+    }
     IsOpen = false;
+    /**
+     * The single gate on `Toggle()` / `Open()` — true when EITHER the `Disabled` input or Angular
+     * Forms says so. Never assign it directly; go through `syncDisabled()` so both sources are
+     * always composed and a lock closes an open panel.
+     */
     IsDisabled = false;
     HighlightedIndex = -1;
     SelectedValue = null;
@@ -134,6 +228,33 @@ export class MJDropdownComponent {
     ];
     onChange = () => { };
     onTouched = () => { };
+    /** Backing field for the `Disabled` input. */
+    disabledInput = false;
+    /** The forms-driven disabled state, kept SEPARATE so neither source can stomp the other. */
+    formDisabled = false;
+    /**
+     * Recompute the gate from both of its sources. Called whenever either changes.
+     *
+     * `IsDisabled` is derived state, and the only thing that assigned it was `setDisabledState()`.
+     * The forms-driven half was in fact fine — `setUpControl` also wires `registerOnDisabledChange`,
+     * so that hook fires on every `control.disable()`/`enable()`, not just at registration. What had
+     * no recompute path at all was the `Disabled` @Input: a plain field, so the gate froze at
+     * whatever the first compose produced and every later change to the input was dropped.
+     *
+     * That is how a `[Disabled]="!draft.CompanyID"` picker stayed dead for the life of the
+     * component after the company was finally chosen.
+     */
+    syncDisabled() {
+        const disabled = this.disabledInput || this.formDisabled;
+        if (disabled === this.IsDisabled)
+            return;
+        this.IsDisabled = disabled;
+        // Becoming disabled while the panel is open would otherwise leave an interactive list
+        // hanging off a control the user can no longer operate.
+        if (disabled)
+            this.resetPanelState();
+        this.cdr.markForCheck();
+    }
     get FilteredItems() {
         const data = (this.Data ?? []);
         if (!this.Filterable || !this.filterText)
@@ -172,10 +293,18 @@ export class MJDropdownComponent {
     Close() {
         if (!this.IsOpen)
             return;
+        this.resetPanelState();
+        this.cdr.detectChanges();
+    }
+    /**
+     * Panel state only — no change detection. Split out of `Close()` because `syncDisabled()` can
+     * run from an @Input setter, i.e. DURING the parent's change-detection pass, where a nested
+     * `detectChanges()` re-enters CD and trips NG0100 on the parent's own bindings.
+     */
+    resetPanelState() {
         this.IsOpen = false;
         this.filterText = '';
         this.HighlightedIndex = -1;
-        this.cdr.detectChanges();
     }
     SelectItem(item, event) {
         event?.stopPropagation();
@@ -272,7 +401,7 @@ export class MJDropdownComponent {
     writeValue(value) { this.SelectedValue = value; }
     registerOnChange(fn) { this.onChange = fn; }
     registerOnTouched(fn) { this.onTouched = fn; }
-    setDisabledState(isDisabled) { this.IsDisabled = isDisabled || this.Disabled; }
+    setDisabledState(isDisabled) { this.formDisabled = isDisabled; this.syncDisabled(); }
     ngOnDestroy() { this.Close(); }
     getSelectedIndex() {
         if (this.SelectedValue == null)
@@ -293,31 +422,30 @@ export class MJDropdownComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filterInputEl = _t.first);
         } }, hostVars: 2, hostBindings: function MJDropdownComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassProp("mj-dropdown-host", ctx.hostClass);
-        } }, inputs: { Data: "Data", TextField: "TextField", ValueField: "ValueField", Filterable: "Filterable", ValuePrimitive: "ValuePrimitive", Disabled: "Disabled", Placeholder: "Placeholder", DefaultItem: "DefaultItem" }, outputs: { FilterChange: "FilterChange", ValueChange: "ValueChange" }, features: [i0.ɵɵProvidersFeature([{
+        } }, inputs: { AriaLabel: "AriaLabel", AriaLabelledBy: "AriaLabelledBy", InputId: "InputId", AriaDescribedBy: "AriaDescribedBy", Data: "Data", TextField: "TextField", ValueField: "ValueField", Filterable: "Filterable", ValuePrimitive: "ValuePrimitive", Disabled: "Disabled", Placeholder: "Placeholder", DefaultItem: "DefaultItem" }, outputs: { FilterChange: "FilterChange", ValueChange: "ValueChange" }, features: [i0.ɵɵProvidersFeature([{
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => MJDropdownComponent),
                     multi: true
-                }])], decls: 7, vars: 13, consts: [["trigger", "", "overlayOrigin", "cdkOverlayOrigin"], ["filterInput", ""], ["cdkOverlayOrigin", "", "role", "combobox", "aria-haspopup", "listbox", "tabindex", "0", 1, "mj-dropdown", 3, "click", "keydown", "blur"], [1, "mj-dropdown-value"], [1, "fa-solid", "fa-chevron-down", "mj-dropdown-arrow"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "mj-dropdown-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHasBackdrop"], ["role", "listbox", 1, "mj-dropdown-panel"], [1, "mj-dropdown-filter-wrap"], ["role", "option", 1, "mj-dropdown-option", "mj-dropdown-option--default", 3, "mj-dropdown-option--selected", "mj-dropdown-option--highlighted"], ["role", "option", 1, "mj-dropdown-option", 3, "mj-dropdown-option--selected", "mj-dropdown-option--highlighted"], [1, "mj-dropdown-no-data"], ["type", "text", "placeholder", "Search...", 1, "mj-input", "mj-dropdown-filter", 3, "input", "keydown", "value"], ["role", "option", 1, "mj-dropdown-option", "mj-dropdown-option--default", 3, "click"], ["role", "option", 1, "mj-dropdown-option", 3, "click"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function MJDropdownComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
+                }])], decls: 7, vars: 20, consts: [["trigger", "", "overlayOrigin", "cdkOverlayOrigin"], ["filterInput", ""], ["cdkOverlayOrigin", "", "role", "combobox", "aria-haspopup", "listbox", 1, "mj-dropdown", 3, "click", "keydown", "blur"], [1, "mj-dropdown-value"], [1, "fa-solid", "fa-chevron-down", "mj-dropdown-arrow"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "mj-dropdown-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHasBackdrop"], ["role", "listbox", 1, "mj-dropdown-panel"], [1, "mj-dropdown-filter-wrap"], ["role", "option", 1, "mj-dropdown-option", "mj-dropdown-option--default", 3, "mj-dropdown-option--selected", "mj-dropdown-option--highlighted"], ["role", "option", 1, "mj-dropdown-option", 3, "mj-dropdown-option--selected", "mj-dropdown-option--highlighted"], [1, "mj-dropdown-no-data"], [1, "mj-dropdown-sr-only"], ["type", "text", "placeholder", "Filter...", 1, "mj-input", "mj-dropdown-filter", 3, "input", "keydown", "value"], ["role", "option", 1, "mj-dropdown-option", "mj-dropdown-option--default", 3, "click"], ["role", "option", 1, "mj-dropdown-option", 3, "click"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function MJDropdownComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 2, 0);
-            i0.ɵɵlistener("click", function MJDropdownComponent_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.Toggle()); })("keydown", function MJDropdownComponent_Template_div_keydown_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnKeyDown($event)); })("blur", function MJDropdownComponent_Template_div_blur_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnBlur()); });
+            i0.ɵɵlistener("click", function MJDropdownComponent_Template_div_click_0_listener() { return ctx.Toggle(); })("keydown", function MJDropdownComponent_Template_div_keydown_0_listener($event) { return ctx.OnKeyDown($event); })("blur", function MJDropdownComponent_Template_div_blur_0_listener() { return ctx.OnBlur(); });
             i0.ɵɵelementStart(3, "span", 3);
             i0.ɵɵtext(4);
             i0.ɵɵelementEnd();
             i0.ɵɵelement(5, "i", 4);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(6, MJDropdownComponent_ng_template_6_Template, 6, 3, "ng-template", 5);
-            i0.ɵɵlistener("backdropClick", function MJDropdownComponent_Template_ng_template_backdropClick_6_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.Close()); })("detach", function MJDropdownComponent_Template_ng_template_detach_6_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.Close()); });
+            i0.ɵɵtemplate(6, MJDropdownComponent_ng_template_6_Template, 6, 6, "ng-template", 5);
+            i0.ɵɵlistener("backdropClick", function MJDropdownComponent_Template_ng_template_backdropClick_6_listener() { return ctx.Close(); })("detach", function MJDropdownComponent_Template_ng_template_detach_6_listener() { return ctx.Close(); });
         } if (rf & 2) {
-            const overlayOrigin_r8 = i0.ɵɵreference(2);
+            const overlayOrigin_r7 = i0.ɵɵreference(2);
             i0.ɵɵclassProp("mj-dropdown--open", ctx.IsOpen)("mj-dropdown--disabled", ctx.IsDisabled);
-            i0.ɵɵattribute("aria-expanded", ctx.IsOpen);
+            i0.ɵɵattribute("id", ctx.InputId || null)("aria-label", ctx.AriaLabel || null)("aria-labelledby", ctx.AriaLabelledBy || null)("aria-describedby", ctx.AriaDescribedBy || null)("aria-expanded", ctx.IsOpen)("aria-controls", ctx.IsOpen ? ctx.ListboxId : null)("aria-disabled", ctx.IsDisabled ? "true" : null)("tabindex", ctx.IsDisabled ? -1 : 0);
             i0.ɵɵadvance(3);
             i0.ɵɵclassProp("mj-dropdown-placeholder", !ctx.HasValue);
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.DisplayText, " ");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("cdkConnectedOverlayOrigin", overlayOrigin_r8)("cdkConnectedOverlayOpen", ctx.IsOpen)("cdkConnectedOverlayPositions", ctx.Positions)("cdkConnectedOverlayWidth", ctx.TriggerWidth)("cdkConnectedOverlayHasBackdrop", true);
+            i0.ɵɵproperty("cdkConnectedOverlayOrigin", overlayOrigin_r7)("cdkConnectedOverlayOpen", ctx.IsOpen)("cdkConnectedOverlayPositions", ctx.Positions)("cdkConnectedOverlayWidth", ctx.TriggerWidth)("cdkConnectedOverlayHasBackdrop", true);
         } }, dependencies: [NgTemplateOutlet, OverlayModule, i1.CdkConnectedOverlay, i1.CdkOverlayOrigin], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJDropdownComponent, [{
@@ -335,9 +463,15 @@ export class MJDropdownComponent {
       [class.mj-dropdown--open]="IsOpen"
       [class.mj-dropdown--disabled]="IsDisabled"
       role="combobox"
+      [attr.id]="InputId || null"
+      [attr.aria-label]="AriaLabel || null"
+      [attr.aria-labelledby]="AriaLabelledBy || null"
+      [attr.aria-describedby]="AriaDescribedBy || null"
       [attr.aria-expanded]="IsOpen"
       aria-haspopup="listbox"
-      tabindex="0"
+      [attr.aria-controls]="IsOpen ? ListboxId : null"
+      [attr.aria-disabled]="IsDisabled ? 'true' : null"
+      [attr.tabindex]="IsDisabled ? -1 : 0"
       (click)="Toggle()"
       (keydown)="OnKeyDown($event)"
       (blur)="OnBlur()">
@@ -357,14 +491,28 @@ export class MJDropdownComponent {
       cdkConnectedOverlayBackdropClass="mj-dropdown-backdrop"
       (backdropClick)="Close()"
       (detach)="Close()">
-      <div class="mj-dropdown-panel" role="listbox">
+      <div class="mj-dropdown-panel" role="listbox"
+        [attr.id]="ListboxId"
+        [attr.aria-label]="AriaLabel || null"
+        [attr.aria-labelledby]="AriaLabelledBy || null">
         @if (Filterable) {
           <div class="mj-dropdown-filter-wrap">
+            <!--
+              The word "Filter" lives in a hidden span rather than in a concatenated string so the
+              AriaLabelledBy path can NAME this box from the same visible label that names the
+              dropdown: aria-labelledby takes an ID LIST, so "Filter" plus the label's own text is
+              composed by the accessibility tree without this component ever seeing that text.
+              Without it, every filterable dropdown on a form named this way announces as an
+              identical "Filter options".
+            -->
+            <span class="mj-dropdown-sr-only" [attr.id]="FilterWordId">Filter</span>
             <input
               #filterInput
               class="mj-input mj-dropdown-filter"
               type="text"
-              placeholder="Search..."
+              placeholder="Filter..."
+              [attr.aria-labelledby]="FilterLabelledBy"
+              [attr.aria-label]="FilterLabelledBy ? null : FilterLabel"
               [value]="filterText"
               (input)="OnFilterInput($event)"
               (keydown)="OnKeyDown($event)" />
@@ -408,7 +556,15 @@ export class MJDropdownComponent {
                         multi: true
                     }]
             }]
-    }], null, { Data: [{
+    }], null, { AriaLabel: [{
+            type: Input
+        }], AriaLabelledBy: [{
+            type: Input
+        }], InputId: [{
+            type: Input
+        }], AriaDescribedBy: [{
+            type: Input
+        }], Data: [{
             type: Input
         }], TextField: [{
             type: Input
@@ -441,5 +597,5 @@ export class MJDropdownComponent {
             type: HostBinding,
             args: ['class.mj-dropdown-host']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJDropdownComponent, { className: "MJDropdownComponent", filePath: "lib/dropdown/dropdown.component.ts", lineNumber: 124 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJDropdownComponent, { className: "MJDropdownComponent", filePath: "lib/dropdown/dropdown.component.ts", lineNumber: 162 }); })();
 //# sourceMappingURL=dropdown.component.js.map