@ng-prism/core 22.5.0 → 22.7.0-beta.0

package/dist/app/overview/prism-overview.component.js

@@ -1,28 +1,44 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { PrismOverviewCellComponent } from './prism-overview-cell.component.js';
+import { PrismOverviewMatrixComponent } from './prism-overview-matrix.component.js';
 import * as i0 from "@angular/core";
-function PrismOverviewComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-overview-cell", 1);
+function PrismOverviewComponent_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-overview-matrix", 0);
 } if (rf & 2) {
-    const $index_r1 = ctx.$index;
-    const component_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("component", component_r2)("index", $index_r1);
+    const component_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("component", component_r1);
 } }
-function PrismOverviewComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 0);
-    i0.ɵɵrepeaterCreate(1, PrismOverviewComponent_Conditional_0_For_2_Template, 1, 2, "prism-overview-cell", 1, i0.ɵɵrepeaterTrackByIndex);
+function PrismOverviewComponent_Conditional_0_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-overview-cell", 2);
+} if (rf & 2) {
+    const $index_r2 = ctx.$index;
+    const component_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("component", component_r1)("index", $index_r2);
+} }
+function PrismOverviewComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵrepeaterCreate(1, PrismOverviewComponent_Conditional_0_Conditional_1_For_2_Template, 1, 2, "prism-overview-cell", 2, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.variants());
 } }
+function PrismOverviewComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, PrismOverviewComponent_Conditional_0_Conditional_0_Template, 1, 1, "prism-overview-matrix", 0)(1, PrismOverviewComponent_Conditional_0_Conditional_1_Template, 3, 0, "div", 1);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r2.hasStates() ? 0 : 1);
+} }
 /**
  * All variants of one component at once: a contact sheet rather than a
  * viewfinder.
  *
  * No controls of any kind: columns follow the window, and
  * everything else a cell shows is what the variant itself declared.
+ *
+ * A component that declares `states` gets the matrix instead, variants against
+ * states. Without states the sheet stays what it was.
  */
 export class PrismOverviewComponent {
     /** Input name fixed by `prism-view-panel-host`, which feeds every view panel. */
@@ -30,16 +46,23 @@ export class PrismOverviewComponent {
     ...(ngDevMode ? [{ debugName: "activeComponent" }] : /* istanbul ignore next */ []));
     variants = computed(() => this.activeComponent()?.meta.showcaseConfig.variants ?? [], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variants" }] : /* istanbul ignore next */ []));
+    hasStates = computed(() => (this.activeComponent()?.meta.showcaseConfig.states?.length ?? 0) > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasStates" }] : /* istanbul ignore next */ []));
     static ɵfac = function PrismOverviewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismOverviewComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismOverviewComponent, selectors: [["prism-overview"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 1, vars: 1, consts: [["role", "list", 1, "prism-overview"], [3, "component", "index"]], template: function PrismOverviewComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, PrismOverviewComponent_Conditional_0_Template, 3, 0, "div", 0);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismOverviewComponent, selectors: [["prism-overview"]], hostVars: 1, hostBindings: function PrismOverviewComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-matrix", ctx.hasStates() ? "" : null);
+        } }, inputs: { activeComponent: [1, "activeComponent"] }, decls: 1, vars: 1, consts: [[3, "component"], ["role", "list", 1, "prism-overview"], [3, "component", "index"]], template: function PrismOverviewComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, PrismOverviewComponent_Conditional_0_Template, 2, 1);
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.activeComponent()) ? 0 : -1, tmp_0_0);
-        } }, dependencies: [PrismOverviewCellComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n}\n\n.prism-overview[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n    gap: var(--%NS%sp-4);\n    align-content: start;\n    padding: var(--%NS%sp-6);\n}"] });
+        } }, dependencies: [PrismOverviewCellComponent, PrismOverviewMatrixComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n}\n\n.prism-overview[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n    gap: var(--%NS%sp-4);\n    align-content: start;\n    padding: var(--%NS%sp-6);\n}\n\n\n\n\n[data-matrix][_nghost-%COMP%] {\n    display: flex;\n    flex: 1 1 0;\n    flex-direction: column;\n    min-height: 0;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismOverviewComponent, [{
         type: Component,
-        args: [{ selector: 'prism-overview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismOverviewCellComponent], template: "@if (activeComponent(); as component) {\n    <div\n        class=\"prism-overview\"\n        role=\"list\">\n        @for (_ of variants(); track $index) {\n            <prism-overview-cell\n                [component]=\"component\"\n                [index]=\"$index\" />\n        }\n    </div>\n}\n", styles: [":host {\n    display: block;\n}\n\n.prism-overview {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n    gap: var(--sp-4);\n    align-content: start;\n    padding: var(--sp-6);\n}\n"] }]
+        args: [{ selector: 'prism-overview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismOverviewCellComponent, PrismOverviewMatrixComponent], host: {
+                    // Hands the panel's height down to the matrix, which scrolls on its own.
+                    '[attr.data-matrix]': "hasStates() ? '' : null"
+                }, template: "@if (activeComponent(); as component) {\n    @if (hasStates()) {\n        <prism-overview-matrix [component]=\"component\" />\n    } @else {\n        <div\n            class=\"prism-overview\"\n            role=\"list\">\n            @for (_ of variants(); track $index) {\n                <prism-overview-cell\n                    [component]=\"component\"\n                    [index]=\"$index\" />\n            }\n        </div>\n    }\n}\n", styles: [":host {\n    display: block;\n}\n\n.prism-overview {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n    gap: var(--sp-4);\n    align-content: start;\n    padding: var(--sp-6);\n}\n\n/* The panel host is a column flex box that scrolls. The matrix scrolls inside\n   itself instead, so both its scrollbars sit at the edge of the panel and its\n   header row and variant column stay in view. */\n:host([data-matrix]) {\n    display: flex;\n    flex: 1 1 0;\n    flex-direction: column;\n    min-height: 0;\n}\n"] }]
     }], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismOverviewComponent, { className: "PrismOverviewComponent", filePath: "app/overview/prism-overview.component.ts", lineNumber: 20 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismOverviewComponent, { className: "PrismOverviewComponent", filePath: "app/overview/prism-overview.component.ts", lineNumber: 28 }); })();

package/dist/app/page-renderer/prism-page-renderer.component.js

@@ -54,10 +54,10 @@ export class PrismPageRendererComponent {
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.page()) ? 0 : -1, tmp_0_0);
-        } }, dependencies: [NgComponentOutlet, JsonPipe], styles: ["[_nghost-%COMP%] {\n    display: block;\n    flex: 1;\n    overflow-y: auto;\n}\n\n.prism-page-renderer__title[_ngcontent-%COMP%] {\n    padding: 16px 20px;\n    margin: 0;\n    font-family: var(--%NS%prism-font-sans);\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--%NS%prism-text);\n    letter-spacing: -0.01em;\n    background: var(--%NS%prism-bg-surface);\n    border-bottom: 1px solid var(--%NS%prism-border);\n    border-left: 3px solid;\n    border-image: linear-gradient(180deg, var(--%NS%prism-primary-from), var(--%NS%prism-primary-to)) 1;\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%] {\n    padding: var(--%NS%sp-5) var(--%NS%sp-6);\n    font-family: var(--%NS%prism-font-sans);\n    font-size: var(--%NS%fs-lg);\n    line-height: 1.6;\n    color: var(--%NS%prism-text-2);\n}\n\n\n\n\n\n\n\n.prism-page-renderer__component[_ngcontent-%COMP%]   :is(h1[_ngcontent-%COMP%], h2[_ngcontent-%COMP%], h3[_ngcontent-%COMP%], h4[_ngcontent-%COMP%], h5[_ngcontent-%COMP%], h6[_ngcontent-%COMP%]) {\n    margin: var(--%NS%sp-6) 0 var(--%NS%sp-3);\n    font-family: var(--%NS%prism-font-sans);\n    font-weight: 600;\n    line-height: 1.25;\n    color: var(--%NS%prism-text);\n    letter-spacing: -0.01em;\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:is(h1, h2, h3, h4, h5, h6):first-child {\n    margin-top: 0;\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n    font-size: 24px;\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n    font-size: 20px;\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    font-size: 17px;\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%]   :is(h4[_ngcontent-%COMP%], h5[_ngcontent-%COMP%], h6[_ngcontent-%COMP%]) {\n    font-size: var(--%NS%fs-xl);\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%]   :is(p[_ngcontent-%COMP%], ul[_ngcontent-%COMP%], ol[_ngcontent-%COMP%]) {\n    margin: 0 0 var(--%NS%sp-4);\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%]   :is(strong[_ngcontent-%COMP%], b[_ngcontent-%COMP%]) {\n    color: var(--%NS%prism-text);\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%]   a[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-primary);\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%]   :is(code[_ngcontent-%COMP%], pre[_ngcontent-%COMP%]) {\n    font-family: var(--%NS%prism-font-mono);\n    font-size: var(--%NS%fs-md);\n    color: var(--%NS%prism-text);\n}\n\n.prism-page-renderer__json[_ngcontent-%COMP%] {\n    padding: 24px;\n    margin: 0;\n    font-family: monospace;\n    font-size: 12px;\n    color: var(--%NS%prism-text-muted);\n    white-space: pre-wrap;\n}"] });
+        } }, dependencies: [NgComponentOutlet, JsonPipe], styles: ["[_nghost-%COMP%] {\n    display: block;\n    flex: 1;\n    overflow-y: auto;\n}\n\n.prism-page-renderer__title[_ngcontent-%COMP%] {\n    padding: 16px 20px;\n    margin: 0;\n    font-family: var(--%NS%prism-font-sans);\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--%NS%prism-text);\n    letter-spacing: -0.01em;\n    background: var(--%NS%prism-bg-surface);\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%] {\n    padding: var(--%NS%sp-5) var(--%NS%sp-6);\n    font-family: var(--%NS%prism-font-sans);\n    font-size: var(--%NS%fs-lg);\n    line-height: 1.6;\n    color: var(--%NS%prism-text-2);\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n@layer prism-page-defaults {\n    [_nghost-%COMP%]     :where(.prism-page-renderer__component :is(h1, h2, h3, h4, h5, h6)) {\n        margin: var(--%NS%sp-6) 0 var(--%NS%sp-3);\n        font-family: var(--%NS%prism-font-sans);\n        font-weight: 600;\n        line-height: 1.25;\n        color: var(--%NS%prism-text);\n        letter-spacing: -0.01em;\n    }\n\n    [_nghost-%COMP%]     :where(.prism-page-renderer__component :is(h1, h2, h3, h4, h5, h6):first-child) {\n        margin-top: 0;\n    }\n\n    [_nghost-%COMP%]     :where(.prism-page-renderer__component h1) {\n        font-size: 24px;\n    }\n\n    [_nghost-%COMP%]     :where(.prism-page-renderer__component h2) {\n        font-size: 20px;\n    }\n\n    [_nghost-%COMP%]     :where(.prism-page-renderer__component h3) {\n        font-size: 17px;\n    }\n\n    [_nghost-%COMP%]     :where(.prism-page-renderer__component :is(h4, h5, h6)) {\n        font-size: var(--%NS%fs-xl);\n    }\n\n    [_nghost-%COMP%]     :where(.prism-page-renderer__component :is(p, ul, ol)) {\n        margin: 0 0 var(--%NS%sp-4);\n    }\n\n    [_nghost-%COMP%]     :where(.prism-page-renderer__component :is(strong, b)) {\n        color: var(--%NS%prism-text);\n    }\n\n    [_nghost-%COMP%]     :where(.prism-page-renderer__component a) {\n        font-weight: 500;\n        color: var(--%NS%prism-link);\n        text-decoration: underline;\n        text-decoration-thickness: 1px;\n        text-decoration-color: color-mix(in srgb, var(--%NS%prism-link) 45%, transparent);\n        text-underline-offset: 3px;\n    }\n\n    [_nghost-%COMP%]     :where(.prism-page-renderer__component a:hover) {\n        text-decoration-color: var(--%NS%prism-link);\n    }\n\n    [_nghost-%COMP%]     :where(.prism-page-renderer__component a:focus-visible) {\n        outline: 2px solid var(--%NS%prism-link);\n        outline-offset: 2px;\n        border-radius: 2px;\n    }\n\n    [_nghost-%COMP%]     :where(.prism-page-renderer__component :is(code, pre)) {\n        font-family: var(--%NS%prism-font-mono);\n        font-size: var(--%NS%fs-md);\n        color: var(--%NS%prism-text);\n    }\n}\n\n.prism-page-renderer__json[_ngcontent-%COMP%] {\n    padding: 24px;\n    margin: 0;\n    font-family: monospace;\n    font-size: 12px;\n    color: var(--%NS%prism-text-muted);\n    white-space: pre-wrap;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismPageRendererComponent, [{
         type: Component,
-        args: [{ selector: 'prism-page-renderer', standalone: true, imports: [JsonPipe, NgComponentOutlet], template: "@if (page(); as p) {\n    <div class=\"prism-page-renderer\">\n        <h2 class=\"prism-page-renderer__title\">{{ p.title }}</h2>\n        @switch (p.type) {\n            @case ('custom') {\n                <pre class=\"prism-page-renderer__json\">{{ $any(p).data | json }}</pre>\n            }\n            @case ('component') {\n                <div class=\"prism-page-renderer__component\">\n                    <ng-container *ngComponentOutlet=\"$any(p).component\" />\n                </div>\n            }\n        }\n    </div>\n}\n", styles: [":host {\n    display: block;\n    flex: 1;\n    overflow-y: auto;\n}\n\n.prism-page-renderer__title {\n    padding: 16px 20px;\n    margin: 0;\n    font-family: var(--prism-font-sans);\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--prism-text);\n    letter-spacing: -0.01em;\n    background: var(--prism-bg-surface);\n    border-bottom: 1px solid var(--prism-border);\n    border-left: 3px solid;\n    border-image: linear-gradient(180deg, var(--prism-primary-from), var(--prism-primary-to)) 1;\n}\n\n.prism-page-renderer__component {\n    padding: var(--sp-5) var(--sp-6);\n    font-family: var(--prism-font-sans);\n    font-size: var(--fs-lg);\n    line-height: 1.6;\n    color: var(--prism-text-2);\n}\n\n/* Projected page content arrives through ngComponentOutlet and carries no\n   theme of its own. Without this scope a consuming app's plain <h2> renders\n   in the browser default colour on the styleguide's dark shell (measured at\n   rgb(26,26,46) on a dark ground), which is darker than the body text beneath\n   it and inverts the hierarchy. These are element selectors because\n   the content is authored by the consumer and carries no classes we know. */\n.prism-page-renderer__component :is(h1, h2, h3, h4, h5, h6) {\n    margin: var(--sp-6) 0 var(--sp-3);\n    font-family: var(--prism-font-sans);\n    font-weight: 600;\n    line-height: 1.25;\n    color: var(--prism-text);\n    letter-spacing: -0.01em;\n}\n\n.prism-page-renderer__component :is(h1, h2, h3, h4, h5, h6):first-child {\n    margin-top: 0;\n}\n\n.prism-page-renderer__component h1 {\n    font-size: 24px;\n}\n\n.prism-page-renderer__component h2 {\n    font-size: 20px;\n}\n\n.prism-page-renderer__component h3 {\n    font-size: 17px;\n}\n\n.prism-page-renderer__component :is(h4, h5, h6) {\n    font-size: var(--fs-xl);\n}\n\n.prism-page-renderer__component :is(p, ul, ol) {\n    margin: 0 0 var(--sp-4);\n}\n\n.prism-page-renderer__component :is(strong, b) {\n    color: var(--prism-text);\n}\n\n.prism-page-renderer__component a {\n    color: var(--prism-primary);\n}\n\n.prism-page-renderer__component :is(code, pre) {\n    font-family: var(--prism-font-mono);\n    font-size: var(--fs-md);\n    color: var(--prism-text);\n}\n\n.prism-page-renderer__json {\n    padding: 24px;\n    margin: 0;\n    font-family: monospace;\n    font-size: 12px;\n    color: var(--prism-text-muted);\n    white-space: pre-wrap;\n}\n"] }]
+        args: [{ selector: 'prism-page-renderer', standalone: true, imports: [JsonPipe, NgComponentOutlet], template: "@if (page(); as p) {\n    <div class=\"prism-page-renderer\">\n        <h2 class=\"prism-page-renderer__title\">{{ p.title }}</h2>\n        @switch (p.type) {\n            @case ('custom') {\n                <pre class=\"prism-page-renderer__json\">{{ $any(p).data | json }}</pre>\n            }\n            @case ('component') {\n                <div class=\"prism-page-renderer__component\">\n                    <ng-container *ngComponentOutlet=\"$any(p).component\" />\n                </div>\n            }\n        }\n    </div>\n}\n", styles: [":host {\n    display: block;\n    flex: 1;\n    overflow-y: auto;\n}\n\n.prism-page-renderer__title {\n    padding: 16px 20px;\n    margin: 0;\n    font-family: var(--prism-font-sans);\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--prism-text);\n    letter-spacing: -0.01em;\n    background: var(--prism-bg-surface);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.prism-page-renderer__component {\n    padding: var(--sp-5) var(--sp-6);\n    font-family: var(--prism-font-sans);\n    font-size: var(--fs-lg);\n    line-height: 1.6;\n    color: var(--prism-text-2);\n}\n\n/* Projected page content arrives through ngComponentOutlet and carries no\n   theme of its own. Without these rules a consuming app's plain <h2> renders\n   in the browser default colour on the styleguide's dark shell, darker than\n   the body text beneath it.\n\n   Under Emulated encapsulation a plain descendant selector here never reaches\n   the page's elements (they carry the page component's attribute, not this\n   one's), so the rules go through ::ng-deep. They sit in a cascade layer, so\n   every unlayered style wins whatever its specificity: the page's own, the\n   consumer's global stylesheet (a reset, a Tailwind preflight) and the styles\n   of the components a page renders. :where() keeps them light inside the\n   layer, too. These elements are the page's documentation chrome, not the\n   canvas: the playground canvas is untouched. */\n@layer prism-page-defaults {\n    :host ::ng-deep :where(.prism-page-renderer__component :is(h1, h2, h3, h4, h5, h6)) {\n        margin: var(--sp-6) 0 var(--sp-3);\n        font-family: var(--prism-font-sans);\n        font-weight: 600;\n        line-height: 1.25;\n        color: var(--prism-text);\n        letter-spacing: -0.01em;\n    }\n\n    :host ::ng-deep :where(.prism-page-renderer__component :is(h1, h2, h3, h4, h5, h6):first-child) {\n        margin-top: 0;\n    }\n\n    :host ::ng-deep :where(.prism-page-renderer__component h1) {\n        font-size: 24px;\n    }\n\n    :host ::ng-deep :where(.prism-page-renderer__component h2) {\n        font-size: 20px;\n    }\n\n    :host ::ng-deep :where(.prism-page-renderer__component h3) {\n        font-size: 17px;\n    }\n\n    :host ::ng-deep :where(.prism-page-renderer__component :is(h4, h5, h6)) {\n        font-size: var(--fs-xl);\n    }\n\n    :host ::ng-deep :where(.prism-page-renderer__component :is(p, ul, ol)) {\n        margin: 0 0 var(--sp-4);\n    }\n\n    :host ::ng-deep :where(.prism-page-renderer__component :is(strong, b)) {\n        color: var(--prism-text);\n    }\n\n    :host ::ng-deep :where(.prism-page-renderer__component a) {\n        font-weight: 500;\n        color: var(--prism-link);\n        text-decoration: underline;\n        text-decoration-thickness: 1px;\n        text-decoration-color: color-mix(in srgb, var(--prism-link) 45%, transparent);\n        text-underline-offset: 3px;\n    }\n\n    :host ::ng-deep :where(.prism-page-renderer__component a:hover) {\n        text-decoration-color: var(--prism-link);\n    }\n\n    :host ::ng-deep :where(.prism-page-renderer__component a:focus-visible) {\n        outline: 2px solid var(--prism-link);\n        outline-offset: 2px;\n        border-radius: 2px;\n    }\n\n    :host ::ng-deep :where(.prism-page-renderer__component :is(code, pre)) {\n        font-family: var(--prism-font-mono);\n        font-size: var(--fs-md);\n        color: var(--prism-text);\n    }\n}\n\n.prism-page-renderer__json {\n    padding: 24px;\n    margin: 0;\n    font-family: monospace;\n    font-size: 12px;\n    color: var(--prism-text-muted);\n    white-space: pre-wrap;\n}\n"] }]
     }], () => [], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPageRendererComponent, { className: "PrismPageRendererComponent", filePath: "app/page-renderer/prism-page-renderer.component.ts", lineNumber: 12 }); })();

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

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

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

@@ -2,7 +2,6 @@ export const A11Y_CORE_PANEL = {
     id: 'a11y',
     label: 'A11y',
     icon: 'accessibility',
-    position: 'bottom',
     placement: 'addon',
     loadComponent: () => import('./a11y-panel.component.js').then((m) => m.A11yPanelComponent),
     loadOverlayComponent: () => import('./a11y-overlay-host.component.js').then((m) => m.A11yOverlayHostComponent)

package/dist/app/panels/a11y/a11y-header-badge.component.d.ts

@@ -1,16 +1,13 @@
 import * as i0 from "@angular/core";
-type Variant = 'ok' | 'warn' | 'danger';
 export declare class A11yHeaderBadgeComponent {
     private readonly manifest;
     private readonly config;
     protected readonly data: import("@angular/core").Signal<{
         score: number;
-        variant: Variant;
+        variant: "ok" | "warn" | "danger";
         title: string;
     } | null>;
-    private computeVariant;
     static ɵfac: i0.ɵɵFactoryDeclaration<A11yHeaderBadgeComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<A11yHeaderBadgeComponent, "prism-a11y-header-badge", never, {}, {}, never, never, true, never>;
 }
-export {};
 //# sourceMappingURL=a11y-header-badge.component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"a11y-header-badge.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-header-badge.component.ts"],"names":[],"mappings":";AAOA,KAAK,OAAO,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAC;AAExC,qBAOa,wBAAwB;IACjC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2C;IACpE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAE9D,SAAS,CAAC,QAAQ,CAAC,IAAI;;;;cAqBpB;IAEH,OAAO,CAAC,cAAc;yCA3Bb,wBAAwB;2CAAxB,wBAAwB;CAmCpC"}
+{"version":3,"file":"a11y-header-badge.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-header-badge.component.ts"],"names":[],"mappings":";AAQA,qBAOa,wBAAwB;IACjC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2C;IACpE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAE9D,SAAS,CAAC,QAAQ,CAAC,IAAI;;;;cAsBpB;yCA1BM,wBAAwB;2CAAxB,wBAAwB;CA2BpC"}

package/dist/app/panels/a11y/a11y-header-badge.component.js

@@ -1,13 +1,14 @@
 import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { PrismMetricBadgeComponent } from '../../shared/prism-metric-badge.component.js';
 import { PRISM_CONFIG, PRISM_MANIFEST } from '../../tokens/prism-tokens.js';
+import { deriveA11ySummary } from './a11y-summary.js';
 import { resolveA11yThresholds } from './a11y-thresholds.js';
 import * as i0 from "@angular/core";
 function A11yHeaderBadgeComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "prism-metric-badge", 0);
 } if (rf & 2) {
     const d_r1 = ctx;
-    i0.ɵɵproperty("value", d_r1.score + "%")("variant", d_r1.variant)("title", d_r1.title);
+    i0.ɵɵproperty("value", "" + d_r1.score)("variant", d_r1.variant)("title", d_r1.title);
 } }
 export class A11yHeaderBadgeComponent {
     manifest = inject(PRISM_MANIFEST);
@@ -21,32 +22,20 @@ export class A11yHeaderBadgeComponent {
             ...meta.thresholds,
             ...this.config.a11y?.thresholds
         });
-        const variant = this.computeVariant(score, meta.total, thresholds);
+        // The same rule the tab, the sidebar and the gauge grade with.
+        const variant = deriveA11ySummary(meta.total, thresholds).variant;
         return {
             score,
             variant,
-            title: `Library A11y: ${score}% (target ${thresholds.score}%)\n` +
+            title: `Library accessibility score ${score} · target ${thresholds.score}\n` +
                 `${meta.total.auditedComponents} components · ${meta.total.auditedVariants} variants\n` +
                 `Violations: ${meta.total.critical} critical · ${meta.total.serious} serious · ` +
                 `${meta.total.moderate} moderate · ${meta.total.minor} minor`
         };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    computeVariant(score, total, thresholds) {
-        if (total.critical > thresholds.critical)
-            return 'danger';
-        if (total.serious > thresholds.serious)
-            return 'danger';
-        if (score < thresholds.score * 0.75)
-            return 'danger';
-        if (score < thresholds.score)
-            return 'warn';
-        if (total.moderate > thresholds.moderate)
-            return 'warn';
-        return 'ok';
-    }
     static ɵfac = function A11yHeaderBadgeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11yHeaderBadgeComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yHeaderBadgeComponent, selectors: [["prism-a11y-header-badge"]], decls: 1, vars: 1, consts: [["icon", "accessibility", "label", "Library accessibility score", 3, "value", "variant", "title"]], template: function A11yHeaderBadgeComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yHeaderBadgeComponent, selectors: [["prism-a11y-header-badge"]], decls: 1, vars: 1, consts: [["icon", "accessibility", "label", "Library accessibility score", "shortLabel", "A11y", 3, "value", "variant", "title"]], template: function A11yHeaderBadgeComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, A11yHeaderBadgeComponent_Conditional_0_Template, 1, 3, "prism-metric-badge", 0);
         } if (rf & 2) {
             let tmp_0_0;
@@ -55,6 +44,6 @@ export class A11yHeaderBadgeComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yHeaderBadgeComponent, [{
         type: Component,
-        args: [{ selector: 'prism-a11y-header-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismMetricBadgeComponent], template: "@if (data(); as d) {\n    <prism-metric-badge\n        icon=\"accessibility\"\n        label=\"Library accessibility score\"\n        [value]=\"d.score + '%'\"\n        [variant]=\"d.variant\"\n        [title]=\"d.title\" />\n}\n" }]
+        args: [{ selector: 'prism-a11y-header-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismMetricBadgeComponent], template: "@if (data(); as d) {\n    <prism-metric-badge\n        icon=\"accessibility\"\n        label=\"Library accessibility score\"\n        shortLabel=\"A11y\"\n        [value]=\"'' + d.score\"\n        [variant]=\"d.variant\"\n        [title]=\"d.title\" />\n}\n" }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yHeaderBadgeComponent, { className: "A11yHeaderBadgeComponent", filePath: "app/panels/a11y/a11y-header-badge.component.ts", lineNumber: 17 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yHeaderBadgeComponent, { className: "A11yHeaderBadgeComponent", filePath: "app/panels/a11y/a11y-header-badge.component.ts", lineNumber: 16 }); })();

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

@@ -78,10 +78,10 @@ export class A11yKeyboardOverlayComponent {
             i0.ɵɵconditionalCreate(0, A11yKeyboardOverlayComponent_Conditional_0_Template, 2, 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.panelState.activeTab() === "keyboard" ? 0 : -1);
-        } }, styles: ["[_nghost-%COMP%] {\n    position: absolute;\n    inset: 0;\n    z-index: 100;\n    overflow: hidden;\n    pointer-events: none;\n}\n\n.prism-a11y-kbd-ov__highlight[_ngcontent-%COMP%] {\n    position: absolute;\n    pointer-events: none;\n    background: rgb(129 140 248 / 6%);\n    border: 2px solid rgb(129 140 248 / 50%);\n    border-radius: 4px;\n    box-shadow: 0 0 0 4px rgb(129 140 248 / 8%);\n}\n\n.prism-a11y-kbd-ov__badge[_ngcontent-%COMP%] {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    font-family: var(--%NS%prism-font-sans, system-ui, sans-serif);\n    font-size: 10px;\n    font-weight: 700;\n    color: white;\n    pointer-events: auto;\n    cursor: default;\n    background: var(--%NS%prism-primary);\n    border-radius: 50%;\n    box-shadow:\n        0 0 0 2px white,\n        0 2px 6px rgb(0 0 0 / 30%);\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-kbd-ov__highlight[_ngcontent-%COMP%] {\n    position: absolute;\n    pointer-events: none;\n    background: color-mix(in srgb, var(--%NS%prism-primary-fill) 6%, transparent);\n    border: 2px solid color-mix(in srgb, var(--%NS%prism-primary-fill) 70%, transparent);\n    border-radius: 4px;\n    box-shadow: 0 0 0 4px color-mix(in srgb, var(--%NS%prism-primary-fill) 10%, transparent);\n}\n\n.prism-a11y-kbd-ov__badge[_ngcontent-%COMP%] {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    font-family: var(--%NS%prism-font-sans, system-ui, sans-serif);\n    font-size: 10px;\n    font-weight: 700;\n    color: var(--%NS%prism-on-primary);\n    pointer-events: auto;\n    cursor: default;\n    background: var(--%NS%prism-primary-fill);\n    border-radius: 50%;\n    box-shadow:\n        0 0 0 2px var(--%NS%prism-on-primary),\n        var(--%NS%prism-shadow-sm);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yKeyboardOverlayComponent, [{
         type: Component,
-        args: [{ selector: 'prism-a11y-kbd-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (panelState.activeTab() === 'keyboard') {\n    @for (badge of badges(); track badge.index) {\n        <div\n            class=\"prism-a11y-kbd-ov__highlight\"\n            [style.left.px]=\"badge.x\"\n            [style.top.px]=\"badge.y\"\n            [style.width.px]=\"badge.width\"\n            [style.height.px]=\"badge.height\"\n            [title]=\"badge.name || badge.role\"></div>\n        <div\n            class=\"prism-a11y-kbd-ov__badge\"\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-kbd-ov__highlight {\n    position: absolute;\n    pointer-events: none;\n    background: rgb(129 140 248 / 6%);\n    border: 2px solid rgb(129 140 248 / 50%);\n    border-radius: 4px;\n    box-shadow: 0 0 0 4px rgb(129 140 248 / 8%);\n}\n\n.prism-a11y-kbd-ov__badge {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    font-family: var(--prism-font-sans, system-ui, sans-serif);\n    font-size: 10px;\n    font-weight: 700;\n    color: white;\n    pointer-events: auto;\n    cursor: default;\n    background: var(--prism-primary);\n    border-radius: 50%;\n    box-shadow:\n        0 0 0 2px white,\n        0 2px 6px rgb(0 0 0 / 30%);\n}\n"] }]
+        args: [{ selector: 'prism-a11y-kbd-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (panelState.activeTab() === 'keyboard') {\n    @for (badge of badges(); track badge.index) {\n        <div\n            class=\"prism-a11y-kbd-ov__highlight\"\n            [style.left.px]=\"badge.x\"\n            [style.top.px]=\"badge.y\"\n            [style.width.px]=\"badge.width\"\n            [style.height.px]=\"badge.height\"\n            [title]=\"badge.name || badge.role\"></div>\n        <div\n            class=\"prism-a11y-kbd-ov__badge\"\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-kbd-ov__highlight {\n    position: absolute;\n    pointer-events: none;\n    background: color-mix(in srgb, var(--prism-primary-fill) 6%, transparent);\n    border: 2px solid color-mix(in srgb, var(--prism-primary-fill) 70%, transparent);\n    border-radius: 4px;\n    box-shadow: 0 0 0 4px color-mix(in srgb, var(--prism-primary-fill) 10%, transparent);\n}\n\n.prism-a11y-kbd-ov__badge {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    font-family: var(--prism-font-sans, system-ui, sans-serif);\n    font-size: 10px;\n    font-weight: 700;\n    color: var(--prism-on-primary);\n    pointer-events: auto;\n    cursor: default;\n    background: var(--prism-primary-fill);\n    border-radius: 50%;\n    box-shadow:\n        0 0 0 2px var(--prism-on-primary),\n        var(--prism-shadow-sm);\n}\n"] }]
     }], () => [], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yKeyboardOverlayComponent, { className: "A11yKeyboardOverlayComponent", filePath: "app/panels/a11y/a11y-keyboard-overlay.component.ts", lineNumber: 23 }); })();

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

@@ -12,6 +12,7 @@ export declare class A11yOverlayHostComponent {
     private readonly elementRef;
     private readonly layoutTick;
     protected readonly bounds: import("@angular/core").Signal<Bounds | null>;
+    /** The role of the showcased element, which in a composition is not the rendered root. */
     protected readonly roleLabel: import("@angular/core").Signal<string | null>;
     protected readonly tabLabel: import("@angular/core").Signal<string | null>;
     constructor();

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

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

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

@@ -61,8 +61,9 @@ export class A11yOverlayHostComponent {
         };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "bounds" }] : /* istanbul ignore next */ []));
+    /** The role of the showcased element, which in a composition is not the rendered root. */
     roleLabel = computed(() => {
-        const el = this.rendererService().renderedElement();
+        const el = this.rendererService().subjectElement();
         if (!el)
             return null;
         const role = el.getAttribute('role') ?? implicitRole(el);
@@ -104,11 +105,11 @@ export class A11yOverlayHostComponent {
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.bounds()) ? 0 : -1, tmp_0_0);
-        } }, styles: ["[_nghost-%COMP%] {\n    display: contents;\n}\n\n.a11y-mark[_ngcontent-%COMP%] {\n    position: absolute;\n    z-index: 1;\n    pointer-events: none;\n}\n\n.outline[_ngcontent-%COMP%] {\n    background: rgb(59 130 246 / 8%);\n    border: 2px solid rgb(59 130 246 / 95%);\n    border-radius: 4px;\n}\n\n.tag[_ngcontent-%COMP%] {\n    display: inline-block;\n    padding: 2px 6px;\n    font: 11px/1.4 var(--%NS%font-mono);\n    color: var(--%NS%prism-text-light, #fff);\n    white-space: nowrap;\n    background: rgb(17 24 39 / 92%);\n    border-radius: 4px;\n    box-shadow: 0 1px 2px rgb(0 0 0 / 35%);\n}\n\n.kb[_ngcontent-%COMP%]   .tag[_ngcontent-%COMP%] {\n    background: rgb(5 150 105 / 95%);\n}"] });
+        } }, styles: ["[_nghost-%COMP%] {\n    display: contents;\n}\n\n.a11y-mark[_ngcontent-%COMP%] {\n    position: absolute;\n    z-index: 1;\n    pointer-events: none;\n}\n\n\n\n.outline[_ngcontent-%COMP%] {\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}\n\n.tag[_ngcontent-%COMP%] {\n    display: inline-block;\n    padding: 2px 6px;\n    font: 11px/1.4 var(--%NS%font-mono);\n    color: var(--%NS%prism-canvas-overlay-fg);\n    white-space: nowrap;\n    background: var(--%NS%prism-canvas-overlay-bg);\n    border: 1px solid var(--%NS%prism-canvas-overlay-border);\n    border-radius: 4px;\n    box-shadow: var(--%NS%prism-shadow-sm);\n}\n\n.kb[_ngcontent-%COMP%]   .tag[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-canvas-overlay-primary);\n    border-color: var(--%NS%prism-canvas-overlay-primary);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yOverlayHostComponent, [{
         type: Component,
-        args: [{ selector: 'prism-a11y-overlay-host', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (bounds(); as b) {\n    <div\n        class=\"a11y-mark outline\"\n        [style.top.px]=\"b.top\"\n        [style.left.px]=\"b.left\"\n        [style.width.px]=\"b.width\"\n        [style.height.px]=\"b.height\"></div>\n    @if (roleLabel()) {\n        <div\n            class=\"a11y-mark\"\n            [style.top.px]=\"b.top - 22\"\n            [style.left.px]=\"b.left - 2\">\n            <span class=\"tag\">{{ roleLabel() }}</span>\n        </div>\n    }\n    @if (tabLabel()) {\n        <div\n            class=\"a11y-mark kb\"\n            [style.top.px]=\"b.top + b.height + 4\"\n            [style.left.px]=\"b.left + b.width + 2\"\n            style=\"transform: translateX(-100%)\">\n            <span class=\"tag\">{{ tabLabel() }}</span>\n        </div>\n    }\n}\n", styles: [":host {\n    display: contents;\n}\n\n.a11y-mark {\n    position: absolute;\n    z-index: 1;\n    pointer-events: none;\n}\n\n.outline {\n    background: rgb(59 130 246 / 8%);\n    border: 2px solid rgb(59 130 246 / 95%);\n    border-radius: 4px;\n}\n\n.tag {\n    display: inline-block;\n    padding: 2px 6px;\n    font: 11px/1.4 var(--font-mono);\n    color: var(--prism-text-light, #fff);\n    white-space: nowrap;\n    background: rgb(17 24 39 / 92%);\n    border-radius: 4px;\n    box-shadow: 0 1px 2px rgb(0 0 0 / 35%);\n}\n\n.kb .tag {\n    background: rgb(5 150 105 / 95%);\n}\n"] }]
+        args: [{ selector: 'prism-a11y-overlay-host', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (bounds(); as b) {\n    <div\n        class=\"a11y-mark outline\"\n        [style.top.px]=\"b.top\"\n        [style.left.px]=\"b.left\"\n        [style.width.px]=\"b.width\"\n        [style.height.px]=\"b.height\"></div>\n    @if (roleLabel()) {\n        <div\n            class=\"a11y-mark\"\n            [style.top.px]=\"b.top - 22\"\n            [style.left.px]=\"b.left - 2\">\n            <span class=\"tag\">{{ roleLabel() }}</span>\n        </div>\n    }\n    @if (tabLabel()) {\n        <div\n            class=\"a11y-mark kb\"\n            [style.top.px]=\"b.top + b.height + 4\"\n            [style.left.px]=\"b.left + b.width + 2\"\n            style=\"transform: translateX(-100%)\">\n            <span class=\"tag\">{{ tabLabel() }}</span>\n        </div>\n    }\n}\n", styles: [":host {\n    display: contents;\n}\n\n.a11y-mark {\n    position: absolute;\n    z-index: 1;\n    pointer-events: none;\n}\n\n/* Overlays sit on the user's component, so they paint with the canvas overlay\n   tokens and the fill blue, not with the theme surfaces. */\n.outline {\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}\n\n.tag {\n    display: inline-block;\n    padding: 2px 6px;\n    font: 11px/1.4 var(--font-mono);\n    color: var(--prism-canvas-overlay-fg);\n    white-space: nowrap;\n    background: var(--prism-canvas-overlay-bg);\n    border: 1px solid var(--prism-canvas-overlay-border);\n    border-radius: 4px;\n    box-shadow: var(--prism-shadow-sm);\n}\n\n.kb .tag {\n    color: var(--prism-canvas-overlay-primary);\n    border-color: var(--prism-canvas-overlay-primary);\n}\n"] }]
     }], () => [], { rendererService: [{ type: i0.Input, args: [{ isSignal: true, alias: "rendererService", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yOverlayHostComponent, { className: "A11yOverlayHostComponent", filePath: "app/panels/a11y/a11y-overlay-host.component.ts", lineNumber: 19 }); })();
 function implicitRole(el) {

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

@@ -1,4 +1,5 @@
 import type { RuntimeComponent } from '../../../plugin/plugin.types.js';
+import { type PrismTabItem } from '../../shared/prism-tabs.component.js';
 import { A11yPanelStateService } from './a11y-panel-state.service.js';
 import * as i0 from "@angular/core";
 export declare class A11yPanelComponent {
@@ -6,7 +7,9 @@ export declare class A11yPanelComponent {
     protected readonly state: A11yPanelStateService;
     readonly activeComponent: import("@angular/core").InputSignal<RuntimeComponent | null>;
     protected readonly disabled: import("@angular/core").Signal<boolean>;
-    protected readonly violationCount: import("@angular/core").Signal<number | null>;
+    /** The sub-tabs; Violations carries the same open-findings badge as the panel's own tab. */
+    protected readonly tabs: import("@angular/core").Signal<PrismTabItem[]>;
+    protected selectTab(id: string | null): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<A11yPanelComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<A11yPanelComponent, "prism-a11y-panel", never, { "activeComponent": { "alias": "activeComponent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"a11y-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-panel.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAGxE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;;AAMtE,qBAQa,kBAAkB;IAC3B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IACzD,SAAS,CAAC,QAAQ,CAAC,KAAK,wBAAiC;IAEzD,QAAQ,CAAC,eAAe,+DAAwC;IAEhE,SAAS,CAAC,QAAQ,CAAC,QAAQ,0CAKxB;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,gDAI9B;yCAjBM,kBAAkB;2CAAlB,kBAAkB;CAkB9B"}
+{"version":3,"file":"a11y-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-panel.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAExE,OAAO,EAAE,KAAK,YAAY,EAAsB,MAAM,sCAAsC,CAAC;AAI7F,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;;AAMtE,qBAQa,kBAAkB;IAC3B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IACzD,SAAS,CAAC,QAAQ,CAAC,KAAK,wBAAiC;IAEzD,QAAQ,CAAC,eAAe,+DAAwC;IAEhE,SAAS,CAAC,QAAQ,CAAC,QAAQ,0CAKxB;IAEH,4FAA4F;IAC5F,SAAS,CAAC,QAAQ,CAAC,IAAI,iDAKpB;IAEH,SAAS,CAAC,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;yCArBnC,kBAAkB;2CAAlB,kBAAkB;CAwB9B"}

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

@@ -1,4 +1,7 @@
 import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { PrismPanelToolbarComponent } from '../../shared/prism-panel-toolbar.component.js';
+import { PrismTabsComponent } from '../../shared/prism-tabs.component.js';
+import { a11yViolationBadge, normalizePanelBadge } from '../panel-host/panel-badge.js';
 import { A11yAuditService } from './a11y-audit.service.js';
 import { A11yKeyboardComponent } from './a11y-keyboard.component.js';
 import { A11yPanelStateService } from './a11y-panel-state.service.js';
@@ -7,34 +10,24 @@ import { A11yTreeComponent } from './a11y-tree.component.js';
 import { A11yViolationsComponent } from './a11y-violations.component.js';
 import * as i0 from "@angular/core";
 function A11yPanelComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 6);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("st-badge--ok", ctx_r0.violationCount() === 0)("st-badge--warn", ctx_r0.violationCount() > 0);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.violationCount(), " ");
-} }
-function A11yPanelComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵelementStart(0, "div", 3);
     i0.ɵɵtext(1, " Accessibility audit disabled for this component. ");
     i0.ɵɵelementEnd();
 } }
-function A11yPanelComponent_Conditional_13_Case_0_Template(rf, ctx) { if (rf & 1) {
+function A11yPanelComponent_Conditional_5_Case_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "prism-a11y-violations");
 } }
-function A11yPanelComponent_Conditional_13_Case_1_Template(rf, ctx) { if (rf & 1) {
+function A11yPanelComponent_Conditional_5_Case_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "prism-a11y-keyboard");
 } }
-function A11yPanelComponent_Conditional_13_Case_2_Template(rf, ctx) { if (rf & 1) {
+function A11yPanelComponent_Conditional_5_Case_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "prism-a11y-tree");
 } }
-function A11yPanelComponent_Conditional_13_Case_3_Template(rf, ctx) { if (rf & 1) {
+function A11yPanelComponent_Conditional_5_Case_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "prism-a11y-sr");
 } }
-function A11yPanelComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, A11yPanelComponent_Conditional_13_Case_0_Template, 1, 0, "prism-a11y-violations")(1, A11yPanelComponent_Conditional_13_Case_1_Template, 1, 0, "prism-a11y-keyboard")(2, A11yPanelComponent_Conditional_13_Case_2_Template, 1, 0, "prism-a11y-tree")(3, A11yPanelComponent_Conditional_13_Case_3_Template, 1, 0, "prism-a11y-sr");
+function A11yPanelComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, A11yPanelComponent_Conditional_5_Case_0_Template, 1, 0, "prism-a11y-violations")(1, A11yPanelComponent_Conditional_5_Case_1_Template, 1, 0, "prism-a11y-keyboard")(2, A11yPanelComponent_Conditional_5_Case_2_Template, 1, 0, "prism-a11y-tree")(3, A11yPanelComponent_Conditional_5_Case_3_Template, 1, 0, "prism-a11y-sr");
 } if (rf & 2) {
     let tmp_1_0;
     const ctx_r0 = i0.ɵɵnextContext();
@@ -51,50 +44,35 @@ export class A11yPanelComponent {
         return config?.disable === true;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    violationCount = computed(() => {
-        const r = this.auditService.results();
-        return r ? r.violations.length : null;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "violationCount" }] : /* istanbul ignore next */ []));
+    /** The sub-tabs; Violations carries the same open-findings badge as the panel's own tab. */
+    tabs = computed(() => [
+        { id: 'violations', label: 'Violations', badge: normalizePanelBadge(a11yViolationBadge(this.auditService.scoreResult())) },
+        { id: 'keyboard', label: 'Keyboard' },
+        { id: 'tree', label: 'ARIA Tree' },
+        { id: 'sr', label: 'Screen Reader' }
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    selectTab(id) {
+        if (id === 'violations' || id === 'keyboard' || id === 'tree' || id === 'sr')
+            this.state.activeTab.set(id);
+    }
     static ɵfac = function A11yPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11yPanelComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yPanelComponent, selectors: [["prism-a11y-panel"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 14, vars: 10, consts: [[1, "a11y-panel"], [1, "subtabs"], [1, "st-tab", 3, "click"], [1, "st-badge", 3, "st-badge--ok", "st-badge--warn"], [1, "a11y-content"], [1, "a11y-disabled"], [1, "st-badge"]], template: function A11yPanelComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "button", 2);
-            i0.ɵɵlistener("click", function A11yPanelComponent_Template_button_click_2_listener() { return ctx.state.activeTab.set("violations"); });
-            i0.ɵɵtext(3, " Violations ");
-            i0.ɵɵconditionalCreate(4, A11yPanelComponent_Conditional_4_Template, 2, 5, "span", 3);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "button", 2);
-            i0.ɵɵlistener("click", function A11yPanelComponent_Template_button_click_5_listener() { return ctx.state.activeTab.set("keyboard"); });
-            i0.ɵɵtext(6, " Keyboard ");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(7, "button", 2);
-            i0.ɵɵlistener("click", function A11yPanelComponent_Template_button_click_7_listener() { return ctx.state.activeTab.set("tree"); });
-            i0.ɵɵtext(8, " ARIA Tree ");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(9, "button", 2);
-            i0.ɵɵlistener("click", function A11yPanelComponent_Template_button_click_9_listener() { return ctx.state.activeTab.set("sr"); });
-            i0.ɵɵtext(10, " Screen Reader ");
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yPanelComponent, selectors: [["prism-a11y-panel"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 6, vars: 3, consts: [[1, "a11y-panel"], ["toolbarStart", "", "size", "sm", "ariaLabel", "Accessibility views", 3, "activeChange", "items", "active"], [1, "a11y-content"], [1, "a11y-disabled"]], template: function A11yPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "prism-panel-toolbar")(2, "prism-tabs", 1);
+            i0.ɵɵlistener("activeChange", function A11yPanelComponent_Template_prism_tabs_activeChange_2_listener($event) { return ctx.selectTab($event); });
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(11, "div", 4);
-            i0.ɵɵconditionalCreate(12, A11yPanelComponent_Conditional_12_Template, 2, 0, "div", 5)(13, A11yPanelComponent_Conditional_13_Template, 4, 1);
+            i0.ɵɵelementStart(3, "div", 2);
+            i0.ɵɵconditionalCreate(4, A11yPanelComponent_Conditional_4_Template, 2, 0, "div", 3)(5, A11yPanelComponent_Conditional_5_Template, 4, 1);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("st-tab--active", ctx.state.activeTab() === "violations");
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.violationCount() !== null ? 4 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("st-tab--active", ctx.state.activeTab() === "keyboard");
-            i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("st-tab--active", ctx.state.activeTab() === "tree");
+            i0.ɵɵproperty("items", ctx.tabs())("active", ctx.state.activeTab());
             i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("st-tab--active", ctx.state.activeTab() === "sr");
-            i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.disabled() ? 12 : 13);
-        } }, dependencies: [A11yViolationsComponent, A11yKeyboardComponent, A11yTreeComponent, A11ySrComponent], styles: ["[_nghost-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n.a11y-panel[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n.subtabs[_ngcontent-%COMP%] {\n    position: sticky;\n    top: 0;\n    z-index: 2;\n    display: flex;\n    gap: 2px;\n    padding: 10px 20px 0;\n    background: var(--%NS%prism-bg-elevated);\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.st-tab[_ngcontent-%COMP%] {\n    position: relative;\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    padding: 7px 12px;\n    font-family: var(--%NS%font-sans);\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--%NS%prism-text-muted);\n    cursor: pointer;\n    background: none;\n    border: none;\n    border-radius: var(--%NS%radius-sm) var(--%NS%radius-sm) 0 0;\n    transition: color var(--%NS%dur-fast);\n}\n\n.st-tab[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text-2);\n}\n\n.st-tab--active[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text);\n}\n\n.st-tab--%NS%active[_ngcontent-%COMP%]::after {\n    position: absolute;\n    right: 8px;\n    bottom: -1px;\n    left: 8px;\n    height: 2px;\n    content: '';\n    background: var(--%NS%prism-primary);\n    border-radius: 1px;\n}\n\n.st-badge[_ngcontent-%COMP%] {\n    display: grid;\n    place-items: center;\n    min-width: 16px;\n    height: 16px;\n    padding: 0 5px;\n    font-family: var(--%NS%font-mono);\n    font-size: 10px;\n    font-weight: 700;\n    color: var(--%NS%prism-primary);\n    background: color-mix(in srgb, var(--%NS%prism-primary) 18%, transparent);\n    border-radius: 8px;\n}\n\n.st-badge--ok[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-success);\n    background: color-mix(in srgb, var(--%NS%prism-success) 18%, transparent);\n}\n\n.st-badge--warn[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-warn);\n    background: color-mix(in srgb, var(--%NS%prism-warn) 18%, transparent);\n}\n\n.a11y-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n}\n\n.a11y-disabled[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 100px;\n    font-size: 13px;\n    color: var(--%NS%prism-text-muted);\n}"] });
+            i0.ɵɵconditional(ctx.disabled() ? 4 : 5);
+        } }, dependencies: [A11yViolationsComponent, A11yKeyboardComponent, A11yTreeComponent, A11ySrComponent, PrismPanelToolbarComponent, PrismTabsComponent], styles: ["[_nghost-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n.a11y-panel[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n.a11y-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    container-type: inline-size;\n    overflow: auto;\n}\n\n.a11y-disabled[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 100px;\n    font-size: 13px;\n    color: var(--%NS%prism-text-muted);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yPanelComponent, [{
         type: Component,
-        args: [{ selector: 'prism-a11y-panel', standalone: true, imports: [A11yViolationsComponent, A11yKeyboardComponent, A11yTreeComponent, A11ySrComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"a11y-panel\">\n    <div class=\"subtabs\">\n        <button\n            class=\"st-tab\"\n            [class.st-tab--active]=\"state.activeTab() === 'violations'\"\n            (click)=\"state.activeTab.set('violations')\">\n            Violations\n            @if (violationCount() !== null) {\n                <span\n                    class=\"st-badge\"\n                    [class.st-badge--ok]=\"violationCount() === 0\"\n                    [class.st-badge--warn]=\"violationCount()! > 0\">\n                    {{ violationCount() }}\n                </span>\n            }\n        </button>\n        <button\n            class=\"st-tab\"\n            [class.st-tab--active]=\"state.activeTab() === 'keyboard'\"\n            (click)=\"state.activeTab.set('keyboard')\">\n            Keyboard\n        </button>\n        <button\n            class=\"st-tab\"\n            [class.st-tab--active]=\"state.activeTab() === 'tree'\"\n            (click)=\"state.activeTab.set('tree')\">\n            ARIA Tree\n        </button>\n        <button\n            class=\"st-tab\"\n            [class.st-tab--active]=\"state.activeTab() === 'sr'\"\n            (click)=\"state.activeTab.set('sr')\">\n            Screen Reader\n        </button>\n    </div>\n\n    <div class=\"a11y-content\">\n        @if (disabled()) {\n            <div class=\"a11y-disabled\"> Accessibility audit disabled for this component. </div>\n        } @else {\n            @switch (state.activeTab()) {\n                @case ('violations') {\n                    <prism-a11y-violations />\n                }\n                @case ('keyboard') {\n                    <prism-a11y-keyboard />\n                }\n                @case ('tree') {\n                    <prism-a11y-tree />\n                }\n                @case ('sr') {\n                    <prism-a11y-sr />\n                }\n            }\n        }\n    </div>\n</div>\n", styles: [":host {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n.a11y-panel {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n.subtabs {\n    position: sticky;\n    top: 0;\n    z-index: 2;\n    display: flex;\n    gap: 2px;\n    padding: 10px 20px 0;\n    background: var(--prism-bg-elevated);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.st-tab {\n    position: relative;\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    padding: 7px 12px;\n    font-family: var(--font-sans);\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--prism-text-muted);\n    cursor: pointer;\n    background: none;\n    border: none;\n    border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n    transition: color var(--dur-fast);\n}\n\n.st-tab:hover {\n    color: var(--prism-text-2);\n}\n\n.st-tab--active {\n    color: var(--prism-text);\n}\n\n.st-tab--active::after {\n    position: absolute;\n    right: 8px;\n    bottom: -1px;\n    left: 8px;\n    height: 2px;\n    content: '';\n    background: var(--prism-primary);\n    border-radius: 1px;\n}\n\n.st-badge {\n    display: grid;\n    place-items: center;\n    min-width: 16px;\n    height: 16px;\n    padding: 0 5px;\n    font-family: var(--font-mono);\n    font-size: 10px;\n    font-weight: 700;\n    color: var(--prism-primary);\n    background: color-mix(in srgb, var(--prism-primary) 18%, transparent);\n    border-radius: 8px;\n}\n\n.st-badge--ok {\n    color: var(--prism-success);\n    background: color-mix(in srgb, var(--prism-success) 18%, transparent);\n}\n\n.st-badge--warn {\n    color: var(--prism-warn);\n    background: color-mix(in srgb, var(--prism-warn) 18%, transparent);\n}\n\n.a11y-content {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n}\n\n.a11y-disabled {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 100px;\n    font-size: 13px;\n    color: var(--prism-text-muted);\n}\n"] }]
+        args: [{ selector: 'prism-a11y-panel', standalone: true, imports: [A11yViolationsComponent, A11yKeyboardComponent, A11yTreeComponent, A11ySrComponent, PrismPanelToolbarComponent, PrismTabsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"a11y-panel\">\n    <prism-panel-toolbar>\n        <prism-tabs\n            toolbarStart\n            size=\"sm\"\n            ariaLabel=\"Accessibility views\"\n            [items]=\"tabs()\"\n            [active]=\"state.activeTab()\"\n            (activeChange)=\"selectTab($event)\" />\n    </prism-panel-toolbar>\n\n    <div class=\"a11y-content\">\n        @if (disabled()) {\n            <div class=\"a11y-disabled\"> Accessibility audit disabled for this component. </div>\n        } @else {\n            @switch (state.activeTab()) {\n                @case ('violations') {\n                    <prism-a11y-violations />\n                }\n                @case ('keyboard') {\n                    <prism-a11y-keyboard />\n                }\n                @case ('tree') {\n                    <prism-a11y-tree />\n                }\n                @case ('sr') {\n                    <prism-a11y-sr />\n                }\n            }\n        }\n    </div>\n</div>\n", styles: [":host {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n.a11y-panel {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n.a11y-content {\n    flex: 1;\n    min-height: 0;\n    container-type: inline-size;\n    overflow: auto;\n}\n\n.a11y-disabled {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 100px;\n    font-size: 13px;\n    color: var(--prism-text-muted);\n}\n"] }]
     }], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yPanelComponent, { className: "A11yPanelComponent", filePath: "app/panels/a11y/a11y-panel.component.ts", lineNumber: 19 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yPanelComponent, { className: "A11yPanelComponent", filePath: "app/panels/a11y/a11y-panel.component.ts", lineNumber: 22 }); })();

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"}