@memberjunction/ng-ui-components 5.40.2 → 5.42.0

package/dist/lib/button/button.directive.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, ElementRef, AfterContentInit } from '@angular/core';
 import * as i0 from "@angular/core";
 export type MjButtonVariant = 'primary' | 'secondary' | 'outline' | 'flat' | 'danger' | 'icon' | 'success' | 'warning';
 export type MjButtonSize = 'sm' | 'md' | 'lg';
@@ -12,19 +12,36 @@ export type MjButtonSize = 'sm' | 'md' | 'lg';
  * Inputs use lowercase (not PascalCase) per the Phase 2 plan exception for
  * directives — matches HTML attribute convention.
  *
+ * Accessibility: an **icon-only** button (`variant="icon"`, no visible text) has no accessible
+ * name unless you supply one — set `[ariaLabel]` (or a native `title`). Without a name, screen
+ * readers announce it as an unlabeled "button" and DOM/accessibility-tree agents (e.g. computer-use)
+ * can't identify it. In dev mode the directive logs a warning for an icon button that ends up with
+ * no accessible name.
+ *
  * @example
  * ```html
  * <button mjButton variant="primary" (click)="save()">Save</button>
  * <button mjButton variant="outline" size="sm">Cancel</button>
+ * <button mjButton variant="icon" ariaLabel="Remove" (click)="remove()"><i class="fa-solid fa-xmark"></i></button>
  * <button mjButton variant="flat" [toggleable]="true" [(selected)]="isActive">Toggle</button>
  * ```
  */
-export declare class MJButtonDirective {
+export declare class MJButtonDirective implements AfterContentInit {
+    private readonly host;
     variant: MjButtonVariant;
     size: MjButtonSize;
     toggleable: boolean;
     selected: boolean;
     selectedChange: EventEmitter<boolean>;
+    constructor(host: ElementRef<HTMLElement>);
+    /**
+     * Accessible name for the button, surfaced as `aria-label`. Primarily for **icon-only** buttons
+     * (which otherwise have no name). Applied via `setAttribute` only when set, so a directly-authored
+     * `aria-label="..."` on the element is never clobbered.
+     */
+    set ariaLabel(value: string | null | undefined);
+    get ariaLabel(): string | undefined;
+    private _ariaLabel?;
     readonly baseClass = true;
     get isPrimary(): boolean;
     get isSecondary(): boolean;
@@ -39,7 +56,13 @@ export declare class MJButtonDirective {
     get isSelected(): boolean;
     get ariaPressed(): string | null;
     OnClick(): void;
+    /**
+     * Dev-only guard: an icon-variant button with no accessible name (no `ariaLabel`/`aria-label`/
+     * `aria-labelledby`/`title` and no visible text) is invisible-by-name to screen readers and DOM
+     * agents. Warn so it gets a name. No-op in production builds.
+     */
+    ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MJButtonDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MJButtonDirective, "button[mjButton], a[mjButton]", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "selectedChange": "selectedChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MJButtonDirective, "button[mjButton], a[mjButton]", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, { "selectedChange": "selectedChange"; }, never, never, true, never>;
 }
 //# sourceMappingURL=button.directive.d.ts.map

package/dist/lib/button/button.directive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.directive.d.ts","sourceRoot":"","sources":["../../../src/lib/button/button.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,YAAY,EAGb,MAAM,eAAe,CAAC;;AAEvB,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,QAAQ,GACR,MAAM,GACN,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C;;;;;;;;;;;;;;;;GAgBG;AACH,qBAIa,iBAAiB;IACnB,OAAO,EAAE,eAAe,CAAe;IACvC,IAAI,EAAE,YAAY,CAAQ;IAC1B,UAAU,UAAS;IACnB,QAAQ,UAAS;IAChB,cAAc,wBAA+B;IAE1B,QAAQ,CAAC,SAAS,QAAQ;IAEvD,IAA0C,SAAS,YAAyC;IAC5F,IAA4C,WAAW,YAA2C;IAClG,IAA0C,SAAS,YAAyC;IAC5F,IAAuC,MAAM,YAAsC;IACnF,IAAyC,QAAQ,YAAwC;IACzF,IAAuC,MAAM,YAAsC;IACnF,IAA0C,SAAS,YAAyC;IAC5F,IAA0C,SAAS,YAAyC;IAE5F,IAAqC,IAAI,YAAiC;IAC1E,IAAqC,IAAI,YAAiC;IAE1E,IAA2C,UAAU,YAA+C;IACpG,IAAsC,WAAW,IAAI,MAAM,GAAG,IAAI,CAEjE;IAGD,OAAO,IAAI,IAAI;yCA3BJ,iBAAiB;2CAAjB,iBAAiB;CAiC7B"}
+{"version":3,"file":"button.directive.d.ts","sourceRoot":"","sources":["../../../src/lib/button/button.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,YAAY,EAGZ,UAAU,EACV,gBAAgB,EAEjB,MAAM,eAAe,CAAC;;AAEvB,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,QAAQ,GACR,MAAM,GACN,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAIa,iBAAkB,YAAW,gBAAgB;IAS5C,OAAO,CAAC,QAAQ,CAAC,IAAI;IARxB,OAAO,EAAE,eAAe,CAAe;IACvC,IAAI,EAAE,YAAY,CAAQ;IAC1B,UAAU,UAAS;IACnB,QAAQ,UAAS;IAChB,cAAc,wBAA+B;gBAI1B,IAAI,EAAE,UAAU,CAAC,WAAW,CAAC;IAE1D;;;;OAIG;IACH,IACI,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAK7C;IACD,IAAI,SAAS,IAAI,MAAM,GAAG,SAAS,CAElC;IACD,OAAO,CAAC,UAAU,CAAC,CAAS;IAEC,QAAQ,CAAC,SAAS,QAAQ;IAEvD,IAA0C,SAAS,YAAyC;IAC5F,IAA4C,WAAW,YAA2C;IAClG,IAA0C,SAAS,YAAyC;IAC5F,IAAuC,MAAM,YAAsC;IACnF,IAAyC,QAAQ,YAAwC;IACzF,IAAuC,MAAM,YAAsC;IACnF,IAA0C,SAAS,YAAyC;IAC5F,IAA0C,SAAS,YAAyC;IAE5F,IAAqC,IAAI,YAAiC;IAC1E,IAAqC,IAAI,YAAiC;IAE1E,IAA2C,UAAU,YAA+C;IACpG,IAAsC,WAAW,IAAI,MAAM,GAAG,IAAI,CAEjE;IAGD,OAAO,IAAI,IAAI;IAOf;;;;OAIG;IACH,kBAAkB,IAAI,IAAI;yCA5Df,iBAAiB;2CAAjB,iBAAiB;CAgF7B"}

package/dist/lib/button/button.directive.js

@@ -1,4 +1,4 @@
-import { Directive, Input, Output, EventEmitter, HostBinding, HostListener } from '@angular/core';
+import { Directive, Input, Output, EventEmitter, HostBinding, HostListener, isDevMode } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * mjButton — Attribute directive that styles a native `<button>` or `<a>` element
@@ -10,19 +10,47 @@ import * as i0 from "@angular/core";
  * Inputs use lowercase (not PascalCase) per the Phase 2 plan exception for
  * directives — matches HTML attribute convention.
  *
+ * Accessibility: an **icon-only** button (`variant="icon"`, no visible text) has no accessible
+ * name unless you supply one — set `[ariaLabel]` (or a native `title`). Without a name, screen
+ * readers announce it as an unlabeled "button" and DOM/accessibility-tree agents (e.g. computer-use)
+ * can't identify it. In dev mode the directive logs a warning for an icon button that ends up with
+ * no accessible name.
+ *
  * @example
  * ```html
  * <button mjButton variant="primary" (click)="save()">Save</button>
  * <button mjButton variant="outline" size="sm">Cancel</button>
+ * <button mjButton variant="icon" ariaLabel="Remove" (click)="remove()"><i class="fa-solid fa-xmark"></i></button>
  * <button mjButton variant="flat" [toggleable]="true" [(selected)]="isActive">Toggle</button>
  * ```
  */
 export class MJButtonDirective {
+    host;
     variant = 'secondary';
     size = 'md';
     toggleable = false;
     selected = false;
     selectedChange = new EventEmitter();
+    // Constructor injection (not inject()) so the directive can be unit-tested via direct
+    // instantiation with a stub ElementRef — the established pattern in this package's specs.
+    constructor(host) {
+        this.host = host;
+    }
+    /**
+     * Accessible name for the button, surfaced as `aria-label`. Primarily for **icon-only** buttons
+     * (which otherwise have no name). Applied via `setAttribute` only when set, so a directly-authored
+     * `aria-label="..."` on the element is never clobbered.
+     */
+    set ariaLabel(value) {
+        this._ariaLabel = value ?? undefined;
+        if (this._ariaLabel) {
+            this.host.nativeElement.setAttribute('aria-label', this._ariaLabel);
+        }
+    }
+    get ariaLabel() {
+        return this._ariaLabel;
+    }
+    _ariaLabel;
     baseClass = true;
     get isPrimary() { return this.variant === 'primary'; }
     get isSecondary() { return this.variant === 'secondary'; }
@@ -44,13 +72,33 @@ export class MJButtonDirective {
             this.selectedChange.emit(this.selected);
         }
     }
-    static ɵfac = function MJButtonDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJButtonDirective)(); };
+    /**
+     * Dev-only guard: an icon-variant button with no accessible name (no `ariaLabel`/`aria-label`/
+     * `aria-labelledby`/`title` and no visible text) is invisible-by-name to screen readers and DOM
+     * agents. Warn so it gets a name. No-op in production builds.
+     */
+    ngAfterContentInit() {
+        if (!isDevMode() || this.variant !== 'icon') {
+            return;
+        }
+        const el = this.host.nativeElement;
+        const hasAccessibleName = !!(this._ariaLabel ||
+            el.getAttribute('aria-label') ||
+            el.getAttribute('aria-labelledby') ||
+            el.getAttribute('title') ||
+            (el.textContent ?? '').trim().length > 0);
+        if (!hasAccessibleName) {
+            console.warn('[mjButton] icon-only button has no accessible name — add [ariaLabel]="…" (or a title) so ' +
+                'screen readers and computer-use agents can identify it.', el);
+        }
+    }
+    static ɵfac = function MJButtonDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJButtonDirective)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MJButtonDirective, selectors: [["button", "mjButton", ""], ["a", "mjButton", ""]], hostVars: 25, hostBindings: function MJButtonDirective_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("click", function MJButtonDirective_click_HostBindingHandler() { return ctx.OnClick(); });
         } if (rf & 2) {
             i0.ɵɵattribute("aria-pressed", ctx.ariaPressed);
             i0.ɵɵclassProp("mj-btn", ctx.baseClass)("mj-btn--primary", ctx.isPrimary)("mj-btn--secondary", ctx.isSecondary)("mj-btn--outline", ctx.isOutline)("mj-btn--flat", ctx.isFlat)("mj-btn--danger", ctx.isDanger)("mj-btn--icon", ctx.isIcon)("mj-btn--success", ctx.isSuccess)("mj-btn--warning", ctx.isWarning)("mj-btn--sm", ctx.isSm)("mj-btn--lg", ctx.isLg)("mj-btn--selected", ctx.isSelected);
-        } }, inputs: { variant: "variant", size: "size", toggleable: "toggleable", selected: "selected" }, outputs: { selectedChange: "selectedChange" } });
+        } }, inputs: { variant: "variant", size: "size", toggleable: "toggleable", selected: "selected", ariaLabel: "ariaLabel" }, outputs: { selectedChange: "selectedChange" } });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJButtonDirective, [{
         type: Directive,
@@ -58,7 +106,7 @@ export class MJButtonDirective {
                 selector: 'button[mjButton], a[mjButton]',
                 standalone: true
             }]
-    }], null, { variant: [{
+    }], () => [{ type: i0.ElementRef }], { variant: [{
             type: Input
         }], size: [{
             type: Input
@@ -68,6 +116,8 @@ export class MJButtonDirective {
             type: Input
         }], selectedChange: [{
             type: Output
+        }], ariaLabel: [{
+            type: Input
         }], baseClass: [{
             type: HostBinding,
             args: ['class.mj-btn']

package/dist/lib/button/button.directive.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.directive.js","sourceRoot":"","sources":["../../../src/lib/button/button.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EACL,MAAM,EACN,YAAY,EACZ,WAAW,EACX,YAAY,EACb,MAAM,eAAe,CAAC;;AAcvB;;;;;;;;;;;;;;;;GAgBG;AAKH,MAAM,OAAO,iBAAiB;IACnB,OAAO,GAAoB,WAAW,CAAC;IACvC,IAAI,GAAiB,IAAI,CAAC;IAC1B,UAAU,GAAG,KAAK,CAAC;IACnB,QAAQ,GAAG,KAAK,CAAC;IAChB,cAAc,GAAG,IAAI,YAAY,EAAW,CAAC;IAEjB,SAAS,GAAG,IAAI,CAAC;IAEvD,IAA0C,SAAS,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC;IAC5F,IAA4C,WAAW,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC;IAClG,IAA0C,SAAS,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC;IAC5F,IAAuC,MAAM,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC;IACnF,IAAyC,QAAQ,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC;IACzF,IAAuC,MAAM,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC;IACnF,IAA0C,SAAS,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC;IAC5F,IAA0C,SAAS,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC;IAE5F,IAAqC,IAAI,KAAK,OAAO,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC;IAC1E,IAAqC,IAAI,KAAK,OAAO,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC;IAE1E,IAA2C,UAAU,KAAK,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IACpG,IAAsC,WAAW;QAC/C,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACxD,CAAC;IAGD,OAAO;QACL,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC1C,CAAC;IACH,CAAC;2GAhCU,iBAAiB;6DAAjB,iBAAiB;YAAjB,sFAAA,aAAS,IAAQ;;;YAAjB,uCAAiB,kCAAA,sCAAA,kCAAA,4BAAA,gCAAA,4BAAA,kCAAA,kCAAA,wBAAA,wBAAA,oCAAA;;;iFAAjB,iBAAiB;cAJ7B,SAAS;eAAC;gBACT,QAAQ,EAAE,+BAA+B;gBACzC,UAAU,EAAE,IAAI;aACjB;;kBAEE,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,MAAM;;kBAEN,WAAW;mBAAC,cAAc;;kBAE1B,WAAW;mBAAC,uBAAuB;;kBACnC,WAAW;mBAAC,yBAAyB;;kBACrC,WAAW;mBAAC,uBAAuB;;kBACnC,WAAW;mBAAC,oBAAoB;;kBAChC,WAAW;mBAAC,sBAAsB;;kBAClC,WAAW;mBAAC,oBAAoB;;kBAChC,WAAW;mBAAC,uBAAuB;;kBACnC,WAAW;mBAAC,uBAAuB;;kBAEnC,WAAW;mBAAC,kBAAkB;;kBAC9B,WAAW;mBAAC,kBAAkB;;kBAE9B,WAAW;mBAAC,wBAAwB;;kBACpC,WAAW;mBAAC,mBAAmB;;kBAI/B,YAAY;mBAAC,OAAO","sourcesContent":["import {\n  Directive,\n  Input,\n  Output,\n  EventEmitter,\n  HostBinding,\n  HostListener\n} from '@angular/core';\n\nexport type MjButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'outline'\n  | 'flat'\n  | 'danger'\n  | 'icon'\n  | 'success'\n  | 'warning';\n\nexport type MjButtonSize = 'sm' | 'md' | 'lg';\n\n/**\n * mjButton — Attribute directive that styles a native `<button>` or `<a>` element\n * as an MJ-branded button.\n *\n * Uses `--mj-*` design tokens for all colors, ensuring dark-mode support\n * with zero extra CSS.\n *\n * Inputs use lowercase (not PascalCase) per the Phase 2 plan exception for\n * directives — matches HTML attribute convention.\n *\n * @example\n * ```html\n * <button mjButton variant=\"primary\" (click)=\"save()\">Save</button>\n * <button mjButton variant=\"outline\" size=\"sm\">Cancel</button>\n * <button mjButton variant=\"flat\" [toggleable]=\"true\" [(selected)]=\"isActive\">Toggle</button>\n * ```\n */\n@Directive({\n  selector: 'button[mjButton], a[mjButton]',\n  standalone: true\n})\nexport class MJButtonDirective {\n  @Input() variant: MjButtonVariant = 'secondary';\n  @Input() size: MjButtonSize = 'md';\n  @Input() toggleable = false;\n  @Input() selected = false;\n  @Output() selectedChange = new EventEmitter<boolean>();\n\n  @HostBinding('class.mj-btn') readonly baseClass = true;\n\n  @HostBinding('class.mj-btn--primary') get isPrimary() { return this.variant === 'primary'; }\n  @HostBinding('class.mj-btn--secondary') get isSecondary() { return this.variant === 'secondary'; }\n  @HostBinding('class.mj-btn--outline') get isOutline() { return this.variant === 'outline'; }\n  @HostBinding('class.mj-btn--flat') get isFlat() { return this.variant === 'flat'; }\n  @HostBinding('class.mj-btn--danger') get isDanger() { return this.variant === 'danger'; }\n  @HostBinding('class.mj-btn--icon') get isIcon() { return this.variant === 'icon'; }\n  @HostBinding('class.mj-btn--success') get isSuccess() { return this.variant === 'success'; }\n  @HostBinding('class.mj-btn--warning') get isWarning() { return this.variant === 'warning'; }\n\n  @HostBinding('class.mj-btn--sm') get isSm() { return this.size === 'sm'; }\n  @HostBinding('class.mj-btn--lg') get isLg() { return this.size === 'lg'; }\n\n  @HostBinding('class.mj-btn--selected') get isSelected() { return this.toggleable && this.selected; }\n  @HostBinding('attr.aria-pressed') get ariaPressed(): string | null {\n    return this.toggleable ? String(this.selected) : null;\n  }\n\n  @HostListener('click')\n  OnClick(): void {\n    if (this.toggleable) {\n      this.selected = !this.selected;\n      this.selectedChange.emit(this.selected);\n    }\n  }\n}\n"]}
+{"version":3,"file":"button.directive.js","sourceRoot":"","sources":["../../../src/lib/button/button.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Directive,\n  Input,\n  Output,\n  EventEmitter,\n  HostBinding,\n  HostListener,\n  ElementRef,\n  AfterContentInit,\n  isDevMode\n} from '@angular/core';\n\nexport type MjButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'outline'\n  | 'flat'\n  | 'danger'\n  | 'icon'\n  | 'success'\n  | 'warning';\n\nexport type MjButtonSize = 'sm' | 'md' | 'lg';\n\n/**\n * mjButton — Attribute directive that styles a native `<button>` or `<a>` element\n * as an MJ-branded button.\n *\n * Uses `--mj-*` design tokens for all colors, ensuring dark-mode support\n * with zero extra CSS.\n *\n * Inputs use lowercase (not PascalCase) per the Phase 2 plan exception for\n * directives — matches HTML attribute convention.\n *\n * Accessibility: an **icon-only** button (`variant=\"icon\"`, no visible text) has no accessible\n * name unless you supply one — set `[ariaLabel]` (or a native `title`). Without a name, screen\n * readers announce it as an unlabeled \"button\" and DOM/accessibility-tree agents (e.g. computer-use)\n * can't identify it. In dev mode the directive logs a warning for an icon button that ends up with\n * no accessible name.\n *\n * @example\n * ```html\n * <button mjButton variant=\"primary\" (click)=\"save()\">Save</button>\n * <button mjButton variant=\"outline\" size=\"sm\">Cancel</button>\n * <button mjButton variant=\"icon\" ariaLabel=\"Remove\" (click)=\"remove()\"><i class=\"fa-solid fa-xmark\"></i></button>\n * <button mjButton variant=\"flat\" [toggleable]=\"true\" [(selected)]=\"isActive\">Toggle</button>\n * ```\n */\n@Directive({\n  selector: 'button[mjButton], a[mjButton]',\n  standalone: true\n})\nexport class MJButtonDirective implements AfterContentInit {\n  @Input() variant: MjButtonVariant = 'secondary';\n  @Input() size: MjButtonSize = 'md';\n  @Input() toggleable = false;\n  @Input() selected = false;\n  @Output() selectedChange = new EventEmitter<boolean>();\n\n  // Constructor injection (not inject()) so the directive can be unit-tested via direct\n  // instantiation with a stub ElementRef — the established pattern in this package's specs.\n  constructor(private readonly host: ElementRef<HTMLElement>) {}\n\n  /**\n   * Accessible name for the button, surfaced as `aria-label`. Primarily for **icon-only** buttons\n   * (which otherwise have no name). Applied via `setAttribute` only when set, so a directly-authored\n   * `aria-label=\"...\"` on the element is never clobbered.\n   */\n  @Input()\n  set ariaLabel(value: string | null | undefined) {\n    this._ariaLabel = value ?? undefined;\n    if (this._ariaLabel) {\n      this.host.nativeElement.setAttribute('aria-label', this._ariaLabel);\n    }\n  }\n  get ariaLabel(): string | undefined {\n    return this._ariaLabel;\n  }\n  private _ariaLabel?: string;\n\n  @HostBinding('class.mj-btn') readonly baseClass = true;\n\n  @HostBinding('class.mj-btn--primary') get isPrimary() { return this.variant === 'primary'; }\n  @HostBinding('class.mj-btn--secondary') get isSecondary() { return this.variant === 'secondary'; }\n  @HostBinding('class.mj-btn--outline') get isOutline() { return this.variant === 'outline'; }\n  @HostBinding('class.mj-btn--flat') get isFlat() { return this.variant === 'flat'; }\n  @HostBinding('class.mj-btn--danger') get isDanger() { return this.variant === 'danger'; }\n  @HostBinding('class.mj-btn--icon') get isIcon() { return this.variant === 'icon'; }\n  @HostBinding('class.mj-btn--success') get isSuccess() { return this.variant === 'success'; }\n  @HostBinding('class.mj-btn--warning') get isWarning() { return this.variant === 'warning'; }\n\n  @HostBinding('class.mj-btn--sm') get isSm() { return this.size === 'sm'; }\n  @HostBinding('class.mj-btn--lg') get isLg() { return this.size === 'lg'; }\n\n  @HostBinding('class.mj-btn--selected') get isSelected() { return this.toggleable && this.selected; }\n  @HostBinding('attr.aria-pressed') get ariaPressed(): string | null {\n    return this.toggleable ? String(this.selected) : null;\n  }\n\n  @HostListener('click')\n  OnClick(): void {\n    if (this.toggleable) {\n      this.selected = !this.selected;\n      this.selectedChange.emit(this.selected);\n    }\n  }\n\n  /**\n   * Dev-only guard: an icon-variant button with no accessible name (no `ariaLabel`/`aria-label`/\n   * `aria-labelledby`/`title` and no visible text) is invisible-by-name to screen readers and DOM\n   * agents. Warn so it gets a name. No-op in production builds.\n   */\n  ngAfterContentInit(): void {\n    if (!isDevMode() || this.variant !== 'icon') {\n      return;\n    }\n    const el = this.host.nativeElement;\n    const hasAccessibleName = !!(\n      this._ariaLabel ||\n      el.getAttribute('aria-label') ||\n      el.getAttribute('aria-labelledby') ||\n      el.getAttribute('title') ||\n      (el.textContent ?? '').trim().length > 0\n    );\n    if (!hasAccessibleName) {\n      console.warn(\n        '[mjButton] icon-only button has no accessible name — add [ariaLabel]=\"…\" (or a title) so ' +\n          'screen readers and computer-use agents can identify it.',\n        el\n      );\n    }\n  }\n}\n"]}

package/dist/lib/clickable/clickable.directive.d.ts

@@ -0,0 +1,68 @@
+import { ElementRef, AfterContentInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export type MjClickableRole = 'button' | 'link';
+/**
+ * mjClickable — Attribute directive that upgrades a non-semantic element (a `<div>`/`<span>` that
+ * has a `(click)` handler) into a proper, accessible, keyboard-operable control **without changing
+ * its tag or styling**.
+ *
+ * ## Why this exists
+ * A `<div (click)="…">` is invisible as a control to anyone (and anything) that consumes the
+ * **accessibility tree** rather than pixels:
+ *  - screen-reader and keyboard users can't reach or operate it (no role, no focus, no Enter/Space);
+ *  - DOM/accessibility-tree AI agents (e.g. computer-use driving a live browser) can't enumerate it
+ *    as a clickable or find it by name — it resolves to `role=generic` with no accessible name.
+ *
+ * Converting such a `<div>` to a native `<button>` is the ideal fix, but often forces CSS churn for
+ * already-styled tiles/rows. `mjClickable` is the low-risk alternative: it keeps the element and its
+ * styles, and adds the missing semantics — `role`, `tabindex`, an accessible name (`aria-label`),
+ * Enter/Space activation (which dispatches a native `click`, so your existing `(click)` handler runs
+ * for both mouse and keyboard), and an optional stable `data-testid` automation hook.
+ *
+ * Prefer a real `<button mjButton>`/`<a>` for NEW markup; reach for `mjClickable` to retrofit existing
+ * clickable `<div>`/`<span>` widgets (nav tiles, list rows, cards) cheaply.
+ *
+ * @example
+ * ```html
+ * <!-- Retrofit a clickable app tile: stays a styled <div>, becomes a named, keyboard-operable button -->
+ * <div class="app-card" [mjClickable]="app.Name" [testId]="'app-tile-' + app.Name" (click)="open(app)">
+ *   …icon + name + description…
+ * </div>
+ *
+ * <!-- A navigation-style row -->
+ * <div class="nav-item" [mjClickable]="item.Label" role="link" (click)="navigate(item)">…</div>
+ * ```
+ */
+export declare class MJClickableDirective implements AfterContentInit {
+    private readonly host;
+    /**
+     * Accessible name for the control, surfaced as `aria-label`. Pass the human-meaningful label
+     * (e.g. the app/nav-item name). Strongly recommended — without it the control is operable but
+     * unnamed, so agents/AT can reach it but can't identify it. When omitted, the element's own
+     * visible text becomes the name (fine when the text alone is unambiguous).
+     */
+    label: string | null | undefined;
+    /** ARIA role to expose. `'button'` (default) for actions, `'link'` for navigation-like targets. */
+    role: MjClickableRole;
+    /** Optional stable automation/test hook emitted as `data-testid` (no convention enforced here). */
+    testId?: string;
+    /** Set `false` to skip making the element keyboard-focusable (rare; e.g. focus handled elsewhere). */
+    focusable: boolean;
+    constructor(host: ElementRef<HTMLElement>);
+    get roleAttr(): string;
+    get tabIndexAttr(): string | null;
+    get ariaLabelAttr(): string | null;
+    get testIdAttr(): string | null;
+    /**
+     * Keyboard activation: Enter / Space activate a `role="button"`/`"link"` exactly as they would a
+     * native control. We `preventDefault` (Space would otherwise scroll the page) and dispatch a native
+     * `click`, so the element's existing `(click)` binding handles both mouse and keyboard with no
+     * duplicate wiring.
+     */
+    onKeydown(event: KeyboardEvent): void;
+    /** Dev-only guard: warn when the control ends up with no accessible name. No-op in production. */
+    ngAfterContentInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJClickableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MJClickableDirective, "[mjClickable]", never, { "label": { "alias": "mjClickable"; "required": false; }; "role": { "alias": "role"; "required": false; }; "testId": { "alias": "testId"; "required": false; }; "focusable": { "alias": "focusable"; "required": false; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=clickable.directive.d.ts.map

package/dist/lib/clickable/clickable.directive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clickable.directive.d.ts","sourceRoot":"","sources":["../../../src/lib/clickable/clickable.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,UAAU,EACV,gBAAgB,EAEjB,MAAM,eAAe,CAAC;;AAEvB,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBAIa,oBAAqB,YAAW,gBAAgB;IAoB/C,OAAO,CAAC,QAAQ,CAAC,IAAI;IAnBjC;;;;;OAKG;IACmB,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAM;IAE5D,mGAAmG;IAC1F,IAAI,EAAE,eAAe,CAAY;IAE1C,mGAAmG;IAC1F,MAAM,CAAC,EAAE,MAAM,CAAC;IAEzB,sGAAsG;IAC7F,SAAS,UAAQ;gBAIG,IAAI,EAAE,UAAU,CAAC,WAAW,CAAC;IAE1D,IAA8B,QAAQ,IAAI,MAAM,CAE/C;IACD,IAAkC,YAAY,IAAI,MAAM,GAAG,IAAI,CAE9D;IACD,IAAoC,aAAa,IAAI,MAAM,GAAG,IAAI,CAEjE;IACD,IAAqC,UAAU,IAAI,MAAM,GAAG,IAAI,CAE/D;IAED;;;;;OAKG;IAEH,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAOrC,kGAAkG;IAClG,kBAAkB,IAAI,IAAI;yCAlDf,oBAAoB;2CAApB,oBAAoB;CA+DhC"}

package/dist/lib/clickable/clickable.directive.js

@@ -0,0 +1,128 @@
+import { Directive, Input, HostBinding, HostListener, isDevMode } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * mjClickable — Attribute directive that upgrades a non-semantic element (a `<div>`/`<span>` that
+ * has a `(click)` handler) into a proper, accessible, keyboard-operable control **without changing
+ * its tag or styling**.
+ *
+ * ## Why this exists
+ * A `<div (click)="…">` is invisible as a control to anyone (and anything) that consumes the
+ * **accessibility tree** rather than pixels:
+ *  - screen-reader and keyboard users can't reach or operate it (no role, no focus, no Enter/Space);
+ *  - DOM/accessibility-tree AI agents (e.g. computer-use driving a live browser) can't enumerate it
+ *    as a clickable or find it by name — it resolves to `role=generic` with no accessible name.
+ *
+ * Converting such a `<div>` to a native `<button>` is the ideal fix, but often forces CSS churn for
+ * already-styled tiles/rows. `mjClickable` is the low-risk alternative: it keeps the element and its
+ * styles, and adds the missing semantics — `role`, `tabindex`, an accessible name (`aria-label`),
+ * Enter/Space activation (which dispatches a native `click`, so your existing `(click)` handler runs
+ * for both mouse and keyboard), and an optional stable `data-testid` automation hook.
+ *
+ * Prefer a real `<button mjButton>`/`<a>` for NEW markup; reach for `mjClickable` to retrofit existing
+ * clickable `<div>`/`<span>` widgets (nav tiles, list rows, cards) cheaply.
+ *
+ * @example
+ * ```html
+ * <!-- Retrofit a clickable app tile: stays a styled <div>, becomes a named, keyboard-operable button -->
+ * <div class="app-card" [mjClickable]="app.Name" [testId]="'app-tile-' + app.Name" (click)="open(app)">
+ *   …icon + name + description…
+ * </div>
+ *
+ * <!-- A navigation-style row -->
+ * <div class="nav-item" [mjClickable]="item.Label" role="link" (click)="navigate(item)">…</div>
+ * ```
+ */
+export class MJClickableDirective {
+    host;
+    /**
+     * Accessible name for the control, surfaced as `aria-label`. Pass the human-meaningful label
+     * (e.g. the app/nav-item name). Strongly recommended — without it the control is operable but
+     * unnamed, so agents/AT can reach it but can't identify it. When omitted, the element's own
+     * visible text becomes the name (fine when the text alone is unambiguous).
+     */
+    label = '';
+    /** ARIA role to expose. `'button'` (default) for actions, `'link'` for navigation-like targets. */
+    role = 'button';
+    /** Optional stable automation/test hook emitted as `data-testid` (no convention enforced here). */
+    testId;
+    /** Set `false` to skip making the element keyboard-focusable (rare; e.g. focus handled elsewhere). */
+    focusable = true;
+    // Constructor injection (not inject()) so the directive can be unit-tested via direct
+    // instantiation with a stub ElementRef — the established pattern in this package's specs.
+    constructor(host) {
+        this.host = host;
+    }
+    get roleAttr() {
+        return this.role;
+    }
+    get tabIndexAttr() {
+        return this.focusable ? '0' : null;
+    }
+    get ariaLabelAttr() {
+        return this.label?.trim() ? this.label.trim() : null;
+    }
+    get testIdAttr() {
+        return this.testId ?? null;
+    }
+    /**
+     * Keyboard activation: Enter / Space activate a `role="button"`/`"link"` exactly as they would a
+     * native control. We `preventDefault` (Space would otherwise scroll the page) and dispatch a native
+     * `click`, so the element's existing `(click)` binding handles both mouse and keyboard with no
+     * duplicate wiring.
+     */
+    onKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+            event.preventDefault();
+            this.host.nativeElement.click();
+        }
+    }
+    /** Dev-only guard: warn when the control ends up with no accessible name. No-op in production. */
+    ngAfterContentInit() {
+        if (!isDevMode()) {
+            return;
+        }
+        const hasName = !!(this.label?.trim() || (this.host.nativeElement.textContent ?? '').trim());
+        if (!hasName) {
+            console.warn('[mjClickable] element has no accessible name — pass mjClickable="<name>" so screen readers ' +
+                'and computer-use agents can identify it.', this.host.nativeElement);
+        }
+    }
+    static ɵfac = function MJClickableDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJClickableDirective)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MJClickableDirective, selectors: [["", "mjClickable", ""]], hostVars: 4, hostBindings: function MJClickableDirective_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown", function MJClickableDirective_keydown_HostBindingHandler($event) { return ctx.onKeydown($event); });
+        } if (rf & 2) {
+            i0.ɵɵattribute("role", ctx.roleAttr)("tabindex", ctx.tabIndexAttr)("aria-label", ctx.ariaLabelAttr)("data-testid", ctx.testIdAttr);
+        } }, inputs: { label: [0, "mjClickable", "label"], role: "role", testId: "testId", focusable: "focusable" } });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJClickableDirective, [{
+        type: Directive,
+        args: [{
+                selector: '[mjClickable]',
+                standalone: true
+            }]
+    }], () => [{ type: i0.ElementRef }], { label: [{
+            type: Input,
+            args: ['mjClickable']
+        }], role: [{
+            type: Input
+        }], testId: [{
+            type: Input
+        }], focusable: [{
+            type: Input
+        }], roleAttr: [{
+            type: HostBinding,
+            args: ['attr.role']
+        }], tabIndexAttr: [{
+            type: HostBinding,
+            args: ['attr.tabindex']
+        }], ariaLabelAttr: [{
+            type: HostBinding,
+            args: ['attr.aria-label']
+        }], testIdAttr: [{
+            type: HostBinding,
+            args: ['attr.data-testid']
+        }], onKeydown: [{
+            type: HostListener,
+            args: ['keydown', ['$event']]
+        }] }); })();
+//# sourceMappingURL=clickable.directive.js.map

package/dist/lib/clickable/clickable.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clickable.directive.js","sourceRoot":"","sources":["../../../src/lib/clickable/clickable.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EACL,WAAW,EACX,YAAY,EAGZ,SAAS,EACV,MAAM,eAAe,CAAC;;AAIvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAKH,MAAM,OAAO,oBAAoB;IAoBF;IAnB7B;;;;;OAKG;IACmB,KAAK,GAA8B,EAAE,CAAC;IAE5D,mGAAmG;IAC1F,IAAI,GAAoB,QAAQ,CAAC;IAE1C,mGAAmG;IAC1F,MAAM,CAAU;IAEzB,sGAAsG;IAC7F,SAAS,GAAG,IAAI,CAAC;IAE1B,sFAAsF;IACtF,0FAA0F;IAC1F,YAA6B,IAA6B;QAA7B,SAAI,GAAJ,IAAI,CAAyB;IAAG,CAAC;IAE9D,IAA8B,QAAQ;QACpC,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IACD,IAAkC,YAAY;QAC5C,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;IACrC,CAAC;IACD,IAAoC,aAAa;QAC/C,OAAO,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACvD,CAAC;IACD,IAAqC,UAAU;QAC7C,OAAO,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC;IAC7B,CAAC;IAED;;;;;OAKG;IAEH,SAAS,CAAC,KAAoB;QAC5B,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,EAAE,CAAC;YAC3E,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;QAClC,CAAC;IACH,CAAC;IAED,kGAAkG;IAClG,kBAAkB;QAChB,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QACD,MAAM,OAAO,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QAC7F,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,CAAC,IAAI,CACV,6FAA6F;gBAC3F,0CAA0C,EAC5C,IAAI,CAAC,IAAI,CAAC,aAAa,CACxB,CAAC;QACJ,CAAC;IACH,CAAC;8GA9DU,oBAAoB;6DAApB,oBAAoB;YAApB,mGAAA,qBAAiB,IAAG;;;;;iFAApB,oBAAoB;cAJhC,SAAS;eAAC;gBACT,QAAQ,EAAE,eAAe;gBACzB,UAAU,EAAE,IAAI;aACjB;;kBAQE,KAAK;mBAAC,aAAa;;kBAGnB,KAAK;;kBAGL,KAAK;;kBAGL,KAAK;;kBAML,WAAW;mBAAC,WAAW;;kBAGvB,WAAW;mBAAC,eAAe;;kBAG3B,WAAW;mBAAC,iBAAiB;;kBAG7B,WAAW;mBAAC,kBAAkB;;kBAU9B,YAAY;mBAAC,SAAS,EAAE,CAAC,QAAQ,CAAC","sourcesContent":["import {\n  Directive,\n  Input,\n  HostBinding,\n  HostListener,\n  ElementRef,\n  AfterContentInit,\n  isDevMode\n} from '@angular/core';\n\nexport type MjClickableRole = 'button' | 'link';\n\n/**\n * mjClickable — Attribute directive that upgrades a non-semantic element (a `<div>`/`<span>` that\n * has a `(click)` handler) into a proper, accessible, keyboard-operable control **without changing\n * its tag or styling**.\n *\n * ## Why this exists\n * A `<div (click)=\"…\">` is invisible as a control to anyone (and anything) that consumes the\n * **accessibility tree** rather than pixels:\n *  - screen-reader and keyboard users can't reach or operate it (no role, no focus, no Enter/Space);\n *  - DOM/accessibility-tree AI agents (e.g. computer-use driving a live browser) can't enumerate it\n *    as a clickable or find it by name — it resolves to `role=generic` with no accessible name.\n *\n * Converting such a `<div>` to a native `<button>` is the ideal fix, but often forces CSS churn for\n * already-styled tiles/rows. `mjClickable` is the low-risk alternative: it keeps the element and its\n * styles, and adds the missing semantics — `role`, `tabindex`, an accessible name (`aria-label`),\n * Enter/Space activation (which dispatches a native `click`, so your existing `(click)` handler runs\n * for both mouse and keyboard), and an optional stable `data-testid` automation hook.\n *\n * Prefer a real `<button mjButton>`/`<a>` for NEW markup; reach for `mjClickable` to retrofit existing\n * clickable `<div>`/`<span>` widgets (nav tiles, list rows, cards) cheaply.\n *\n * @example\n * ```html\n * <!-- Retrofit a clickable app tile: stays a styled <div>, becomes a named, keyboard-operable button -->\n * <div class=\"app-card\" [mjClickable]=\"app.Name\" [testId]=\"'app-tile-' + app.Name\" (click)=\"open(app)\">\n *   …icon + name + description…\n * </div>\n *\n * <!-- A navigation-style row -->\n * <div class=\"nav-item\" [mjClickable]=\"item.Label\" role=\"link\" (click)=\"navigate(item)\">…</div>\n * ```\n */\n@Directive({\n  selector: '[mjClickable]',\n  standalone: true\n})\nexport class MJClickableDirective implements AfterContentInit {\n  /**\n   * Accessible name for the control, surfaced as `aria-label`. Pass the human-meaningful label\n   * (e.g. the app/nav-item name). Strongly recommended — without it the control is operable but\n   * unnamed, so agents/AT can reach it but can't identify it. When omitted, the element's own\n   * visible text becomes the name (fine when the text alone is unambiguous).\n   */\n  @Input('mjClickable') label: string | null | undefined = '';\n\n  /** ARIA role to expose. `'button'` (default) for actions, `'link'` for navigation-like targets. */\n  @Input() role: MjClickableRole = 'button';\n\n  /** Optional stable automation/test hook emitted as `data-testid` (no convention enforced here). */\n  @Input() testId?: string;\n\n  /** Set `false` to skip making the element keyboard-focusable (rare; e.g. focus handled elsewhere). */\n  @Input() focusable = true;\n\n  // Constructor injection (not inject()) so the directive can be unit-tested via direct\n  // instantiation with a stub ElementRef — the established pattern in this package's specs.\n  constructor(private readonly host: ElementRef<HTMLElement>) {}\n\n  @HostBinding('attr.role') get roleAttr(): string {\n    return this.role;\n  }\n  @HostBinding('attr.tabindex') get tabIndexAttr(): string | null {\n    return this.focusable ? '0' : null;\n  }\n  @HostBinding('attr.aria-label') get ariaLabelAttr(): string | null {\n    return this.label?.trim() ? this.label.trim() : null;\n  }\n  @HostBinding('attr.data-testid') get testIdAttr(): string | null {\n    return this.testId ?? null;\n  }\n\n  /**\n   * Keyboard activation: Enter / Space activate a `role=\"button\"`/`\"link\"` exactly as they would a\n   * native control. We `preventDefault` (Space would otherwise scroll the page) and dispatch a native\n   * `click`, so the element's existing `(click)` binding handles both mouse and keyboard with no\n   * duplicate wiring.\n   */\n  @HostListener('keydown', ['$event'])\n  onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {\n      event.preventDefault();\n      this.host.nativeElement.click();\n    }\n  }\n\n  /** Dev-only guard: warn when the control ends up with no accessible name. No-op in production. */\n  ngAfterContentInit(): void {\n    if (!isDevMode()) {\n      return;\n    }\n    const hasName = !!(this.label?.trim() || (this.host.nativeElement.textContent ?? '').trim());\n    if (!hasName) {\n      console.warn(\n        '[mjClickable] element has no accessible name — pass mjClickable=\"<name>\" so screen readers ' +\n          'and computer-use agents can identify it.',\n        this.host.nativeElement\n      );\n    }\n  }\n}\n"]}

package/dist/public-api.d.ts

@@ -1,4 +1,5 @@
 export * from './lib/button/button.directive';
+export * from './lib/clickable/clickable.directive';
 export * from './lib/dialog/dialog.component';
 export * from './lib/dialog/dialog.service';
 export * from './lib/dropdown/dropdown.component';

package/dist/public-api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAGA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,uDAAuD,CAAC"}
+{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAGA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,uDAAuD,CAAC"}

package/dist/public-api.js

@@ -1,6 +1,7 @@
 // @memberjunction/ng-ui-components
 // Reusable standalone Angular UI components for MemberJunction
 export * from './lib/button/button.directive';
+export * from './lib/clickable/clickable.directive';
 export * from './lib/dialog/dialog.component';
 export * from './lib/dialog/dialog.service';
 export * from './lib/dropdown/dropdown.component';

package/dist/public-api.js.map

@@ -1 +1 @@
-{"version":3,"file":"public-api.js","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,+DAA+D;AAE/D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,uDAAuD,CAAC","sourcesContent":["// @memberjunction/ng-ui-components\n// Reusable standalone Angular UI components for MemberJunction\n\nexport * from './lib/button/button.directive';\nexport * from './lib/dialog/dialog.component';\nexport * from './lib/dialog/dialog.service';\nexport * from './lib/dropdown/dropdown.component';\nexport * from './lib/switch/switch.component';\nexport * from './lib/numeric-input/numeric-input.component';\nexport * from './lib/progress-bar/progress-bar.component';\nexport * from './lib/calendar/calendar-utils';\nexport * from './lib/datepicker/datepicker.component';\nexport * from './lib/splitter/splitter.component';\nexport * from './lib/accordion/accordion.component';\nexport * from './lib/window/window.component';\nexport * from './lib/slide-panel/slide-panel.component';\nexport * from './lib/combobox/combobox.component';\nexport * from './lib/page-header/page-header.component';\nexport * from './lib/page-layout/page-layout.component';\nexport * from './lib/page-body/page-body.component';\nexport * from './lib/stat-badge/stat-badge.component';\nexport * from './lib/refresh-button/refresh-button.component';\nexport * from './lib/filter-popover/filter-popover.component';\nexport * from './lib/page-search/page-search.component';\nexport * from './lib/filter-chip/filter-chip.component';\nexport * from './lib/filter-field/filter-field.component';\nexport * from './lib/filter-panel/filter-panel.component';\nexport * from './lib/tab-nav/tab-nav.component';\nexport * from './lib/view-toggle/view-toggle.component';\nexport * from './lib/left-nav/left-nav.component';\nexport * from './lib/left-nav/left-nav-content.component';\nexport * from './lib/page-header-interior/page-header-interior.component';\nexport * from './lib/page-body-interior/page-body-interior.component';\n"]}
+{"version":3,"file":"public-api.js","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,+DAA+D;AAE/D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,uDAAuD,CAAC","sourcesContent":["// @memberjunction/ng-ui-components\n// Reusable standalone Angular UI components for MemberJunction\n\nexport * from './lib/button/button.directive';\nexport * from './lib/clickable/clickable.directive';\nexport * from './lib/dialog/dialog.component';\nexport * from './lib/dialog/dialog.service';\nexport * from './lib/dropdown/dropdown.component';\nexport * from './lib/switch/switch.component';\nexport * from './lib/numeric-input/numeric-input.component';\nexport * from './lib/progress-bar/progress-bar.component';\nexport * from './lib/calendar/calendar-utils';\nexport * from './lib/datepicker/datepicker.component';\nexport * from './lib/splitter/splitter.component';\nexport * from './lib/accordion/accordion.component';\nexport * from './lib/window/window.component';\nexport * from './lib/slide-panel/slide-panel.component';\nexport * from './lib/combobox/combobox.component';\nexport * from './lib/page-header/page-header.component';\nexport * from './lib/page-layout/page-layout.component';\nexport * from './lib/page-body/page-body.component';\nexport * from './lib/stat-badge/stat-badge.component';\nexport * from './lib/refresh-button/refresh-button.component';\nexport * from './lib/filter-popover/filter-popover.component';\nexport * from './lib/page-search/page-search.component';\nexport * from './lib/filter-chip/filter-chip.component';\nexport * from './lib/filter-field/filter-field.component';\nexport * from './lib/filter-panel/filter-panel.component';\nexport * from './lib/tab-nav/tab-nav.component';\nexport * from './lib/view-toggle/view-toggle.component';\nexport * from './lib/left-nav/left-nav.component';\nexport * from './lib/left-nav/left-nav-content.component';\nexport * from './lib/page-header-interior/page-header-interior.component';\nexport * from './lib/page-body-interior/page-body-interior.component';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-ui-components",
-  "version": "5.40.2",
+  "version": "5.42.0",
   "description": "MemberJunction: Angular UI Components - reusable standalone components replacing Kendo UI dependencies.",
   "main": "./dist/public-api.js",
   "typings": "./dist/public-api.d.ts",