@ng-prism/core 22.2.1 → 22.3.0

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

@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component, computed, inject, } from '@angular/core';
-import { A11yKeyboardService } from './a11y-keyboard.service.js';
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { PrismRendererService } from '../../services/prism-renderer.service.js';
+import { A11yKeyboardService } from './a11y-keyboard.service.js';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.index;
 function A11yKeyboardComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
@@ -71,41 +71,10 @@ export class A11yKeyboardComponent {
             i0.ɵɵconditionalCreate(0, A11yKeyboardComponent_Conditional_0_Template, 2, 0, "div", 0)(1, A11yKeyboardComponent_Conditional_1_Template, 2, 0, "div", 0)(2, A11yKeyboardComponent_Conditional_2_Template, 3, 0, "div", 1);
         } if (rf & 2) {
             i0.ɵɵconditional(!ctx.rendererService.renderedElement() ? 0 : !ctx.items().length ? 1 : 2);
-        } }, styles: ["[_nghost-%COMP%] { display: block; height: 100%; overflow: auto; }\n\n    .kb-empty[_ngcontent-%COMP%] {\n      display: flex; align-items: center; justify-content: center;\n      min-height: 100px; color: var(--%NS%prism-text-muted); font-size: 13px;\n    }\n\n    .kb-body[_ngcontent-%COMP%] {\n      padding: 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .kb-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 110px 1fr auto;\n      align-items: center;\n      gap: 12px;\n      padding: 9px 14px;\n      background: var(--%NS%prism-bg-surface);\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: 8px;\n    }\n\n    .kb-keys[_ngcontent-%COMP%] { display: flex; gap: 4px; }\n    .kb-keys[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: 10.5px;\n      padding: 1px 5px;\n      border-radius: 4px;\n      background: var(--%NS%prism-input-bg);\n      border: 1px solid var(--%NS%prism-border);\n      color: var(--%NS%prism-text-muted);\n    }\n\n    .kb-desc[_ngcontent-%COMP%] {\n      font-size: 12.5px;\n      color: var(--%NS%prism-text-2);\n    }\n\n    .kb-tgt[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: 11px;\n      color: var(--%NS%prism-primary);\n      padding: 2px 7px;\n      background: color-mix(in srgb, var(--%NS%prism-primary) 10%, transparent);\n      border-radius: var(--%NS%radius-xs);\n    }"] });
+        } }, styles: ["[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n    overflow: auto;\n}\n\n.kb-empty[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 100px;\n    font-size: 13px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.kb-body[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    padding: 16px 20px;\n}\n\n.kb-row[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 110px 1fr auto;\n    gap: 12px;\n    align-items: center;\n    padding: 9px 14px;\n    background: var(--%NS%prism-bg-surface);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 8px;\n}\n\n.kb-keys[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n}\n\n.kb-keys[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n    padding: 1px 5px;\n    font-family: var(--%NS%font-mono);\n    font-size: 10.5px;\n    color: var(--%NS%prism-text-muted);\n    background: var(--%NS%prism-input-bg);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 4px;\n}\n\n.kb-desc[_ngcontent-%COMP%] {\n    font-size: 12.5px;\n    color: var(--%NS%prism-text-2);\n}\n\n.kb-tgt[_ngcontent-%COMP%] {\n    padding: 2px 7px;\n    font-family: var(--%NS%font-mono);\n    font-size: 11px;\n    color: var(--%NS%prism-primary);\n    background: color-mix(in srgb, var(--%NS%prism-primary) 10%, transparent);\n    border-radius: var(--%NS%radius-xs);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yKeyboardComponent, [{
         type: Component,
-        args: [{ selector: 'prism-a11y-keyboard', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @if (!rendererService.renderedElement()) {
-    <div class="kb-empty">
-      Select a component to inspect keyboard navigation.
-    </div>
-    } @else if (!items().length) {
-    <div class="kb-empty">No focusable elements found.</div>
-    } @else {
-    <div class="kb-body">
-      @for (item of items(); track item.index) {
-      <div class="kb-row">
-        <div class="kb-keys">
-          <kbd>Tab {{ item.index }}</kbd>
-        </div>
-        <div class="kb-desc">
-          {{
-            item.name
-              ? '"' + item.name + '"'
-              : item.element.tagName.toLowerCase() + typeAttr(item.element)
-          }}
-          @if (item.states.length) { · {{ item.states.join(', ') }}
-          }
-        </div>
-        <span class="kb-tgt"
-          >{{ item.element.tagName.toLowerCase()
-          }}{{ typeAttr(item.element) }}</span
-        >
-      </div>
-      }
-    </div>
-    }
-  `, styles: ["\n    :host { display: block; height: 100%; overflow: auto; }\n\n    .kb-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    .kb-body {\n      padding: 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .kb-row {\n      display: grid;\n      grid-template-columns: 110px 1fr auto;\n      align-items: center;\n      gap: 12px;\n      padding: 9px 14px;\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-radius: 8px;\n    }\n\n    .kb-keys { display: flex; gap: 4px; }\n    .kb-keys kbd {\n      font-family: var(--font-mono);\n      font-size: 10.5px;\n      padding: 1px 5px;\n      border-radius: 4px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n    }\n\n    .kb-desc {\n      font-size: 12.5px;\n      color: var(--prism-text-2);\n    }\n\n    .kb-tgt {\n      font-family: var(--font-mono);\n      font-size: 11px;\n      color: var(--prism-primary);\n      padding: 2px 7px;\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      border-radius: var(--radius-xs);\n    }\n  "] }]
+        args: [{ selector: 'prism-a11y-keyboard', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!rendererService.renderedElement()) {\n    <div class=\"kb-empty\"> Select a component to inspect keyboard navigation. </div>\n} @else if (!items().length) {\n    <div class=\"kb-empty\">No focusable elements found.</div>\n} @else {\n    <div class=\"kb-body\">\n        @for (item of items(); track item.index) {\n            <div class=\"kb-row\">\n                <div class=\"kb-keys\">\n                    <kbd>Tab {{ item.index }}</kbd>\n                </div>\n                <div class=\"kb-desc\">\n                    {{ item.name ? '\"' + item.name + '\"' : item.element.tagName.toLowerCase() + typeAttr(item.element) }}\n                    @if (item.states.length) {\n                        \u00B7 {{ item.states.join(', ') }}\n                    }\n                </div>\n                <span class=\"kb-tgt\">{{ item.element.tagName.toLowerCase() }}{{ typeAttr(item.element) }}</span>\n            </div>\n        }\n    </div>\n}\n", styles: [":host {\n    display: block;\n    height: 100%;\n    overflow: auto;\n}\n\n.kb-empty {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 100px;\n    font-size: 13px;\n    color: var(--prism-text-muted);\n}\n\n.kb-body {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    padding: 16px 20px;\n}\n\n.kb-row {\n    display: grid;\n    grid-template-columns: 110px 1fr auto;\n    gap: 12px;\n    align-items: center;\n    padding: 9px 14px;\n    background: var(--prism-bg-surface);\n    border: 1px solid var(--prism-border);\n    border-radius: 8px;\n}\n\n.kb-keys {\n    display: flex;\n    gap: 4px;\n}\n\n.kb-keys kbd {\n    padding: 1px 5px;\n    font-family: var(--font-mono);\n    font-size: 10.5px;\n    color: var(--prism-text-muted);\n    background: var(--prism-input-bg);\n    border: 1px solid var(--prism-border);\n    border-radius: 4px;\n}\n\n.kb-desc {\n    font-size: 12.5px;\n    color: var(--prism-text-2);\n}\n\n.kb-tgt {\n    padding: 2px 7px;\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--prism-primary);\n    background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n    border-radius: var(--radius-xs);\n}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yKeyboardComponent, { className: "A11yKeyboardComponent", filePath: "app/panels/a11y/a11y-keyboard.component.ts", lineNumber: 98 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yKeyboardComponent, { className: "A11yKeyboardComponent", filePath: "app/panels/a11y/a11y-keyboard.component.ts", lineNumber: 12 }); })();

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

@@ -1 +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;;CAyB/B"}
+{"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;;AA4BxD,qBACa,mBAAmB;IAC5B,eAAe,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,GAAG,gBAAgB,EAAE;yCADnF,mBAAmB;;CAsB/B"}

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

@@ -8,7 +8,7 @@ const FOCUSABLE_SELECTOR = [
     'select:not([disabled])',
     'textarea:not([disabled])',
     '[tabindex]:not([tabindex="-1"])',
-    '[contenteditable="true"]',
+    '[contenteditable="true"]'
 ].join(', ');
 function getTabindex(element) {
     const attr = element.getAttribute('tabindex');
@@ -38,7 +38,7 @@ export class A11yKeyboardService {
                 name,
                 nameSource: source,
                 states,
-                tabindex: tabindex !== null ? parseInt(tabindex, 10) : null,
+                tabindex: tabindex !== null ? parseInt(tabindex, 10) : null
             };
         });
     }

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

@@ -1 +1 @@
-{"version":3,"file":"a11y-overlay-host.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-overlay-host.component.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAEhF,UAAU,MAAM;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,qBAyDa,wBAAwB;IACnC,QAAQ,CAAC,eAAe,4DAA0C;IAClE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA+B;IAC/D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAmC;IAE9D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAa;IAExC,SAAS,CAAC,QAAQ,CAAC,MAAM,gDActB;IAEH,SAAS,CAAC,QAAQ,CAAC,SAAS,gDAKzB;IAEH,SAAS,CAAC,QAAQ,CAAC,QAAQ,gDAUxB;;yCAxCQ,wBAAwB;2CAAxB,wBAAwB;CA2DpC"}
+{"version":3,"file":"a11y-overlay-host.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-overlay-host.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAGhF,UAAU,MAAM;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,qBAOa,wBAAwB;IACjC,QAAQ,CAAC,eAAe,4DAA0C;IAClE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA+B;IAC/D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAmC;IAE9D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAa;IAExC,SAAS,CAAC,QAAQ,CAAC,MAAM,gDAiBtB;IAEH,SAAS,CAAC,QAAQ,CAAC,SAAS,gDAOzB;IAEH,SAAS,CAAC,QAAQ,CAAC,QAAQ,gDASxB;;yCA5CM,wBAAwB;2CAAxB,wBAAwB;CAkEpC"}

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, effect, ElementRef, inject, input, signal, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, ElementRef, inject, input, signal } from '@angular/core';
 import { A11yKeyboardService } from './a11y-keyboard.service.js';
 import * as i0 from "@angular/core";
 function A11yOverlayHostComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -57,7 +57,7 @@ export class A11yOverlayHostComponent {
             top: elRect.top - parentRect.top,
             left: elRect.left - parentRect.left,
             width: elRect.width,
-            height: elRect.height,
+            height: elRect.height
         };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "bounds" }] : /* istanbul ignore next */ []));
@@ -104,40 +104,13 @@ export class A11yOverlayHostComponent {
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.bounds()) ? 0 : -1, tmp_0_0);
-        } }, styles: ["[_nghost-%COMP%] { display: contents; }\n    .a11y-mark[_ngcontent-%COMP%] {\n      position: absolute;\n      pointer-events: none;\n      z-index: 1;\n    }\n    .outline[_ngcontent-%COMP%] {\n      border: 2px solid rgba(59, 130, 246, 0.95);\n      border-radius: 4px;\n      background: rgba(59, 130, 246, 0.08);\n    }\n    .tag[_ngcontent-%COMP%] {\n      display: inline-block;\n      padding: 2px 6px;\n      border-radius: 4px;\n      background: rgba(17, 24, 39, 0.92);\n      color: var(--%NS%prism-text-light, #fff);\n      font: 11px/1.4 var(--%NS%font-mono);\n      white-space: nowrap;\n      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);\n    }\n    .kb[_ngcontent-%COMP%]   .tag[_ngcontent-%COMP%] { background: rgba(5, 150, 105, 0.95); }"] });
+        } }, styles: ["[_nghost-%COMP%] {\n    display: contents;\n}\n\n.a11y-mark[_ngcontent-%COMP%] {\n    position: absolute;\n    z-index: 1;\n    pointer-events: none;\n}\n\n.outline[_ngcontent-%COMP%] {\n    background: rgb(59 130 246 / 8%);\n    border: 2px solid rgb(59 130 246 / 95%);\n    border-radius: 4px;\n}\n\n.tag[_ngcontent-%COMP%] {\n    display: inline-block;\n    padding: 2px 6px;\n    font: 11px/1.4 var(--%NS%font-mono);\n    color: var(--%NS%prism-text-light, #fff);\n    white-space: nowrap;\n    background: rgb(17 24 39 / 92%);\n    border-radius: 4px;\n    box-shadow: 0 1px 2px rgb(0 0 0 / 35%);\n}\n\n.kb[_ngcontent-%COMP%]   .tag[_ngcontent-%COMP%] {\n    background: rgb(5 150 105 / 95%);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yOverlayHostComponent, [{
         type: Component,
-        args: [{ selector: 'prism-a11y-overlay-host', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @if (bounds(); as b) {
-    <div
-      class="a11y-mark outline"
-      [style.top.px]="b.top"
-      [style.left.px]="b.left"
-      [style.width.px]="b.width"
-      [style.height.px]="b.height"
-    ></div>
-    @if (roleLabel()) {
-    <div
-      class="a11y-mark"
-      [style.top.px]="b.top - 22"
-      [style.left.px]="b.left - 2"
-    >
-      <span class="tag">{{ roleLabel() }}</span>
-    </div>
-    } @if (tabLabel()) {
-    <div
-      class="a11y-mark kb"
-      [style.top.px]="b.top + b.height + 4"
-      [style.left.px]="b.left + b.width + 2"
-      style="transform: translateX(-100%)"
-    >
-      <span class="tag">{{ tabLabel() }}</span>
-    </div>
-    } }
-  `, styles: ["\n    :host { display: contents; }\n    .a11y-mark {\n      position: absolute;\n      pointer-events: none;\n      z-index: 1;\n    }\n    .outline {\n      border: 2px solid rgba(59, 130, 246, 0.95);\n      border-radius: 4px;\n      background: rgba(59, 130, 246, 0.08);\n    }\n    .tag {\n      display: inline-block;\n      padding: 2px 6px;\n      border-radius: 4px;\n      background: rgba(17, 24, 39, 0.92);\n      color: var(--prism-text-light, #fff);\n      font: 11px/1.4 var(--font-mono);\n      white-space: nowrap;\n      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);\n    }\n    .kb .tag { background: rgba(5, 150, 105, 0.95); }\n  "] }]
+        args: [{ selector: 'prism-a11y-overlay-host', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (bounds(); as b) {\n    <div\n        class=\"a11y-mark outline\"\n        [style.top.px]=\"b.top\"\n        [style.left.px]=\"b.left\"\n        [style.width.px]=\"b.width\"\n        [style.height.px]=\"b.height\"></div>\n    @if (roleLabel()) {\n        <div\n            class=\"a11y-mark\"\n            [style.top.px]=\"b.top - 22\"\n            [style.left.px]=\"b.left - 2\">\n            <span class=\"tag\">{{ roleLabel() }}</span>\n        </div>\n    }\n    @if (tabLabel()) {\n        <div\n            class=\"a11y-mark kb\"\n            [style.top.px]=\"b.top + b.height + 4\"\n            [style.left.px]=\"b.left + b.width + 2\"\n            style=\"transform: translateX(-100%)\">\n            <span class=\"tag\">{{ tabLabel() }}</span>\n        </div>\n    }\n}\n", styles: [":host {\n    display: contents;\n}\n\n.a11y-mark {\n    position: absolute;\n    z-index: 1;\n    pointer-events: none;\n}\n\n.outline {\n    background: rgb(59 130 246 / 8%);\n    border: 2px solid rgb(59 130 246 / 95%);\n    border-radius: 4px;\n}\n\n.tag {\n    display: inline-block;\n    padding: 2px 6px;\n    font: 11px/1.4 var(--font-mono);\n    color: var(--prism-text-light, #fff);\n    white-space: nowrap;\n    background: rgb(17 24 39 / 92%);\n    border-radius: 4px;\n    box-shadow: 0 1px 2px rgb(0 0 0 / 35%);\n}\n\n.kb .tag {\n    background: rgb(5 150 105 / 95%);\n}\n"] }]
     }], () => [], { rendererService: [{ type: i0.Input, args: [{ isSignal: true, alias: "rendererService", required: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yOverlayHostComponent, { className: "A11yOverlayHostComponent", filePath: "app/panels/a11y/a11y-overlay-host.component.ts", lineNumber: 78 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yOverlayHostComponent, { className: "A11yOverlayHostComponent", filePath: "app/panels/a11y/a11y-overlay-host.component.ts", lineNumber: 19 }); })();
 function implicitRole(el) {
     const tag = el.tagName.toLowerCase();
     if (tag === 'button')

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

@@ -1 +1 @@
-{"version":3,"file":"a11y-panel-state.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-panel-state.service.ts"],"names":[],"mappings":";AAEA,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,IAAI,CAAC;AAEnE,qBACa,qBAAqB;IAChC,QAAQ,CAAC,SAAS,qDAAoC;yCAD3C,qBAAqB;;CAEjC"}
+{"version":3,"file":"a11y-panel-state.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-panel-state.service.ts"],"names":[],"mappings":";AAEA,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,IAAI,CAAC;AAEnE,qBACa,qBAAqB;IAC9B,QAAQ,CAAC,SAAS,qDAAoC;yCAD7C,qBAAqB;;CAEjC"}

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

@@ -1,5 +1,5 @@
-import { A11yPanelStateService } from './a11y-panel-state.service.js';
 import type { RuntimeComponent } from '../../../plugin/plugin.types.js';
+import { A11yPanelStateService } from './a11y-panel-state.service.js';
 import * as i0 from "@angular/core";
 export declare class A11yPanelComponent {
     private readonly auditService;

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

@@ -1 +1 @@
-{"version":3,"file":"a11y-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-panel.component.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;;AAExE,qBAgJa,kBAAkB;IAC7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IACzD,SAAS,CAAC,QAAQ,CAAC,KAAK,wBAAiC;IAEzD,QAAQ,CAAC,eAAe,+DAAwC;IAEhE,SAAS,CAAC,QAAQ,CAAC,QAAQ,0CAIxB;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,gDAG9B;yCAfQ,kBAAkB;2CAAlB,kBAAkB;CAgB9B"}
+{"version":3,"file":"a11y-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-panel.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAGxE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;;AAMtE,qBAQa,kBAAkB;IAC3B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IACzD,SAAS,CAAC,QAAQ,CAAC,KAAK,wBAAiC;IAEzD,QAAQ,CAAC,eAAe,+DAAwC;IAEhE,SAAS,CAAC,QAAQ,CAAC,QAAQ,0CAKxB;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,gDAI9B;yCAjBM,kBAAkB;2CAAlB,kBAAkB;CAkB9B"}

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

@@ -1,10 +1,10 @@
-import { ChangeDetectionStrategy, Component, computed, inject, input, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { A11yAuditService } from './a11y-audit.service.js';
-import { A11yViolationsComponent } from './a11y-violations.component.js';
 import { A11yKeyboardComponent } from './a11y-keyboard.component.js';
-import { A11yTreeComponent } from './a11y-tree.component.js';
-import { A11ySrComponent } from './a11y-sr.component.js';
 import { A11yPanelStateService } from './a11y-panel-state.service.js';
+import { A11ySrComponent } from './a11y-sr.component.js';
+import { A11yTreeComponent } from './a11y-tree.component.js';
+import { A11yViolationsComponent } from './a11y-violations.component.js';
 import * as i0 from "@angular/core";
 function A11yPanelComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 6);
@@ -91,72 +91,10 @@ export class A11yPanelComponent {
             i0.ɵɵclassProp("st-tab--active", ctx.state.activeTab() === "sr");
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.disabled() ? 12 : 13);
-        } }, dependencies: [A11yViolationsComponent,
-            A11yKeyboardComponent,
-            A11yTreeComponent,
-            A11ySrComponent], styles: ["[_nghost-%COMP%] { display: flex; flex-direction: column; height: 100%; }\n\n    .a11y-panel[_ngcontent-%COMP%] { display: flex; flex-direction: column; height: 100%; }\n\n    .subtabs[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 2px;\n      padding: 10px 20px 0;\n      border-bottom: 1px solid var(--%NS%prism-border);\n      background: var(--%NS%prism-bg-elevated);\n      position: sticky;\n      top: 0;\n      z-index: 2;\n    }\n\n    .st-tab[_ngcontent-%COMP%] {\n      padding: 7px 12px;\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--%NS%prism-text-muted);\n      border-radius: var(--%NS%radius-sm) var(--%NS%radius-sm) 0 0;\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--%NS%font-sans);\n      transition: color var(--%NS%dur-fast);\n    }\n    .st-tab[_ngcontent-%COMP%]:hover { color: var(--%NS%prism-text-2); }\n    .st-tab--active[_ngcontent-%COMP%] { color: var(--%NS%prism-text); }\n    .st-tab--%NS%active[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      left: 8px;\n      right: 8px;\n      bottom: -1px;\n      height: 2px;\n      background: var(--%NS%prism-primary);\n      border-radius: 1px;\n    }\n\n    .st-badge[_ngcontent-%COMP%] {\n      min-width: 16px;\n      height: 16px;\n      padding: 0 5px;\n      border-radius: 8px;\n      font-family: var(--%NS%font-mono);\n      font-size: 10px;\n      font-weight: 700;\n      display: grid;\n      place-items: center;\n      background: color-mix(in srgb, var(--%NS%prism-primary) 18%, transparent);\n      color: var(--%NS%prism-primary);\n    }\n    .st-badge--ok[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--%NS%prism-success) 18%, transparent);\n      color: var(--%NS%prism-success);\n    }\n    .st-badge--warn[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--%NS%prism-warn) 18%, transparent);\n      color: var(--%NS%prism-warn);\n    }\n\n    .a11y-content[_ngcontent-%COMP%] { flex: 1; overflow: auto; min-height: 0; }\n\n    .a11y-disabled[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 100px;\n      color: var(--%NS%prism-text-muted);\n      font-size: 13px;\n    }"] });
+        } }, dependencies: [A11yViolationsComponent, A11yKeyboardComponent, A11yTreeComponent, A11ySrComponent], styles: ["[_nghost-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n.a11y-panel[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n.subtabs[_ngcontent-%COMP%] {\n    position: sticky;\n    top: 0;\n    z-index: 2;\n    display: flex;\n    gap: 2px;\n    padding: 10px 20px 0;\n    background: var(--%NS%prism-bg-elevated);\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.st-tab[_ngcontent-%COMP%] {\n    position: relative;\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    padding: 7px 12px;\n    font-family: var(--%NS%font-sans);\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--%NS%prism-text-muted);\n    cursor: pointer;\n    background: none;\n    border: none;\n    border-radius: var(--%NS%radius-sm) var(--%NS%radius-sm) 0 0;\n    transition: color var(--%NS%dur-fast);\n}\n\n.st-tab[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text-2);\n}\n\n.st-tab--active[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text);\n}\n\n.st-tab--%NS%active[_ngcontent-%COMP%]::after {\n    position: absolute;\n    right: 8px;\n    bottom: -1px;\n    left: 8px;\n    height: 2px;\n    content: '';\n    background: var(--%NS%prism-primary);\n    border-radius: 1px;\n}\n\n.st-badge[_ngcontent-%COMP%] {\n    display: grid;\n    place-items: center;\n    min-width: 16px;\n    height: 16px;\n    padding: 0 5px;\n    font-family: var(--%NS%font-mono);\n    font-size: 10px;\n    font-weight: 700;\n    color: var(--%NS%prism-primary);\n    background: color-mix(in srgb, var(--%NS%prism-primary) 18%, transparent);\n    border-radius: 8px;\n}\n\n.st-badge--ok[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-success);\n    background: color-mix(in srgb, var(--%NS%prism-success) 18%, transparent);\n}\n\n.st-badge--warn[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-warn);\n    background: color-mix(in srgb, var(--%NS%prism-warn) 18%, transparent);\n}\n\n.a11y-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n}\n\n.a11y-disabled[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 100px;\n    font-size: 13px;\n    color: var(--%NS%prism-text-muted);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yPanelComponent, [{
         type: Component,
-        args: [{ selector: 'prism-a11y-panel', standalone: true, imports: [
-                    A11yViolationsComponent,
-                    A11yKeyboardComponent,
-                    A11yTreeComponent,
-                    A11ySrComponent,
-                ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="a11y-panel">
-      <div class="subtabs">
-        <button
-          class="st-tab"
-          [class.st-tab--active]="state.activeTab() === 'violations'"
-          (click)="state.activeTab.set('violations')"
-        >
-          Violations @if (violationCount() !== null) {
-          <span
-            class="st-badge"
-            [class.st-badge--ok]="violationCount() === 0"
-            [class.st-badge--warn]="violationCount()! > 0"
-          >
-            {{ violationCount() }}
-          </span>
-          }
-        </button>
-        <button
-          class="st-tab"
-          [class.st-tab--active]="state.activeTab() === 'keyboard'"
-          (click)="state.activeTab.set('keyboard')"
-        >
-          Keyboard
-        </button>
-        <button
-          class="st-tab"
-          [class.st-tab--active]="state.activeTab() === 'tree'"
-          (click)="state.activeTab.set('tree')"
-        >
-          ARIA Tree
-        </button>
-        <button
-          class="st-tab"
-          [class.st-tab--active]="state.activeTab() === 'sr'"
-          (click)="state.activeTab.set('sr')"
-        >
-          Screen Reader
-        </button>
-      </div>
-
-      <div class="a11y-content">
-        @if (disabled()) {
-        <div class="a11y-disabled">
-          Accessibility audit disabled for this component.
-        </div>
-        } @else { @switch (state.activeTab()) { @case ('violations') {
-        <prism-a11y-violations /> } @case ('keyboard') {
-        <prism-a11y-keyboard /> } @case
-        ('tree') { <prism-a11y-tree /> }
-        @case ('sr') { <prism-a11y-sr /> }
-        } }
-      </div>
-    </div>
-  `, styles: ["\n    :host { display: flex; flex-direction: column; height: 100%; }\n\n    .a11y-panel { display: flex; flex-direction: column; height: 100%; }\n\n    .subtabs {\n      display: flex;\n      gap: 2px;\n      padding: 10px 20px 0;\n      border-bottom: 1px solid var(--prism-border);\n      background: var(--prism-bg-elevated);\n      position: sticky;\n      top: 0;\n      z-index: 2;\n    }\n\n    .st-tab {\n      padding: 7px 12px;\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--prism-text-muted);\n      border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--font-sans);\n      transition: color var(--dur-fast);\n    }\n    .st-tab:hover { color: var(--prism-text-2); }\n    .st-tab--active { color: var(--prism-text); }\n    .st-tab--active::after {\n      content: '';\n      position: absolute;\n      left: 8px;\n      right: 8px;\n      bottom: -1px;\n      height: 2px;\n      background: var(--prism-primary);\n      border-radius: 1px;\n    }\n\n    .st-badge {\n      min-width: 16px;\n      height: 16px;\n      padding: 0 5px;\n      border-radius: 8px;\n      font-family: var(--font-mono);\n      font-size: 10px;\n      font-weight: 700;\n      display: grid;\n      place-items: center;\n      background: color-mix(in srgb, var(--prism-primary) 18%, transparent);\n      color: var(--prism-primary);\n    }\n    .st-badge--ok {\n      background: color-mix(in srgb, var(--prism-success) 18%, transparent);\n      color: var(--prism-success);\n    }\n    .st-badge--warn {\n      background: color-mix(in srgb, var(--prism-warn) 18%, transparent);\n      color: var(--prism-warn);\n    }\n\n    .a11y-content { flex: 1; overflow: auto; min-height: 0; }\n\n    .a11y-disabled {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 100px;\n      color: var(--prism-text-muted);\n      font-size: 13px;\n    }\n  "] }]
+        args: [{ selector: 'prism-a11y-panel', standalone: true, imports: [A11yViolationsComponent, A11yKeyboardComponent, A11yTreeComponent, A11ySrComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"a11y-panel\">\n    <div class=\"subtabs\">\n        <button\n            class=\"st-tab\"\n            [class.st-tab--active]=\"state.activeTab() === 'violations'\"\n            (click)=\"state.activeTab.set('violations')\">\n            Violations\n            @if (violationCount() !== null) {\n                <span\n                    class=\"st-badge\"\n                    [class.st-badge--ok]=\"violationCount() === 0\"\n                    [class.st-badge--warn]=\"violationCount()! > 0\">\n                    {{ violationCount() }}\n                </span>\n            }\n        </button>\n        <button\n            class=\"st-tab\"\n            [class.st-tab--active]=\"state.activeTab() === 'keyboard'\"\n            (click)=\"state.activeTab.set('keyboard')\">\n            Keyboard\n        </button>\n        <button\n            class=\"st-tab\"\n            [class.st-tab--active]=\"state.activeTab() === 'tree'\"\n            (click)=\"state.activeTab.set('tree')\">\n            ARIA Tree\n        </button>\n        <button\n            class=\"st-tab\"\n            [class.st-tab--active]=\"state.activeTab() === 'sr'\"\n            (click)=\"state.activeTab.set('sr')\">\n            Screen Reader\n        </button>\n    </div>\n\n    <div class=\"a11y-content\">\n        @if (disabled()) {\n            <div class=\"a11y-disabled\"> Accessibility audit disabled for this component. </div>\n        } @else {\n            @switch (state.activeTab()) {\n                @case ('violations') {\n                    <prism-a11y-violations />\n                }\n                @case ('keyboard') {\n                    <prism-a11y-keyboard />\n                }\n                @case ('tree') {\n                    <prism-a11y-tree />\n                }\n                @case ('sr') {\n                    <prism-a11y-sr />\n                }\n            }\n        }\n    </div>\n</div>\n", styles: [":host {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n.a11y-panel {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n.subtabs {\n    position: sticky;\n    top: 0;\n    z-index: 2;\n    display: flex;\n    gap: 2px;\n    padding: 10px 20px 0;\n    background: var(--prism-bg-elevated);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.st-tab {\n    position: relative;\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    padding: 7px 12px;\n    font-family: var(--font-sans);\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--prism-text-muted);\n    cursor: pointer;\n    background: none;\n    border: none;\n    border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n    transition: color var(--dur-fast);\n}\n\n.st-tab:hover {\n    color: var(--prism-text-2);\n}\n\n.st-tab--active {\n    color: var(--prism-text);\n}\n\n.st-tab--active::after {\n    position: absolute;\n    right: 8px;\n    bottom: -1px;\n    left: 8px;\n    height: 2px;\n    content: '';\n    background: var(--prism-primary);\n    border-radius: 1px;\n}\n\n.st-badge {\n    display: grid;\n    place-items: center;\n    min-width: 16px;\n    height: 16px;\n    padding: 0 5px;\n    font-family: var(--font-mono);\n    font-size: 10px;\n    font-weight: 700;\n    color: var(--prism-primary);\n    background: color-mix(in srgb, var(--prism-primary) 18%, transparent);\n    border-radius: 8px;\n}\n\n.st-badge--ok {\n    color: var(--prism-success);\n    background: color-mix(in srgb, var(--prism-success) 18%, transparent);\n}\n\n.st-badge--warn {\n    color: var(--prism-warn);\n    background: color-mix(in srgb, var(--prism-warn) 18%, transparent);\n}\n\n.a11y-content {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n}\n\n.a11y-disabled {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 100px;\n    font-size: 13px;\n    color: var(--prism-text-muted);\n}\n"] }]
     }], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yPanelComponent, { className: "A11yPanelComponent", filePath: "app/panels/a11y/a11y-panel.component.ts", lineNumber: 161 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yPanelComponent, { className: "A11yPanelComponent", filePath: "app/panels/a11y/a11y-panel.component.ts", lineNumber: 19 }); })();

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

@@ -1 +1 @@
-{"version":3,"file":"a11y-perspective.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-perspective.service.ts"],"names":[],"mappings":";AAEA,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,eAAe,CAAC;AAE7D,qBACa,sBAAsB;IACjC,QAAQ,CAAC,IAAI,8DAAyC;yCAD3C,sBAAsB;;CAElC"}
+{"version":3,"file":"a11y-perspective.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-perspective.service.ts"],"names":[],"mappings":";AAEA,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,eAAe,CAAC;AAE7D,qBACa,sBAAsB;IAC/B,QAAQ,CAAC,IAAI,8DAAyC;yCAD7C,sBAAsB;;CAElC"}

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

@@ -1 +1 @@
-{"version":3,"file":"a11y-score.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-score.component.ts"],"names":[],"mappings":";AAWA,qBA0Fa,kBAAkB;IAC7B,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,QAAQ,CAAC,OAAO,+CAAgB;IAEhC,SAAS,CAAC,QAAQ,CAAC,UAAU,SAA0B;IACvD,SAAS,CAAC,QAAQ,CAAC,CAAC,MAAK;IACzB,SAAS,CAAC,QAAQ,CAAC,IAAI,SAAiB;IAExC,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAE3B;yCAVS,kBAAkB;2CAAlB,kBAAkB;CAW9B"}
+{"version":3,"file":"a11y-score.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-score.component.ts"],"names":[],"mappings":";AAMA,qBAOa,kBAAkB;IAC3B,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,QAAQ,CAAC,OAAO,+CAAgB;IAEhC,SAAS,CAAC,QAAQ,CAAC,UAAU,SAA0B;IACvD,SAAS,CAAC,QAAQ,CAAC,CAAC,MAAK;IACzB,SAAS,CAAC,QAAQ,CAAC,IAAI,SAAiB;IAExC,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAAwE;yCAR5F,kBAAkB;2CAAlB,kBAAkB;CAS9B"}

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, input, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import * as i0 from "@angular/core";
 function A11yScoreComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵdomElementStart(0, "div", 7)(1, "div", 8);
@@ -45,37 +45,10 @@ export class A11yScoreComponent {
             i0.ɵɵattribute("r", ctx.R)("stroke-dasharray", ctx.CIRC)("stroke-dashoffset", ctx.dashOffset())("stroke", "url(#" + ctx.gradientId + ")");
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.compact() ? 8 : -1);
-        } }, styles: ["[_nghost-%COMP%] { display: inline-flex; }\n\n    .score-ring[_ngcontent-%COMP%] {\n      position: relative;\n      width: 128px;\n      height: 128px;\n    }\n    .compact[_nghost-%COMP%]   .score-ring[_ngcontent-%COMP%], .compact   [_nghost-%COMP%]   .score-ring[_ngcontent-%COMP%], \n   [style*=\"width:18px\"][_nghost-%COMP%]   .score-ring[_ngcontent-%COMP%] {\n      width: 100%;\n      height: 100%;\n    }\n\n    .score-ring[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {\n      transform: rotate(-90deg);\n      width: 100%;\n      height: 100%;\n    }\n\n    .score-ring[_ngcontent-%COMP%]   circle[_ngcontent-%COMP%] {\n      fill: none;\n      stroke-width: 10;\n    }\n    .track[_ngcontent-%COMP%] { stroke: var(--%NS%prism-input-bg); }\n    .gradient-start[_ngcontent-%COMP%] { stop-color: var(--%NS%prism-primary); }\n    .gradient-end[_ngcontent-%COMP%] { stop-color: var(--%NS%prism-accent); }\n    .fill[_ngcontent-%COMP%] {\n      stroke-linecap: round;\n      transition: stroke-dashoffset 0.5s ease;\n    }\n\n    .score-val[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 0;\n    }\n    .score-num[_ngcontent-%COMP%] {\n      font-size: 30px;\n      font-weight: 700;\n      letter-spacing: -0.02em;\n      background: linear-gradient(135deg, var(--%NS%prism-primary), var(--%NS%prism-accent));\n      -webkit-background-clip: text;\n      background-clip: text;\n      color: transparent;\n      font-family: var(--%NS%font-mono);\n    }\n    .score-max[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--%NS%prism-text-ghost);\n      font-weight: 500;\n    }"] });
+        } }, styles: ["[_nghost-%COMP%] {\n    display: inline-flex;\n}\n\n.score-ring[_ngcontent-%COMP%] {\n    position: relative;\n    width: 128px;\n    height: 128px;\n}\n\n.compact[_nghost-%COMP%]   .score-ring[_ngcontent-%COMP%], .compact   [_nghost-%COMP%]   .score-ring[_ngcontent-%COMP%], \n[style*='width:18px'][_nghost-%COMP%]   .score-ring[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n}\n\n.score-ring[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    transform: rotate(-90deg);\n}\n\n.score-ring[_ngcontent-%COMP%]   circle[_ngcontent-%COMP%] {\n    fill: none;\n    stroke-width: 10;\n}\n\n.track[_ngcontent-%COMP%] {\n    stroke: var(--%NS%prism-input-bg);\n}\n\n.gradient-start[_ngcontent-%COMP%] {\n    stop-color: var(--%NS%prism-primary);\n}\n\n.gradient-end[_ngcontent-%COMP%] {\n    stop-color: var(--%NS%prism-accent);\n}\n\n.fill[_ngcontent-%COMP%] {\n    stroke-linecap: round;\n    transition: stroke-dashoffset 0.5s ease;\n}\n\n.score-val[_ngcontent-%COMP%] {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    align-items: center;\n    justify-content: center;\n}\n\n.score-num[_ngcontent-%COMP%] {\n    font-family: var(--%NS%font-mono);\n    font-size: 30px;\n    font-weight: 700;\n    color: transparent;\n    letter-spacing: -0.02em;\n    background: linear-gradient(135deg, var(--%NS%prism-primary), var(--%NS%prism-accent));\n    background-clip: text;\n}\n\n.score-max[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--%NS%prism-text-ghost);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yScoreComponent, [{
         type: Component,
-        args: [{ selector: 'prism-a11y-score', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="score-ring">
-      <svg viewBox="0 0 128 128">
-        <defs>
-          <linearGradient [id]="gradientId" x1="0" y1="0" x2="1" y2="1">
-            <stop offset="0%" class="gradient-start" />
-            <stop offset="100%" class="gradient-end" />
-          </linearGradient>
-        </defs>
-        <circle class="track" cx="64" cy="64" [attr.r]="R" />
-        <circle
-          class="fill"
-          cx="64"
-          cy="64"
-          [attr.r]="R"
-          [attr.stroke-dasharray]="CIRC"
-          [attr.stroke-dashoffset]="dashOffset()"
-          [attr.stroke]="'url(#' + gradientId + ')'"
-        />
-      </svg>
-      @if (!compact()) {
-      <div class="score-val">
-        <div class="score-num">{{ score() }}</div>
-        <div class="score-max">/ 100</div>
-      </div>
-      }
-    </div>
-  `, styles: ["\n    :host { display: inline-flex; }\n\n    .score-ring {\n      position: relative;\n      width: 128px;\n      height: 128px;\n    }\n    :host-context(.compact) .score-ring,\n    :host([style*=\"width:18px\"]) .score-ring {\n      width: 100%;\n      height: 100%;\n    }\n\n    .score-ring svg {\n      transform: rotate(-90deg);\n      width: 100%;\n      height: 100%;\n    }\n\n    .score-ring circle {\n      fill: none;\n      stroke-width: 10;\n    }\n    .track { stroke: var(--prism-input-bg); }\n    .gradient-start { stop-color: var(--prism-primary); }\n    .gradient-end { stop-color: var(--prism-accent); }\n    .fill {\n      stroke-linecap: round;\n      transition: stroke-dashoffset 0.5s ease;\n    }\n\n    .score-val {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 0;\n    }\n    .score-num {\n      font-size: 30px;\n      font-weight: 700;\n      letter-spacing: -0.02em;\n      background: linear-gradient(135deg, var(--prism-primary), var(--prism-accent));\n      -webkit-background-clip: text;\n      background-clip: text;\n      color: transparent;\n      font-family: var(--font-mono);\n    }\n    .score-max {\n      font-size: 11px;\n      color: var(--prism-text-ghost);\n      font-weight: 500;\n    }\n  "] }]
+        args: [{ selector: 'prism-a11y-score', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"score-ring\">\n    <svg viewBox=\"0 0 128 128\">\n        <defs>\n            <linearGradient\n                [id]=\"gradientId\"\n                x1=\"0\"\n                y1=\"0\"\n                x2=\"1\"\n                y2=\"1\">\n                <stop\n                    offset=\"0%\"\n                    class=\"gradient-start\" />\n                <stop\n                    offset=\"100%\"\n                    class=\"gradient-end\" />\n            </linearGradient>\n        </defs>\n        <circle\n            class=\"track\"\n            cx=\"64\"\n            cy=\"64\"\n            [attr.r]=\"R\" />\n        <circle\n            class=\"fill\"\n            cx=\"64\"\n            cy=\"64\"\n            [attr.r]=\"R\"\n            [attr.stroke-dasharray]=\"CIRC\"\n            [attr.stroke-dashoffset]=\"dashOffset()\"\n            [attr.stroke]=\"'url(#' + gradientId + ')'\" />\n    </svg>\n    @if (!compact()) {\n        <div class=\"score-val\">\n            <div class=\"score-num\">{{ score() }}</div>\n            <div class=\"score-max\">/ 100</div>\n        </div>\n    }\n</div>\n", styles: [":host {\n    display: inline-flex;\n}\n\n.score-ring {\n    position: relative;\n    width: 128px;\n    height: 128px;\n}\n\n:host-context(.compact) .score-ring,\n:host([style*='width:18px']) .score-ring {\n    width: 100%;\n    height: 100%;\n}\n\n.score-ring svg {\n    width: 100%;\n    height: 100%;\n    transform: rotate(-90deg);\n}\n\n.score-ring circle {\n    fill: none;\n    stroke-width: 10;\n}\n\n.track {\n    stroke: var(--prism-input-bg);\n}\n\n.gradient-start {\n    stop-color: var(--prism-primary);\n}\n\n.gradient-end {\n    stop-color: var(--prism-accent);\n}\n\n.fill {\n    stroke-linecap: round;\n    transition: stroke-dashoffset 0.5s ease;\n}\n\n.score-val {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    align-items: center;\n    justify-content: center;\n}\n\n.score-num {\n    font-family: var(--font-mono);\n    font-size: 30px;\n    font-weight: 700;\n    color: transparent;\n    letter-spacing: -0.02em;\n    background: linear-gradient(135deg, var(--prism-primary), var(--prism-accent));\n    background-clip: text;\n}\n\n.score-max {\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--prism-text-ghost);\n}\n"] }]
     }], null, { score: [{ type: i0.Input, args: [{ isSignal: true, alias: "score", required: true }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yScoreComponent, { className: "A11yScoreComponent", filePath: "app/panels/a11y/a11y-score.component.ts", lineNumber: 102 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yScoreComponent, { className: "A11yScoreComponent", filePath: "app/panels/a11y/a11y-score.component.ts", lineNumber: 14 }); })();

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

@@ -1 +1 @@
-{"version":3,"file":"a11y-sr-overlay.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-sr-overlay.component.ts"],"names":[],"mappings":";AAaA,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,qBAiEa,sBAAsB;IACjC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAkC;IAC9D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAiC;IAC5D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IACnD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAmC;IAE9D,SAAS,CAAC,QAAQ,CAAC,MAAM,4DAAiC;IAC1D,SAAS,CAAC,QAAQ,CAAC,WAAW,kDAAiB;IAE/C,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,KAAK,CAAuB;;IA0BpC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAOjC,OAAO,CAAC,aAAa;yCA5CV,sBAAsB;2CAAtB,sBAAsB;CA8ElC"}
+{"version":3,"file":"a11y-sr-overlay.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-sr-overlay.component.ts"],"names":[],"mappings":";AAMA,UAAU,eAAe;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,qBAOa,sBAAsB;IAC/B,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAkC;IAC9D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAiC;IAC5D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IACnD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAmC;IAE9D,SAAS,CAAC,QAAQ,CAAC,MAAM,4DAAiC;IAC1D,SAAS,CAAC,QAAQ,CAAC,WAAW,kDAAiB;IAE/C,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,KAAK,CAAuB;;IA4BpC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAKjC,OAAO,CAAC,aAAa;yCA5CZ,sBAAsB;2CAAtB,sBAAsB;CA2ElC"}

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

@@ -1,8 +1,8 @@
-import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, signal, } from '@angular/core';
-import { A11ySrService } from './a11y-sr.service.js';
-import { A11yPerspectiveService } from './a11y-perspective.service.js';
-import { A11yPanelStateService } from './a11y-panel-state.service.js';
+import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, signal } from '@angular/core';
 import { PrismRendererService } from '../../services/prism-renderer.service.js';
+import { A11yPanelStateService } from './a11y-panel-state.service.js';
+import { A11yPerspectiveService } from './a11y-perspective.service.js';
+import { A11ySrService } from './a11y-sr.service.js';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.index;
 function A11ySrOverlayComponent_Conditional_0_For_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
@@ -89,7 +89,7 @@ export class A11ySrOverlayComponent {
                 y: rect.top - canvasRect.top + scrollTop,
                 width: rect.width,
                 height: rect.height,
-                isActive: i === this.activeIdx,
+                isActive: i === this.activeIdx
             };
         })
             .filter((p) => p !== null);
@@ -100,30 +100,10 @@ export class A11ySrOverlayComponent {
             i0.ɵɵconditionalCreate(0, A11ySrOverlayComponent_Conditional_0_Template, 2, 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.showOverlay() ? 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-sr-ov__focus[_ngcontent-%COMP%] {\n      position: absolute;\n      border: 2px solid var(--%NS%prism-primary);\n      border-radius: 4px;\n      background: rgba(167, 139, 250, 0.08);\n      box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.12);\n    }\n\n    .prism-a11y-sr-ov__badge[_ngcontent-%COMP%] {\n      position: absolute;\n      height: 18px;\n      padding: 0 5px;\n      min-width: 18px;\n      background: var(--%NS%prism-primary);\n      color: white;\n      border-radius: 9px;\n      font-size: 9px;\n      font-weight: 700;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0 0 0 1.5px white, 0 2px 4px rgba(0, 0, 0, 0.25);\n      font-family: var(--%NS%prism-font-sans, system-ui, sans-serif);\n    }\n\n    .prism-a11y-sr-ov__badge--active[_ngcontent-%COMP%] {\n      background: var(--%NS%prism-primary-from);\n      box-shadow: 0 0 0 2px white, 0 0 0 4px rgba(124, 58, 237, 0.4);\n    }"] });
+        } }, styles: ["[_nghost-%COMP%] {\n    position: absolute;\n    inset: 0;\n    z-index: 100;\n    overflow: hidden;\n    pointer-events: none;\n}\n\n.prism-a11y-sr-ov__focus[_ngcontent-%COMP%] {\n    position: absolute;\n    background: rgb(167 139 250 / 8%);\n    border: 2px solid var(--%NS%prism-primary);\n    border-radius: 4px;\n    box-shadow: 0 0 0 4px rgb(167 139 250 / 12%);\n}\n\n.prism-a11y-sr-ov__badge[_ngcontent-%COMP%] {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    font-family: var(--%NS%prism-font-sans, system-ui, sans-serif);\n    font-size: 9px;\n    font-weight: 700;\n    color: white;\n    background: var(--%NS%prism-primary);\n    border-radius: 9px;\n    box-shadow:\n        0 0 0 1.5px white,\n        0 2px 4px rgb(0 0 0 / 25%);\n}\n\n.prism-a11y-sr-ov__badge--active[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-primary-from);\n    box-shadow:\n        0 0 0 2px white,\n        0 0 0 4px rgb(124 58 237 / 40%);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11ySrOverlayComponent, [{
         type: Component,
-        args: [{ selector: 'prism-a11y-sr-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @if (showOverlay()) { @for (badge of badges(); track badge.index) { @if
-    (badge.isActive) {
-    <div
-      class="prism-a11y-sr-ov__focus"
-      [style.left.px]="badge.x"
-      [style.top.px]="badge.y"
-      [style.width.px]="badge.width"
-      [style.height.px]="badge.height"
-    ></div>
-    }
-    <div
-      class="prism-a11y-sr-ov__badge"
-      [class.prism-a11y-sr-ov__badge--active]="badge.isActive"
-      [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-sr-ov__focus {\n      position: absolute;\n      border: 2px solid var(--prism-primary);\n      border-radius: 4px;\n      background: rgba(167, 139, 250, 0.08);\n      box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.12);\n    }\n\n    .prism-a11y-sr-ov__badge {\n      position: absolute;\n      height: 18px;\n      padding: 0 5px;\n      min-width: 18px;\n      background: var(--prism-primary);\n      color: white;\n      border-radius: 9px;\n      font-size: 9px;\n      font-weight: 700;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0 0 0 1.5px white, 0 2px 4px rgba(0, 0, 0, 0.25);\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n    }\n\n    .prism-a11y-sr-ov__badge--active {\n      background: var(--prism-primary-from);\n      box-shadow: 0 0 0 2px white, 0 0 0 4px rgba(124, 58, 237, 0.4);\n    }\n  "] }]
+        args: [{ selector: 'prism-a11y-sr-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showOverlay()) {\n    @for (badge of badges(); track badge.index) {\n        @if (badge.isActive) {\n            <div\n                class=\"prism-a11y-sr-ov__focus\"\n                [style.left.px]=\"badge.x\"\n                [style.top.px]=\"badge.y\"\n                [style.width.px]=\"badge.width\"\n                [style.height.px]=\"badge.height\"></div>\n        }\n        <div\n            class=\"prism-a11y-sr-ov__badge\"\n            [class.prism-a11y-sr-ov__badge--active]=\"badge.isActive\"\n            [style.left.px]=\"badge.x - 10\"\n            [style.top.px]=\"badge.y - 10\">\n            {{ badge.index }}\n        </div>\n    }\n}\n", styles: [":host {\n    position: absolute;\n    inset: 0;\n    z-index: 100;\n    overflow: hidden;\n    pointer-events: none;\n}\n\n.prism-a11y-sr-ov__focus {\n    position: absolute;\n    background: rgb(167 139 250 / 8%);\n    border: 2px solid var(--prism-primary);\n    border-radius: 4px;\n    box-shadow: 0 0 0 4px rgb(167 139 250 / 12%);\n}\n\n.prism-a11y-sr-ov__badge {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    font-family: var(--prism-font-sans, system-ui, sans-serif);\n    font-size: 9px;\n    font-weight: 700;\n    color: white;\n    background: var(--prism-primary);\n    border-radius: 9px;\n    box-shadow:\n        0 0 0 1.5px white,\n        0 2px 4px rgb(0 0 0 / 25%);\n}\n\n.prism-a11y-sr-ov__badge--active {\n    background: var(--prism-primary-from);\n    box-shadow:\n        0 0 0 2px white,\n        0 0 0 4px rgb(124 58 237 / 40%);\n}\n"] }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11ySrOverlayComponent, { className: "A11ySrOverlayComponent", filePath: "app/panels/a11y/a11y-sr-overlay.component.ts", lineNumber: 88 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11ySrOverlayComponent, { className: "A11ySrOverlayComponent", filePath: "app/panels/a11y/a11y-sr-overlay.component.ts", lineNumber: 23 }); })();

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

@@ -1 +1 @@
-{"version":3,"file":"a11y-sr.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-sr.component.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAEhF,qBAkFa,eAAe;IAC1B,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IAEnD,SAAS,CAAC,QAAQ,CAAC,aAAa,6EAQ7B;yCAZQ,eAAe;2CAAf,eAAe;CAa3B"}
+{"version":3,"file":"a11y-sr.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-sr.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAGhF,qBAOa,eAAe;IACxB,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IAEnD,SAAS,CAAC,QAAQ,CAAC,aAAa,6EAO7B;yCAXM,eAAe;2CAAf,eAAe;CAY3B"}

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

@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component, computed, inject, } from '@angular/core';
-import { A11ySrService } from './a11y-sr.service.js';
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { PrismRendererService } from '../../services/prism-renderer.service.js';
+import { A11ySrService } from './a11y-sr.service.js';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.index;
 function A11ySrComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
@@ -77,33 +77,10 @@ export class A11ySrComponent {
             i0.ɵɵconditionalCreate(0, A11ySrComponent_Conditional_0_Template, 2, 0, "div", 0)(1, A11ySrComponent_Conditional_1_Template, 2, 0, "div", 0)(2, A11ySrComponent_Conditional_2_Template, 3, 0, "div", 1);
         } if (rf & 2) {
             i0.ɵɵconditional(!ctx.rendererService.renderedElement() ? 0 : !ctx.announcements().length ? 1 : 2);
-        } }, styles: ["[_nghost-%COMP%] { display: block; height: 100%; overflow: auto; }\n\n    .sr-empty[_ngcontent-%COMP%] {\n      display: flex; align-items: center; justify-content: center;\n      min-height: 100px; color: var(--%NS%prism-text-muted); font-size: 13px;\n    }\n\n    .sr-body[_ngcontent-%COMP%] {\n      padding: 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n    }\n\n    .sr-line[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 56px 1fr;\n      gap: 12px;\n      padding: 10px 12px;\n      background: var(--%NS%prism-bg-surface);\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: 8px;\n    }\n\n    .sr-step[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: 11px;\n      color: var(--%NS%prism-text-ghost);\n      font-weight: 600;\n    }\n\n    .sr-text[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: var(--%NS%prism-text);\n      line-height: 1.5;\n    }\n\n    .sr-name[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-primary);\n      font-weight: 600;\n      font-style: normal;\n    }\n\n    .sr-text[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: 11.5px;\n      color: var(--%NS%prism-text-muted);\n      padding: 1px 5px;\n      background: var(--%NS%prism-input-bg);\n      border-radius: var(--%NS%radius-xs);\n    }"] });
+        } }, styles: ["[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n    overflow: auto;\n}\n\n.sr-empty[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 100px;\n    font-size: 13px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.sr-body[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    padding: 16px 20px;\n}\n\n.sr-line[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 56px 1fr;\n    gap: 12px;\n    padding: 10px 12px;\n    background: var(--%NS%prism-bg-surface);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 8px;\n}\n\n.sr-step[_ngcontent-%COMP%] {\n    font-family: var(--%NS%font-mono);\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--%NS%prism-text-ghost);\n}\n\n.sr-text[_ngcontent-%COMP%] {\n    font-size: 13px;\n    line-height: 1.5;\n    color: var(--%NS%prism-text);\n}\n\n.sr-name[_ngcontent-%COMP%] {\n    font-style: normal;\n    font-weight: 600;\n    color: var(--%NS%prism-primary);\n}\n\n.sr-text[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    padding: 1px 5px;\n    font-family: var(--%NS%font-mono);\n    font-size: 11.5px;\n    color: var(--%NS%prism-text-muted);\n    background: var(--%NS%prism-input-bg);\n    border-radius: var(--%NS%radius-xs);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11ySrComponent, [{
         type: Component,
-        args: [{ selector: 'prism-a11y-sr', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @if (!rendererService.renderedElement()) {
-    <div class="sr-empty">
-      Select a component to simulate screen reader output.
-    </div>
-    } @else if (!announcements().length) {
-    <div class="sr-empty">No announced elements found.</div>
-    } @else {
-    <div class="sr-body">
-      @for (a of announcements(); track a.index) {
-      <div class="sr-line">
-        <div class="sr-step">VO · {{ a.index }}</div>
-        <div class="sr-text">
-          @if (a.name) { "<span class="sr-name">{{ a.name }}</span
-          >", }
-          <code>{{ a.role }}</code>
-          @if (a.states.length) { · {{ a.states.join(', ') }}
-          }
-        </div>
-      </div>
-      }
-    </div>
-    }
-  `, styles: ["\n    :host { display: block; height: 100%; overflow: auto; }\n\n    .sr-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    .sr-body {\n      padding: 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n    }\n\n    .sr-line {\n      display: grid;\n      grid-template-columns: 56px 1fr;\n      gap: 12px;\n      padding: 10px 12px;\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-radius: 8px;\n    }\n\n    .sr-step {\n      font-family: var(--font-mono);\n      font-size: 11px;\n      color: var(--prism-text-ghost);\n      font-weight: 600;\n    }\n\n    .sr-text {\n      font-size: 13px;\n      color: var(--prism-text);\n      line-height: 1.5;\n    }\n\n    .sr-name {\n      color: var(--prism-primary);\n      font-weight: 600;\n      font-style: normal;\n    }\n\n    .sr-text code {\n      font-family: var(--font-mono);\n      font-size: 11.5px;\n      color: var(--prism-text-muted);\n      padding: 1px 5px;\n      background: var(--prism-input-bg);\n      border-radius: var(--radius-xs);\n    }\n  "] }]
+        args: [{ selector: 'prism-a11y-sr', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!rendererService.renderedElement()) {\n    <div class=\"sr-empty\"> Select a component to simulate screen reader output. </div>\n} @else if (!announcements().length) {\n    <div class=\"sr-empty\">No announced elements found.</div>\n} @else {\n    <div class=\"sr-body\">\n        @for (a of announcements(); track a.index) {\n            <div class=\"sr-line\">\n                <div class=\"sr-step\">VO \u00B7 {{ a.index }}</div>\n                <div class=\"sr-text\">\n                    @if (a.name) {\n                        \"<span class=\"sr-name\">{{ a.name }}</span\n                        >\",\n                    }\n                    <code>{{ a.role }}</code>\n                    @if (a.states.length) {\n                        \u00B7 {{ a.states.join(', ') }}\n                    }\n                </div>\n            </div>\n        }\n    </div>\n}\n", styles: [":host {\n    display: block;\n    height: 100%;\n    overflow: auto;\n}\n\n.sr-empty {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 100px;\n    font-size: 13px;\n    color: var(--prism-text-muted);\n}\n\n.sr-body {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    padding: 16px 20px;\n}\n\n.sr-line {\n    display: grid;\n    grid-template-columns: 56px 1fr;\n    gap: 12px;\n    padding: 10px 12px;\n    background: var(--prism-bg-surface);\n    border: 1px solid var(--prism-border);\n    border-radius: 8px;\n}\n\n.sr-step {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--prism-text-ghost);\n}\n\n.sr-text {\n    font-size: 13px;\n    line-height: 1.5;\n    color: var(--prism-text);\n}\n\n.sr-name {\n    font-style: normal;\n    font-weight: 600;\n    color: var(--prism-primary);\n}\n\n.sr-text code {\n    padding: 1px 5px;\n    font-family: var(--font-mono);\n    font-size: 11.5px;\n    color: var(--prism-text-muted);\n    background: var(--prism-input-bg);\n    border-radius: var(--radius-xs);\n}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11ySrComponent, { className: "A11ySrComponent", filePath: "app/panels/a11y/a11y-sr.component.ts", lineNumber: 92 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11ySrComponent, { className: "A11ySrComponent", filePath: "app/panels/a11y/a11y-sr.component.ts", lineNumber: 12 }); })();

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

@@ -1 +1 @@
-{"version":3,"file":"a11y-sr.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-sr.service.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;;AAwCtD,qBACa,aAAa;IACxB,qBAAqB,CACnB,IAAI,EAAE,OAAO,EACb,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,GACvC,cAAc,EAAE;yCAJR,aAAa;;CAYzB"}
+{"version":3,"file":"a11y-sr.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-sr.service.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;;AAqCtD,qBACa,aAAa;IACtB,qBAAqB,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,GAAG,cAAc,EAAE;yCADvF,aAAa;;CAUzB"}

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

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { computeAccessibleName, extractStates, getRole, isHidden, statesToList, } from './a11y-dom-utils.js';
+import { computeAccessibleName, extractStates, getRole, isHidden, statesToList } from './a11y-dom-utils.js';
 import * as i0 from "@angular/core";
 const ROLE_LABELS = {
     button: 'button',
@@ -29,13 +29,10 @@ const ROLE_LABELS = {
     img: 'image',
     region: 'region',
     article: 'article',
-    group: 'group',
+    group: 'group'
 };
 const ANNOUNCED_ROLES = new Set(Object.keys(ROLE_LABELS));
-const STRUCTURAL_TAGS = new Set([
-    'SCRIPT', 'STYLE', 'NOSCRIPT', 'META', 'LINK', 'TITLE', 'HEAD',
-    'DIV', 'SPAN',
-]);
+const STRUCTURAL_TAGS = new Set(['SCRIPT', 'STYLE', 'NOSCRIPT', 'META', 'LINK', 'TITLE', 'HEAD', 'DIV', 'SPAN']);
 export class A11ySrService {
     buildAnnouncementList(root, getById) {
         const announcements = [];
@@ -84,7 +81,7 @@ function walk(element, out, getById) {
             name,
             role: roleLabel,
             states: stateList,
-            element,
+            element
         });
         if (role === 'list') {
             for (const child of Array.from(element.childNodes)) {

package/dist/app/panels/a11y/a11y-summary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y-summary.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-summary.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,eAAe,EACf,cAAc,EACf,MAAM,iBAAiB,CAAC;AAEzB;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,eAAe,EACtB,UAAU,EAAE,cAAc,GACzB,WAAW,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAuB3C"}
+{"version":3,"file":"a11y-summary.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-summary.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAE1F;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,cAAc,GAAG,WAAW,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAmB/H"}

package/dist/app/panels/a11y/a11y-summary.js

@@ -11,8 +11,7 @@
  * is what a second hardcoded scale next to this one would guarantee.
  */
 export function deriveA11ySummary(score, thresholds) {
-    if (score.critical > thresholds.critical ||
-        score.serious > thresholds.serious) {
+    if (score.critical > thresholds.critical || score.serious > thresholds.serious) {
         const parts = [];
         if (score.critical > 0)
             parts.push(`${score.critical} critical`);
@@ -21,9 +20,7 @@ export function deriveA11ySummary(score, thresholds) {
         // Only reachable with a negative configured threshold: the branch fires
         // on `0 > threshold` with both counts still at zero, and `parts` stays
         // empty. Fall back to the score-based label rather than ship "A11y: ".
-        const label = parts.length > 0
-            ? `A11y: ${parts.join(', ')}`
-            : `A11y score ${score.score}`;
+        const label = parts.length > 0 ? `A11y: ${parts.join(', ')}` : `A11y score ${score.score}`;
         return { variant: 'danger', label };
     }
     if (score.moderate > thresholds.moderate || score.score < thresholds.score) {

package/dist/app/panels/a11y/a11y-thresholds.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y-thresholds.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-thresholds.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,uGAAuG;AACvG,eAAO,MAAM,cAAc,QAA0B,CAAC;AAEtD,eAAO,MAAM,uBAAuB,EAAE,cAKrC,CAAC;AAEF,wBAAgB,qBAAqB,CACnC,KAAK,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAC9B,cAAc,CAGhB"}
+{"version":3,"file":"a11y-thresholds.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-thresholds.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,uGAAuG;AACvG,eAAO,MAAM,cAAc,QAA0B,CAAC;AAEtD,eAAO,MAAM,uBAAuB,EAAE,cAKrC,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,cAAc,CAGrF"}

package/dist/app/panels/a11y/a11y-thresholds.js

@@ -4,7 +4,7 @@ export const DEFAULT_A11Y_THRESHOLDS = {
     score: 80,
     critical: 0,
     serious: 0,
-    moderate: A11Y_UNLIMITED,
+    moderate: A11Y_UNLIMITED
 };
 export function resolveA11yThresholds(input) {
     if (!input)