@ng-prism/core 21.4.5 → 21.5.1

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

@@ -1,9 +1,8 @@
-import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
-import { Highlight } from 'ngx-highlightjs';
+import { ChangeDetectionStrategy, Component, computed, inject, } from '@angular/core';
 import { A11yAuditService } from './a11y-audit.service.js';
 import { A11yScoreComponent } from './a11y-score.component.js';
 import * as i0 from "@angular/core";
-const _forTrack0 = ($index, $item) => $item.id;
+const _forTrack0 = ($index, $item) => $item.id + $item.impact;
 function A11yViolationsComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
     i0.ɵɵtext(1);
@@ -11,278 +10,110 @@ function A11yViolationsComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("Audit failed: ", ctx_r0.auditService.error());
+    i0.ɵɵtextInterpolate1(" Audit failed: ", ctx_r0.auditService.error(), " ");
 } }
-function A11yViolationsComponent_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 6);
-    i0.ɵɵtext(1, "Auditing\u2026");
-    i0.ɵɵelementEnd();
-} }
-function A11yViolationsComponent_Conditional_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 9);
-    i0.ɵɵtext(1);
+function A11yViolationsComponent_Conditional_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵelement(1, "i", 11);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.scoreResult().critical, " critical ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", ctx_r0.scoreResult().critical, " critical");
 } }
-function A11yViolationsComponent_Conditional_1_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 10);
-    i0.ɵɵtext(1);
+function A11yViolationsComponent_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵelement(1, "i", 12);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.scoreResult().serious, " serious ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", ctx_r0.scoreResult().moderate, " moderate");
 } }
-function A11yViolationsComponent_Conditional_1_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 11);
+function A11yViolationsComponent_Conditional_1_For_13_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const item_r2 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.scoreResult().moderate, " moderate ");
-} }
-function A11yViolationsComponent_Conditional_1_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 12);
-    i0.ɵɵtext(1, "All clear");
-    i0.ɵɵelementEnd();
-} }
-function A11yViolationsComponent_Conditional_1_Conditional_22_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 24);
-    i0.ɵɵtext(1, "No violations found.");
-    i0.ɵɵelementEnd();
+    i0.ɵɵtextInterpolate(item_r2.help);
 } }
-function A11yViolationsComponent_Conditional_1_Conditional_22_For_3_For_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29)(1, "pre");
-    i0.ɵɵelement(2, "code", 31);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const node_r3 = ctx.$implicit;
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("highlight", node_r3.html);
-} }
-function A11yViolationsComponent_Conditional_1_Conditional_22_For_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25)(1, "div", 26)(2, "span");
-    i0.ɵɵtext(3);
+function A11yViolationsComponent_Conditional_1_For_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13)(1, "span", 14);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 27);
+    i0.ɵɵelementStart(3, "div", 15)(4, "b");
     i0.ɵɵtext(5);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "p", 28);
-    i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(8, A11yViolationsComponent_Conditional_1_Conditional_22_For_3_For_9_Template, 3, 1, "div", 29, i0.ɵɵrepeaterTrackByIndex);
-    i0.ɵɵelementStart(10, "a", 30);
-    i0.ɵɵtext(11, " Learn more \u2197 ");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const item_r4 = ctx.$implicit;
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(i0.ɵɵinterpolate1("prism-a11y-v__impact prism-a11y-v__impact--", item_r4.impact));
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(item_r4.impact);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r4.id);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r4.description);
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(item_r4.nodes);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("href", item_r4.helpUrl, i0.ɵɵsanitizeUrl);
-} }
-function A11yViolationsComponent_Conditional_1_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19);
-    i0.ɵɵconditionalCreate(1, A11yViolationsComponent_Conditional_1_Conditional_22_Conditional_1_Template, 2, 0, "div", 24);
-    i0.ɵɵrepeaterCreate(2, A11yViolationsComponent_Conditional_1_Conditional_22_For_3_Template, 12, 7, "div", 25, _forTrack0);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r0.violations().length ? 1 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r0.violations());
-} }
-function A11yViolationsComponent_Conditional_1_Conditional_31_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 24);
-    i0.ɵɵtext(1, "Nothing to review.");
+    i0.ɵɵconditionalCreate(6, A11yViolationsComponent_Conditional_1_For_13_Conditional_6_Template, 2, 1, "span");
     i0.ɵɵelementEnd();
-} }
-function A11yViolationsComponent_Conditional_1_Conditional_31_For_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25)(1, "div", 26)(2, "span");
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 27);
-    i0.ɵɵtext(5);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "p", 28);
-    i0.ɵɵtext(7);
+    i0.ɵɵelementStart(7, "span", 16);
+    i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const item_r5 = ctx.$implicit;
+    const item_r2 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵstyleProp("--sev-color", ctx_r0.sevColor(item_r2.impact));
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(i0.ɵɵinterpolate1("prism-a11y-v__impact prism-a11y-v__impact--", item_r5.impact));
+    i0.ɵɵtextInterpolate(item_r2.impact ?? "pass");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(item_r2.description);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(item_r5.impact);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r5.id);
+    i0.ɵɵconditional(item_r2.help ? 6 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r5.description);
+    i0.ɵɵtextInterpolate(item_r2.id);
 } }
-function A11yViolationsComponent_Conditional_1_Conditional_31_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19);
-    i0.ɵɵconditionalCreate(1, A11yViolationsComponent_Conditional_1_Conditional_31_Conditional_1_Template, 2, 0, "div", 24);
-    i0.ɵɵrepeaterCreate(2, A11yViolationsComponent_Conditional_1_Conditional_31_For_3_Template, 8, 6, "div", 25, _forTrack0);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r0.incomplete().length ? 1 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r0.incomplete());
-} }
-function A11yViolationsComponent_Conditional_1_Conditional_40_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 24);
-    i0.ɵɵtext(1, "No passing rules.");
+function A11yViolationsComponent_Conditional_1_ForEmpty_14_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵtext(1, "No results yet.");
     i0.ɵɵelementEnd();
 } }
-function A11yViolationsComponent_Conditional_1_Conditional_40_For_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 32)(1, "span", 27);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 28);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const item_r6 = ctx.$implicit;
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r6.id);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r6.description);
-} }
-function A11yViolationsComponent_Conditional_1_Conditional_40_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19);
-    i0.ɵɵconditionalCreate(1, A11yViolationsComponent_Conditional_1_Conditional_40_Conditional_1_Template, 2, 0, "div", 24);
-    i0.ɵɵrepeaterCreate(2, A11yViolationsComponent_Conditional_1_Conditional_40_For_3_Template, 5, 2, "div", 32, _forTrack0);
-    i0.ɵɵelementEnd();
+function A11yViolationsComponent_Conditional_1_ForEmpty_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, A11yViolationsComponent_Conditional_1_ForEmpty_14_Conditional_0_Template, 2, 0, "div", 2);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r0.passes().length ? 1 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r0.passes());
+    i0.ɵɵconditional(!ctx_r0.auditService.running() ? 0 : -1);
 } }
 function A11yViolationsComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵelement(1, "prism-a11y-score", 3);
-    i0.ɵɵelementStart(2, "div", 4)(3, "div", 5);
-    i0.ɵɵtext(4);
-    i0.ɵɵconditionalCreate(5, A11yViolationsComponent_Conditional_1_Conditional_5_Template, 2, 0, "span", 6);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 7);
-    i0.ɵɵtext(7);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 8);
-    i0.ɵɵconditionalCreate(9, A11yViolationsComponent_Conditional_1_Conditional_9_Template, 2, 1, "span", 9);
-    i0.ɵɵconditionalCreate(10, A11yViolationsComponent_Conditional_1_Conditional_10_Template, 2, 1, "span", 10);
-    i0.ɵɵconditionalCreate(11, A11yViolationsComponent_Conditional_1_Conditional_11_Template, 2, 1, "span", 11);
-    i0.ɵɵconditionalCreate(12, A11yViolationsComponent_Conditional_1_Conditional_12_Template, 2, 0, "span", 12);
+    i0.ɵɵelementStart(0, "div", 3)(1, "div", 4);
+    i0.ɵɵelement(2, "prism-a11y-score", 5);
+    i0.ɵɵelementStart(3, "div", 6);
+    i0.ɵɵtext(4, "axe-core audit");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 7);
+    i0.ɵɵconditionalCreate(6, A11yViolationsComponent_Conditional_1_Conditional_6_Template, 3, 1, "span");
+    i0.ɵɵconditionalCreate(7, A11yViolationsComponent_Conditional_1_Conditional_7_Template, 3, 1, "span");
+    i0.ɵɵelementStart(8, "span");
+    i0.ɵɵelement(9, "i", 8);
+    i0.ɵɵtext(10);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(13, "div", 13)(14, "div", 14)(15, "button", 15);
-    i0.ɵɵlistener("click", function A11yViolationsComponent_Conditional_1_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggle("violations")); });
-    i0.ɵɵelementStart(16, "span", 16);
-    i0.ɵɵtext(17);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "span", 17);
-    i0.ɵɵtext(19, "Violations");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "span", 18);
-    i0.ɵɵtext(21);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(22, A11yViolationsComponent_Conditional_1_Conditional_22_Template, 4, 1, "div", 19);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "div", 14)(24, "button", 20);
-    i0.ɵɵlistener("click", function A11yViolationsComponent_Conditional_1_Template_button_click_24_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggle("incomplete")); });
-    i0.ɵɵelementStart(25, "span", 16);
-    i0.ɵɵtext(26);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(27, "span", 17);
-    i0.ɵɵtext(28, "Needs Review");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(29, "span", 21);
-    i0.ɵɵtext(30);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(31, A11yViolationsComponent_Conditional_1_Conditional_31_Template, 4, 1, "div", 19);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "div", 14)(33, "button", 22);
-    i0.ɵɵlistener("click", function A11yViolationsComponent_Conditional_1_Template_button_click_33_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggle("passes")); });
-    i0.ɵɵelementStart(34, "span", 16);
-    i0.ɵɵtext(35);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(36, "span", 17);
-    i0.ɵɵtext(37, "Passes");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(38, "span", 23);
-    i0.ɵɵtext(39);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(40, A11yViolationsComponent_Conditional_1_Conditional_40_Template, 4, 1, "div", 19);
+    i0.ɵɵelementStart(11, "div", 9);
+    i0.ɵɵrepeaterCreate(12, A11yViolationsComponent_Conditional_1_For_13_Template, 9, 6, "div", 10, _forTrack0, false, A11yViolationsComponent_Conditional_1_ForEmpty_14_Template, 1, 1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     let tmp_2_0;
     let tmp_3_0;
+    let tmp_4_0;
     let tmp_5_0;
-    let tmp_6_0;
-    let tmp_7_0;
-    let tmp_8_0;
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("prism-a11y-v__hero--loading", ctx_r0.auditService.running());
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("score", ((tmp_2_0 = ctx_r0.scoreResult()) == null ? null : tmp_2_0.score) ?? 0);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", ((tmp_3_0 = ctx_r0.scoreResult()) == null ? null : tmp_3_0.score) ?? 0, " / 100 ");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.auditService.running() ? 5 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2(" ", ((tmp_5_0 = ctx_r0.scoreResult()) == null ? null : tmp_5_0.violations) ?? 0, " Violations \u00B7 ", ((tmp_5_0 = ctx_r0.scoreResult()) == null ? null : tmp_5_0.passes) ?? 0, " Passes ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(((tmp_6_0 = ctx_r0.scoreResult()) == null ? null : tmp_6_0.critical) ? 9 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(((tmp_7_0 = ctx_r0.scoreResult()) == null ? null : tmp_7_0.serious) ? 10 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(((tmp_8_0 = ctx_r0.scoreResult()) == null ? null : tmp_8_0.moderate) ? 11 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.scoreResult() && !ctx_r0.scoreResult().violations ? 12 : -1);
-    i0.ɵɵadvance(3);
-    i0.ɵɵclassProp("prism-a11y-v__sec-hdr--open", ctx_r0.openSections().has("violations"));
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.openSections().has("violations") ? "\u25BE" : "\u25B8");
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r0.violations().length);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.openSections().has("violations") ? 22 : -1);
+    i0.ɵɵclassProp("a11y-body--loading", ctx_r0.auditService.running());
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("prism-a11y-v__sec-hdr--open", ctx_r0.openSections().has("incomplete"));
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.openSections().has("incomplete") ? "\u25BE" : "\u25B8");
+    i0.ɵɵproperty("score", ((tmp_2_0 = ctx_r0.scoreResult()) == null ? null : tmp_2_0.score) ?? 0);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r0.incomplete().length);
+    i0.ɵɵconditional(((tmp_3_0 = ctx_r0.scoreResult()) == null ? null : tmp_3_0.critical) ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.openSections().has("incomplete") ? 31 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("prism-a11y-v__sec-hdr--open", ctx_r0.openSections().has("passes"));
+    i0.ɵɵconditional(((tmp_4_0 = ctx_r0.scoreResult()) == null ? null : tmp_4_0.moderate) ? 7 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("", ((tmp_5_0 = ctx_r0.scoreResult()) == null ? null : tmp_5_0.passes) ?? 0, " pass");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.openSections().has("passes") ? "\u25BE" : "\u25B8");
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r0.passes().length);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.openSections().has("passes") ? 40 : -1);
+    i0.ɵɵrepeater(ctx_r0.allResults());
 } }
 function A11yViolationsComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵtext(1, "Select a component to run accessibility audit.");
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵtext(1, " Select a component to run accessibility audit. ");
     i0.ɵɵelementEnd();
 } }
 const IMPACT_ORDER = {
@@ -291,167 +122,89 @@ const IMPACT_ORDER = {
     moderate: 2,
     minor: 3,
 };
-function sortByImpact(results) {
-    return [...results].sort((a, b) => (IMPACT_ORDER[a.impact ?? ''] ?? 4) - (IMPACT_ORDER[b.impact ?? ''] ?? 4));
+const IMPACT_COLOR = {
+    critical: 'var(--prism-danger)',
+    serious: '#fb923c',
+    moderate: 'var(--prism-warn)',
+    minor: 'var(--prism-text-muted)',
+};
+function sevColor(impact) {
+    return IMPACT_COLOR[impact ?? ''] ?? 'var(--prism-success)';
 }
 export class A11yViolationsComponent {
     auditService = inject(A11yAuditService);
     scoreResult = computed(() => this.auditService.scoreResult(), ...(ngDevMode ? [{ debugName: "scoreResult" }] : []));
-    violations = computed(() => sortByImpact(this.auditService.results()?.violations ?? []), ...(ngDevMode ? [{ debugName: "violations" }] : []));
-    incomplete = computed(() => this.auditService.results()?.incomplete ?? [], ...(ngDevMode ? [{ debugName: "incomplete" }] : []));
-    passes = computed(() => this.auditService.results()?.passes ?? [], ...(ngDevMode ? [{ debugName: "passes" }] : []));
-    openSections = signal(new Set(['violations']), ...(ngDevMode ? [{ debugName: "openSections" }] : []));
-    toggle(section) {
-        this.openSections.update((current) => {
-            const next = new Set(current);
-            if (next.has(section))
-                next.delete(section);
-            else
-                next.add(section);
-            return next;
-        });
+    allResults = computed(() => {
+        const results = this.auditService.results();
+        if (!results)
+            return [];
+        const violations = [...results.violations].sort((a, b) => (IMPACT_ORDER[a.impact ?? ''] ?? 4) -
+            (IMPACT_ORDER[b.impact ?? ''] ?? 4));
+        const passes = results.passes.slice(0, 4);
+        return [...violations, ...passes];
+    }, ...(ngDevMode ? [{ debugName: "allResults" }] : []));
+    sevColor(impact) {
+        return sevColor(impact);
     }
     static ɵfac = function A11yViolationsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11yViolationsComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yViolationsComponent, selectors: [["prism-a11y-violations"]], decls: 3, vars: 1, consts: [[1, "prism-a11y-v__error"], [1, "prism-a11y-v__status"], [1, "prism-a11y-v__hero"], [3, "score"], [1, "prism-a11y-v__meta"], [1, "prism-a11y-v__score-num"], [1, "prism-a11y-v__auditing"], [1, "prism-a11y-v__score-detail"], [1, "prism-a11y-v__badges"], [1, "prism-a11y-v__badge", "prism-a11y-v__badge--critical"], [1, "prism-a11y-v__badge", "prism-a11y-v__badge--serious"], [1, "prism-a11y-v__badge", "prism-a11y-v__badge--moderate"], [1, "prism-a11y-v__badge", "prism-a11y-v__badge--pass"], [1, "prism-a11y-v__sections"], [1, "prism-a11y-v__section"], [1, "prism-a11y-v__sec-hdr", "prism-a11y-v__sec-hdr--violation", 3, "click"], [1, "prism-a11y-v__chevron"], [1, "prism-a11y-v__sec-title"], [1, "prism-a11y-v__count", "prism-a11y-v__count--violation"], [1, "prism-a11y-v__sec-body"], [1, "prism-a11y-v__sec-hdr", "prism-a11y-v__sec-hdr--incomplete", 3, "click"], [1, "prism-a11y-v__count", "prism-a11y-v__count--incomplete"], [1, "prism-a11y-v__sec-hdr", "prism-a11y-v__sec-hdr--pass", 3, "click"], [1, "prism-a11y-v__count", "prism-a11y-v__count--pass"], [1, "prism-a11y-v__empty"], [1, "prism-a11y-v__item"], [1, "prism-a11y-v__item-hdr"], [1, "prism-a11y-v__rule-id"], [1, "prism-a11y-v__desc"], [1, "prism-a11y-v__code"], ["target", "_blank", "rel", "noopener", 1, "prism-a11y-v__link", 3, "href"], ["language", "xml", 3, "highlight"], [1, "prism-a11y-v__item", "prism-a11y-v__item--pass"]], template: function A11yViolationsComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, A11yViolationsComponent_Conditional_0_Template, 2, 1, "div", 0)(1, A11yViolationsComponent_Conditional_1_Template, 41, 26)(2, A11yViolationsComponent_Conditional_2_Template, 2, 0, "div", 1);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yViolationsComponent, selectors: [["prism-a11y-violations"]], decls: 3, vars: 1, consts: [[1, "a11y-status", "a11y-status--error"], [1, "a11y-body", 3, "a11y-body--loading"], [1, "a11y-status"], [1, "a11y-body"], [1, "score-wrap"], [3, "score"], [1, "score-label"], [1, "score-meta"], [2, "background", "var(--prism-success)"], [1, "viol-list"], [1, "viol", 3, "--sev-color"], [2, "background", "var(--prism-danger)"], [2, "background", "var(--prism-warn)"], [1, "viol"], [1, "viol-sev"], [1, "viol-text"], [1, "viol-rule"]], template: function A11yViolationsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, A11yViolationsComponent_Conditional_0_Template, 2, 1, "div", 0)(1, A11yViolationsComponent_Conditional_1_Template, 15, 7, "div", 1)(2, A11yViolationsComponent_Conditional_2_Template, 2, 0, "div", 2);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.auditService.error() ? 0 : ctx.auditService.results() || ctx.auditService.running() ? 1 : 2);
-        } }, dependencies: [Highlight, A11yScoreComponent], styles: ["[_nghost-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      overflow: auto;\n      --a11y-red: #f87171;\n      --a11y-amber: #fbbf24;\n      --a11y-green: #4ade80;\n    }\n\n    .prism-a11y-v__hero[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 14px 20px;\n      border-bottom: 1px solid var(--prism-border);\n      flex-shrink: 0;\n    }\n    .prism-a11y-v__hero--loading[_ngcontent-%COMP%] {\n      opacity: 0.55;\n      transition: opacity 0.2s;\n    }\n    prism-a11y-score[_ngcontent-%COMP%] { width: 54px; height: 54px; flex-shrink: 0; }\n\n    .prism-a11y-v__auditing[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 400;\n      color: var(--prism-text-muted);\n      margin-left: 8px;\n    }\n\n    .prism-a11y-v__meta[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 2px; }\n    .prism-a11y-v__score-num[_ngcontent-%COMP%] { font-size: 20px; font-weight: 700; color: var(--prism-text); }\n    .prism-a11y-v__score-detail[_ngcontent-%COMP%] { font-size: 12px; color: var(--prism-text-muted); }\n    .prism-a11y-v__badges[_ngcontent-%COMP%] { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }\n\n    .prism-a11y-v__badge[_ngcontent-%COMP%] {\n      padding: 1px 7px; border-radius: 10px;\n      font-size: 11px; font-weight: 600;\n    }\n    .prism-a11y-v__badge--critical[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--a11y-red) 15%, transparent);\n      color: var(--a11y-red);\n    }\n    .prism-a11y-v__badge--serious[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, #fb923c 15%, transparent);\n      color: #fb923c;\n    }\n    .prism-a11y-v__badge--moderate[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--a11y-amber) 12%, transparent);\n      color: var(--a11y-amber);\n    }\n    .prism-a11y-v__badge--pass[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--a11y-green) 12%, transparent);\n      color: var(--a11y-green);\n    }\n\n    .prism-a11y-v__sections[_ngcontent-%COMP%] { display: flex; flex-direction: column; }\n    .prism-a11y-v__section[_ngcontent-%COMP%] { border-bottom: 1px solid var(--prism-border); }\n\n    .prism-a11y-v__sec-hdr[_ngcontent-%COMP%] {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 9px 16px 9px 12px;\n      background: none;\n      border: none;\n      border-left: 3px solid transparent;\n      cursor: pointer;\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n      font-size: 11px;\n      font-weight: 600;\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n      color: var(--prism-text-muted);\n      text-align: left;\n      transition: background 0.1s, color 0.1s;\n      user-select: none;\n    }\n    .prism-a11y-v__sec-hdr--violation[_ngcontent-%COMP%] { border-left-color: var(--a11y-red); }\n    .prism-a11y-v__sec-hdr--violation[_ngcontent-%COMP%]:hover, \n   .prism-a11y-v__sec-hdr--violation.prism-a11y-v__sec-hdr--open[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--a11y-red) 7%, transparent);\n      color: var(--a11y-red);\n    }\n    .prism-a11y-v__sec-hdr--incomplete[_ngcontent-%COMP%] { border-left-color: var(--a11y-amber); }\n    .prism-a11y-v__sec-hdr--incomplete[_ngcontent-%COMP%]:hover, \n   .prism-a11y-v__sec-hdr--incomplete.prism-a11y-v__sec-hdr--open[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--a11y-amber) 7%, transparent);\n      color: var(--a11y-amber);\n    }\n    .prism-a11y-v__sec-hdr--pass[_ngcontent-%COMP%] { border-left-color: var(--a11y-green); }\n    .prism-a11y-v__sec-hdr--pass[_ngcontent-%COMP%]:hover, \n   .prism-a11y-v__sec-hdr--pass.prism-a11y-v__sec-hdr--open[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--a11y-green) 7%, transparent);\n      color: var(--a11y-green);\n    }\n\n    .prism-a11y-v__chevron[_ngcontent-%COMP%] { font-size: 10px; width: 12px; flex-shrink: 0; opacity: 0.7; }\n    .prism-a11y-v__sec-title[_ngcontent-%COMP%] { flex: 1; }\n    .prism-a11y-v__count[_ngcontent-%COMP%] { padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 700; }\n    .prism-a11y-v__count--violation[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--a11y-red) 15%, transparent);\n      color: var(--a11y-red);\n    }\n    .prism-a11y-v__count--incomplete[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--a11y-amber) 12%, transparent);\n      color: var(--a11y-amber);\n    }\n    .prism-a11y-v__count--pass[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--a11y-green) 12%, transparent);\n      color: var(--a11y-green);\n    }\n\n    .prism-a11y-v__sec-body[_ngcontent-%COMP%] {\n      padding: 8px 12px 12px;\n      background: var(--prism-bg);\n    }\n    .prism-a11y-v__empty[_ngcontent-%COMP%] { padding: 6px 4px; font-size: 12px; color: var(--prism-text-muted); }\n\n    .prism-a11y-v__item[_ngcontent-%COMP%] {\n      padding: 10px 12px;\n      margin-bottom: 6px;\n      background: var(--prism-bg-surface);\n      border-radius: var(--prism-radius, 8px);\n      border: 1px solid var(--prism-border);\n    }\n    .prism-a11y-v__item--pass[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 5px 12px;\n    }\n    .prism-a11y-v__item-hdr[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }\n\n    .prism-a11y-v__impact[_ngcontent-%COMP%] {\n      padding: 1px 6px;\n      border-radius: var(--prism-radius-xs, 3px);\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n    }\n    .prism-a11y-v__impact--critical[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--a11y-red) 18%, transparent);\n      color: var(--a11y-red);\n      border: 1px solid color-mix(in srgb, var(--a11y-red) 30%, transparent);\n    }\n    .prism-a11y-v__impact--serious[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, #fb923c 18%, transparent);\n      color: #fb923c;\n      border: 1px solid color-mix(in srgb, #fb923c 30%, transparent);\n    }\n    .prism-a11y-v__impact--moderate[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--a11y-amber) 18%, transparent);\n      color: var(--a11y-amber);\n      border: 1px solid color-mix(in srgb, var(--a11y-amber) 30%, transparent);\n    }\n    .prism-a11y-v__impact--minor[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--prism-text-muted) 10%, transparent);\n      color: var(--prism-text-muted);\n      border: 1px solid var(--prism-border);\n    }\n\n    .prism-a11y-v__rule-id[_ngcontent-%COMP%] {\n      font-family: var(--prism-font-mono, monospace);\n      font-size: 12px;\n      color: var(--prism-text-muted);\n    }\n    .prism-a11y-v__desc[_ngcontent-%COMP%] { margin: 3px 0; font-size: 12px; line-height: 1.4; color: var(--prism-text-2); }\n\n    .prism-a11y-v__code[_ngcontent-%COMP%] {\n      margin: 7px 0 0;\n      border-radius: var(--prism-radius-xs, 3px);\n      overflow: hidden;\n      border: 1px solid var(--prism-border);\n      background: var(--prism-void);\n    }\n    .prism-a11y-v__code[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: 10px 14px;\n      font-size: 12px;\n      line-height: 1.6;\n      font-family: var(--prism-font-mono, monospace);\n      overflow: auto;\n    }\n    .prism-a11y-v__code[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] { font-family: inherit; }\n    [_nghost-%COMP%]     .prism-a11y-v__code .hljs { background: transparent; color: var(--prism-text-2); }\n    [_nghost-%COMP%]     .prism-a11y-v__code .hljs-tag { color: var(--prism-text-muted); }\n    [_nghost-%COMP%]     .prism-a11y-v__code .hljs-name { color: var(--prism-primary); }\n    [_nghost-%COMP%]     .prism-a11y-v__code .hljs-attr { color: #93c5fd; }\n    [_nghost-%COMP%]     .prism-a11y-v__code .hljs-string { color: #7dd3fc; }\n\n    .prism-a11y-v__link[_ngcontent-%COMP%] {\n      display: inline-block;\n      margin-top: 5px;\n      font-size: 12px;\n      color: var(--prism-primary);\n      text-decoration: none;\n    }\n    .prism-a11y-v__link[_ngcontent-%COMP%]:hover { text-decoration: underline; }\n\n    .prism-a11y-v__status[_ngcontent-%COMP%] {\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    .prism-a11y-v__error[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 100px;\n      color: var(--a11y-red);\n      font-size: 13px;\n    }"], changeDetection: 0 });
+        } }, dependencies: [A11yScoreComponent], styles: ["[_nghost-%COMP%] { display: flex; flex-direction: column; height: 100%; overflow: auto; }\n\n    .a11y-body[_ngcontent-%COMP%] {\n      padding: 18px 20px;\n      display: grid;\n      grid-template-columns: 220px 1fr;\n      gap: 20px;\n      min-height: 0;\n    }\n    .a11y-body--loading[_ngcontent-%COMP%] { opacity: 0.55; transition: opacity var(--dur-base); }\n\n    .score-wrap[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 10px;\n      padding: 14px;\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-radius: 10px;\n      align-self: start;\n    }\n\n    .score-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--prism-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      font-weight: 600;\n    }\n    .score-meta[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      margin-top: 2px;\n      font-size: 11px;\n      color: var(--prism-text-muted);\n    }\n    .score-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 4px; }\n    .score-meta[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { width: 6px; height: 6px; border-radius: 50%; display: block; }\n\n    .viol-list[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      min-width: 0;\n    }\n\n    .viol[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: auto 1fr auto;\n      align-items: center;\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      border-left: 3px solid var(--sev-color, var(--prism-primary));\n      transition: border-color var(--dur-fast);\n    }\n    .viol[_ngcontent-%COMP%]:hover { border-color: var(--prism-border-strong); }\n\n    .viol-sev[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 9.5px;\n      font-weight: 700;\n      padding: 2px 6px;\n      border-radius: var(--radius-xs);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      background: color-mix(in srgb, var(--sev-color) 15%, transparent);\n      color: var(--sev-color);\n    }\n\n    .viol-text[_ngcontent-%COMP%] {\n      font-size: 12.5px;\n      color: var(--prism-text);\n      min-width: 0;\n    }\n    .viol-text[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] {\n      display: block;\n      font-weight: 600;\n      margin-bottom: 1px;\n    }\n    .viol-text[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      color: var(--prism-text-muted);\n      font-size: 11.5px;\n    }\n\n    .viol-rule[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 11px;\n      color: var(--prism-text-ghost);\n      padding: 2px 7px;\n      background: var(--prism-input-bg);\n      border-radius: var(--radius-xs);\n      white-space: nowrap;\n    }\n\n    .a11y-status[_ngcontent-%COMP%] {\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    .a11y-status--error[_ngcontent-%COMP%] { color: var(--prism-danger); }\n\n    @media (max-width: 1100px) {\n      .a11y-body[_ngcontent-%COMP%] { grid-template-columns: 1fr; }\n    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yViolationsComponent, [{
         type: Component,
-        args: [{ selector: 'prism-a11y-violations', standalone: true, imports: [Highlight, A11yScoreComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+        args: [{ selector: 'prism-a11y-violations', standalone: true, imports: [A11yScoreComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     @if (auditService.error()) {
-      <div class="prism-a11y-v__error">Audit failed: {{ auditService.error() }}</div>
+    <div class="a11y-status a11y-status--error">
+      Audit failed: {{ auditService.error() }}
+    </div>
     } @else if (auditService.results() || auditService.running()) {
-      <div class="prism-a11y-v__hero" [class.prism-a11y-v__hero--loading]="auditService.running()">
+    <div class="a11y-body" [class.a11y-body--loading]="auditService.running()">
+      <div class="score-wrap">
         <prism-a11y-score [score]="scoreResult()?.score ?? 0" />
-        <div class="prism-a11y-v__meta">
-          <div class="prism-a11y-v__score-num">
-            {{ scoreResult()?.score ?? 0 }} / 100
-            @if (auditService.running()) {
-              <span class="prism-a11y-v__auditing">Auditing…</span>
-            }
-          </div>
-          <div class="prism-a11y-v__score-detail">
-            {{ scoreResult()?.violations ?? 0 }} Violations · {{ scoreResult()?.passes ?? 0 }} Passes
-          </div>
-          <div class="prism-a11y-v__badges">
-            @if (scoreResult()?.critical) {
-              <span class="prism-a11y-v__badge prism-a11y-v__badge--critical">
-                {{ scoreResult()!.critical }} critical
-              </span>
-            }
-            @if (scoreResult()?.serious) {
-              <span class="prism-a11y-v__badge prism-a11y-v__badge--serious">
-                {{ scoreResult()!.serious }} serious
-              </span>
-            }
-            @if (scoreResult()?.moderate) {
-              <span class="prism-a11y-v__badge prism-a11y-v__badge--moderate">
-                {{ scoreResult()!.moderate }} moderate
-              </span>
-            }
-            @if (scoreResult() && !scoreResult()!.violations) {
-              <span class="prism-a11y-v__badge prism-a11y-v__badge--pass">All clear</span>
-            }
-          </div>
-        </div>
-      </div>
-
-      <div class="prism-a11y-v__sections">
-        <div class="prism-a11y-v__section">
-          <button
-            class="prism-a11y-v__sec-hdr prism-a11y-v__sec-hdr--violation"
-            [class.prism-a11y-v__sec-hdr--open]="openSections().has('violations')"
-            (click)="toggle('violations')"
+        <div class="score-label">axe-core audit</div>
+        <div class="score-meta">
+          @if (scoreResult()?.critical) {
+          <span
+            ><i style="background: var(--prism-danger)"></i
+            >{{ scoreResult()!.critical }} critical</span
           >
-            <span class="prism-a11y-v__chevron">{{ openSections().has('violations') ? '▾' : '▸' }}</span>
-            <span class="prism-a11y-v__sec-title">Violations</span>
-            <span class="prism-a11y-v__count prism-a11y-v__count--violation">{{ violations().length }}</span>
-          </button>
-          @if (openSections().has('violations')) {
-            <div class="prism-a11y-v__sec-body">
-              @if (!violations().length) {
-                <div class="prism-a11y-v__empty">No violations found.</div>
-              }
-              @for (item of violations(); track item.id) {
-                <div class="prism-a11y-v__item">
-                  <div class="prism-a11y-v__item-hdr">
-                    <span class="prism-a11y-v__impact prism-a11y-v__impact--{{ item.impact }}">{{ item.impact }}</span>
-                    <span class="prism-a11y-v__rule-id">{{ item.id }}</span>
-                  </div>
-                  <p class="prism-a11y-v__desc">{{ item.description }}</p>
-                  @for (node of item.nodes; track $index) {
-                    <div class="prism-a11y-v__code">
-                      <pre><code [highlight]="node.html" language="xml"></code></pre>
-                    </div>
-                  }
-                  <a class="prism-a11y-v__link" [href]="item.helpUrl" target="_blank" rel="noopener">
-                    Learn more ↗
-                  </a>
-                </div>
-              }
-            </div>
-          }
-        </div>
-
-        <div class="prism-a11y-v__section">
-          <button
-            class="prism-a11y-v__sec-hdr prism-a11y-v__sec-hdr--incomplete"
-            [class.prism-a11y-v__sec-hdr--open]="openSections().has('incomplete')"
-            (click)="toggle('incomplete')"
+          } @if (scoreResult()?.moderate) {
+          <span
+            ><i style="background: var(--prism-warn)"></i
+            >{{ scoreResult()!.moderate }} moderate</span
           >
-            <span class="prism-a11y-v__chevron">{{ openSections().has('incomplete') ? '▾' : '▸' }}</span>
-            <span class="prism-a11y-v__sec-title">Needs Review</span>
-            <span class="prism-a11y-v__count prism-a11y-v__count--incomplete">{{ incomplete().length }}</span>
-          </button>
-          @if (openSections().has('incomplete')) {
-            <div class="prism-a11y-v__sec-body">
-              @if (!incomplete().length) {
-                <div class="prism-a11y-v__empty">Nothing to review.</div>
-              }
-              @for (item of incomplete(); track item.id) {
-                <div class="prism-a11y-v__item">
-                  <div class="prism-a11y-v__item-hdr">
-                    <span class="prism-a11y-v__impact prism-a11y-v__impact--{{ item.impact }}">{{ item.impact }}</span>
-                    <span class="prism-a11y-v__rule-id">{{ item.id }}</span>
-                  </div>
-                  <p class="prism-a11y-v__desc">{{ item.description }}</p>
-                </div>
-              }
-            </div>
           }
-        </div>
-
-        <div class="prism-a11y-v__section">
-          <button
-            class="prism-a11y-v__sec-hdr prism-a11y-v__sec-hdr--pass"
-            [class.prism-a11y-v__sec-hdr--open]="openSections().has('passes')"
-            (click)="toggle('passes')"
+          <span
+            ><i style="background: var(--prism-success)"></i
+            >{{ scoreResult()?.passes ?? 0 }} pass</span
           >
-            <span class="prism-a11y-v__chevron">{{ openSections().has('passes') ? '▾' : '▸' }}</span>
-            <span class="prism-a11y-v__sec-title">Passes</span>
-            <span class="prism-a11y-v__count prism-a11y-v__count--pass">{{ passes().length }}</span>
-          </button>
-          @if (openSections().has('passes')) {
-            <div class="prism-a11y-v__sec-body">
-              @if (!passes().length) {
-                <div class="prism-a11y-v__empty">No passing rules.</div>
-              }
-              @for (item of passes(); track item.id) {
-                <div class="prism-a11y-v__item prism-a11y-v__item--pass">
-                  <span class="prism-a11y-v__rule-id">{{ item.id }}</span>
-                  <span class="prism-a11y-v__desc">{{ item.description }}</span>
-                </div>
-              }
-            </div>
-          }
         </div>
       </div>
+      <div class="viol-list">
+        @for (item of allResults(); track item.id + item.impact) {
+        <div class="viol" [style.--sev-color]="sevColor(item.impact)">
+          <span class="viol-sev">{{ item.impact ?? 'pass' }}</span>
+          <div class="viol-text">
+            <b>{{ item.description }}</b>
+            @if (item.help) {
+            <span>{{ item.help }}</span>
+            }
+          </div>
+          <span class="viol-rule">{{ item.id }}</span>
+        </div>
+        } @empty { @if (!auditService.running()) {
+        <div class="a11y-status">No results yet.</div>
+        } }
+      </div>
+    </div>
     } @else {
-      <div class="prism-a11y-v__status">Select a component to run accessibility audit.</div>
+    <div class="a11y-status">
+      Select a component to run accessibility audit.
+    </div>
     }
-  `, styles: ["\n    :host {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      overflow: auto;\n      --a11y-red: #f87171;\n      --a11y-amber: #fbbf24;\n      --a11y-green: #4ade80;\n    }\n\n    .prism-a11y-v__hero {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 14px 20px;\n      border-bottom: 1px solid var(--prism-border);\n      flex-shrink: 0;\n    }\n    .prism-a11y-v__hero--loading {\n      opacity: 0.55;\n      transition: opacity 0.2s;\n    }\n    prism-a11y-score { width: 54px; height: 54px; flex-shrink: 0; }\n\n    .prism-a11y-v__auditing {\n      font-size: 12px;\n      font-weight: 400;\n      color: var(--prism-text-muted);\n      margin-left: 8px;\n    }\n\n    .prism-a11y-v__meta { display: flex; flex-direction: column; gap: 2px; }\n    .prism-a11y-v__score-num { font-size: 20px; font-weight: 700; color: var(--prism-text); }\n    .prism-a11y-v__score-detail { font-size: 12px; color: var(--prism-text-muted); }\n    .prism-a11y-v__badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }\n\n    .prism-a11y-v__badge {\n      padding: 1px 7px; border-radius: 10px;\n      font-size: 11px; font-weight: 600;\n    }\n    .prism-a11y-v__badge--critical {\n      background: color-mix(in srgb, var(--a11y-red) 15%, transparent);\n      color: var(--a11y-red);\n    }\n    .prism-a11y-v__badge--serious {\n      background: color-mix(in srgb, #fb923c 15%, transparent);\n      color: #fb923c;\n    }\n    .prism-a11y-v__badge--moderate {\n      background: color-mix(in srgb, var(--a11y-amber) 12%, transparent);\n      color: var(--a11y-amber);\n    }\n    .prism-a11y-v__badge--pass {\n      background: color-mix(in srgb, var(--a11y-green) 12%, transparent);\n      color: var(--a11y-green);\n    }\n\n    .prism-a11y-v__sections { display: flex; flex-direction: column; }\n    .prism-a11y-v__section { border-bottom: 1px solid var(--prism-border); }\n\n    .prism-a11y-v__sec-hdr {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 9px 16px 9px 12px;\n      background: none;\n      border: none;\n      border-left: 3px solid transparent;\n      cursor: pointer;\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n      font-size: 11px;\n      font-weight: 600;\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n      color: var(--prism-text-muted);\n      text-align: left;\n      transition: background 0.1s, color 0.1s;\n      user-select: none;\n    }\n    .prism-a11y-v__sec-hdr--violation { border-left-color: var(--a11y-red); }\n    .prism-a11y-v__sec-hdr--violation:hover,\n    .prism-a11y-v__sec-hdr--violation.prism-a11y-v__sec-hdr--open {\n      background: color-mix(in srgb, var(--a11y-red) 7%, transparent);\n      color: var(--a11y-red);\n    }\n    .prism-a11y-v__sec-hdr--incomplete { border-left-color: var(--a11y-amber); }\n    .prism-a11y-v__sec-hdr--incomplete:hover,\n    .prism-a11y-v__sec-hdr--incomplete.prism-a11y-v__sec-hdr--open {\n      background: color-mix(in srgb, var(--a11y-amber) 7%, transparent);\n      color: var(--a11y-amber);\n    }\n    .prism-a11y-v__sec-hdr--pass { border-left-color: var(--a11y-green); }\n    .prism-a11y-v__sec-hdr--pass:hover,\n    .prism-a11y-v__sec-hdr--pass.prism-a11y-v__sec-hdr--open {\n      background: color-mix(in srgb, var(--a11y-green) 7%, transparent);\n      color: var(--a11y-green);\n    }\n\n    .prism-a11y-v__chevron { font-size: 10px; width: 12px; flex-shrink: 0; opacity: 0.7; }\n    .prism-a11y-v__sec-title { flex: 1; }\n    .prism-a11y-v__count { padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 700; }\n    .prism-a11y-v__count--violation {\n      background: color-mix(in srgb, var(--a11y-red) 15%, transparent);\n      color: var(--a11y-red);\n    }\n    .prism-a11y-v__count--incomplete {\n      background: color-mix(in srgb, var(--a11y-amber) 12%, transparent);\n      color: var(--a11y-amber);\n    }\n    .prism-a11y-v__count--pass {\n      background: color-mix(in srgb, var(--a11y-green) 12%, transparent);\n      color: var(--a11y-green);\n    }\n\n    .prism-a11y-v__sec-body {\n      padding: 8px 12px 12px;\n      background: var(--prism-bg);\n    }\n    .prism-a11y-v__empty { padding: 6px 4px; font-size: 12px; color: var(--prism-text-muted); }\n\n    .prism-a11y-v__item {\n      padding: 10px 12px;\n      margin-bottom: 6px;\n      background: var(--prism-bg-surface);\n      border-radius: var(--prism-radius, 8px);\n      border: 1px solid var(--prism-border);\n    }\n    .prism-a11y-v__item--pass {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 5px 12px;\n    }\n    .prism-a11y-v__item-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }\n\n    .prism-a11y-v__impact {\n      padding: 1px 6px;\n      border-radius: var(--prism-radius-xs, 3px);\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n    }\n    .prism-a11y-v__impact--critical {\n      background: color-mix(in srgb, var(--a11y-red) 18%, transparent);\n      color: var(--a11y-red);\n      border: 1px solid color-mix(in srgb, var(--a11y-red) 30%, transparent);\n    }\n    .prism-a11y-v__impact--serious {\n      background: color-mix(in srgb, #fb923c 18%, transparent);\n      color: #fb923c;\n      border: 1px solid color-mix(in srgb, #fb923c 30%, transparent);\n    }\n    .prism-a11y-v__impact--moderate {\n      background: color-mix(in srgb, var(--a11y-amber) 18%, transparent);\n      color: var(--a11y-amber);\n      border: 1px solid color-mix(in srgb, var(--a11y-amber) 30%, transparent);\n    }\n    .prism-a11y-v__impact--minor {\n      background: color-mix(in srgb, var(--prism-text-muted) 10%, transparent);\n      color: var(--prism-text-muted);\n      border: 1px solid var(--prism-border);\n    }\n\n    .prism-a11y-v__rule-id {\n      font-family: var(--prism-font-mono, monospace);\n      font-size: 12px;\n      color: var(--prism-text-muted);\n    }\n    .prism-a11y-v__desc { margin: 3px 0; font-size: 12px; line-height: 1.4; color: var(--prism-text-2); }\n\n    .prism-a11y-v__code {\n      margin: 7px 0 0;\n      border-radius: var(--prism-radius-xs, 3px);\n      overflow: hidden;\n      border: 1px solid var(--prism-border);\n      background: var(--prism-void);\n    }\n    .prism-a11y-v__code pre {\n      margin: 0;\n      padding: 10px 14px;\n      font-size: 12px;\n      line-height: 1.6;\n      font-family: var(--prism-font-mono, monospace);\n      overflow: auto;\n    }\n    .prism-a11y-v__code code { font-family: inherit; }\n    :host ::ng-deep .prism-a11y-v__code .hljs { background: transparent; color: var(--prism-text-2); }\n    :host ::ng-deep .prism-a11y-v__code .hljs-tag { color: var(--prism-text-muted); }\n    :host ::ng-deep .prism-a11y-v__code .hljs-name { color: var(--prism-primary); }\n    :host ::ng-deep .prism-a11y-v__code .hljs-attr { color: #93c5fd; }\n    :host ::ng-deep .prism-a11y-v__code .hljs-string { color: #7dd3fc; }\n\n    .prism-a11y-v__link {\n      display: inline-block;\n      margin-top: 5px;\n      font-size: 12px;\n      color: var(--prism-primary);\n      text-decoration: none;\n    }\n    .prism-a11y-v__link:hover { text-decoration: underline; }\n\n    .prism-a11y-v__status {\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    .prism-a11y-v__error {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 100px;\n      color: var(--a11y-red);\n      font-size: 13px;\n    }\n  "] }]
+  `, styles: ["\n    :host { display: flex; flex-direction: column; height: 100%; overflow: auto; }\n\n    .a11y-body {\n      padding: 18px 20px;\n      display: grid;\n      grid-template-columns: 220px 1fr;\n      gap: 20px;\n      min-height: 0;\n    }\n    .a11y-body--loading { opacity: 0.55; transition: opacity var(--dur-base); }\n\n    .score-wrap {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 10px;\n      padding: 14px;\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-radius: 10px;\n      align-self: start;\n    }\n\n    .score-label {\n      font-size: 11px;\n      color: var(--prism-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      font-weight: 600;\n    }\n    .score-meta {\n      display: flex;\n      gap: 12px;\n      margin-top: 2px;\n      font-size: 11px;\n      color: var(--prism-text-muted);\n    }\n    .score-meta span { display: flex; align-items: center; gap: 4px; }\n    .score-meta i { width: 6px; height: 6px; border-radius: 50%; display: block; }\n\n    .viol-list {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      min-width: 0;\n    }\n\n    .viol {\n      display: grid;\n      grid-template-columns: auto 1fr auto;\n      align-items: center;\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      border-left: 3px solid var(--sev-color, var(--prism-primary));\n      transition: border-color var(--dur-fast);\n    }\n    .viol:hover { border-color: var(--prism-border-strong); }\n\n    .viol-sev {\n      font-family: var(--font-mono);\n      font-size: 9.5px;\n      font-weight: 700;\n      padding: 2px 6px;\n      border-radius: var(--radius-xs);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      background: color-mix(in srgb, var(--sev-color) 15%, transparent);\n      color: var(--sev-color);\n    }\n\n    .viol-text {\n      font-size: 12.5px;\n      color: var(--prism-text);\n      min-width: 0;\n    }\n    .viol-text b {\n      display: block;\n      font-weight: 600;\n      margin-bottom: 1px;\n    }\n    .viol-text span {\n      color: var(--prism-text-muted);\n      font-size: 11.5px;\n    }\n\n    .viol-rule {\n      font-family: var(--font-mono);\n      font-size: 11px;\n      color: var(--prism-text-ghost);\n      padding: 2px 7px;\n      background: var(--prism-input-bg);\n      border-radius: var(--radius-xs);\n      white-space: nowrap;\n    }\n\n    .a11y-status {\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    .a11y-status--error { color: var(--prism-danger); }\n\n    @media (max-width: 1100px) {\n      .a11y-body { grid-template-columns: 1fr; }\n    }\n  "] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yViolationsComponent, { className: "A11yViolationsComponent", filePath: "app/panels/a11y/a11y-violations.component.ts", lineNumber: 380 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yViolationsComponent, { className: "A11yViolationsComponent", filePath: "app/panels/a11y/a11y-violations.component.ts", lineNumber: 198 }); })();