@ng-prism/core 21.0.0

package/dist/app/panels/a11y/a11y-audit.service.js

@@ -0,0 +1,71 @@
+import { computed, Injectable, signal } from '@angular/core';
+import * as i0 from "@angular/core";
+export function calculateScore(results) {
+    const violations = results.violations;
+    const critical = violations.filter((v) => v.impact === 'critical').length;
+    const serious = violations.filter((v) => v.impact === 'serious').length;
+    const moderate = violations.filter((v) => v.impact === 'moderate').length;
+    const minor = violations.filter((v) => v.impact === 'minor').length;
+    const deductions = critical * 25 + serious * 10 + moderate * 5 + minor * 1;
+    return {
+        score: Math.max(0, 100 - deductions),
+        violations: violations.length,
+        critical,
+        serious,
+        moderate,
+        minor,
+        passes: results.passes.length,
+        incomplete: results.incomplete.length,
+    };
+}
+export async function runCoreAudit(element, config) {
+    const axe = await import('axe-core');
+    const options = {};
+    if (config?.rules) {
+        const keys = Object.keys(config.rules);
+        if (keys.length > 0) {
+            options.rules = Object.fromEntries(keys.map((id) => [id, config.rules[id]]));
+        }
+    }
+    return axe.default.run(element, options);
+}
+export class A11yAuditService {
+    results = signal(null, ...(ngDevMode ? [{ debugName: "results" }] : []));
+    running = signal(false, ...(ngDevMode ? [{ debugName: "running" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    scoreResult = computed(() => {
+        const r = this.results();
+        return r ? calculateScore(r) : null;
+    }, ...(ngDevMode ? [{ debugName: "scoreResult" }] : []));
+    timer = null;
+    scheduleAudit(element, config, debounceMs = 500) {
+        if (this.timer)
+            clearTimeout(this.timer);
+        this.running.set(true);
+        this.error.set(null);
+        this.timer = setTimeout(() => {
+            runCoreAudit(element, config).then((result) => {
+                this.results.set(result);
+                this.running.set(false);
+            }, (err) => {
+                this.error.set(err instanceof Error ? err.message : String(err));
+                this.running.set(false);
+            });
+        }, debounceMs);
+    }
+    clear() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+            this.timer = null;
+        }
+        this.results.set(null);
+        this.running.set(false);
+        this.error.set(null);
+    }
+    static ɵfac = function A11yAuditService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11yAuditService)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: A11yAuditService, factory: A11yAuditService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yAuditService, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], null, null); })();

package/dist/app/panels/a11y/a11y-core.plugin.d.ts

@@ -0,0 +1,3 @@
+import type { PanelDefinition } from '../../../plugin/plugin.types.js';
+export declare const A11Y_CORE_PANEL: PanelDefinition;
+//# sourceMappingURL=a11y-core.plugin.d.ts.map

package/dist/app/panels/a11y/a11y-core.plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"a11y-core.plugin.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-core.plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAEvE,eAAO,MAAM,eAAe,EAAE,eAS7B,CAAC"}

package/dist/app/panels/a11y/a11y-core.plugin.js

@@ -0,0 +1,8 @@
+export const A11Y_CORE_PANEL = {
+    id: 'a11y',
+    label: 'A11y',
+    position: 'bottom',
+    placement: 'addon',
+    loadComponent: () => import('./a11y-panel.component.js').then((m) => m.A11yPanelComponent),
+    loadOverlayComponent: () => import('./a11y-overlay-host.component.js').then((m) => m.A11yOverlayHostComponent),
+};

package/dist/app/panels/a11y/a11y-dom-utils.d.ts

@@ -0,0 +1,11 @@
+export declare function getImplicitRole(element: Element): string;
+export declare function getRole(element: Element): string;
+export interface AccessibleName {
+    name: string;
+    source: string;
+}
+export declare function computeAccessibleName(element: Element, getById?: (id: string) => Element | null): AccessibleName;
+export declare function extractStates(element: Element): Record<string, string | boolean>;
+export declare function isHidden(element: Element): boolean;
+export declare function statesToList(states: Record<string, string | boolean>): string[];
+//# sourceMappingURL=a11y-dom-utils.d.ts.map

package/dist/app/panels/a11y/a11y-dom-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"a11y-dom-utils.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-dom-utils.ts"],"names":[],"mappings":"AAmDA,wBAAgB,eAAe,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAaxD;AAED,wBAAgB,OAAO,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAEhD;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,OAAO,EAChB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,GACvC,cAAc,CA8BhB;AAGD,wBAAgB,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,CAsChF;AAED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAIlD;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,MAAM,EAAE,CAQ/E"}

package/dist/app/panels/a11y/a11y-dom-utils.js

@@ -0,0 +1,149 @@
+const IMPLICIT_ROLES = {
+    A: 'link',
+    BUTTON: 'button',
+    SUMMARY: 'button',
+    INPUT: 'textbox',
+    TEXTAREA: 'textbox',
+    SELECT: 'listbox',
+    IMG: 'img',
+    H1: 'heading',
+    H2: 'heading',
+    H3: 'heading',
+    H4: 'heading',
+    H5: 'heading',
+    H6: 'heading',
+    UL: 'list',
+    OL: 'list',
+    LI: 'listitem',
+    NAV: 'navigation',
+    MAIN: 'main',
+    HEADER: 'banner',
+    FOOTER: 'contentinfo',
+    ASIDE: 'complementary',
+    FORM: 'form',
+    DIALOG: 'dialog',
+    TABLE: 'table',
+    TR: 'row',
+    TH: 'columnheader',
+    TD: 'cell',
+    THEAD: 'rowgroup',
+    TBODY: 'rowgroup',
+    DETAILS: 'group',
+    ARTICLE: 'article',
+    SECTION: 'region',
+};
+const INPUT_TYPE_ROLES = {
+    checkbox: 'checkbox',
+    radio: 'radio',
+    range: 'slider',
+    number: 'spinbutton',
+    submit: 'button',
+    reset: 'button',
+    button: 'button',
+    image: 'button',
+    search: 'searchbox',
+};
+const HEADING_LEVELS = {
+    H1: 1, H2: 2, H3: 3, H4: 4, H5: 5, H6: 6,
+};
+export function getImplicitRole(element) {
+    const tag = element.tagName.toUpperCase();
+    if (tag === 'INPUT') {
+        const type = (element.getAttribute('type') ?? 'text').toLowerCase();
+        return INPUT_TYPE_ROLES[type] ?? 'textbox';
+    }
+    if (tag === 'A' && !element.getAttribute('href')) {
+        return '';
+    }
+    return IMPLICIT_ROLES[tag] ?? '';
+}
+export function getRole(element) {
+    return element.getAttribute('role') ?? getImplicitRole(element);
+}
+export function computeAccessibleName(element, getById) {
+    const labelledBy = element.getAttribute('aria-labelledby');
+    if (labelledBy && getById) {
+        const parts = labelledBy.trim().split(/\s+/);
+        const names = parts
+            .map((id) => getById(id)?.textContent?.trim() ?? '')
+            .filter(Boolean);
+        if (names.length)
+            return { name: names.join(' '), source: 'aria-labelledby' };
+    }
+    const ariaLabel = element.getAttribute('aria-label');
+    if (ariaLabel?.trim())
+        return { name: ariaLabel.trim(), source: 'aria-label' };
+    const tag = element.tagName.toUpperCase();
+    if (tag === 'IMG') {
+        const alt = element.getAttribute('alt');
+        if (alt !== null)
+            return { name: alt, source: 'alt' };
+    }
+    const text = element.textContent?.trim() ?? '';
+    if (text)
+        return { name: text, source: 'text-content' };
+    const title = element.getAttribute('title');
+    if (title?.trim())
+        return { name: title.trim(), source: 'title' };
+    const placeholder = element.getAttribute('placeholder');
+    if (placeholder?.trim())
+        return { name: placeholder.trim(), source: 'placeholder' };
+    return { name: '', source: 'none' };
+}
+export function extractStates(element) {
+    const states = {};
+    const tag = element.tagName.toUpperCase();
+    if (element.getAttribute('aria-hidden') === 'true')
+        states['hidden'] = true;
+    if (element.getAttribute('aria-disabled') === 'true' || element.hasAttribute('disabled')) {
+        states['disabled'] = true;
+    }
+    if (element.getAttribute('aria-required') === 'true' || element.hasAttribute('required')) {
+        states['required'] = true;
+    }
+    const checked = element.getAttribute('aria-checked');
+    if (checked !== null)
+        states['checked'] = checked;
+    const expanded = element.getAttribute('aria-expanded');
+    if (expanded !== null)
+        states['expanded'] = expanded === 'true';
+    const selected = element.getAttribute('aria-selected');
+    if (selected !== null)
+        states['selected'] = selected === 'true';
+    const pressed = element.getAttribute('aria-pressed');
+    if (pressed !== null)
+        states['pressed'] = pressed;
+    const level = element.getAttribute('aria-level');
+    if (level !== null) {
+        states['level'] = level;
+    }
+    else if (HEADING_LEVELS[tag]) {
+        states['level'] = String(HEADING_LEVELS[tag]);
+    }
+    const setsize = element.getAttribute('aria-setsize');
+    const posinset = element.getAttribute('aria-posinset');
+    if (setsize !== null)
+        states['setsize'] = setsize;
+    if (posinset !== null)
+        states['posinset'] = posinset;
+    return states;
+}
+export function isHidden(element) {
+    if (element.getAttribute('aria-hidden') === 'true')
+        return true;
+    if (element.hasAttribute('hidden'))
+        return true;
+    return false;
+}
+export function statesToList(states) {
+    const result = [];
+    for (const [key, value] of Object.entries(states)) {
+        if (key === 'hidden')
+            continue;
+        if (value === true)
+            result.push(key);
+        else if (value !== false)
+            result.push(`${key}: ${value}`);
+    }
+    return result;
+}

package/dist/app/panels/a11y/a11y-keyboard-overlay.component.d.ts

@@ -0,0 +1,24 @@
+import { A11yPanelStateService } from './a11y-panel-state.service.js';
+import * as i0 from "@angular/core";
+export interface BadgePosition {
+    index: number;
+    name: string;
+    role: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare class A11yKeyboardOverlayComponent {
+    protected readonly panelState: A11yPanelStateService;
+    private readonly rendererService;
+    private readonly keyboardService;
+    private readonly elementRef;
+    protected readonly badges: import("@angular/core").WritableSignal<BadgePosition[]>;
+    private rafId;
+    constructor();
+    private computeBadges;
+    static ɵfac: i0.ɵɵFactoryDeclaration<A11yKeyboardOverlayComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<A11yKeyboardOverlayComponent, "prism-a11y-kbd-overlay", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=a11y-keyboard-overlay.component.d.ts.map

package/dist/app/panels/a11y/a11y-keyboard-overlay.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"a11y-keyboard-overlay.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-keyboard-overlay.component.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;;AAGtE,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,qBA4Da,4BAA4B;IACvC,SAAS,CAAC,QAAQ,CAAC,UAAU,wBAAiC;IAC9D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA+B;IAC/D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAmC;IAE9D,SAAS,CAAC,QAAQ,CAAC,MAAM,0DAA+B;IAExD,OAAO,CAAC,KAAK,CAAuB;;IAsBpC,OAAO,CAAC,aAAa;yCA9BV,4BAA4B;2CAA5B,4BAA4B;CA2DxC"}

package/dist/app/panels/a11y/a11y-keyboard-overlay.component.js

@@ -0,0 +1,104 @@
+import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, signal, } from '@angular/core';
+import { A11yKeyboardService } from './a11y-keyboard.service.js';
+import { A11yPanelStateService } from './a11y-panel-state.service.js';
+import { PrismRendererService } from '../../services/prism-renderer.service.js';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.index;
+function A11yKeyboardOverlayComponent_Conditional_0_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElement(0, "div", 0);
+    i0.ɵɵdomElementStart(1, "div", 1);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const badge_r1 = ctx.$implicit;
+    i0.ɵɵstyleProp("left", badge_r1.x, "px")("top", badge_r1.y, "px")("width", badge_r1.width, "px")("height", badge_r1.height, "px");
+    i0.ɵɵdomProperty("title", badge_r1.name || badge_r1.role);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("left", badge_r1.x - 10, "px")("top", badge_r1.y - 10, "px");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(badge_r1.index);
+} }
+function A11yKeyboardOverlayComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, A11yKeyboardOverlayComponent_Conditional_0_For_1_Template, 3, 14, null, null, _forTrack0);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵrepeater(ctx_r1.badges());
+} }
+export class A11yKeyboardOverlayComponent {
+    panelState = inject(A11yPanelStateService);
+    rendererService = inject(PrismRendererService);
+    keyboardService = inject(A11yKeyboardService);
+    elementRef = inject((ElementRef));
+    badges = signal([], ...(ngDevMode ? [{ debugName: "badges" }] : []));
+    rafId = null;
+    constructor() {
+        effect(() => {
+            const root = this.rendererService.renderedElement();
+            this.rendererService.inputValues();
+            this.rendererService.activeVariantIndex();
+            const isKeyboard = this.panelState.activeTab() === 'keyboard';
+            if (!root || !isKeyboard) {
+                this.badges.set([]);
+                return;
+            }
+            if (this.rafId !== null)
+                cancelAnimationFrame(this.rafId);
+            this.rafId = requestAnimationFrame(() => {
+                this.rafId = null;
+                this.computeBadges(root);
+            });
+        });
+    }
+    computeBadges(root) {
+        const canvas = this.elementRef.nativeElement.closest('.prism-renderer__canvas');
+        if (!canvas)
+            return;
+        const doc = root.ownerDocument;
+        const items = this.keyboardService.extractTabOrder(root, doc ? (id) => doc.getElementById(id) : undefined);
+        const canvasRect = canvas.getBoundingClientRect();
+        const scrollLeft = canvas.scrollLeft;
+        const scrollTop = canvas.scrollTop;
+        const positions = items.map((item) => {
+            const elRect = item.element.getBoundingClientRect();
+            return {
+                index: item.index,
+                name: item.name,
+                role: item.role,
+                x: elRect.left - canvasRect.left + scrollLeft,
+                y: elRect.top - canvasRect.top + scrollTop,
+                width: elRect.width,
+                height: elRect.height,
+            };
+        });
+        this.badges.set(positions);
+    }
+    static ɵfac = function A11yKeyboardOverlayComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11yKeyboardOverlayComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yKeyboardOverlayComponent, selectors: [["prism-a11y-kbd-overlay"]], decls: 1, vars: 1, consts: [[1, "prism-a11y-kbd-ov__highlight", 3, "title"], [1, "prism-a11y-kbd-ov__badge"]], template: function A11yKeyboardOverlayComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, A11yKeyboardOverlayComponent_Conditional_0_Template, 2, 0);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.panelState.activeTab() === "keyboard" ? 0 : -1);
+        } }, styles: ["[_nghost-%COMP%] {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      z-index: 100;\n      overflow: hidden;\n    }\n\n    .prism-a11y-kbd-ov__highlight[_ngcontent-%COMP%] {\n      position: absolute;\n      border: 2px solid rgba(129, 140, 248, 0.5);\n      border-radius: 4px;\n      background: rgba(129, 140, 248, 0.06);\n      box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.08);\n      pointer-events: none;\n    }\n\n    .prism-a11y-kbd-ov__badge[_ngcontent-%COMP%] {\n      position: absolute;\n      width: 20px;\n      height: 20px;\n      background: #818cf8;\n      color: white;\n      border-radius: 50%;\n      font-size: 10px;\n      font-weight: 700;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0 0 0 2px white, 0 2px 6px rgba(0, 0, 0, 0.3);\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n      pointer-events: auto;\n      cursor: default;\n    }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yKeyboardOverlayComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-a11y-kbd-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (panelState.activeTab() === 'keyboard') {
+      @for (badge of badges(); track badge.index) {
+        <div
+          class="prism-a11y-kbd-ov__highlight"
+          [style.left.px]="badge.x"
+          [style.top.px]="badge.y"
+          [style.width.px]="badge.width"
+          [style.height.px]="badge.height"
+          [title]="badge.name || badge.role"
+        ></div>
+        <div
+          class="prism-a11y-kbd-ov__badge"
+          [style.left.px]="badge.x - 10"
+          [style.top.px]="badge.y - 10"
+        >{{ badge.index }}</div>
+      }
+    }
+  `, styles: ["\n    :host {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      z-index: 100;\n      overflow: hidden;\n    }\n\n    .prism-a11y-kbd-ov__highlight {\n      position: absolute;\n      border: 2px solid rgba(129, 140, 248, 0.5);\n      border-radius: 4px;\n      background: rgba(129, 140, 248, 0.06);\n      box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.08);\n      pointer-events: none;\n    }\n\n    .prism-a11y-kbd-ov__badge {\n      position: absolute;\n      width: 20px;\n      height: 20px;\n      background: #818cf8;\n      color: white;\n      border-radius: 50%;\n      font-size: 10px;\n      font-weight: 700;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0 0 0 2px white, 0 2px 6px rgba(0, 0, 0, 0.3);\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n      pointer-events: auto;\n      cursor: default;\n    }\n  "] }]
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yKeyboardOverlayComponent, { className: "A11yKeyboardOverlayComponent", filePath: "app/panels/a11y/a11y-keyboard-overlay.component.ts", lineNumber: 83 }); })();

package/dist/app/panels/a11y/a11y-keyboard.component.d.ts

@@ -0,0 +1,12 @@
+import { PrismRendererService } from '../../services/prism-renderer.service.js';
+import * as i0 from "@angular/core";
+export declare class A11yKeyboardComponent {
+    protected readonly rendererService: PrismRendererService;
+    private readonly keyboardService;
+    readonly activeComponent: import("@angular/core").InputSignal<unknown>;
+    protected readonly items: import("@angular/core").Signal<import("./a11y.types.js").FocusableElement[]>;
+    protected typeAttr(el: Element): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<A11yKeyboardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<A11yKeyboardComponent, "prism-a11y-keyboard", never, { "activeComponent": { "alias": "activeComponent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=a11y-keyboard.component.d.ts.map

package/dist/app/panels/a11y/a11y-keyboard.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"a11y-keyboard.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-keyboard.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAEhF,qBAsIa,qBAAqB;IAChC,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA+B;IAE/D,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,SAAS,CAAC,QAAQ,CAAC,KAAK,+EAQrB;IAEH,SAAS,CAAC,QAAQ,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM;yCAhB5B,qBAAqB;2CAArB,qBAAqB;CAoBjC"}

package/dist/app/panels/a11y/a11y-keyboard.component.js

@@ -0,0 +1,150 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { A11yKeyboardService } from './a11y-keyboard.service.js';
+import { PrismRendererService } from '../../services/prism-renderer.service.js';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.index;
+function A11yKeyboardComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 1);
+    i0.ɵɵtext(1, "Select a component to inspect keyboard navigation.");
+    i0.ɵɵdomElementEnd();
+} }
+function A11yKeyboardComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 1);
+    i0.ɵɵtext(1, "No focusable elements found.");
+    i0.ɵɵdomElementEnd();
+} }
+function A11yKeyboardComponent_Conditional_3_For_7_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 10);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(2, "span", 11);
+    i0.ɵɵtext(3);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const item_r1 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("\"", item_r1.name, "\"");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("via ", item_r1.nameSource);
+} }
+function A11yKeyboardComponent_Conditional_3_For_7_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 12);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const s_r2 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(s_r2);
+} }
+function A11yKeyboardComponent_Conditional_3_For_7_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 9);
+    i0.ɵɵrepeaterCreate(1, A11yKeyboardComponent_Conditional_3_For_7_Conditional_7_For_2_Template, 2, 1, "span", 12, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const item_r1 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(item_r1.states);
+} }
+function A11yKeyboardComponent_Conditional_3_For_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 5)(1, "div", 6);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "div", 7)(4, "span", 8);
+    i0.ɵɵtext(5);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵconditionalCreate(6, A11yKeyboardComponent_Conditional_3_For_7_Conditional_6_Template, 4, 2);
+    i0.ɵɵconditionalCreate(7, A11yKeyboardComponent_Conditional_3_For_7_Conditional_7_Template, 3, 0, "div", 9);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const item_r1 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(item_r1.index);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate2("", item_r1.element.tagName.toLowerCase(), "", ctx_r2.typeAttr(item_r1.element));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r1.name ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r1.states.length ? 7 : -1);
+} }
+function A11yKeyboardComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 2)(1, "span");
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "span", 3);
+    i0.ɵɵtext(4, "\u25CF Overlay aktiv");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(5, "div", 4);
+    i0.ɵɵrepeaterCreate(6, A11yKeyboardComponent_Conditional_3_For_7_Template, 8, 5, "div", 5, _forTrack0);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", ctx_r2.items().length, " fokussierbare Elemente");
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r2.items());
+} }
+export class A11yKeyboardComponent {
+    rendererService = inject(PrismRendererService);
+    keyboardService = inject(A11yKeyboardService);
+    activeComponent = input(null, ...(ngDevMode ? [{ debugName: "activeComponent" }] : []));
+    items = computed(() => {
+        const root = this.rendererService.renderedElement();
+        if (!root)
+            return [];
+        const doc = root.ownerDocument;
+        return this.keyboardService.extractTabOrder(root, doc ? (id) => doc.getElementById(id) : undefined);
+    }, ...(ngDevMode ? [{ debugName: "items" }] : []));
+    typeAttr(el) {
+        const type = el.getAttribute('type');
+        return type ? `[type=${type}]` : '';
+    }
+    static ɵfac = function A11yKeyboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11yKeyboardComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yKeyboardComponent, selectors: [["prism-a11y-keyboard"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 4, vars: 1, consts: [[1, "prism-a11y-kbd"], [1, "prism-a11y-kbd__empty"], [1, "prism-a11y-kbd__header"], [1, "prism-a11y-kbd__overlay-badge"], [1, "prism-a11y-kbd__list"], [1, "prism-a11y-kbd__item"], [1, "prism-a11y-kbd__num"], [1, "prism-a11y-kbd__info"], [1, "prism-a11y-kbd__tag"], [1, "prism-a11y-kbd__states"], [1, "prism-a11y-kbd__name"], [1, "prism-a11y-kbd__source"], [1, "prism-a11y-kbd__state"]], template: function A11yKeyboardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0);
+            i0.ɵɵconditionalCreate(1, A11yKeyboardComponent_Conditional_1_Template, 2, 0, "div", 1)(2, A11yKeyboardComponent_Conditional_2_Template, 2, 0, "div", 1)(3, A11yKeyboardComponent_Conditional_3_Template, 8, 1);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.rendererService.renderedElement() ? 1 : !ctx.items().length ? 2 : 3);
+        } }, styles: ["[_nghost-%COMP%] { display: flex; flex-direction: column; height: 100%; }\n\n    .prism-a11y-kbd[_ngcontent-%COMP%] { height: 100%; display: flex; flex-direction: column; }\n\n    .prism-a11y-kbd__empty[_ngcontent-%COMP%] {\n      display: flex; align-items: center; justify-content: center;\n      min-height: 100px; color: var(--prism-text-muted); font-size: 13px;\n    }\n\n    .prism-a11y-kbd__header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 16px;\n      border-bottom: 1px solid var(--prism-border);\n      font-size: 12px;\n      color: var(--prism-text-muted);\n      flex-shrink: 0;\n    }\n\n    .prism-a11y-kbd__overlay-badge[_ngcontent-%COMP%] {\n      margin-left: auto;\n      padding: 2px 8px;\n      border-radius: 10px;\n      font-size: 11px;\n      font-weight: 600;\n      background: color-mix(in srgb, #818cf8 12%, transparent);\n      color: #818cf8;\n      border: 1px solid color-mix(in srgb, #818cf8 22%, transparent);\n    }\n\n    .prism-a11y-kbd__list[_ngcontent-%COMP%] { flex: 1; overflow: auto; }\n\n    .prism-a11y-kbd__item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: flex-start;\n      gap: 12px;\n      padding: 10px 16px;\n      border-bottom: 1px solid var(--prism-border);\n    }\n    .prism-a11y-kbd__item[_ngcontent-%COMP%]:hover { background: rgba(129, 140, 248, 0.04); }\n\n    .prism-a11y-kbd__num[_ngcontent-%COMP%] {\n      width: 20px; height: 20px;\n      background: #818cf8;\n      color: white;\n      border-radius: 50%;\n      font-size: 10px; font-weight: 700;\n      display: flex; align-items: center; justify-content: center;\n      flex-shrink: 0; margin-top: 1px;\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n    }\n\n    .prism-a11y-kbd__info[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .prism-a11y-kbd__tag[_ngcontent-%COMP%] {\n      font-family: var(--prism-font-mono, monospace);\n      font-size: 12px;\n      color: var(--prism-primary);\n    }\n\n    .prism-a11y-kbd__name[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: var(--prism-text-2);\n    }\n\n    .prism-a11y-kbd__source[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--prism-text-muted);\n    }\n\n    .prism-a11y-kbd__states[_ngcontent-%COMP%] {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 4px;\n      margin-top: 2px;\n    }\n\n    .prism-a11y-kbd__state[_ngcontent-%COMP%] {\n      padding: 0 5px;\n      border-radius: 3px;\n      font-size: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      background: color-mix(in srgb, #fbbf24 12%, transparent);\n      color: #fbbf24;\n    }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yKeyboardComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-a11y-keyboard', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="prism-a11y-kbd">
+      @if (!rendererService.renderedElement()) {
+        <div class="prism-a11y-kbd__empty">Select a component to inspect keyboard navigation.</div>
+      } @else if (!items().length) {
+        <div class="prism-a11y-kbd__empty">No focusable elements found.</div>
+      } @else {
+        <div class="prism-a11y-kbd__header">
+          <span>{{ items().length }} fokussierbare Elemente</span>
+          <span class="prism-a11y-kbd__overlay-badge">● Overlay aktiv</span>
+        </div>
+        <div class="prism-a11y-kbd__list">
+          @for (item of items(); track item.index) {
+            <div class="prism-a11y-kbd__item">
+              <div class="prism-a11y-kbd__num">{{ item.index }}</div>
+              <div class="prism-a11y-kbd__info">
+                <span class="prism-a11y-kbd__tag">{{ item.element.tagName.toLowerCase() }}{{ typeAttr(item.element) }}</span>
+                @if (item.name) {
+                  <span class="prism-a11y-kbd__name">"{{ item.name }}"</span>
+                  <span class="prism-a11y-kbd__source">via {{ item.nameSource }}</span>
+                }
+                @if (item.states.length) {
+                  <div class="prism-a11y-kbd__states">
+                    @for (s of item.states; track s) {
+                      <span class="prism-a11y-kbd__state">{{ s }}</span>
+                    }
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, styles: ["\n    :host { display: flex; flex-direction: column; height: 100%; }\n\n    .prism-a11y-kbd { height: 100%; display: flex; flex-direction: column; }\n\n    .prism-a11y-kbd__empty {\n      display: flex; align-items: center; justify-content: center;\n      min-height: 100px; color: var(--prism-text-muted); font-size: 13px;\n    }\n\n    .prism-a11y-kbd__header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 16px;\n      border-bottom: 1px solid var(--prism-border);\n      font-size: 12px;\n      color: var(--prism-text-muted);\n      flex-shrink: 0;\n    }\n\n    .prism-a11y-kbd__overlay-badge {\n      margin-left: auto;\n      padding: 2px 8px;\n      border-radius: 10px;\n      font-size: 11px;\n      font-weight: 600;\n      background: color-mix(in srgb, #818cf8 12%, transparent);\n      color: #818cf8;\n      border: 1px solid color-mix(in srgb, #818cf8 22%, transparent);\n    }\n\n    .prism-a11y-kbd__list { flex: 1; overflow: auto; }\n\n    .prism-a11y-kbd__item {\n      display: flex;\n      align-items: flex-start;\n      gap: 12px;\n      padding: 10px 16px;\n      border-bottom: 1px solid var(--prism-border);\n    }\n    .prism-a11y-kbd__item:hover { background: rgba(129, 140, 248, 0.04); }\n\n    .prism-a11y-kbd__num {\n      width: 20px; height: 20px;\n      background: #818cf8;\n      color: white;\n      border-radius: 50%;\n      font-size: 10px; font-weight: 700;\n      display: flex; align-items: center; justify-content: center;\n      flex-shrink: 0; margin-top: 1px;\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n    }\n\n    .prism-a11y-kbd__info {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .prism-a11y-kbd__tag {\n      font-family: var(--prism-font-mono, monospace);\n      font-size: 12px;\n      color: var(--prism-primary);\n    }\n\n    .prism-a11y-kbd__name {\n      font-size: 12px;\n      color: var(--prism-text-2);\n    }\n\n    .prism-a11y-kbd__source {\n      font-size: 11px;\n      color: var(--prism-text-muted);\n    }\n\n    .prism-a11y-kbd__states {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 4px;\n      margin-top: 2px;\n    }\n\n    .prism-a11y-kbd__state {\n      padding: 0 5px;\n      border-radius: 3px;\n      font-size: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      background: color-mix(in srgb, #fbbf24 12%, transparent);\n      color: #fbbf24;\n    }\n  "] }]
+    }], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yKeyboardComponent, { className: "A11yKeyboardComponent", filePath: "app/panels/a11y/a11y-keyboard.component.ts", lineNumber: 139 }); })();

package/dist/app/panels/a11y/a11y-keyboard.service.d.ts

@@ -0,0 +1,8 @@
+import type { FocusableElement } from './a11y.types.js';
+import * as i0 from "@angular/core";
+export declare class A11yKeyboardService {
+    extractTabOrder(root: Element, getById?: (id: string) => Element | null): FocusableElement[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<A11yKeyboardService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<A11yKeyboardService>;
+}
+//# sourceMappingURL=a11y-keyboard.service.d.ts.map

package/dist/app/panels/a11y/a11y-keyboard.service.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"a11y-keyboard.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-keyboard.service.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;;AA2BxD,qBACa,mBAAmB;IAC9B,eAAe,CACb,IAAI,EAAE,OAAO,EACb,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,GACvC,gBAAgB,EAAE;yCAJV,mBAAmB;6CAAnB,mBAAmB;CAyB/B"}

package/dist/app/panels/a11y/a11y-keyboard.service.js

@@ -0,0 +1,71 @@
+import { Injectable } from '@angular/core';
+import { computeAccessibleName, getRole } from './a11y-dom-utils.js';
+import * as i0 from "@angular/core";
+const FOCUSABLE_SELECTOR = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+    '[contenteditable="true"]',
+].join(', ');
+function getTabindex(element) {
+    const attr = element.getAttribute('tabindex');
+    if (attr === null)
+        return 0;
+    return parseInt(attr, 10);
+}
+function sortByTabOrder(elements) {
+    const positive = elements.filter((el) => getTabindex(el) > 0);
+    const natural = elements.filter((el) => getTabindex(el) === 0);
+    positive.sort((a, b) => getTabindex(a) - getTabindex(b));
+    return [...positive, ...natural];
+}
+export class A11yKeyboardService {
+    extractTabOrder(root, getById) {
+        const found = Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR));
+        const sorted = sortByTabOrder(found);
+        return sorted.map((element, i) => {
+            const { name, source } = computeAccessibleName(element, getById);
+            const role = getRole(element);
+            const states = extractFocusableStates(element);
+            const tabindex = element.getAttribute('tabindex');
+            return {
+                element,
+                index: i + 1,
+                role,
+                name,
+                nameSource: source,
+                states,
+                tabindex: tabindex !== null ? parseInt(tabindex, 10) : null,
+            };
+        });
+    }
+    static ɵfac = function A11yKeyboardService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11yKeyboardService)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: A11yKeyboardService, factory: A11yKeyboardService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yKeyboardService, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], null, null); })();
+function extractFocusableStates(element) {
+    const states = [];
+    if (element.getAttribute('aria-required') === 'true' || element.hasAttribute('required')) {
+        states.push('required');
+    }
+    if (element.getAttribute('aria-disabled') === 'true') {
+        states.push('disabled');
+    }
+    const checked = element.getAttribute('aria-checked');
+    if (checked === 'true')
+        states.push('checked');
+    if (checked === 'false')
+        states.push('unchecked');
+    const expanded = element.getAttribute('aria-expanded');
+    if (expanded === 'true')
+        states.push('expanded');
+    if (expanded === 'false')
+        states.push('collapsed');
+    return states;
+}