@memberjunction/ng-ui-components 6.2.0-edge.0 → 6.2.0-edge.1

package/README.md

@@ -53,6 +53,25 @@ All colors resolve through `--mj-*` semantic tokens, so light/dark theming requi
 
 `mj-combobox`, `mj-dropdown`, `mj-datepicker`, `mj-numeric-input`, and `mj-switch` all implement `ControlValueAccessor` — they work with `[(ngModel)]` and reactive forms, including `setDisabledState`.
 
+## Accessible names — one contract across every control
+
+`mj-combobox`, `mj-dropdown`, `mj-datepicker`, `mj-numeric-input`, `mj-page-search` and `mj-switch` share four optional inputs, from `MJNamedControlBase`. **Name every one of them**: without a name a control announces as its role and state alone — "combobox, collapsed", "switch, on" — which fails WCAG 2.1 4.1.2 (Name, Role, Value).
+
+| input | for |
+|---|---|
+| **`AriaLabelledBy`** | the id of a **visible** label — the preferred wiring when one exists |
+| `AriaLabel` | when no visible label exists |
+| `AriaDescribedBy` | hint and error text |
+| `InputId` | an id on the focusable element, so other markup can reference it |
+
+Three things hold across all six:
+
+- **Absent beats empty** — an unset input renders no attribute at all. `aria-label=""` is worse than nothing, because an explicitly empty name overrides every other naming source.
+- **The name reaches the whole control** — the popup listbox, the calendar grid, the filter box, the toggle and clear buttons all take their name from the same source, so a form with six filterable dropdowns does not present six identical "Filter options" boxes. Under `AriaLabelledBy` this works through an `aria-labelledby` id list, the only mechanism that can compose a fixed word with a visible label's own text.
+- **`InputId` is a `<label for>` target wherever the focusable element is labelable** — the four input-backed controls (`mj-combobox`, `mj-datepicker`, `mj-numeric-input`, `mj-page-search`) and `mj-switch`, whose `<button>` is labelable too and gains click-to-focus from it. The exception is **`mj-dropdown`**, whose trigger is a `div[role=combobox]`: `label[for]` does not associate with it, so the visible-label path there is `AriaLabelledBy`.
+
+**A control that renders with no accessible name warns in dev mode** (`WarnIfUnnamed`, alongside the existing `mjButton` and `mjClickable` guards) and is silent in production. It fires when the name would be genuinely empty — including an `aria-labelledby` whose ids resolve to nothing, which names the control no better than no attribute at all. A `placeholder` does **not** count as a name for a form control, since it disappears the moment the user types; `mj-page-search` is the one control that opts into counting it, because its placeholder is the caller's statement of what the box searches.
+
 ---
 
 # Component catalog
@@ -69,17 +88,19 @@ Attribute directive that styles a **native** button or anchor. Variants: `primar
 ```
 
 ### `mj-combobox` — MJComboboxComponent
-Editable text-input combobox (CDK overlay): type-to-filter, keyboard nav, optional custom values (`[AllowCustom]`). Inputs: `Data`, `TextField`, `ValueField`, `ValuePrimitive`, `Filterable` (default true), `Placeholder`, `Disabled`. Outputs: `ValueChange`, `FilterChange`. Custom item template via `<ng-template #mjComboboxItem>`.
+Editable text-input combobox (CDK overlay): type-to-filter, keyboard nav, optional custom values (`[AllowCustom]`). Inputs: `Data`, `TextField`, `ValueField`, `ValuePrimitive`, `Filterable` (default true), `Placeholder`, `Disabled`, plus the four naming inputs above. Outputs: `ValueChange`, `FilterChange`. Custom item template via `<ng-template #mjComboboxItem>`.
+
+`role="combobox"` and its state attributes (`aria-expanded`, `aria-controls`, `aria-activedescendant`) sit on the **input** — the element that takes focus — not on the wrapper. The toggle and clear buttons take their names from the combobox's own name.
 
 ```html
-<mj-combobox [Data]="categories" TextField="text" ValueField="value"
+<mj-combobox AriaLabel="Category" [Data]="categories" TextField="text" ValueField="value"
              [(ngModel)]="selected" [ValuePrimitive]="true" [AllowCustom]="true" />
 ```
 
 ### `mj-dropdown` — MJDropdownComponent
 Non-editable select (CDK overlay) with optional in-panel filter (`[Filterable]`, default false) and `DefaultItem` clear option. Same `Data`/`TextField`/`ValueField`/`ValuePrimitive` contract as combobox. Custom item template via `<ng-template #mjDropdownItem>`.
 
-**Give every dropdown an accessible name.** The trigger is a `div[role=combobox]`, so `<label for>` neither names nor focuses it — an unnamed dropdown announces as "combobox, collapsed" (WCAG 2.1 4.1.2). Use `AriaLabelledBy` when a visible label already exists, `AriaLabel` when none does; `AriaDescribedBy` carries hint/error text, and `InputId` puts an id on the trigger for other markup to reference. All are applied to the popup listbox as well as the trigger, and a filterable panel's filter box takes its name from the same source.
+**Give every dropdown an accessible name** — see [Accessible names](#accessible-names--one-contract-across-every-control). The trigger is a `div[role=combobox]`, so `<label for>` neither names nor focuses it: the visible-label path here is `AriaLabelledBy`, not `InputId`. The name is applied to the popup listbox as well as the trigger, and a filterable panel's filter box takes its name from the same source.
 
 ```html
 <!-- A visible label already on screen (preferred) -->
@@ -93,24 +114,24 @@ Non-editable select (CDK overlay) with optional in-panel filter (`[Filterable]`,
 ```
 
 ### `mj-datepicker` — MJDatepickerComponent
-Text input + calendar popup with `Min`/`Max` range disabling and typed-input parsing. Accepts `Date | string | null` through forms; emits `ValueChange: Date | null`. (Display format is currently fixed at `MM/dd/yyyy`.)
+Text input + calendar popup with `Min`/`Max` range disabling and typed-input parsing. Accepts `Date | string | null` through forms; emits `ValueChange: Date | null`. (Display format is currently fixed at `MM/dd/yyyy`.) The toggle button and the calendar grid take their names from the field's own name, so two pickers on one form do not present two grids both called "Calendar".
 
 ```html
-<mj-datepicker [(ngModel)]="dueDate" [Min]="minDate" [Max]="maxDate" Placeholder="Select a date" />
+<mj-datepicker AriaLabel="Due date" [(ngModel)]="dueDate" [Min]="minDate" [Max]="maxDate" Placeholder="Select a date" />
 ```
 
 ### `mj-numeric-input` — MJNumericInputComponent
 Native number input that clamps to `Min`/`Max`, rounds to `Decimals`, and formats on blur. Value flows through forms only (no separate output).
 
 ```html
-<mj-numeric-input [(ngModel)]="quantity" [Min]="0" [Max]="100" [Decimals]="2" />
+<mj-numeric-input AriaLabel="Quantity" [(ngModel)]="quantity" [Min]="0" [Max]="100" [Decimals]="2" />
 ```
 
 ### `mj-switch` — MJSwitchComponent
-Boolean toggle with `role="switch"`, optional `OnLabel`/`OffLabel`.
+Boolean toggle with `role="switch"`, optional `OnLabel`/`OffLabel`. Name it: `OnLabel`/`OffLabel` render inside the button, so an unnamed switch is named after its own **state** — "Off, switch, off" — and `AriaLabel`/`AriaLabelledBy` is what replaces that with its purpose.
 
 ```html
-<mj-switch [(ngModel)]="isEnabled" OnLabel="On" OffLabel="Off" />
+<mj-switch AriaLabel="Email notifications" [(ngModel)]="isEnabled" OnLabel="On" OffLabel="Off" />
 ```
 
 ### `[mjClickable]` — MJClickableDirective
@@ -213,7 +234,12 @@ The card is a **query container** (`container-type: size`): size content inside
 Delayed (~450ms still-pointer), non-interactive, token-themed hover tooltip that by default shows only when the host is truncated (`scrollWidth > clientWidth`); `mjTipAlways` forces it for hosts whose truncation can't be measured (a native `<select>`). Used by the workspace tab strip for full labels on capped tabs.
 
 ### `mj-page-search` — MJPageSearchComponent
-Compact toolbar search input. `Placeholder`, `Value`, `Icon`; `(ValueChange)` on input.
+Compact toolbar search input. `Placeholder`, `Value`, `Icon`, plus the four naming inputs above; `(ValueChange)` on input. The placeholder is the name of last resort — it is what the name computation falls back to, and it disappears the moment the user types — so pass `AriaLabel` for a name that survives having text in the box.
+
+```html
+<mj-page-search AriaLabel="Search templates" Placeholder="Search templates..."
+                [Value]="q" (ValueChange)="q = $event" />
+```
 
 ### `mj-slide-panel` — MjSlidePanelComponent
 Chrome-only slide-in panel from the right (resizable) or centered dialog (`Mode: 'slide' | 'dialog'`). Inputs include `Title`, `Visible`, `Resizable`, `MinWidthPx`, `MaxWidthRatio`, `WidthPx`, and a `CanClose` guard callback. Outputs: `Closed`, `WidthChanged`. Dialog-mode body projects into `[dialog-content]`.

package/dist/lib/a11y/named-control.base.d.ts

@@ -0,0 +1,91 @@
+import * as i0 from "@angular/core";
+/**
+ * The accessible-name inputs shared by every control in this package that a caller has to be able
+ * to NAME: `mj-dropdown`, `mj-combobox`, `mj-switch`, `mj-numeric-input`, `mj-datepicker` and
+ * `mj-page-search`.
+ *
+ * A control with no accessible name announces as its role and state alone — "combobox, collapsed",
+ * "switch, on", "edit blank" — which fails WCAG 2.1 4.1.2 (Name, Role, Value). `mj-dropdown` got
+ * these four inputs first (#3860); this base is what keeps each sibling from inventing its own
+ * spelling of the same idea (#4116).
+ *
+ * **Absent beats empty.** Subclasses bind every one of these through `X || null`, never as a bare
+ * binding. `aria-label=""` is worse than no attribute at all: an explicitly empty name OVERRIDES
+ * every other naming source in the accessible-name computation.
+ *
+ * Subclasses apply the four to the element that actually **receives focus** — naming a
+ * non-focusable wrapper announces nothing — and repeat the name on any popup they own, so both
+ * halves announce the same thing.
+ */
+export declare abstract class MJNamedControlBase {
+    /**
+     * Accessible name for the control, for when no visible label exists. Prefer
+     * {@link AriaLabelledBy} when one does — an `aria-label` duplicates that label's text and drifts
+     * from it on rename. `aria-labelledby` beats `aria-label` where both are present.
+     */
+    AriaLabel: string;
+    /**
+     * The id of a VISIBLE label element that names this control — the preferred wiring whenever a
+     * label already exists on screen. It is also the only path that can name a control's SECONDARY
+     * pieces (a filter box, a toggle, a calendar) from that same label: see
+     * {@link SecondaryLabelledBy}.
+     */
+    AriaLabelledBy: string;
+    /**
+     * `id` for the control's focusable element, so other markup can REFERENCE it — `aria-controls`,
+     * hint text, test hooks.
+     *
+     * Whether it doubles as a `<label for>` target depends on the control, because `label[for]`
+     * associates only with LABELABLE elements: it works on the input-backed controls (`mj-combobox`,
+     * `mj-numeric-input`, `mj-datepicker`, `mj-page-search`) and on `mj-switch`, whose `<button>` is
+     * labelable too. It does NOT work on `mj-dropdown`, whose trigger is a `div[role=combobox]` —
+     * wiring `label[for]` there produces markup that looks correct, passes review, and leaves the
+     * control named only in the browsers that guess. Each control's own docs say which it is.
+     */
+    InputId: string;
+    /** `aria-describedby` passthrough for hint and error text — the same shape of gap as the name. */
+    AriaDescribedBy: string;
+    /**
+     * Counter behind every id a control generates for itself, matching the `static nextId` mechanism
+     * `dialog`, `window` and `accordion` already use in this package. One counter across all named
+     * controls: the ids only have to be unique in the document, not dense per component.
+     */
+    private static nextId;
+    /** This instance's id suffix, shared by every id the control generates. */
+    readonly NamedControlId: number;
+    /**
+     * Id of a hidden span holding one fixed WORD of a secondary control's name — "Filter", "Clear",
+     * "Open calendar for". Composed with the host's visible label by {@link SecondaryLabelledBy}.
+     */
+    SecondaryWordId(slug: string): string;
+    /**
+     * `aria-labelledby` for a secondary control when a VISIBLE label names the host: the hidden word
+     * plus that label's own text, composed by the accessibility tree from an id LIST. Empty when
+     * there is no such label, in which case {@link SecondaryLabel} supplies a string instead.
+     *
+     * An id list is the only mechanism that can work here — the component never sees the label's
+     * text, only its id. Without it, every filterable dropdown on a form named this way announces an
+     * identical "Filter options", and a form with six of them has six indistinguishable filter boxes.
+     */
+    SecondaryLabelledBy(slug: string): string;
+    /**
+     * `aria-label` for a secondary control in the no-visible-label case: `word` followed by the
+     * host's own name, or `fallback` when the host has no name either.
+     *
+     * The already-starts-with-`word` guard is not cosmetic: this repo's house habit is
+     * `AriaLabel="Filter roles"`, and an unconditional prefix announces that box as
+     * "Filter Filter roles".
+     *
+     * The match ends on a WORD BOUNDARY, not on a space: `AriaLabel="Filter: roles"` already begins
+     * with the word and must not be prefixed either, while `"Filters"` is a different word and must
+     * be. A space-only test gets the punctuated case wrong in the doubling direction.
+     */
+    SecondaryLabel(word: string, fallback: string): string;
+    /** True when `name` starts with `word` and the next character (if any) ends that word. */
+    private beginsWithWord;
+    /** `\w` as a regular expression means it: ASCII letters, digits and underscore. Input is lowercased. */
+    private static isWordCharacter;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJNamedControlBase, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MJNamedControlBase, never, never, { "AriaLabel": { "alias": "AriaLabel"; "required": false; }; "AriaLabelledBy": { "alias": "AriaLabelledBy"; "required": false; }; "InputId": { "alias": "InputId"; "required": false; }; "AriaDescribedBy": { "alias": "AriaDescribedBy"; "required": false; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=named-control.base.d.ts.map

package/dist/lib/a11y/named-control.base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"named-control.base.d.ts","sourceRoot":"","sources":["../../../src/lib/a11y/named-control.base.ts"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,8BACsB,kBAAkB;IACtC;;;;OAIG;IACM,SAAS,SAAM;IAExB;;;;;OAKG;IACM,cAAc,SAAM;IAE7B;;;;;;;;;;OAUG;IACM,OAAO,SAAM;IAEtB,kGAAkG;IACzF,eAAe,SAAM;IAE9B;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,MAAM,CAAK;IAE1B,2EAA2E;IAC3E,QAAQ,CAAC,cAAc,SAA+B;IAEtD;;;OAGG;IACH,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAIrC;;;;;;;;OAQG;IACH,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAIzC;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM;IAQtD,0FAA0F;IAC1F,OAAO,CAAC,cAAc;IAQtB,wGAAwG;IACxG,OAAO,CAAC,MAAM,CAAC,eAAe;yCA7FV,kBAAkB;2CAAlB,kBAAkB;CAgGvC"}

package/dist/lib/a11y/named-control.base.js

@@ -0,0 +1,121 @@
+import { Directive, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * The accessible-name inputs shared by every control in this package that a caller has to be able
+ * to NAME: `mj-dropdown`, `mj-combobox`, `mj-switch`, `mj-numeric-input`, `mj-datepicker` and
+ * `mj-page-search`.
+ *
+ * A control with no accessible name announces as its role and state alone — "combobox, collapsed",
+ * "switch, on", "edit blank" — which fails WCAG 2.1 4.1.2 (Name, Role, Value). `mj-dropdown` got
+ * these four inputs first (#3860); this base is what keeps each sibling from inventing its own
+ * spelling of the same idea (#4116).
+ *
+ * **Absent beats empty.** Subclasses bind every one of these through `X || null`, never as a bare
+ * binding. `aria-label=""` is worse than no attribute at all: an explicitly empty name OVERRIDES
+ * every other naming source in the accessible-name computation.
+ *
+ * Subclasses apply the four to the element that actually **receives focus** — naming a
+ * non-focusable wrapper announces nothing — and repeat the name on any popup they own, so both
+ * halves announce the same thing.
+ */
+export class MJNamedControlBase {
+    /**
+     * Accessible name for the control, for when no visible label exists. Prefer
+     * {@link AriaLabelledBy} when one does — an `aria-label` duplicates that label's text and drifts
+     * from it on rename. `aria-labelledby` beats `aria-label` where both are present.
+     */
+    AriaLabel = '';
+    /**
+     * The id of a VISIBLE label element that names this control — the preferred wiring whenever a
+     * label already exists on screen. It is also the only path that can name a control's SECONDARY
+     * pieces (a filter box, a toggle, a calendar) from that same label: see
+     * {@link SecondaryLabelledBy}.
+     */
+    AriaLabelledBy = '';
+    /**
+     * `id` for the control's focusable element, so other markup can REFERENCE it — `aria-controls`,
+     * hint text, test hooks.
+     *
+     * Whether it doubles as a `<label for>` target depends on the control, because `label[for]`
+     * associates only with LABELABLE elements: it works on the input-backed controls (`mj-combobox`,
+     * `mj-numeric-input`, `mj-datepicker`, `mj-page-search`) and on `mj-switch`, whose `<button>` is
+     * labelable too. It does NOT work on `mj-dropdown`, whose trigger is a `div[role=combobox]` —
+     * wiring `label[for]` there produces markup that looks correct, passes review, and leaves the
+     * control named only in the browsers that guess. Each control's own docs say which it is.
+     */
+    InputId = '';
+    /** `aria-describedby` passthrough for hint and error text — the same shape of gap as the name. */
+    AriaDescribedBy = '';
+    /**
+     * Counter behind every id a control generates for itself, matching the `static nextId` mechanism
+     * `dialog`, `window` and `accordion` already use in this package. One counter across all named
+     * controls: the ids only have to be unique in the document, not dense per component.
+     */
+    static nextId = 0;
+    /** This instance's id suffix, shared by every id the control generates. */
+    NamedControlId = MJNamedControlBase.nextId++;
+    /**
+     * Id of a hidden span holding one fixed WORD of a secondary control's name — "Filter", "Clear",
+     * "Open calendar for". Composed with the host's visible label by {@link SecondaryLabelledBy}.
+     */
+    SecondaryWordId(slug) {
+        return `mj-a11y-${slug}-${this.NamedControlId}`;
+    }
+    /**
+     * `aria-labelledby` for a secondary control when a VISIBLE label names the host: the hidden word
+     * plus that label's own text, composed by the accessibility tree from an id LIST. Empty when
+     * there is no such label, in which case {@link SecondaryLabel} supplies a string instead.
+     *
+     * An id list is the only mechanism that can work here — the component never sees the label's
+     * text, only its id. Without it, every filterable dropdown on a form named this way announces an
+     * identical "Filter options", and a form with six of them has six indistinguishable filter boxes.
+     */
+    SecondaryLabelledBy(slug) {
+        return this.AriaLabelledBy ? `${this.SecondaryWordId(slug)} ${this.AriaLabelledBy}` : '';
+    }
+    /**
+     * `aria-label` for a secondary control in the no-visible-label case: `word` followed by the
+     * host's own name, or `fallback` when the host has no name either.
+     *
+     * The already-starts-with-`word` guard is not cosmetic: this repo's house habit is
+     * `AriaLabel="Filter roles"`, and an unconditional prefix announces that box as
+     * "Filter Filter roles".
+     *
+     * The match ends on a WORD BOUNDARY, not on a space: `AriaLabel="Filter: roles"` already begins
+     * with the word and must not be prefixed either, while `"Filters"` is a different word and must
+     * be. A space-only test gets the punctuated case wrong in the doubling direction.
+     */
+    SecondaryLabel(word, fallback) {
+        const name = this.AriaLabel.trim();
+        if (!name) {
+            return fallback;
+        }
+        return this.beginsWithWord(name.toLowerCase(), word.toLowerCase()) ? name : `${word} ${name}`;
+    }
+    /** True when `name` starts with `word` and the next character (if any) ends that word. */
+    beginsWithWord(name, word) {
+        if (!name.startsWith(word)) {
+            return false;
+        }
+        const next = name.charAt(word.length);
+        return next === '' || !MJNamedControlBase.isWordCharacter(next);
+    }
+    /** `\w` as a regular expression means it: ASCII letters, digits and underscore. Input is lowercased. */
+    static isWordCharacter(character) {
+        return (character >= 'a' && character <= 'z') || (character >= '0' && character <= '9') || character === '_';
+    }
+    static ɵfac = function MJNamedControlBase_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJNamedControlBase)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MJNamedControlBase, inputs: { AriaLabel: "AriaLabel", AriaLabelledBy: "AriaLabelledBy", InputId: "InputId", AriaDescribedBy: "AriaDescribedBy" } });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJNamedControlBase, [{
+        type: Directive
+    }], null, { AriaLabel: [{
+            type: Input
+        }], AriaLabelledBy: [{
+            type: Input
+        }], InputId: [{
+            type: Input
+        }], AriaDescribedBy: [{
+            type: Input
+        }] }); })();
+//# sourceMappingURL=named-control.base.js.map

package/dist/lib/a11y/named-control.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"named-control.base.js","sourceRoot":"","sources":["../../../src/lib/a11y/named-control.base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;;AAEjD;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,OAAgB,kBAAkB;IACtC;;;;OAIG;IACM,SAAS,GAAG,EAAE,CAAC;IAExB;;;;;OAKG;IACM,cAAc,GAAG,EAAE,CAAC;IAE7B;;;;;;;;;;OAUG;IACM,OAAO,GAAG,EAAE,CAAC;IAEtB,kGAAkG;IACzF,eAAe,GAAG,EAAE,CAAC;IAE9B;;;;OAIG;IACK,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;IAE1B,2EAA2E;IAClE,cAAc,GAAG,kBAAkB,CAAC,MAAM,EAAE,CAAC;IAEtD;;;OAGG;IACH,eAAe,CAAC,IAAY;QAC1B,OAAO,WAAW,IAAI,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;IAClD,CAAC;IAED;;;;;;;;OAQG;IACH,mBAAmB,CAAC,IAAY;QAC9B,OAAO,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3F,CAAC;IAED;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,IAAY,EAAE,QAAgB;QAC3C,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACnC,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO,QAAQ,CAAC;QAClB,CAAC;QACD,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,IAAI,EAAE,CAAC;IAChG,CAAC;IAED,0FAA0F;IAClF,cAAc,CAAC,IAAY,EAAE,IAAY;QAC/C,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YAC3B,OAAO,KAAK,CAAC;QACf,CAAC;QACD,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACtC,OAAO,IAAI,KAAK,EAAE,IAAI,CAAC,kBAAkB,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IAClE,CAAC;IAED,wGAAwG;IAChG,MAAM,CAAC,eAAe,CAAC,SAAiB;QAC9C,OAAO,CAAC,SAAS,IAAI,GAAG,IAAI,SAAS,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,IAAI,GAAG,IAAI,SAAS,IAAI,GAAG,CAAC,IAAI,SAAS,KAAK,GAAG,CAAC;IAC/G,CAAC;4GA/FmB,kBAAkB;6DAAlB,kBAAkB;;iFAAlB,kBAAkB;cADvC,SAAS;;kBAOP,KAAK;;kBAQL,KAAK;;kBAaL,KAAK;;kBAGL,KAAK","sourcesContent":["import { Directive, Input } from '@angular/core';\n\n/**\n * The accessible-name inputs shared by every control in this package that a caller has to be able\n * to NAME: `mj-dropdown`, `mj-combobox`, `mj-switch`, `mj-numeric-input`, `mj-datepicker` and\n * `mj-page-search`.\n *\n * A control with no accessible name announces as its role and state alone — \"combobox, collapsed\",\n * \"switch, on\", \"edit blank\" — which fails WCAG 2.1 4.1.2 (Name, Role, Value). `mj-dropdown` got\n * these four inputs first (#3860); this base is what keeps each sibling from inventing its own\n * spelling of the same idea (#4116).\n *\n * **Absent beats empty.** Subclasses bind every one of these through `X || null`, never as a bare\n * binding. `aria-label=\"\"` is worse than no attribute at all: an explicitly empty name OVERRIDES\n * every other naming source in the accessible-name computation.\n *\n * Subclasses apply the four to the element that actually **receives focus** — naming a\n * non-focusable wrapper announces nothing — and repeat the name on any popup they own, so both\n * halves announce the same thing.\n */\n@Directive()\nexport abstract class MJNamedControlBase {\n  /**\n   * Accessible name for the control, for when no visible label exists. Prefer\n   * {@link AriaLabelledBy} when one does — an `aria-label` duplicates that label's text and drifts\n   * from it on rename. `aria-labelledby` beats `aria-label` where both are present.\n   */\n  @Input() AriaLabel = '';\n\n  /**\n   * The id of a VISIBLE label element that names this control — the preferred wiring whenever a\n   * label already exists on screen. It is also the only path that can name a control's SECONDARY\n   * pieces (a filter box, a toggle, a calendar) from that same label: see\n   * {@link SecondaryLabelledBy}.\n   */\n  @Input() AriaLabelledBy = '';\n\n  /**\n   * `id` for the control's focusable element, so other markup can REFERENCE it — `aria-controls`,\n   * hint text, test hooks.\n   *\n   * Whether it doubles as a `<label for>` target depends on the control, because `label[for]`\n   * associates only with LABELABLE elements: it works on the input-backed controls (`mj-combobox`,\n   * `mj-numeric-input`, `mj-datepicker`, `mj-page-search`) and on `mj-switch`, whose `<button>` is\n   * labelable too. It does NOT work on `mj-dropdown`, whose trigger is a `div[role=combobox]` —\n   * wiring `label[for]` there produces markup that looks correct, passes review, and leaves the\n   * control named only in the browsers that guess. Each control's own docs say which it is.\n   */\n  @Input() InputId = '';\n\n  /** `aria-describedby` passthrough for hint and error text — the same shape of gap as the name. */\n  @Input() AriaDescribedBy = '';\n\n  /**\n   * Counter behind every id a control generates for itself, matching the `static nextId` mechanism\n   * `dialog`, `window` and `accordion` already use in this package. One counter across all named\n   * controls: the ids only have to be unique in the document, not dense per component.\n   */\n  private static nextId = 0;\n\n  /** This instance's id suffix, shared by every id the control generates. */\n  readonly NamedControlId = MJNamedControlBase.nextId++;\n\n  /**\n   * Id of a hidden span holding one fixed WORD of a secondary control's name — \"Filter\", \"Clear\",\n   * \"Open calendar for\". Composed with the host's visible label by {@link SecondaryLabelledBy}.\n   */\n  SecondaryWordId(slug: string): string {\n    return `mj-a11y-${slug}-${this.NamedControlId}`;\n  }\n\n  /**\n   * `aria-labelledby` for a secondary control when a VISIBLE label names the host: the hidden word\n   * plus that label's own text, composed by the accessibility tree from an id LIST. Empty when\n   * there is no such label, in which case {@link SecondaryLabel} supplies a string instead.\n   *\n   * An id list is the only mechanism that can work here — the component never sees the label's\n   * text, only its id. Without it, every filterable dropdown on a form named this way announces an\n   * identical \"Filter options\", and a form with six of them has six indistinguishable filter boxes.\n   */\n  SecondaryLabelledBy(slug: string): string {\n    return this.AriaLabelledBy ? `${this.SecondaryWordId(slug)} ${this.AriaLabelledBy}` : '';\n  }\n\n  /**\n   * `aria-label` for a secondary control in the no-visible-label case: `word` followed by the\n   * host's own name, or `fallback` when the host has no name either.\n   *\n   * The already-starts-with-`word` guard is not cosmetic: this repo's house habit is\n   * `AriaLabel=\"Filter roles\"`, and an unconditional prefix announces that box as\n   * \"Filter Filter roles\".\n   *\n   * The match ends on a WORD BOUNDARY, not on a space: `AriaLabel=\"Filter: roles\"` already begins\n   * with the word and must not be prefixed either, while `\"Filters\"` is a different word and must\n   * be. A space-only test gets the punctuated case wrong in the doubling direction.\n   */\n  SecondaryLabel(word: string, fallback: string): string {\n    const name = this.AriaLabel.trim();\n    if (!name) {\n      return fallback;\n    }\n    return this.beginsWithWord(name.toLowerCase(), word.toLowerCase()) ? name : `${word} ${name}`;\n  }\n\n  /** True when `name` starts with `word` and the next character (if any) ends that word. */\n  private beginsWithWord(name: string, word: string): boolean {\n    if (!name.startsWith(word)) {\n      return false;\n    }\n    const next = name.charAt(word.length);\n    return next === '' || !MJNamedControlBase.isWordCharacter(next);\n  }\n\n  /** `\\w` as a regular expression means it: ASCII letters, digits and underscore. Input is lowercased. */\n  private static isWordCharacter(character: string): boolean {\n    return (character >= 'a' && character <= 'z') || (character >= '0' && character <= '9') || character === '_';\n  }\n}\n"]}

package/dist/lib/a11y/unnamed-control-guard.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Options for {@link WarnIfUnnamed}.
+ */
+export type UnnamedControlGuardOptions = {
+    /**
+     * Whether a non-empty `placeholder` counts as this control's name.
+     *
+     * **False for every form control**, and deliberately so: a placeholder disappears the moment the
+     * user types, and counting it would silence the guard for most of the controls it exists to catch
+     * — nearly every `mj-combobox` and `mj-datepicker` call site in this repo already passes a
+     * `Placeholder`, so a new one could still ship unnamed without a word of warning.
+     *
+     * True only for `mj-page-search`, a toolbar widget whose placeholder ("Search templates…") IS the
+     * caller's statement of what the box searches, and whose default placeholder is never absent.
+     */
+    PlaceholderIsName?: boolean;
+};
+/**
+ * Dev-mode guard: warn when one of this package's named controls renders with **no accessible name
+ * at all**.
+ *
+ * This is the recorded answer to the prevention question raised in #3860 and resolved in #4116: an
+ * unnamed control is silent, which is why the defect survived as long as it did. Without a feedback
+ * loop, every dropdown or combobox added tomorrow ships unnamed and silent again. It follows the two
+ * guards already shipping in this package — `mjButton`'s icon-only warning and `mjClickable`'s —
+ * rather than inventing a third shape: dev-mode only, once per rendered control, never throwing, and
+ * always logging the offending element so it is one click to find.
+ *
+ * **What counts as a name here** is what the accessible-name computation would actually resolve on
+ * the element: an `aria-labelledby` whose ids resolve to real elements, `aria-label`, an associated
+ * `<label for>`, `title`, and — only where {@link UnnamedControlGuardOptions.PlaceholderIsName} says
+ * so — a `placeholder`. A dangling `aria-labelledby` does NOT count: an idref pointing at an element
+ * that was renamed or is not rendered yet computes to an empty name, and that silent half-wiring is
+ * exactly the failure this guard is for.
+ *
+ * It does not judge name *quality* beyond that, because a guard that fires on a merely-imperfect
+ * name gets muted and then the empty ones go unnoticed too.
+ *
+ * Text content is **not** counted. None of these controls take their name from their contents: a
+ * `div[role=combobox]`'s text is the selected value and a `role=switch`'s is its state, so counting
+ * it would make the guard fall silent for exactly the controls it exists to catch.
+ *
+ * **Known limitation**, shared with the two existing guards: it runs once, after the view
+ * initializes, so a name bound to data that arrives later (`[AriaLabel]="record?.Name"`), or one
+ * pointing at a label that a later change detection renders, warns spuriously on that first pass.
+ *
+ * @param element the control's focusable element — the one the name has to land on
+ * @param selector the control's tag, for the message prefix (`mj-combobox`)
+ * @param options per-control naming rules; see {@link UnnamedControlGuardOptions}
+ */
+export declare function WarnIfUnnamed(element: HTMLElement | null | undefined, selector: string, options?: UnnamedControlGuardOptions): void;
+//# sourceMappingURL=unnamed-control-guard.d.ts.map

package/dist/lib/a11y/unnamed-control-guard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unnamed-control-guard.d.ts","sourceRoot":"","sources":["../../../src/lib/a11y/unnamed-control-guard.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,MAAM,0BAA0B,GAAG;IACvC;;;;;;;;;;OAUG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,aAAa,CAC3B,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,EACvC,QAAQ,EAAE,MAAM,EAChB,OAAO,GAAE,0BAA+B,GACvC,IAAI,CAiBN"}

package/dist/lib/a11y/unnamed-control-guard.js

@@ -0,0 +1,94 @@
+import { isDevMode } from '@angular/core';
+/**
+ * Dev-mode guard: warn when one of this package's named controls renders with **no accessible name
+ * at all**.
+ *
+ * This is the recorded answer to the prevention question raised in #3860 and resolved in #4116: an
+ * unnamed control is silent, which is why the defect survived as long as it did. Without a feedback
+ * loop, every dropdown or combobox added tomorrow ships unnamed and silent again. It follows the two
+ * guards already shipping in this package — `mjButton`'s icon-only warning and `mjClickable`'s —
+ * rather than inventing a third shape: dev-mode only, once per rendered control, never throwing, and
+ * always logging the offending element so it is one click to find.
+ *
+ * **What counts as a name here** is what the accessible-name computation would actually resolve on
+ * the element: an `aria-labelledby` whose ids resolve to real elements, `aria-label`, an associated
+ * `<label for>`, `title`, and — only where {@link UnnamedControlGuardOptions.PlaceholderIsName} says
+ * so — a `placeholder`. A dangling `aria-labelledby` does NOT count: an idref pointing at an element
+ * that was renamed or is not rendered yet computes to an empty name, and that silent half-wiring is
+ * exactly the failure this guard is for.
+ *
+ * It does not judge name *quality* beyond that, because a guard that fires on a merely-imperfect
+ * name gets muted and then the empty ones go unnoticed too.
+ *
+ * Text content is **not** counted. None of these controls take their name from their contents: a
+ * `div[role=combobox]`'s text is the selected value and a `role=switch`'s is its state, so counting
+ * it would make the guard fall silent for exactly the controls it exists to catch.
+ *
+ * **Known limitation**, shared with the two existing guards: it runs once, after the view
+ * initializes, so a name bound to data that arrives later (`[AriaLabel]="record?.Name"`), or one
+ * pointing at a label that a later change detection renders, warns spuriously on that first pass.
+ *
+ * @param element the control's focusable element — the one the name has to land on
+ * @param selector the control's tag, for the message prefix (`mj-combobox`)
+ * @param options per-control naming rules; see {@link UnnamedControlGuardOptions}
+ */
+export function WarnIfUnnamed(element, selector, options = {}) {
+    if (!isDevMode() || !element) {
+        return;
+    }
+    try {
+        if (hasAccessibleName(element, options)) {
+            return;
+        }
+        console.warn(`[${selector}] has no accessible name — it announces as its role and state alone, which fails ` +
+            'WCAG 2.1 4.1.2. Pass AriaLabelledBy="<id of a visible label>", or AriaLabel="…" when there ' +
+            'is no visible label.', element);
+    }
+    catch {
+        // Never let diagnostics break the control.
+    }
+}
+/** True when the accessible-name computation would resolve any name for this element. */
+function hasAccessibleName(element, options) {
+    const attributes = options.PlaceholderIsName ? ['aria-label', 'title', 'placeholder'] : ['aria-label', 'title'];
+    const named = attributes.some((attribute) => element.getAttribute(attribute)?.trim());
+    return named || hasResolvedLabelledBy(element) || hasAssociatedLabel(element);
+}
+/**
+ * True when at least one id in `aria-labelledby` resolves to an element in the document.
+ *
+ * The resolution check is the point: `aria-labelledby` pointing at nothing computes to an EMPTY
+ * name, so treating the attribute's mere presence as proof of a name would wave through the
+ * renamed-label case — markup that looks correct and leaves the control unnamed.
+ */
+function hasResolvedLabelledBy(element) {
+    const ids = element.getAttribute('aria-labelledby')?.trim();
+    if (!ids) {
+        return false;
+    }
+    const doc = element.ownerDocument;
+    return ids.split(/\s+/).some((id) => !!doc?.getElementById(id));
+}
+/**
+ * True when a `<label>` names this element through the DOM's own association.
+ *
+ * Read off the element's `labels` collection rather than by scanning for a `label[for]` that
+ * mentions its id, because `label[for]` associates only with LABELABLE elements — button, input,
+ * select, textarea and friends. `mj-dropdown`'s trigger is a `div[role=combobox]`, so a caller who
+ * writes `<label for="role-dd">Role</label><mj-dropdown InputId="role-dd">` gets markup that looks
+ * correct and an association the HTML standard does not make. (Blink names that div anyway; Gecko
+ * and WebKit do not, so the name a user hears depends on their browser — which is a defect to warn
+ * about, not a name to accept.) Matching on the id alone would wave that straight through, and it
+ * is precisely the mistake `InputId`'s own documentation warns callers away from.
+ *
+ * `'labels' in element` is the honest discriminator: the property exists on labelable elements and
+ * is absent on a div, so nothing has to be cast to a type the element may not be.
+ */
+function hasAssociatedLabel(element) {
+    if (!('labels' in element)) {
+        return false;
+    }
+    const { labels } = element;
+    return !!labels && labels.length > 0;
+}
+//# sourceMappingURL=unnamed-control-guard.js.map

package/dist/lib/a11y/unnamed-control-guard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"unnamed-control-guard.js","sourceRoot":"","sources":["../../../src/lib/a11y/unnamed-control-guard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAoB1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,UAAU,aAAa,CAC3B,OAAuC,EACvC,QAAgB,EAChB,UAAsC,EAAE;IAExC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;QAC7B,OAAO;IACT,CAAC;IACD,IAAI,CAAC;QACH,IAAI,iBAAiB,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC;YACxC,OAAO;QACT,CAAC;QACD,OAAO,CAAC,IAAI,CACV,IAAI,QAAQ,mFAAmF;YAC7F,6FAA6F;YAC7F,sBAAsB,EACxB,OAAO,CACR,CAAC;IACJ,CAAC;IAAC,MAAM,CAAC;QACP,2CAA2C;IAC7C,CAAC;AACH,CAAC;AAED,yFAAyF;AACzF,SAAS,iBAAiB,CAAC,OAAoB,EAAE,OAAmC;IAClF,MAAM,UAAU,GAAG,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,YAAY,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;IAChH,MAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IACtF,OAAO,KAAK,IAAI,qBAAqB,CAAC,OAAO,CAAC,IAAI,kBAAkB,CAAC,OAAO,CAAC,CAAC;AAChF,CAAC;AAED;;;;;;GAMG;AACH,SAAS,qBAAqB,CAAC,OAAoB;IACjD,MAAM,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAAE,IAAI,EAAE,CAAC;IAC5D,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,OAAO,KAAK,CAAC;IACf,CAAC;IACD,MAAM,GAAG,GAAG,OAAO,CAAC,aAAa,CAAC;IAClC,OAAO,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC;AAClE,CAAC;AAED;;;;;;;;;;;;;;GAcG;AACH,SAAS,kBAAkB,CAAC,OAAoB;IAC9C,IAAI,CAAC,CAAC,QAAQ,IAAI,OAAO,CAAC,EAAE,CAAC;QAC3B,OAAO,KAAK,CAAC;IACf,CAAC;IACD,MAAM,EAAE,MAAM,EAAE,GAAG,OAAiF,CAAC;IACrG,OAAO,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;AACvC,CAAC","sourcesContent":["import { isDevMode } from '@angular/core';\n\n/**\n * Options for {@link WarnIfUnnamed}.\n */\nexport type UnnamedControlGuardOptions = {\n  /**\n   * Whether a non-empty `placeholder` counts as this control's name.\n   *\n   * **False for every form control**, and deliberately so: a placeholder disappears the moment the\n   * user types, and counting it would silence the guard for most of the controls it exists to catch\n   * — nearly every `mj-combobox` and `mj-datepicker` call site in this repo already passes a\n   * `Placeholder`, so a new one could still ship unnamed without a word of warning.\n   *\n   * True only for `mj-page-search`, a toolbar widget whose placeholder (\"Search templates…\") IS the\n   * caller's statement of what the box searches, and whose default placeholder is never absent.\n   */\n  PlaceholderIsName?: boolean;\n};\n\n/**\n * Dev-mode guard: warn when one of this package's named controls renders with **no accessible name\n * at all**.\n *\n * This is the recorded answer to the prevention question raised in #3860 and resolved in #4116: an\n * unnamed control is silent, which is why the defect survived as long as it did. Without a feedback\n * loop, every dropdown or combobox added tomorrow ships unnamed and silent again. It follows the two\n * guards already shipping in this package — `mjButton`'s icon-only warning and `mjClickable`'s —\n * rather than inventing a third shape: dev-mode only, once per rendered control, never throwing, and\n * always logging the offending element so it is one click to find.\n *\n * **What counts as a name here** is what the accessible-name computation would actually resolve on\n * the element: an `aria-labelledby` whose ids resolve to real elements, `aria-label`, an associated\n * `<label for>`, `title`, and — only where {@link UnnamedControlGuardOptions.PlaceholderIsName} says\n * so — a `placeholder`. A dangling `aria-labelledby` does NOT count: an idref pointing at an element\n * that was renamed or is not rendered yet computes to an empty name, and that silent half-wiring is\n * exactly the failure this guard is for.\n *\n * It does not judge name *quality* beyond that, because a guard that fires on a merely-imperfect\n * name gets muted and then the empty ones go unnoticed too.\n *\n * Text content is **not** counted. None of these controls take their name from their contents: a\n * `div[role=combobox]`'s text is the selected value and a `role=switch`'s is its state, so counting\n * it would make the guard fall silent for exactly the controls it exists to catch.\n *\n * **Known limitation**, shared with the two existing guards: it runs once, after the view\n * initializes, so a name bound to data that arrives later (`[AriaLabel]=\"record?.Name\"`), or one\n * pointing at a label that a later change detection renders, warns spuriously on that first pass.\n *\n * @param element the control's focusable element — the one the name has to land on\n * @param selector the control's tag, for the message prefix (`mj-combobox`)\n * @param options per-control naming rules; see {@link UnnamedControlGuardOptions}\n */\nexport function WarnIfUnnamed(\n  element: HTMLElement | null | undefined,\n  selector: string,\n  options: UnnamedControlGuardOptions = {}\n): void {\n  if (!isDevMode() || !element) {\n    return;\n  }\n  try {\n    if (hasAccessibleName(element, options)) {\n      return;\n    }\n    console.warn(\n      `[${selector}] has no accessible name — it announces as its role and state alone, which fails ` +\n        'WCAG 2.1 4.1.2. Pass AriaLabelledBy=\"<id of a visible label>\", or AriaLabel=\"…\" when there ' +\n        'is no visible label.',\n      element\n    );\n  } catch {\n    // Never let diagnostics break the control.\n  }\n}\n\n/** True when the accessible-name computation would resolve any name for this element. */\nfunction hasAccessibleName(element: HTMLElement, options: UnnamedControlGuardOptions): boolean {\n  const attributes = options.PlaceholderIsName ? ['aria-label', 'title', 'placeholder'] : ['aria-label', 'title'];\n  const named = attributes.some((attribute) => element.getAttribute(attribute)?.trim());\n  return named || hasResolvedLabelledBy(element) || hasAssociatedLabel(element);\n}\n\n/**\n * True when at least one id in `aria-labelledby` resolves to an element in the document.\n *\n * The resolution check is the point: `aria-labelledby` pointing at nothing computes to an EMPTY\n * name, so treating the attribute's mere presence as proof of a name would wave through the\n * renamed-label case — markup that looks correct and leaves the control unnamed.\n */\nfunction hasResolvedLabelledBy(element: HTMLElement): boolean {\n  const ids = element.getAttribute('aria-labelledby')?.trim();\n  if (!ids) {\n    return false;\n  }\n  const doc = element.ownerDocument;\n  return ids.split(/\\s+/).some((id) => !!doc?.getElementById(id));\n}\n\n/**\n * True when a `<label>` names this element through the DOM's own association.\n *\n * Read off the element's `labels` collection rather than by scanning for a `label[for]` that\n * mentions its id, because `label[for]` associates only with LABELABLE elements — button, input,\n * select, textarea and friends. `mj-dropdown`'s trigger is a `div[role=combobox]`, so a caller who\n * writes `<label for=\"role-dd\">Role</label><mj-dropdown InputId=\"role-dd\">` gets markup that looks\n * correct and an association the HTML standard does not make. (Blink names that div anyway; Gecko\n * and WebKit do not, so the name a user hears depends on their browser — which is a defect to warn\n * about, not a name to accept.) Matching on the id alone would wave that straight through, and it\n * is precisely the mistake `InputId`'s own documentation warns callers away from.\n *\n * `'labels' in element` is the honest discriminator: the property exists on labelable elements and\n * is absent on a div, so nothing has to be cast to a type the element may not be.\n */\nfunction hasAssociatedLabel(element: HTMLElement): boolean {\n  if (!('labels' in element)) {\n    return false;\n  }\n  const { labels } = element as HTMLElement & { readonly labels: NodeListOf<HTMLLabelElement> | null };\n  return !!labels && labels.length > 0;\n}\n"]}

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

@@ -150,9 +150,21 @@ export declare class MJAccordionPanelComponent {
      */
     Fill: boolean;
     ExpandedChange: EventEmitter<boolean>;
-    titleTemplate: MJAccordionTitleDirective | null;
-    actionsTemplate: MJAccordionActionsDirective | null;
-    bodyTemplate: MJAccordionBodyDirective | null;
+    TitleTemplate: MJAccordionTitleDirective | null;
+    /** @deprecated Use {@link TitleTemplate}. */
+    get titleTemplate(): MJAccordionTitleDirective | null;
+    /** @deprecated Use {@link TitleTemplate}. */
+    set titleTemplate(value: MJAccordionTitleDirective | null);
+    ActionsTemplate: MJAccordionActionsDirective | null;
+    /** @deprecated Use {@link ActionsTemplate}. */
+    get actionsTemplate(): MJAccordionActionsDirective | null;
+    /** @deprecated Use {@link ActionsTemplate}. */
+    set actionsTemplate(value: MJAccordionActionsDirective | null);
+    BodyTemplate: MJAccordionBodyDirective | null;
+    /** @deprecated Use {@link BodyTemplate}. */
+    get bodyTemplate(): MJAccordionBodyDirective | null;
+    /** @deprecated Use {@link BodyTemplate}. */
+    set bodyTemplate(value: MJAccordionBodyDirective | null);
     readonly hostClass = true;
     /** Host claims flex:1 of its parent ONLY while a Fill panel is expanded —
      *  so a collapsed Fill panel sits at natural (header) height like any other. */
@@ -166,7 +178,7 @@ export declare class MJAccordionPanelComponent {
     readonly BodyId: string;
     Toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MJAccordionPanelComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MJAccordionPanelComponent, "mj-accordion-panel", never, { "Title": { "alias": "Title"; "required": false; }; "Expanded": { "alias": "Expanded"; "required": false; }; "Disabled": { "alias": "Disabled"; "required": false; }; "Variant": { "alias": "Variant"; "required": false; }; "TitleIconMuted": { "alias": "TitleIconMuted"; "required": false; }; "Size": { "alias": "Size"; "required": false; }; "Bare": { "alias": "Bare"; "required": false; }; "FlushBody": { "alias": "FlushBody"; "required": false; }; "Fill": { "alias": "Fill"; "required": false; }; }, { "ExpandedChange": "ExpandedChange"; }, ["titleTemplate", "actionsTemplate", "bodyTemplate"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJAccordionPanelComponent, "mj-accordion-panel", never, { "Title": { "alias": "Title"; "required": false; }; "Expanded": { "alias": "Expanded"; "required": false; }; "Disabled": { "alias": "Disabled"; "required": false; }; "Variant": { "alias": "Variant"; "required": false; }; "TitleIconMuted": { "alias": "TitleIconMuted"; "required": false; }; "Size": { "alias": "Size"; "required": false; }; "Bare": { "alias": "Bare"; "required": false; }; "FlushBody": { "alias": "FlushBody"; "required": false; }; "Fill": { "alias": "Fill"; "required": false; }; }, { "ExpandedChange": "ExpandedChange"; }, ["TitleTemplate", "ActionsTemplate", "BodyTemplate"], ["*"], true, never>;
 }
 /**
  * Convenience module bundling the accordion panel + all of its slot directives.

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.component.d.ts","sourceRoot":"","sources":["../../../src/lib/accordion/accordion.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAA6B,WAAW,EAAuB,MAAM,eAAe,CAAC;;AAOpI;;;;;;;;;;;;;;GAcG;AACH,qBAIa,yBAAyB;IACjB,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC;gBAAjC,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC;yCADzC,yBAAyB;2CAAzB,yBAAyB;CAErC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAIa,2BAA2B;IACnB,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC;gBAAjC,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC;yCADzC,2BAA2B;2CAA3B,2BAA2B;CAEvC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAIa,wBAAwB;IAChB,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC;gBAAjC,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC;yCADzC,wBAAwB;2CAAxB,wBAAwB;CAEpC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAwDa,yBAAyB;IAC3B,KAAK,SAAM;IACpB,OAAO,CAAC,SAAS,CAAS;IAC1B;;yDAEqD;IACrD,OAAO,CAAC,aAAa,CAAS;IAC9B,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IACD,IAAI,QAAQ,IAAI,OAAO,CAA2B;IAClD,SAAS,KAAK,eAAe,IAAI,OAAO,CAA+B;IAC9D,QAAQ,UAAS;IAC1B;;;;;;OAMG;IACM,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,CAAa;IAClE;;;;OAIG;IACM,cAAc,UAAS;IAChC;;;OAGG;IACM,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IAClC;;;;OAIG;IACM,IAAI,UAAS;IACtB;;;OAGG;IACM,SAAS,UAAS;IAC3B;;;;;;;;;;;;;OAaG;IACM,IAAI,UAAS;IACZ,cAAc,wBAA+B;IACd,aAAa,EAAE,yBAAyB,GAAG,IAAI,CAAQ;IACrD,eAAe,EAAE,2BAA2B,GAAG,IAAI,CAAQ;IAC9D,YAAY,EAAE,wBAAwB,GAAG,IAAI,CAAQ;IAC/C,QAAQ,CAAC,SAAS,QAAQ;IACxE;oFACgF;IAChF,IAAmD,UAAU,IAAI,OAAO,CAEvE;IAED;;;yCAGqC;IACrC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAsB;IAC3C,QAAQ,CAAC,QAAQ,SAAsC;IACvD,QAAQ,CAAC,MAAM,SAAoC;IAEnD,MAAM,IAAI,IAAI;yCA/EH,yBAAyB;2CAAzB,yBAAyB;CAoFrC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,qBAca,iBAAiB;yCAAjB,iBAAiB;0CAAjB,iBAAiB,iBArHjB,yBAAyB,SAxIzB,yBAAyB,SA0BzB,2BAA2B,SA2B3B,wBAAwB,WAmFxB,yBAAyB,SAxIzB,yBAAyB,SA0BzB,2BAA2B,SA2B3B,wBAAwB;0CAwMxB,iBAAiB;CAAG"}
+{"version":3,"file":"accordion.component.d.ts","sourceRoot":"","sources":["../../../src/lib/accordion/accordion.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAA6B,WAAW,EAAuB,MAAM,eAAe,CAAC;;AAOpI;;;;;;;;;;;;;;GAcG;AACH,qBAIa,yBAAyB;IACjB,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC;gBAAjC,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC;yCADzC,yBAAyB;2CAAzB,yBAAyB;CAErC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAIa,2BAA2B;IACnB,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC;gBAAjC,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC;yCADzC,2BAA2B;2CAA3B,2BAA2B;CAEvC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAIa,wBAAwB;IAChB,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC;gBAAjC,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC;yCADzC,wBAAwB;2CAAxB,wBAAwB;CAEpC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAwDa,yBAAyB;IAC3B,KAAK,SAAM;IACpB,OAAO,CAAC,SAAS,CAAS;IAC1B;;yDAEqD;IACrD,OAAO,CAAC,aAAa,CAAS;IAC9B,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IACD,IAAI,QAAQ,IAAI,OAAO,CAA2B;IAClD,SAAS,KAAK,eAAe,IAAI,OAAO,CAA+B;IAC9D,QAAQ,UAAS;IAC1B;;;;;;OAMG;IACM,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,CAAa;IAClE;;;;OAIG;IACM,cAAc,UAAS;IAChC;;;OAGG;IACM,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IAClC;;;;OAIG;IACM,IAAI,UAAS;IACtB;;;OAGG;IACM,SAAS,UAAS;IAC3B;;;;;;;;;;;;;OAaG;IACM,IAAI,UAAS;IACZ,cAAc,wBAA+B;IACd,aAAa,EAAE,yBAAyB,GAAG,IAAI,CAAQ;IAEhG,6CAA6C;IAC7C,IAAI,aAAa,IAAI,yBAAyB,GAAG,IAAI,CAEpD;IACD,6CAA6C;IAC7C,IAAI,aAAa,CAAC,KAAK,EAAE,yBAAyB,GAAG,IAAI,EAExD;IAC0C,eAAe,EAAE,2BAA2B,GAAG,IAAI,CAAQ;IAEtG,+CAA+C;IAC/C,IAAI,eAAe,IAAI,2BAA2B,GAAG,IAAI,CAExD;IACD,+CAA+C;IAC/C,IAAI,eAAe,CAAC,KAAK,EAAE,2BAA2B,GAAG,IAAI,EAE5D;IACuC,YAAY,EAAE,wBAAwB,GAAG,IAAI,CAAQ;IAE7F,4CAA4C;IAC5C,IAAI,YAAY,IAAI,wBAAwB,GAAG,IAAI,CAElD;IACD,4CAA4C;IAC5C,IAAI,YAAY,CAAC,KAAK,EAAE,wBAAwB,GAAG,IAAI,EAEtD;IAC6C,QAAQ,CAAC,SAAS,QAAQ;IACxE;oFACgF;IAChF,IAAmD,UAAU,IAAI,OAAO,CAEvE;IAED;;;yCAGqC;IACrC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAsB;IAC3C,QAAQ,CAAC,QAAQ,SAAsC;IACvD,QAAQ,CAAC,MAAM,SAAoC;IAEnD,MAAM,IAAI,IAAI;yCA1GH,yBAAyB;2CAAzB,yBAAyB;CA+GrC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,qBAca,iBAAiB;yCAAjB,iBAAiB;0CAAjB,iBAAiB,iBAhJjB,yBAAyB,SAxIzB,yBAAyB,SA0BzB,2BAA2B,SA2B3B,wBAAwB,WAmFxB,yBAAyB,SAxIzB,yBAAyB,SA0BzB,2BAA2B,SA2B3B,wBAAwB;0CAmOxB,iBAAiB;CAAG"}