@a11y-hud/angular 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Arthur Vasconcelos
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,132 @@
+# @a11y-hud/angular
+
+Angular adapter for [a11y-hud](https://www.npmjs.com/package/a11y-hud) — run axe-core accessibility audits inside your Angular app with no browser extension required.
+
+## Install
+
+```bash
+npm install a11y-hud @a11y-hud/angular
+```
+
+Peer dependencies: `@angular/core >= 20.0.0 < 23.0.0` (Angular 20 and 21).
+
+## Usage
+
+### Component
+
+Drop `<a11y-hud-angular>` into your root component's template. It renders nothing into the Angular tree — the HUD panel is appended to `document.body` as a Custom Element.
+
+```typescript
+import { Component } from '@angular/core';
+import { A11yHudComponent } from '@a11y-hud/angular';
+
+@Component({
+  standalone: true,
+  imports: [A11yHudComponent],
+  template: `
+    <a11y-hud-angular [theme]="'auto'" />
+    <router-outlet />
+  `,
+})
+export class AppComponent {}
+```
+
+### Service
+
+Use `A11yHudService` when you need programmatic access to `runScan` or `setTheme`.
+
+```typescript
+import { Component, OnInit } from '@angular/core';
+import { A11yHudService } from '@a11y-hud/angular';
+
+@Component({
+  standalone: true,
+  providers: [A11yHudService],
+  template: `<button (click)="scan()">Scan now</button>`,
+})
+export class DevToolsComponent implements OnInit {
+  constructor(private readonly hud: A11yHudService) {}
+
+  ngOnInit() {
+    this.hud.init({ theme: 'auto' });
+  }
+
+  scan() {
+    void this.hud.runScan();
+  }
+}
+```
+
+### Subtree scoping
+
+Restrict the scan to a specific subtree by passing a template reference variable or an `ElementRef`.
+
+```typescript
+import { Component } from '@angular/core';
+import { A11yHudComponent } from '@a11y-hud/angular';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  standalone: true,
+  imports: [A11yHudComponent, RouterOutlet],
+  template: `
+    <a11y-hud-angular [scope]="mainRef" />
+    <main #mainRef>
+      <router-outlet />
+    </main>
+  `,
+})
+export class AppComponent {}
+```
+
+The `scope` input accepts a template reference variable (typed as `Element` by Angular's template checker), an `ElementRef<Element>` from `@ViewChild`, or `null` to restore full-page scanning.
+
+### Route change rescans
+
+Angular Router navigation mutates the DOM — the core's built-in `MutationObserver` picks up these changes and rescans automatically. No extra wiring needed.
+
+If you need a manual rescan on a specific navigation event (for example, inside a `CanActivate` guard or a resolver), call `runScan()` on the component or through `A11yHudService`:
+
+```typescript
+import { Component, ViewChild } from '@angular/core';
+import { Router, NavigationEnd } from '@angular/router';
+import { A11yHudComponent } from '@a11y-hud/angular';
+import { filter } from 'rxjs/operators';
+
+@Component({
+  standalone: true,
+  imports: [A11yHudComponent],
+  template: `<a11y-hud-angular #hud />`,
+})
+export class AppComponent {
+  @ViewChild('hud') hud!: A11yHudComponent;
+
+  constructor(router: Router) {
+    router.events
+      .pipe(filter(e => e instanceof NavigationEnd))
+      .subscribe(() => this.hud.runScan());
+  }
+}
+```
+
+## Inputs
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `theme` | `'auto' \| 'default' \| 'light' \| 'high-contrast'` | `'auto'` | Panel color theme |
+| `scope` | `ElementRef<Element> \| Element \| null` | `null` | Restrict scan to this element |
+| `autoScan` | `boolean` | `true` | Rescan on DOM mutations |
+| `debounce` | `number` | `500` | MutationObserver debounce in ms |
+
+## `A11yHudService` methods
+
+| Method | Description |
+|---|---|
+| `init(options?)` | Mount the HUD; call once in `ngOnInit` or `ngAfterViewInit` |
+| `runScan()` | Trigger a manual scan, returns `Promise<AxeResults>` |
+| `setTheme(theme)` | Switch the theme at runtime |
+| `syncScope(scope)` | Update the scan scope |
+
+## License
+
+MIT © Arthur Vasconcelos

package/dist/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Arthur Vasconcelos
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/README.md

@@ -0,0 +1,132 @@
+# @a11y-hud/angular
+
+Angular adapter for [a11y-hud](https://www.npmjs.com/package/a11y-hud) — run axe-core accessibility audits inside your Angular app with no browser extension required.
+
+## Install
+
+```bash
+npm install a11y-hud @a11y-hud/angular
+```
+
+Peer dependencies: `@angular/core >= 20.0.0 < 23.0.0` (Angular 20 and 21).
+
+## Usage
+
+### Component
+
+Drop `<a11y-hud-angular>` into your root component's template. It renders nothing into the Angular tree — the HUD panel is appended to `document.body` as a Custom Element.
+
+```typescript
+import { Component } from '@angular/core';
+import { A11yHudComponent } from '@a11y-hud/angular';
+
+@Component({
+  standalone: true,
+  imports: [A11yHudComponent],
+  template: `
+    <a11y-hud-angular [theme]="'auto'" />
+    <router-outlet />
+  `,
+})
+export class AppComponent {}
+```
+
+### Service
+
+Use `A11yHudService` when you need programmatic access to `runScan` or `setTheme`.
+
+```typescript
+import { Component, OnInit } from '@angular/core';
+import { A11yHudService } from '@a11y-hud/angular';
+
+@Component({
+  standalone: true,
+  providers: [A11yHudService],
+  template: `<button (click)="scan()">Scan now</button>`,
+})
+export class DevToolsComponent implements OnInit {
+  constructor(private readonly hud: A11yHudService) {}
+
+  ngOnInit() {
+    this.hud.init({ theme: 'auto' });
+  }
+
+  scan() {
+    void this.hud.runScan();
+  }
+}
+```
+
+### Subtree scoping
+
+Restrict the scan to a specific subtree by passing a template reference variable or an `ElementRef`.
+
+```typescript
+import { Component } from '@angular/core';
+import { A11yHudComponent } from '@a11y-hud/angular';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  standalone: true,
+  imports: [A11yHudComponent, RouterOutlet],
+  template: `
+    <a11y-hud-angular [scope]="mainRef" />
+    <main #mainRef>
+      <router-outlet />
+    </main>
+  `,
+})
+export class AppComponent {}
+```
+
+The `scope` input accepts a template reference variable (typed as `Element` by Angular's template checker), an `ElementRef<Element>` from `@ViewChild`, or `null` to restore full-page scanning.
+
+### Route change rescans
+
+Angular Router navigation mutates the DOM — the core's built-in `MutationObserver` picks up these changes and rescans automatically. No extra wiring needed.
+
+If you need a manual rescan on a specific navigation event (for example, inside a `CanActivate` guard or a resolver), call `runScan()` on the component or through `A11yHudService`:
+
+```typescript
+import { Component, ViewChild } from '@angular/core';
+import { Router, NavigationEnd } from '@angular/router';
+import { A11yHudComponent } from '@a11y-hud/angular';
+import { filter } from 'rxjs/operators';
+
+@Component({
+  standalone: true,
+  imports: [A11yHudComponent],
+  template: `<a11y-hud-angular #hud />`,
+})
+export class AppComponent {
+  @ViewChild('hud') hud!: A11yHudComponent;
+
+  constructor(router: Router) {
+    router.events
+      .pipe(filter(e => e instanceof NavigationEnd))
+      .subscribe(() => this.hud.runScan());
+  }
+}
+```
+
+## Inputs
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `theme` | `'auto' \| 'default' \| 'light' \| 'high-contrast'` | `'auto'` | Panel color theme |
+| `scope` | `ElementRef<Element> \| Element \| null` | `null` | Restrict scan to this element |
+| `autoScan` | `boolean` | `true` | Rescan on DOM mutations |
+| `debounce` | `number` | `500` | MutationObserver debounce in ms |
+
+## `A11yHudService` methods
+
+| Method | Description |
+|---|---|
+| `init(options?)` | Mount the HUD; call once in `ngOnInit` or `ngAfterViewInit` |
+| `runScan()` | Trigger a manual scan, returns `Promise<AxeResults>` |
+| `setTheme(theme)` | Switch the theme at runtime |
+| `syncScope(scope)` | Update the scan scope |
+
+## License
+
+MIT © Arthur Vasconcelos

package/dist/fesm2022/a11y-hud-angular.mjs

@@ -0,0 +1,138 @@
+import * as i0 from '@angular/core';
+import { inject, NgZone, Injectable, Input, Component } from '@angular/core';
+import { mount } from 'a11y-hud';
+
+function resolveScope(scope) {
+    if (scope == null)
+        return undefined;
+    return scope instanceof Element ? scope : scope.nativeElement;
+}
+class A11yHudService {
+    ngZone = inject(NgZone);
+    instance = null;
+    el = null;
+    init(options = {}) {
+        const { theme, autoScan, debounce } = options;
+        this.instance = mount({
+            ...(theme !== undefined && { theme }),
+            ...(autoScan !== undefined && { autoScan }),
+            ...(debounce !== undefined && { debounce }),
+        });
+        this.el = document.querySelector("a11y-hud");
+        if (this.el) {
+            this.el.scopeElement = resolveScope(options.scope);
+        }
+    }
+    syncScope(scope) {
+        const el = this.el;
+        if (!el)
+            return;
+        el.scopeElement = resolveScope(scope);
+    }
+    syncTheme(theme) {
+        if (theme !== undefined)
+            this.instance?.setTheme(theme);
+    }
+    syncAutoScan(autoScan) {
+        const el = this.el;
+        if (!el || autoScan === undefined)
+            return;
+        if (autoScan === false) {
+            el.removeAttribute("auto-scan");
+        }
+        else {
+            el.setAttribute("auto-scan", "");
+        }
+    }
+    syncDebounce(debounce) {
+        const el = this.el;
+        if (!el || debounce === undefined)
+            return;
+        el.setAttribute("debounce", String(debounce));
+    }
+    runScan() {
+        return this.ngZone.runOutsideAngular(() => this.instance?.runScan() ?? Promise.resolve(null));
+    }
+    setTheme(theme) {
+        this.instance?.setTheme(theme);
+    }
+    get initialized() {
+        return this.instance !== null;
+    }
+    ngOnDestroy() {
+        this.instance?.unmount();
+        this.instance = null;
+        this.el = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: A11yHudService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: A11yHudService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: A11yHudService, decorators: [{
+            type: Injectable
+        }] });
+
+class A11yHudComponent {
+    theme;
+    scope = null;
+    autoScan;
+    debounce;
+    service = inject(A11yHudService);
+    ngAfterViewInit() {
+        this.service.init({
+            ...(this.theme !== undefined && { theme: this.theme }),
+            scope: this.scope,
+            ...(this.autoScan !== undefined && { autoScan: this.autoScan }),
+            ...(this.debounce !== undefined && { debounce: this.debounce }),
+        });
+        void this.service.runScan();
+    }
+    ngOnChanges(changes) {
+        if (!this.service.initialized)
+            return;
+        if ("scope" in changes) {
+            this.service.syncScope(this.scope);
+            void this.service.runScan();
+        }
+        if ("theme" in changes) {
+            this.service.syncTheme(this.theme);
+        }
+        if ("autoScan" in changes) {
+            this.service.syncAutoScan(this.autoScan);
+        }
+        if ("debounce" in changes) {
+            this.service.syncDebounce(this.debounce);
+        }
+    }
+    runScan() {
+        return this.service.runScan();
+    }
+    setTheme(theme) {
+        this.service.setTheme(theme);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: A11yHudComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: A11yHudComponent, isStandalone: true, selector: "a11y-hud-angular", inputs: { theme: "theme", scope: "scope", autoScan: "autoScan", debounce: "debounce" }, providers: [A11yHudService], usesOnChanges: true, ngImport: i0, template: "", isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: A11yHudComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: "a11y-hud-angular",
+                    template: "",
+                    providers: [A11yHudService],
+                }]
+        }], propDecorators: { theme: [{
+                type: Input
+            }], scope: [{
+                type: Input
+            }], autoScan: [{
+                type: Input
+            }], debounce: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { A11yHudComponent, A11yHudService };
+//# sourceMappingURL=a11y-hud-angular.mjs.map

package/dist/fesm2022/a11y-hud-angular.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"a11y-hud-angular.mjs","sources":["../../src/service.ts","../../src/component.ts","../../src/a11y-hud-angular.ts"],"sourcesContent":["import { type ElementRef, Injectable, inject, NgZone, type OnDestroy } from \"@angular/core\";\nimport type { A11yHudElement, A11yHudInstance, AxeResults, Theme } from \"a11y-hud\";\nimport { mount } from \"a11y-hud\";\nimport type { ScopeInput, UseA11yHudOptions } from \"./types.js\";\n\nfunction resolveScope(scope: ScopeInput): Element | undefined {\n  if (scope == null) return undefined;\n  return scope instanceof Element ? scope : (scope as ElementRef<Element>).nativeElement;\n}\n\n@Injectable()\nexport class A11yHudService implements OnDestroy {\n  private readonly ngZone = inject(NgZone);\n  private instance: A11yHudInstance | null = null;\n  private el: A11yHudElement | null = null;\n\n  init(options: UseA11yHudOptions = {}): void {\n    const { theme, autoScan, debounce } = options;\n    this.instance = mount({\n      ...(theme !== undefined && { theme }),\n      ...(autoScan !== undefined && { autoScan }),\n      ...(debounce !== undefined && { debounce }),\n    });\n    this.el = document.querySelector<A11yHudElement>(\"a11y-hud\");\n    if (this.el) {\n      this.el.scopeElement = resolveScope(options.scope);\n    }\n  }\n\n  syncScope(scope: ScopeInput): void {\n    const el = this.el;\n    if (!el) return;\n    el.scopeElement = resolveScope(scope);\n  }\n\n  syncTheme(theme: Theme | undefined): void {\n    if (theme !== undefined) this.instance?.setTheme(theme);\n  }\n\n  syncAutoScan(autoScan: boolean | undefined): void {\n    const el = this.el;\n    if (!el || autoScan === undefined) return;\n    if (autoScan === false) {\n      el.removeAttribute(\"auto-scan\");\n    } else {\n      el.setAttribute(\"auto-scan\", \"\");\n    }\n  }\n\n  syncDebounce(debounce: number | undefined): void {\n    const el = this.el;\n    if (!el || debounce === undefined) return;\n    el.setAttribute(\"debounce\", String(debounce));\n  }\n\n  runScan(): Promise<AxeResults> {\n    return this.ngZone.runOutsideAngular(\n      () => this.instance?.runScan() ?? Promise.resolve(null as unknown as AxeResults)\n    );\n  }\n\n  setTheme(theme: Theme): void {\n    this.instance?.setTheme(theme);\n  }\n\n  get initialized(): boolean {\n    return this.instance !== null;\n  }\n\n  ngOnDestroy(): void {\n    this.instance?.unmount();\n    this.instance = null;\n    this.el = null;\n  }\n}\n","import {\n  type AfterViewInit,\n  Component,\n  Input,\n  inject,\n  type OnChanges,\n  type SimpleChanges,\n} from \"@angular/core\";\nimport type { AxeResults, Theme } from \"a11y-hud\";\nimport { A11yHudService } from \"./service.js\";\nimport type { ScopeInput } from \"./types.js\";\n\n@Component({\n  standalone: true,\n  selector: \"a11y-hud-angular\",\n  template: \"\",\n  providers: [A11yHudService],\n})\nexport class A11yHudComponent implements AfterViewInit, OnChanges {\n  @Input() theme?: Theme;\n  @Input() scope: ScopeInput = null;\n  @Input() autoScan?: boolean;\n  @Input() debounce?: number;\n\n  private readonly service = inject(A11yHudService);\n\n  ngAfterViewInit(): void {\n    this.service.init({\n      ...(this.theme !== undefined && { theme: this.theme }),\n      scope: this.scope,\n      ...(this.autoScan !== undefined && { autoScan: this.autoScan }),\n      ...(this.debounce !== undefined && { debounce: this.debounce }),\n    });\n    void this.service.runScan();\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (!this.service.initialized) return;\n\n    if (\"scope\" in changes) {\n      this.service.syncScope(this.scope);\n      void this.service.runScan();\n    }\n    if (\"theme\" in changes) {\n      this.service.syncTheme(this.theme);\n    }\n    if (\"autoScan\" in changes) {\n      this.service.syncAutoScan(this.autoScan);\n    }\n    if (\"debounce\" in changes) {\n      this.service.syncDebounce(this.debounce);\n    }\n  }\n\n  runScan(): Promise<AxeResults> {\n    return this.service.runScan();\n  }\n\n  setTheme(theme: Theme): void {\n    this.service.setTheme(theme);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/dist/types/a11y-hud-angular.d.ts

@@ -0,0 +1,50 @@
+import * as i0 from '@angular/core';
+import { ElementRef, AfterViewInit, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
+import { Theme, AxeResults } from 'a11y-hud';
+
+type ScopeInput = ElementRef<Element> | Element | null | undefined;
+interface UseA11yHudOptions {
+    theme?: Theme;
+    scope?: ScopeInput;
+    autoScan?: boolean;
+    debounce?: number;
+}
+type A11yHudProps = UseA11yHudOptions;
+interface UseA11yHudReturn {
+    runScan(): Promise<AxeResults>;
+    setTheme(theme: Theme): void;
+}
+
+declare class A11yHudComponent implements AfterViewInit, OnChanges {
+    theme?: Theme;
+    scope: ScopeInput;
+    autoScan?: boolean;
+    debounce?: number;
+    private readonly service;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    runScan(): Promise<AxeResults>;
+    setTheme(theme: Theme): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<A11yHudComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<A11yHudComponent, "a11y-hud-angular", never, { "theme": { "alias": "theme"; "required": false; }; "scope": { "alias": "scope"; "required": false; }; "autoScan": { "alias": "autoScan"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare class A11yHudService implements OnDestroy {
+    private readonly ngZone;
+    private instance;
+    private el;
+    init(options?: UseA11yHudOptions): void;
+    syncScope(scope: ScopeInput): void;
+    syncTheme(theme: Theme | undefined): void;
+    syncAutoScan(autoScan: boolean | undefined): void;
+    syncDebounce(debounce: number | undefined): void;
+    runScan(): Promise<AxeResults>;
+    setTheme(theme: Theme): void;
+    get initialized(): boolean;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<A11yHudService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<A11yHudService>;
+}
+
+export { A11yHudComponent, A11yHudService };
+export type { A11yHudProps, ScopeInput, UseA11yHudOptions, UseA11yHudReturn };

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@a11y-hud/angular",
+  "version": "0.1.0",
+  "description": "Angular adapter for a11y-hud — run axe-core accessibility audits in your Angular app with no DevTools required.",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types/a11y-hud-angular.d.ts",
+      "default": "./dist/fesm2022/a11y-hud-angular.mjs"
+    }
+  },
+  "module": "./dist/fesm2022/a11y-hud-angular.mjs",
+  "types": "./dist/types/a11y-hud-angular.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "dependencies": {
+    "tslib": "^2.3.0",
+    "a11y-hud": "0.1.3"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=20.0.0 <23.0.0"
+  },
+  "devDependencies": {
+    "@angular/compiler": "^21.0.0",
+    "@angular/compiler-cli": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "@angular/platform-browser-dynamic": "^21.0.0",
+    "@playwright/test": "^1.49.1",
+    "@vitest/coverage-v8": "^4.1.5",
+    "jsdom": "^29.1.1",
+    "ng-packagr": "^21.0.0",
+    "typescript": "~5.9.0",
+    "vitest": "^4.1.5",
+    "zone.js": "^0.15.0"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/arthurvasconcelos/a11y-hud#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/arthurvasconcelos/a11y-hud.git",
+    "directory": "packages/angular"
+  },
+  "bugs": {
+    "url": "https://github.com/arthurvasconcelos/a11y-hud/issues"
+  },
+  "keywords": [
+    "accessibility",
+    "a11y",
+    "axe",
+    "axe-core",
+    "wcag",
+    "angular",
+    "dev-tools",
+    "overlay",
+    "hud"
+  ],
+  "scripts": {
+    "build": "ng-packagr -p ng-package.json",
+    "dev": "ng-packagr -p ng-package.json --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:e2e": "playwright test",
+    "typecheck": "tsc --noEmit"
+  }
+}