@ng-prism/core 22.6.0 → 22.7.0-beta.1

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

@@ -1,12 +1,17 @@
+import type { StatusTone } from '../../../plugin/status.js';
 import * as i0 from "@angular/core";
+/**
+ * The a11y score as a ring, drawn in the status tone of the grade rather than
+ * the brand gradient: a rated value takes its verdict's colour everywhere. The
+ * figure itself is set by the metric card around it.
+ */
 export declare class A11yScoreComponent {
     readonly score: import("@angular/core").InputSignal<number>;
-    readonly compact: import("@angular/core").InputSignal<boolean>;
-    protected readonly gradientId: string;
+    readonly tone: import("@angular/core").InputSignal<StatusTone>;
     protected readonly R = 54;
     protected readonly CIRC: number;
     protected readonly dashOffset: import("@angular/core").Signal<number>;
     static ɵfac: i0.ɵɵFactoryDeclaration<A11yScoreComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<A11yScoreComponent, "prism-a11y-score", never, { "score": { "alias": "score"; "required": true; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<A11yScoreComponent, "prism-a11y-score", never, { "score": { "alias": "score"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 //# sourceMappingURL=a11y-score.component.d.ts.map

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":";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"}
+{"version":3,"file":"a11y-score.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-score.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;;AAK5D;;;;GAIG;AACH,qBAQa,kBAAkB;IAC3B,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,QAAQ,CAAC,IAAI,kDAA2B;IAExC,SAAS,CAAC,QAAQ,CAAC,CAAC,MAAK;IACzB,SAAS,CAAC,QAAQ,CAAC,IAAI,SAAiB;IAExC,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAAoG;yCAPxH,kBAAkB;2CAAlB,kBAAkB;CAQ9B"}

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

@@ -1,54 +1,38 @@
 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);
-    i0.ɵɵtext(2);
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(3, "div", 9);
-    i0.ɵɵtext(4, "/ 100");
-    i0.ɵɵdomElementEnd()();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.score());
-} }
 const R = 54;
 const CIRCUMFERENCE = 2 * Math.PI * R;
-let nextId = 0;
+/**
+ * The a11y score as a ring, drawn in the status tone of the grade rather than
+ * the brand gradient: a rated value takes its verdict's colour everywhere. The
+ * figure itself is set by the metric card around it.
+ */
 export class A11yScoreComponent {
     score = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "score" }] : /* istanbul ignore next */ []));
-    compact = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
-    gradientId = `prism-sg-${nextId++}`;
+    tone = input('ok', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
     R = R;
     CIRC = CIRCUMFERENCE;
-    dashOffset = computed(() => CIRCUMFERENCE - (this.score() / 100) * CIRCUMFERENCE, /* @ts-ignore */
+    dashOffset = computed(() => CIRCUMFERENCE - (Math.max(0, Math.min(100, this.score())) / 100) * CIRCUMFERENCE, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dashOffset" }] : /* istanbul ignore next */ []));
     static ɵfac = function A11yScoreComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11yScoreComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yScoreComponent, selectors: [["prism-a11y-score"]], inputs: { score: [1, "score"], compact: [1, "compact"] }, decls: 9, vars: 7, consts: [[1, "score-ring"], ["viewBox", "0 0 128 128"], ["x1", "0", "y1", "0", "x2", "1", "y2", "1", 3, "id"], ["offset", "0%", 1, "gradient-start"], ["offset", "100%", 1, "gradient-end"], ["cx", "64", "cy", "64", 1, "track"], ["cx", "64", "cy", "64", 1, "fill"], [1, "score-val"], [1, "score-num"], [1, "score-max"]], template: function A11yScoreComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵdomElementStart(0, "div", 0);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yScoreComponent, selectors: [["prism-a11y-score"]], hostAttrs: ["aria-hidden", "true"], hostVars: 1, hostBindings: function A11yScoreComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-tone", ctx.tone());
+        } }, inputs: { score: [1, "score"], tone: [1, "tone"] }, decls: 3, vars: 4, consts: [["viewBox", "0 0 128 128"], ["cx", "64", "cy", "64", 1, "track"], ["cx", "64", "cy", "64", 1, "fill"]], template: function A11yScoreComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵdomElementStart(1, "svg", 1)(2, "defs")(3, "linearGradient", 2);
-            i0.ɵɵdomElement(4, "stop", 3)(5, "stop", 4);
-            i0.ɵɵdomElementEnd()();
-            i0.ɵɵdomElement(6, "circle", 5)(7, "circle", 6);
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵconditionalCreate(8, A11yScoreComponent_Conditional_8_Template, 5, 1, "div", 7);
+            i0.ɵɵdomElementStart(0, "svg", 0);
+            i0.ɵɵdomElement(1, "circle", 1)(2, "circle", 2);
             i0.ɵɵdomElementEnd();
         } if (rf & 2) {
-            i0.ɵɵadvance(3);
-            i0.ɵɵdomProperty("id", ctx.gradientId);
-            i0.ɵɵadvance(3);
-            i0.ɵɵattribute("r", ctx.R);
             i0.ɵɵadvance();
-            i0.ɵɵattribute("r", ctx.R)("stroke-dasharray", ctx.CIRC)("stroke-dashoffset", ctx.dashOffset())("stroke", "url(#" + ctx.gradientId + ")");
+            i0.ɵɵattribute("r", ctx.R);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.compact() ? 8 : -1);
-        } }, 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}"] });
+            i0.ɵɵattribute("r", ctx.R)("stroke-dasharray", ctx.CIRC)("stroke-dashoffset", ctx.dashOffset());
+        } }, styles: ["[_nghost-%COMP%] {\n    --%NS%prism-score-tone: var(--%NS%prism-success);\n\n    display: inline-flex;\n    flex: none;\n    width: 40px;\n    height: 40px;\n}\n\n[data-tone='warn'][_nghost-%COMP%] {\n    --%NS%prism-score-tone: var(--%NS%prism-warn);\n}\n\n[data-tone='danger'][_nghost-%COMP%] {\n    --%NS%prism-score-tone: var(--%NS%prism-danger);\n}\n\nsvg[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    transform: rotate(-90deg);\n}\n\ncircle[_ngcontent-%COMP%] {\n    fill: none;\n    stroke-width: 14;\n}\n\n.track[_ngcontent-%COMP%] {\n    stroke: var(--%NS%prism-input-bg);\n}\n\n.fill[_ngcontent-%COMP%] {\n    stroke: var(--%NS%prism-score-tone);\n    stroke-linecap: round;\n    transition: stroke-dashoffset 0.5s ease;\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\">\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: 14 }); })();
+        args: [{ selector: 'prism-a11y-score', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { '[attr.data-tone]': 'tone()', 'aria-hidden': 'true' }, template: "<svg viewBox=\"0 0 128 128\">\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</svg>\n", styles: [":host {\n    --prism-score-tone: var(--prism-success);\n\n    display: inline-flex;\n    flex: none;\n    width: 40px;\n    height: 40px;\n}\n\n:host([data-tone='warn']) {\n    --prism-score-tone: var(--prism-warn);\n}\n\n:host([data-tone='danger']) {\n    --prism-score-tone: var(--prism-danger);\n}\n\nsvg {\n    width: 100%;\n    height: 100%;\n    transform: rotate(-90deg);\n}\n\ncircle {\n    fill: none;\n    stroke-width: 14;\n}\n\n.track {\n    stroke: var(--prism-input-bg);\n}\n\n.fill {\n    stroke: var(--prism-score-tone);\n    stroke-linecap: round;\n    transition: stroke-dashoffset 0.5s ease;\n}\n"] }]
+    }], null, { score: [{ type: i0.Input, args: [{ isSignal: true, alias: "score", required: true }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yScoreComponent, { className: "A11yScoreComponent", filePath: "app/panels/a11y/a11y-score.component.ts", lineNumber: 20 }); })();

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

@@ -100,10 +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    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}"] });
+        } }, 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: color-mix(in srgb, var(--%NS%prism-primary-fill) 8%, transparent);\n    border: 2px solid var(--%NS%prism-primary-fill);\n    border-radius: 4px;\n    box-shadow: 0 0 0 4px color-mix(in srgb, var(--%NS%prism-primary-fill) 12%, transparent);\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: var(--%NS%prism-on-primary);\n    background: var(--%NS%prism-primary-fill);\n    border-radius: 9px;\n    box-shadow:\n        0 0 0 1.5px var(--%NS%prism-on-primary),\n        var(--%NS%prism-shadow-sm);\n}\n\n.prism-a11y-sr-ov__badge--active[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-primary-fill-hover);\n    box-shadow:\n        0 0 0 2px var(--%NS%prism-on-primary),\n        0 0 0 4px color-mix(in srgb, var(--%NS%prism-primary-fill) 40%, transparent);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11ySrOverlayComponent, [{
         type: Component,
-        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"] }]
+        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: color-mix(in srgb, var(--prism-primary-fill) 8%, transparent);\n    border: 2px solid var(--prism-primary-fill);\n    border-radius: 4px;\n    box-shadow: 0 0 0 4px color-mix(in srgb, var(--prism-primary-fill) 12%, transparent);\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: var(--prism-on-primary);\n    background: var(--prism-primary-fill);\n    border-radius: 9px;\n    box-shadow:\n        0 0 0 1.5px var(--prism-on-primary),\n        var(--prism-shadow-sm);\n}\n\n.prism-a11y-sr-ov__badge--active {\n    background: var(--prism-primary-fill-hover);\n    box-shadow:\n        0 0 0 2px var(--prism-on-primary),\n        0 0 0 4px color-mix(in srgb, var(--prism-primary-fill) 40%, transparent);\n}\n"] }]
     }], () => [], null); })();
 (() => { (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.js

@@ -77,10 +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%] {\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}"] });
+        } }, 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-muted);\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()) {\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"] }]
+        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-muted);\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: 12 }); })();

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,EAAE,iBAAiB,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAE1F;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,cAAc,GAAG,WAAW,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAmB/H"}
+{"version":3,"file":"a11y-summary.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-summary.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAE1F;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,cAAc,GAAG,WAAW,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CA2B/H"}

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

@@ -1,3 +1,4 @@
+import { statusFor, thresholdFromTarget } from '../../../plugin/status.js';
 /**
  * A component's standing, derived with the same precedence
  * `checkA11yThresholds` uses library-wide.
@@ -22,7 +23,13 @@ export function deriveA11ySummary(score, thresholds) {
         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) {
+    // The score is graded like every other key figure: ok from the target,
+    // warn down to 0.75 of it, critical below that.
+    const scoreTone = statusFor(score.score, thresholdFromTarget(thresholds.score));
+    if (scoreTone === 'danger') {
+        return { variant: 'danger', label: `A11y score ${score.score}` };
+    }
+    if (score.moderate > thresholds.moderate || scoreTone === 'warn') {
         return { variant: 'warn', label: `A11y score ${score.score}` };
     }
     return { variant: 'ok', label: `A11y score ${score.score}` };

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

@@ -133,11 +133,11 @@ export class A11yTreeNodeComponent {
             i0.ɵɵrepeater(ctx.stateEntries());
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.expanded() && ctx.node().children.length ? 9 : -1);
-        } }, dependencies: [A11yTreeNodeComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n}\n\n.aria-tree-line[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    padding: 2px 0;\n    font-family: var(--%NS%font-mono);\n    font-size: 12.5px;\n    line-height: 1.8;\n    color: var(--%NS%prism-text-2);\n}\n\n.aria-tree-line--hidden[_ngcontent-%COMP%] {\n    opacity: 0.4;\n}\n\n.indent[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    font-size: 12px;\n    color: var(--%NS%prism-text-ghost);\n    text-align: right;\n    white-space: pre;\n    user-select: none;\n    opacity: 0.5;\n}\n\n.tree-toggle[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    width: 12px;\n    padding: 0;\n    font-size: 10px;\n    color: var(--%NS%prism-text-muted);\n    cursor: pointer;\n    background: none;\n    border: none;\n}\n\n.role[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--%NS%prism-primary);\n}\n\n.name[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text);\n}\n\n.attr[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text-ghost);\n}"] });
+        } }, dependencies: [A11yTreeNodeComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n}\n\n.aria-tree-line[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    padding: 2px 0;\n    font-family: var(--%NS%font-mono);\n    font-size: 12.5px;\n    line-height: 1.8;\n    color: var(--%NS%prism-text-2);\n}\n\n.aria-tree-line--hidden[_ngcontent-%COMP%] {\n    opacity: 0.4;\n}\n\n.indent[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    font-size: 12px;\n    color: var(--%NS%prism-text-ghost);\n    text-align: right;\n    white-space: pre;\n    user-select: none;\n    opacity: 0.5;\n}\n\n.tree-toggle[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    width: 12px;\n    padding: 0;\n    font-size: 10px;\n    color: var(--%NS%prism-text-muted);\n    cursor: pointer;\n    background: none;\n    border: none;\n}\n\n.role[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--%NS%prism-primary);\n}\n\n.name[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text);\n}\n\n.attr[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text-muted);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yTreeNodeComponent, [{
         type: Component,
-        args: [{ selector: 'prism-a11y-tree-node', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"aria-tree-line\"\n    [class.aria-tree-line--hidden]=\"node().hidden\">\n    <span\n        class=\"indent\"\n        [style.width.px]=\"depth() * 20\">\n        @if (depth() > 0) {\n            {{ isLast() ? '\u2514\u2500' : '\u251C\u2500' }}\n        }\n    </span>\n    @if (node().children.length) {\n        <button\n            class=\"tree-toggle\"\n            (click)=\"toggleExpanded()\">\n            {{ expanded() ? '\u25BE' : '\u25B8' }}\n        </button>\n    }\n    <span class=\"role\">{{ node().role }}</span>\n    @if (node().name) {\n        <span class=\"name\">\"{{ node().name }}\"</span>\n    }\n    @for (entry of stateEntries(); track entry.key) {\n        <span class=\"attr\">[{{ entry.label }}]</span>\n    }\n</div>\n@if (expanded() && node().children.length) {\n    @for (child of node().children; track child.element; let last = $last) {\n        <prism-a11y-tree-node\n            [node]=\"child\"\n            [depth]=\"depth() + 1\"\n            [isLast]=\"last\" />\n    }\n}\n", styles: [":host {\n    display: block;\n}\n\n.aria-tree-line {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    padding: 2px 0;\n    font-family: var(--font-mono);\n    font-size: 12.5px;\n    line-height: 1.8;\n    color: var(--prism-text-2);\n}\n\n.aria-tree-line--hidden {\n    opacity: 0.4;\n}\n\n.indent {\n    flex-shrink: 0;\n    font-size: 12px;\n    color: var(--prism-text-ghost);\n    text-align: right;\n    white-space: pre;\n    user-select: none;\n    opacity: 0.5;\n}\n\n.tree-toggle {\n    flex-shrink: 0;\n    width: 12px;\n    padding: 0;\n    font-size: 10px;\n    color: var(--prism-text-muted);\n    cursor: pointer;\n    background: none;\n    border: none;\n}\n\n.role {\n    font-weight: 600;\n    color: var(--prism-primary);\n}\n\n.name {\n    color: var(--prism-text);\n}\n\n.attr {\n    color: var(--prism-text-ghost);\n}\n"] }]
+        args: [{ selector: 'prism-a11y-tree-node', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"aria-tree-line\"\n    [class.aria-tree-line--hidden]=\"node().hidden\">\n    <span\n        class=\"indent\"\n        [style.width.px]=\"depth() * 20\">\n        @if (depth() > 0) {\n            {{ isLast() ? '\u2514\u2500' : '\u251C\u2500' }}\n        }\n    </span>\n    @if (node().children.length) {\n        <button\n            class=\"tree-toggle\"\n            (click)=\"toggleExpanded()\">\n            {{ expanded() ? '\u25BE' : '\u25B8' }}\n        </button>\n    }\n    <span class=\"role\">{{ node().role }}</span>\n    @if (node().name) {\n        <span class=\"name\">\"{{ node().name }}\"</span>\n    }\n    @for (entry of stateEntries(); track entry.key) {\n        <span class=\"attr\">[{{ entry.label }}]</span>\n    }\n</div>\n@if (expanded() && node().children.length) {\n    @for (child of node().children; track child.element; let last = $last) {\n        <prism-a11y-tree-node\n            [node]=\"child\"\n            [depth]=\"depth() + 1\"\n            [isLast]=\"last\" />\n    }\n}\n", styles: [":host {\n    display: block;\n}\n\n.aria-tree-line {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    padding: 2px 0;\n    font-family: var(--font-mono);\n    font-size: 12.5px;\n    line-height: 1.8;\n    color: var(--prism-text-2);\n}\n\n.aria-tree-line--hidden {\n    opacity: 0.4;\n}\n\n.indent {\n    flex-shrink: 0;\n    font-size: 12px;\n    color: var(--prism-text-ghost);\n    text-align: right;\n    white-space: pre;\n    user-select: none;\n    opacity: 0.5;\n}\n\n.tree-toggle {\n    flex-shrink: 0;\n    width: 12px;\n    padding: 0;\n    font-size: 10px;\n    color: var(--prism-text-muted);\n    cursor: pointer;\n    background: none;\n    border: none;\n}\n\n.role {\n    font-weight: 600;\n    color: var(--prism-primary);\n}\n\n.name {\n    color: var(--prism-text);\n}\n\n.attr {\n    color: var(--prism-text-muted);\n}\n"] }]
     }], () => [], { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], isLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLast", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yTreeNodeComponent, { className: "A11yTreeNodeComponent", filePath: "app/panels/a11y/a11y-tree.component.ts", lineNumber: 13 }); })();
 export class A11yTreeComponent {

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

@@ -1,10 +1,31 @@
 import { A11yAuditService } from './a11y-audit.service.js';
 import * as i0 from "@angular/core";
+/**
+ * The Violations view: the score as a small metric card with a ring in its
+ * grade's tone, the violations as list rows, most severe first, and the passed
+ * checks folded away below them.
+ */
 export declare class A11yViolationsComponent {
     protected readonly auditService: A11yAuditService;
+    private readonly manifest;
+    private readonly config;
     protected readonly scoreResult: import("@angular/core").Signal<import("./a11y.types.js").A11yScoreResult | null>;
-    protected readonly allResults: import("@angular/core").Signal<import("axe-core").Result[]>;
-    protected sevColor(impact: string | null | undefined): string;
+    private readonly thresholds;
+    /** The score's grade, by the rule every other a11y surface uses. */
+    protected readonly grade: import("@angular/core").Signal<"ok" | "warn" | "danger">;
+    protected readonly badgeTone: import("@angular/core").Signal<import("../../shared/badge.types.js").BadgeTone>;
+    protected readonly scoreTitle: import("@angular/core").Signal<string>;
+    protected readonly violations: import("@angular/core").Signal<{
+        badge: import("./severity.js").SeverityBadge;
+        description: string;
+        help: string;
+        helpUrl: string;
+        id: string;
+        impact?: import("axe-core").ImpactValue;
+        tags: import("axe-core").TagValue[];
+        nodes: import("axe-core").NodeResult[];
+    }[]>;
+    protected readonly passes: import("@angular/core").Signal<import("axe-core").Result[]>;
     static ɵfac: i0.ɵɵFactoryDeclaration<A11yViolationsComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<A11yViolationsComponent, "prism-a11y-violations", never, {}, {}, never, never, true, never>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"a11y-violations.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-violations.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAqB3D,qBAQa,uBAAuB;IAChC,SAAS,CAAC,QAAQ,CAAC,YAAY,mBAA4B;IAE3D,SAAS,CAAC,QAAQ,CAAC,WAAW,mFAAmD;IAEjF,SAAS,CAAC,QAAQ,CAAC,UAAU,8DAQ1B;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM;yCAfpD,uBAAuB;2CAAvB,uBAAuB;CAkBnC"}
+{"version":3,"file":"a11y-violations.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-violations.component.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAc3D;;;;GAIG;AACH,qBAQa,uBAAuB;IAChC,SAAS,CAAC,QAAQ,CAAC,YAAY,mBAA4B;IAC3D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2C;IACpE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAE9D,SAAS,CAAC,QAAQ,CAAC,WAAW,mFAAmD;IAEjF,OAAO,CAAC,QAAQ,CAAC,UAAU,CAIxB;IAEH,oEAAoE;IACpE,SAAS,CAAC,QAAQ,CAAC,KAAK,2DAIrB;IAEH,SAAS,CAAC,QAAQ,CAAC,SAAS,kFAA+C;IAE3E,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAQ1B;IAEH,SAAS,CAAC,QAAQ,CAAC,UAAU;;;;;;;;;SAO1B;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,8DAA6D;yCAzC7E,uBAAuB;2CAAvB,uBAAuB;CA0CnC"}

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

@@ -1,8 +1,16 @@
 import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { toneForStatus } from '../../shared/badge.types.js';
+import { PrismBadgeComponent } from '../../shared/prism-badge.component.js';
+import { PrismListRowComponent } from '../../shared/prism-list-row.component.js';
+import { PrismMetricCardComponent } from '../../shared/prism-metric-card.component.js';
+import { PRISM_CONFIG, PRISM_MANIFEST } from '../../tokens/prism-tokens.js';
 import { A11yAuditService } from './a11y-audit.service.js';
 import { A11yScoreComponent } from './a11y-score.component.js';
+import { deriveA11ySummary } from './a11y-summary.js';
+import { resolveA11yThresholds } from './a11y-thresholds.js';
+import { severityBadge } from './severity.js';
 import * as i0 from "@angular/core";
-const _forTrack0 = ($index, $item) => $item.id + $item.impact;
+const _forTrack0 = ($index, $item) => $item.id;
 function A11yViolationsComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
     i0.ɵɵtext(1);
@@ -12,100 +20,89 @@ function A11yViolationsComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Audit failed: ", ctx_r0.auditService.error(), " ");
 } }
-function A11yViolationsComponent_Conditional_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span");
-    i0.ɵɵelement(1, "i", 11);
-    i0.ɵɵtext(2);
+function A11yViolationsComponent_Conditional_1_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "prism-list-row");
+    i0.ɵɵelement(1, "prism-badge", 8);
+    i0.ɵɵelementStart(2, "span", 9);
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", ctx_r0.scoreResult().critical, " critical");
-} }
-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.ɵɵelementStart(4, "span", 10);
+    i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 11);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const item_r2 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("tone", item_r2.badge.tone)("variant", item_r2.badge.variant)("label", item_r2.badge.label);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(item_r2.help || item_r2.description);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", ctx_r0.scoreResult().moderate, " moderate");
+    i0.ɵɵtextInterpolate(item_r2.description);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(item_r2.id);
 } }
-function A11yViolationsComponent_Conditional_1_For_13_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span");
-    i0.ɵɵtext(1);
+function A11yViolationsComponent_Conditional_1_ForEmpty_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵtext(1, "No violations.");
     i0.ɵɵelementEnd();
+} }
+function A11yViolationsComponent_Conditional_1_ForEmpty_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, A11yViolationsComponent_Conditional_1_ForEmpty_6_Conditional_0_Template, 2, 0, "div", 2);
 } if (rf & 2) {
-    const item_r2 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(item_r2.help);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(!ctx_r0.auditService.running() ? 0 : -1);
 } }
-function A11yViolationsComponent_Conditional_1_For_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 13)(1, "span", 14);
-    i0.ɵɵtext(2);
+function A11yViolationsComponent_Conditional_1_Conditional_7_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "prism-list-row");
+    i0.ɵɵelement(1, "prism-badge", 13);
+    i0.ɵɵelementStart(2, "span", 9);
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 15)(4, "b");
+    i0.ɵɵelementStart(4, "span", 11);
     i0.ɵɵtext(5);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, A11yViolationsComponent_Conditional_1_For_13_Conditional_6_Template, 2, 1, "span");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 16);
-    i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const item_r2 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleProp("--%NS%sev-color", ctx_r0.sevColor(item_r2.impact));
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r2.impact ?? "pass");
+    const pass_r3 = ctx.$implicit;
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(item_r2.description);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r2.help ? 6 : -1);
+    i0.ɵɵtextInterpolate(pass_r3.help || pass_r3.description);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r2.id);
+    i0.ɵɵtextInterpolate(pass_r3.id);
 } }
-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.");
+function A11yViolationsComponent_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "details", 7)(1, "summary");
+    i0.ɵɵtext(2);
     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);
+    i0.ɵɵelementStart(3, "div", 12);
+    i0.ɵɵrepeaterCreate(4, A11yViolationsComponent_Conditional_1_Conditional_7_For_5_Template, 6, 2, "prism-list-row", null, _forTrack0);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(!ctx_r0.auditService.running() ? 0 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2("", ctx_r0.passes().length, " passed ", ctx_r0.passes().length === 1 ? "check" : "checks");
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r0.passes());
 } }
 function A11yViolationsComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 3)(1, "div", 4);
+    i0.ɵɵelementStart(0, "div", 3)(1, "prism-metric-card", 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(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.ɵɵelementStart(3, "div", 6);
+    i0.ɵɵrepeaterCreate(4, A11yViolationsComponent_Conditional_1_For_5_Template, 8, 6, "prism-list-row", null, _forTrack0, false, A11yViolationsComponent_Conditional_1_ForEmpty_6_Template, 1, 1);
+    i0.ɵɵconditionalCreate(7, A11yViolationsComponent_Conditional_1_Conditional_7_Template, 6, 2, "details", 7);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵclassProp("a11y-body--loading", ctx_r0.auditService.running());
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("score", ctx_r0.scoreResult()?.score ?? 0);
-    i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r0.scoreResult()?.critical ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.scoreResult()?.moderate ? 7 : -1);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("", ctx_r0.scoreResult()?.passes ?? 0, " pass");
+    i0.ɵɵproperty("value", "" + (ctx_r0.scoreResult()?.score ?? 0))("tone", ctx_r0.badgeTone())("title", ctx_r0.scoreTitle());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("score", ctx_r0.scoreResult()?.score ?? 0)("tone", ctx_r0.grade());
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r0.allResults());
+    i0.ɵɵrepeater(ctx_r0.violations());
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r0.passes().length > 0 ? 7 : -1);
 } }
 function A11yViolationsComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
@@ -118,40 +115,58 @@ const IMPACT_ORDER = {
     moderate: 2,
     minor: 3
 };
-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)';
-}
+/**
+ * The Violations view: the score as a small metric card with a ring in its
+ * grade's tone, the violations as list rows, most severe first, and the passed
+ * checks folded away below them.
+ */
 export class A11yViolationsComponent {
     auditService = inject(A11yAuditService);
+    manifest = inject(PRISM_MANIFEST);
+    config = inject(PRISM_CONFIG);
     scoreResult = computed(() => this.auditService.scoreResult(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "scoreResult" }] : /* istanbul ignore next */ []));
-    allResults = computed(() => {
+    thresholds = computed(() => {
+        const meta = this.manifest.meta?.['a11y'];
+        return resolveA11yThresholds({ ...meta?.thresholds, ...this.config.a11y?.thresholds });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "thresholds" }] : /* istanbul ignore next */ []));
+    /** The score's grade, by the rule every other a11y surface uses. */
+    grade = computed(() => {
+        const result = this.scoreResult();
+        return result ? deriveA11ySummary(result, this.thresholds()).variant : 'ok';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "grade" }] : /* istanbul ignore next */ []));
+    badgeTone = computed(() => toneForStatus(this.grade()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badgeTone" }] : /* istanbul ignore next */ []));
+    scoreTitle = computed(() => {
+        const r = this.scoreResult();
+        if (!r)
+            return '';
+        return (`axe-core audit · target ${this.thresholds().score}\n` +
+            `${r.critical} critical · ${r.serious} serious · ${r.moderate} moderate · ${r.minor} minor · ${r.passes} passed`);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scoreTitle" }] : /* istanbul ignore next */ []));
+    violations = 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];
+        return [...results.violations]
+            .sort((a, b) => (IMPACT_ORDER[a.impact ?? ''] ?? 4) - (IMPACT_ORDER[b.impact ?? ''] ?? 4))
+            .map((v) => ({ ...v, badge: severityBadge(v.impact) }));
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "allResults" }] : /* istanbul ignore next */ []));
-    sevColor(impact) {
-        return sevColor(impact);
-    }
+    ...(ngDevMode ? [{ debugName: "violations" }] : /* istanbul ignore next */ []));
+    passes = computed(() => this.auditService.results()?.passes ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "passes" }] : /* istanbul ignore next */ []));
     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, "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, "--%NS%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);
+    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"], ["label", "Score", "unit", "/ 100", 1, "a11y-score-card", 3, "value", "tone", "title"], ["metricVisual", "", 3, "score", "tone"], [1, "viol-list"], [1, "viol-passed"], ["rowBadge", "", 3, "tone", "variant", "label"], ["rowTitle", ""], ["rowDescription", ""], ["rowMeta", ""], [1, "viol-passed__list"], ["rowBadge", "", "tone", "success", "label", "Passed"]], 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, 8, 9, "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: [A11yScoreComponent], styles: ["[_nghost-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: auto;\n}\n\n.a11y-body[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 220px 1fr;\n    gap: 20px;\n    min-height: 0;\n    padding: 18px 20px;\n}\n\n.a11y-body--loading[_ngcontent-%COMP%] {\n    opacity: 0.55;\n    transition: opacity var(--%NS%dur-base);\n}\n\n.score-wrap[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    align-items: center;\n    align-self: start;\n    padding: 14px;\n    background: var(--%NS%prism-bg-surface);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 10px;\n}\n\n.score-label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--%NS%prism-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n}\n\n.score-meta[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    margin-top: 2px;\n    font-size: 11px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.score-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    align-items: center;\n}\n\n.score-meta[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    display: block;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n}\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    gap: 12px;\n    align-items: center;\n    padding: 10px 12px;\n    background: var(--%NS%prism-bg-surface);\n    border: 1px solid var(--%NS%prism-border);\n    border-left: 3px solid var(--%NS%sev-color, var(--%NS%prism-primary));\n    border-radius: 8px;\n    transition: border-color var(--%NS%dur-fast);\n}\n\n.viol[_ngcontent-%COMP%]:hover {\n    border-color: var(--%NS%prism-border-strong);\n}\n\n.viol-sev[_ngcontent-%COMP%] {\n    padding: 2px 6px;\n    font-family: var(--%NS%font-mono);\n    font-size: 9.5px;\n    font-weight: 700;\n    color: var(--%NS%sev-color);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    background: color-mix(in srgb, var(--%NS%sev-color) 15%, transparent);\n    border-radius: var(--%NS%radius-xs);\n}\n\n.viol-text[_ngcontent-%COMP%] {\n    min-width: 0;\n    font-size: 12.5px;\n    color: var(--%NS%prism-text);\n}\n\n.viol-text[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] {\n    display: block;\n    margin-bottom: 1px;\n    font-weight: 600;\n}\n\n.viol-text[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 11.5px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.viol-rule[_ngcontent-%COMP%] {\n    padding: 2px 7px;\n    font-family: var(--%NS%font-mono);\n    font-size: 11px;\n    color: var(--%NS%prism-text-ghost);\n    white-space: nowrap;\n    background: var(--%NS%prism-input-bg);\n    border-radius: var(--%NS%radius-xs);\n}\n\n.a11y-status[_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.a11y-status--error[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-danger);\n}\n\n@media (width <= 1100px) {\n    .a11y-body[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n}"] });
+        } }, dependencies: [A11yScoreComponent, PrismBadgeComponent, PrismListRowComponent, PrismMetricCardComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n}\n\n.a11y-body[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 180px minmax(0, 1fr);\n    gap: 12px;\n    align-items: start;\n    padding: 16px 18px;\n    transition: opacity var(--%NS%dur-base);\n}\n\n.a11y-body--loading[_ngcontent-%COMP%] {\n    opacity: 0.6;\n}\n\n.viol-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    min-width: 0;\n}\n\n.viol-passed[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    padding: 6px 2px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--%NS%prism-text-muted);\n    cursor: pointer;\n    list-style: none;\n}\n\n.viol-passed[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]::-webkit-details-marker {\n    display: none;\n}\n\n.viol-passed[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]::before {\n    font-size: 10px;\n    content: '\u25B8';\n    transition: transform var(--%NS%dur-fast);\n}\n\n.viol-passed[open][_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]::before {\n    transform: rotate(90deg);\n}\n\n.viol-passed[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text-2);\n}\n\n.viol-passed[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 2px;\n    border-radius: 2px;\n}\n\n.viol-passed__list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    margin-top: 4px;\n}\n\n.a11y-status[_ngcontent-%COMP%] {\n    padding: 4px 2px;\n    font-size: 12.5px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.a11y-status--error[_ngcontent-%COMP%] {\n    padding: 16px 18px;\n    color: var(--%NS%prism-danger);\n}\n\n@container (max-width: 560px) {\n    .a11y-body[_ngcontent-%COMP%] {\n        grid-template-columns: minmax(0, 1fr);\n    }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yViolationsComponent, [{
         type: Component,
-        args: [{ selector: 'prism-a11y-violations', standalone: true, imports: [A11yScoreComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (auditService.error()) {\n    <div class=\"a11y-status a11y-status--error\"> Audit failed: {{ auditService.error() }} </div>\n} @else if (auditService.results() || auditService.running()) {\n    <div\n        class=\"a11y-body\"\n        [class.a11y-body--loading]=\"auditService.running()\">\n        <div class=\"score-wrap\">\n            <prism-a11y-score [score]=\"scoreResult()?.score ?? 0\" />\n            <div class=\"score-label\">axe-core audit</div>\n            <div class=\"score-meta\">\n                @if (scoreResult()?.critical) {\n                    <span><i style=\"background: var(--prism-danger)\"></i>{{ scoreResult()!.critical }} critical</span>\n                }\n                @if (scoreResult()?.moderate) {\n                    <span><i style=\"background: var(--prism-warn)\"></i>{{ scoreResult()!.moderate }} moderate</span>\n                }\n                <span><i style=\"background: var(--prism-success)\"></i>{{ scoreResult()?.passes ?? 0 }} pass</span>\n            </div>\n        </div>\n        <div class=\"viol-list\">\n            @for (item of allResults(); track item.id + item.impact) {\n                <div\n                    class=\"viol\"\n                    [style.--sev-color]=\"sevColor(item.impact)\">\n                    <span class=\"viol-sev\">{{ item.impact ?? 'pass' }}</span>\n                    <div class=\"viol-text\">\n                        <b>{{ item.description }}</b>\n                        @if (item.help) {\n                            <span>{{ item.help }}</span>\n                        }\n                    </div>\n                    <span class=\"viol-rule\">{{ item.id }}</span>\n                </div>\n            } @empty {\n                @if (!auditService.running()) {\n                    <div class=\"a11y-status\">No results yet.</div>\n                }\n            }\n        </div>\n    </div>\n} @else {\n    <div class=\"a11y-status\"> Select a component to run accessibility audit. </div>\n}\n", styles: [":host {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: auto;\n}\n\n.a11y-body {\n    display: grid;\n    grid-template-columns: 220px 1fr;\n    gap: 20px;\n    min-height: 0;\n    padding: 18px 20px;\n}\n\n.a11y-body--loading {\n    opacity: 0.55;\n    transition: opacity var(--dur-base);\n}\n\n.score-wrap {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    align-items: center;\n    align-self: start;\n    padding: 14px;\n    background: var(--prism-bg-surface);\n    border: 1px solid var(--prism-border);\n    border-radius: 10px;\n}\n\n.score-label {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--prism-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n}\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\n.score-meta span {\n    display: flex;\n    gap: 4px;\n    align-items: center;\n}\n\n.score-meta i {\n    display: block;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n}\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    gap: 12px;\n    align-items: center;\n    padding: 10px 12px;\n    background: var(--prism-bg-surface);\n    border: 1px solid var(--prism-border);\n    border-left: 3px solid var(--sev-color, var(--prism-primary));\n    border-radius: 8px;\n    transition: border-color var(--dur-fast);\n}\n\n.viol:hover {\n    border-color: var(--prism-border-strong);\n}\n\n.viol-sev {\n    padding: 2px 6px;\n    font-family: var(--font-mono);\n    font-size: 9.5px;\n    font-weight: 700;\n    color: var(--sev-color);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    background: color-mix(in srgb, var(--sev-color) 15%, transparent);\n    border-radius: var(--radius-xs);\n}\n\n.viol-text {\n    min-width: 0;\n    font-size: 12.5px;\n    color: var(--prism-text);\n}\n\n.viol-text b {\n    display: block;\n    margin-bottom: 1px;\n    font-weight: 600;\n}\n\n.viol-text span {\n    font-size: 11.5px;\n    color: var(--prism-text-muted);\n}\n\n.viol-rule {\n    padding: 2px 7px;\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--prism-text-ghost);\n    white-space: nowrap;\n    background: var(--prism-input-bg);\n    border-radius: var(--radius-xs);\n}\n\n.a11y-status {\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.a11y-status--error {\n    color: var(--prism-danger);\n}\n\n@media (width <= 1100px) {\n    .a11y-body {\n        grid-template-columns: 1fr;\n    }\n}\n"] }]
+        args: [{ selector: 'prism-a11y-violations', standalone: true, imports: [A11yScoreComponent, PrismBadgeComponent, PrismListRowComponent, PrismMetricCardComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (auditService.error()) {\n    <div class=\"a11y-status a11y-status--error\"> Audit failed: {{ auditService.error() }} </div>\n} @else if (auditService.results() || auditService.running()) {\n    <div\n        class=\"a11y-body\"\n        [class.a11y-body--loading]=\"auditService.running()\">\n        <prism-metric-card\n            class=\"a11y-score-card\"\n            label=\"Score\"\n            unit=\"/ 100\"\n            [value]=\"'' + (scoreResult()?.score ?? 0)\"\n            [tone]=\"badgeTone()\"\n            [title]=\"scoreTitle()\">\n            <prism-a11y-score\n                metricVisual\n                [score]=\"scoreResult()?.score ?? 0\"\n                [tone]=\"grade()\" />\n        </prism-metric-card>\n\n        <div class=\"viol-list\">\n            @for (item of violations(); track item.id) {\n                <prism-list-row>\n                    <prism-badge\n                        rowBadge\n                        [tone]=\"item.badge.tone\"\n                        [variant]=\"item.badge.variant\"\n                        [label]=\"item.badge.label\" />\n                    <span rowTitle>{{ item.help || item.description }}</span>\n                    <span rowDescription>{{ item.description }}</span>\n                    <span rowMeta>{{ item.id }}</span>\n                </prism-list-row>\n            } @empty {\n                @if (!auditService.running()) {\n                    <div class=\"a11y-status\">No violations.</div>\n                }\n            }\n\n            @if (passes().length > 0) {\n                <details class=\"viol-passed\">\n                    <summary>{{ passes().length }} passed {{ passes().length === 1 ? 'check' : 'checks' }}</summary>\n                    <div class=\"viol-passed__list\">\n                        @for (pass of passes(); track pass.id) {\n                            <prism-list-row>\n                                <prism-badge\n                                    rowBadge\n                                    tone=\"success\"\n                                    label=\"Passed\" />\n                                <span rowTitle>{{ pass.help || pass.description }}</span>\n                                <span rowMeta>{{ pass.id }}</span>\n                            </prism-list-row>\n                        }\n                    </div>\n                </details>\n            }\n        </div>\n    </div>\n} @else {\n    <div class=\"a11y-status\"> Select a component to run accessibility audit. </div>\n}\n", styles: [":host {\n    display: block;\n}\n\n.a11y-body {\n    display: grid;\n    grid-template-columns: 180px minmax(0, 1fr);\n    gap: 12px;\n    align-items: start;\n    padding: 16px 18px;\n    transition: opacity var(--dur-base);\n}\n\n.a11y-body--loading {\n    opacity: 0.6;\n}\n\n.viol-list {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    min-width: 0;\n}\n\n.viol-passed summary {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    padding: 6px 2px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--prism-text-muted);\n    cursor: pointer;\n    list-style: none;\n}\n\n.viol-passed summary::-webkit-details-marker {\n    display: none;\n}\n\n.viol-passed summary::before {\n    font-size: 10px;\n    content: '\u25B8';\n    transition: transform var(--dur-fast);\n}\n\n.viol-passed[open] summary::before {\n    transform: rotate(90deg);\n}\n\n.viol-passed summary:hover {\n    color: var(--prism-text-2);\n}\n\n.viol-passed summary:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 2px;\n    border-radius: 2px;\n}\n\n.viol-passed__list {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    margin-top: 4px;\n}\n\n.a11y-status {\n    padding: 4px 2px;\n    font-size: 12.5px;\n    color: var(--prism-text-muted);\n}\n\n.a11y-status--error {\n    padding: 16px 18px;\n    color: var(--prism-danger);\n}\n\n@container (max-width: 560px) {\n    .a11y-body {\n        grid-template-columns: minmax(0, 1fr);\n    }\n}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yViolationsComponent, { className: "A11yViolationsComponent", filePath: "app/panels/a11y/a11y-violations.component.ts", lineNumber: 31 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yViolationsComponent, { className: "A11yViolationsComponent", filePath: "app/panels/a11y/a11y-violations.component.ts", lineNumber: 35 }); })();

package/dist/app/panels/a11y/severity.d.ts

@@ -0,0 +1,9 @@
+import type { BadgeTone } from '../../shared/badge.types.js';
+export interface SeverityBadge {
+    label: string;
+    tone: BadgeTone;
+    variant: 'soft' | 'outline';
+}
+/** The badge of an axe impact level; an unknown impact reads as minor. */
+export declare function severityBadge(impact: string | null | undefined): SeverityBadge;
+//# sourceMappingURL=severity.d.ts.map

package/dist/app/panels/a11y/severity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"severity.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/severity.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAE7D,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/B;AAWD,0EAA0E;AAC1E,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,aAAa,CAE9E"}