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

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

@@ -5,87 +5,78 @@ import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.column.state;
 const _forTrack1 = ($index, $item) => $item.variant;
 const _forTrack2 = ($index, $item) => $item.state;
-function PrismOverviewMatrixComponent_For_5_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function PrismOverviewMatrixComponent_For_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 6);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
+    const fit_r1 = ctx;
+    i0.ɵɵattribute("title", fit_r1.title);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx);
+    i0.ɵɵtextInterpolate(fit_r1.text);
 } }
 function PrismOverviewMatrixComponent_For_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 3)(1, "span", 4);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 5);
-    i0.ɵɵtext(4);
+    i0.ɵɵelementStart(0, "div", 3)(1, "span", 4)(2, "span", 5);
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, PrismOverviewMatrixComponent_For_5_Conditional_5_Template, 2, 1, "span", 6);
+    i0.ɵɵconditionalCreate(4, PrismOverviewMatrixComponent_For_5_Conditional_4_Template, 2, 2, "span", 6);
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 7);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    let tmp_14_0;
-    const header_r1 = ctx.$implicit;
-    i0.ɵɵattribute("data-fits-nowhere", header_r1.fitsNowhere ? "" : null)("title", header_r1.fitsNowhere ? header_r1.column.title + " fits no variant; check its selectors" : null);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(header_r1.column.title);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(header_r1.column.signature);
+    let tmp_13_0;
+    const header_r2 = ctx.$implicit;
+    i0.ɵɵattribute("data-fits-nowhere", header_r2.fitsNowhere ? "" : null)("title", header_r2.fitsNowhere ? header_r2.column.title + " fits no variant; check its selectors" : null);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(header_r2.column.title);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_14_0 = header_r1.fit) ? 5 : -1, tmp_14_0);
+    i0.ɵɵconditional((tmp_13_0 = header_r2.fit) ? 4 : -1, tmp_13_0);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(header_r2.column.signature);
 } }
 function PrismOverviewMatrixComponent_For_7_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 9);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx);
-} }
-function PrismOverviewMatrixComponent_For_7_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 10)(1, "div", 11);
     i0.ɵɵelement(2, "prism-overview-cell", 12);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const row_r2 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
+    const row_r3 = i0.ɵɵnextContext().$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("component", ctx_r2.component())("index", row_r2.variant);
+    i0.ɵɵproperty("component", ctx_r3.component())("index", row_r3.variant);
 } }
-function PrismOverviewMatrixComponent_For_7_Conditional_6_For_1_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
+function PrismOverviewMatrixComponent_For_7_Conditional_5_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 13)(1, "div", 11)(2, "prism-overview-cell", 14);
-    i0.ɵɵlistener("fitChange", function PrismOverviewMatrixComponent_For_7_Conditional_6_For_1_Template_prism_overview_cell_fitChange_2_listener($event) { const column_r5 = i0.ɵɵrestoreView(_r4).$implicit; const row_r2 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onFit(row_r2.variant, column_r5.state, $event)); });
+    i0.ɵɵlistener("fitChange", function PrismOverviewMatrixComponent_For_7_Conditional_5_For_1_Template_prism_overview_cell_fitChange_2_listener($event) { const column_r6 = i0.ɵɵrestoreView(_r5).$implicit; const row_r3 = i0.ɵɵnextContext(2).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onFit(row_r3.variant, column_r6.state, $event)); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const column_r5 = ctx.$implicit;
-    const row_r2 = i0.ɵɵnextContext(2).$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
+    const column_r6 = ctx.$implicit;
+    const row_r3 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("component", ctx_r2.component())("index", row_r2.variant)("state", column_r5.state);
+    i0.ɵɵproperty("component", ctx_r3.component())("index", row_r3.variant)("state", column_r6.state);
 } }
-function PrismOverviewMatrixComponent_For_7_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, PrismOverviewMatrixComponent_For_7_Conditional_6_For_1_Template, 3, 3, "div", 13, _forTrack2);
+function PrismOverviewMatrixComponent_For_7_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, PrismOverviewMatrixComponent_For_7_Conditional_5_For_1_Template, 3, 3, "div", 13, _forTrack2);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵrepeater(ctx_r2.matrix().columns);
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵrepeater(ctx_r3.matrix().columns);
 } }
 function PrismOverviewMatrixComponent_For_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 1)(1, "div", 7)(2, "span", 8);
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 8)(2, "span", 9);
     i0.ɵɵtext(3);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, PrismOverviewMatrixComponent_For_7_Conditional_4_Template, 2, 1, "span", 9);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, PrismOverviewMatrixComponent_For_7_Conditional_5_Template, 3, 2, "div", 10)(6, PrismOverviewMatrixComponent_For_7_Conditional_6_Template, 2, 0);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(4, PrismOverviewMatrixComponent_For_7_Conditional_4_Template, 3, 2, "div", 10)(5, PrismOverviewMatrixComponent_For_7_Conditional_5_Template, 2, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    let tmp_11_0;
-    const row_r2 = ctx.$implicit;
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(row_r2.title);
+    const row_r3 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_11_0 = row_r2.note) ? 4 : -1, tmp_11_0);
+    i0.ɵɵattribute("title", row_r3.note);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(row_r3.title);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(row_r2.optedOut ? 5 : 6);
+    i0.ɵɵconditional(row_r3.optedOut ? 4 : 5);
 } }
 /**
  * The states a component has been warned about, by index. Module-level and weak,
@@ -140,13 +131,13 @@ export class PrismOverviewMatrixComponent {
         }
     }
     static ɵfac = function PrismOverviewMatrixComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismOverviewMatrixComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismOverviewMatrixComponent, selectors: [["prism-overview-matrix"]], inputs: { component: [1, "component"] }, decls: 8, vars: 3, consts: [["role", "table", 1, "matrix"], ["role", "row", 1, "matrix__row"], ["role", "columnheader", 1, "matrix__corner"], ["role", "columnheader", 1, "matrix__head"], [1, "matrix__title"], [1, "matrix__signature"], [1, "matrix__fit"], ["role", "rowheader", 1, "matrix__variant"], [1, "matrix__name"], [1, "matrix__note"], ["role", "cell", 1, "matrix__slot", "matrix__slot--span"], ["role", "list", 1, "matrix__list"], ["mode", "matrix", 3, "component", "index"], ["role", "cell", 1, "matrix__slot"], ["mode", "matrix", 3, "fitChange", "component", "index", "state"]], template: function PrismOverviewMatrixComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismOverviewMatrixComponent, selectors: [["prism-overview-matrix"]], inputs: { component: [1, "component"] }, decls: 8, vars: 3, consts: [["role", "table", 1, "matrix"], ["role", "row", 1, "matrix__row"], ["role", "columnheader", 1, "matrix__corner"], ["role", "columnheader", 1, "matrix__head"], [1, "matrix__head-line"], [1, "matrix__title"], [1, "matrix__fit"], [1, "matrix__signature"], ["role", "rowheader", 1, "matrix__variant"], [1, "matrix__name"], ["role", "cell", 1, "matrix__slot", "matrix__slot--span"], ["role", "list", 1, "matrix__list"], ["mode", "matrix", 3, "component", "index"], ["role", "cell", 1, "matrix__slot"], ["mode", "matrix", 3, "fitChange", "component", "index", "state"]], template: function PrismOverviewMatrixComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
-            i0.ɵɵtext(3, " Variant ");
+            i0.ɵɵtext(3, " Variant \\ State ");
             i0.ɵɵelementEnd();
-            i0.ɵɵrepeaterCreate(4, PrismOverviewMatrixComponent_For_5_Template, 6, 5, "div", 3, _forTrack0);
+            i0.ɵɵrepeaterCreate(4, PrismOverviewMatrixComponent_For_5_Template, 7, 5, "div", 3, _forTrack0);
             i0.ɵɵelementEnd();
-            i0.ɵɵrepeaterCreate(6, PrismOverviewMatrixComponent_For_7_Template, 7, 3, "div", 1, _forTrack1);
+            i0.ɵɵrepeaterCreate(6, PrismOverviewMatrixComponent_For_7_Template, 6, 3, "div", 1, _forTrack1);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵstyleProp("--%NS%matrix-columns", ctx.matrix().columns.length);
@@ -155,10 +146,10 @@ export class PrismOverviewMatrixComponent {
             i0.ɵɵrepeater(ctx.headers());
             i0.ɵɵadvance(2);
             i0.ɵɵrepeater(ctx.matrix().rows);
-        } }, dependencies: [PrismOverviewCellComponent], styles: ["\n\n\n[_nghost-%COMP%] {\n    display: flex;\n    flex: 1 1 0;\n    flex-direction: column;\n    min-height: 0;\n}\n\n.matrix[_ngcontent-%COMP%] {\n    --%NS%matrix-edge: var(--%NS%prism-border);\n\n    display: grid;\n    flex: 1 1 0;\n    grid-template-columns: minmax(120px, max-content) repeat(var(--%NS%matrix-columns, 1), minmax(160px, 1fr));\n    align-content: start;\n    min-height: 0;\n    overflow: auto;\n}\n\n\n\n.matrix__row[_ngcontent-%COMP%] {\n    display: contents;\n}\n\n.matrix__corner[_ngcontent-%COMP%], \n.matrix__head[_ngcontent-%COMP%], \n.matrix__variant[_ngcontent-%COMP%] {\n    position: sticky;\n    display: flex;\n    flex-direction: column;\n    gap: var(--%NS%sp-1);\n    min-width: 0;\n    padding: var(--%NS%sp-3) var(--%NS%sp-4);\n    background: var(--%NS%prism-bg-elevated);\n}\n\n.matrix__corner[_ngcontent-%COMP%], \n.matrix__head[_ngcontent-%COMP%] {\n    top: 0;\n    z-index: 2;\n    justify-content: flex-end;\n    border-bottom: 1px solid var(--%NS%matrix-edge);\n}\n\n.matrix__corner[_ngcontent-%COMP%], \n.matrix__variant[_ngcontent-%COMP%] {\n    left: 0;\n    z-index: 1;\n    border-right: 1px solid var(--%NS%matrix-edge);\n}\n\n\n.matrix__corner[_ngcontent-%COMP%] {\n    z-index: 3;\n    font-family: var(--%NS%prism-font-mono);\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-muted);\n}\n\n.matrix__variant[_ngcontent-%COMP%] {\n    justify-content: center;\n}\n\n.matrix__title[_ngcontent-%COMP%], \n.matrix__name[_ngcontent-%COMP%] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--%NS%fs-sm);\n    font-weight: 600;\n    color: var(--%NS%prism-text);\n    white-space: nowrap;\n}\n\n.matrix__signature[_ngcontent-%COMP%], \n.matrix__fit[_ngcontent-%COMP%], \n.matrix__note[_ngcontent-%COMP%] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--%NS%prism-font-mono);\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-muted);\n    white-space: nowrap;\n}\n\n\n.matrix__head[data-fits-nowhere][_ngcontent-%COMP%] {\n    box-shadow: inset 0 -2px 0 var(--%NS%prism-mark-attention);\n}\n\n.matrix__head[data-fits-nowhere][_ngcontent-%COMP%]   .matrix__fit[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-attention);\n}\n\n.matrix__slot[_ngcontent-%COMP%] {\n    display: flex;\n    min-width: 0;\n    padding: var(--%NS%sp-3);\n}\n\n\n\n.matrix__slot--span[_ngcontent-%COMP%] {\n    grid-column: 2 / -1;\n}\n\n.matrix__list[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    min-width: 0;\n}\n\n.matrix__list[_ngcontent-%COMP%]    > prism-overview-cell[_ngcontent-%COMP%] {\n    flex: 1;\n}"] });
+        } }, dependencies: [PrismOverviewCellComponent], styles: ["\n\n\n[_nghost-%COMP%] {\n    display: flex;\n    flex: 1 1 0;\n    flex-direction: column;\n    min-height: 0;\n}\n\n.matrix[_ngcontent-%COMP%] {\n    --%NS%matrix-edge: var(--%NS%prism-border);\n\n    display: grid;\n    flex: 1 1 0;\n    grid-template-columns: minmax(120px, max-content) repeat(var(--%NS%matrix-columns, 1), minmax(160px, 1fr));\n    align-content: start;\n    min-height: 0;\n    overflow: auto;\n}\n\n\n\n.matrix__row[_ngcontent-%COMP%] {\n    display: contents;\n}\n\n.matrix__corner[_ngcontent-%COMP%], \n.matrix__head[_ngcontent-%COMP%], \n.matrix__variant[_ngcontent-%COMP%] {\n    position: sticky;\n    display: flex;\n    flex-direction: column;\n    gap: var(--%NS%sp-1);\n    min-width: 0;\n    padding: var(--%NS%sp-3) var(--%NS%sp-4);\n    background: var(--%NS%prism-bg-elevated);\n}\n\n\n\n.matrix__corner[_ngcontent-%COMP%], \n.matrix__head[_ngcontent-%COMP%] {\n    top: 0;\n    z-index: 2;\n    justify-content: flex-start;\n    border-bottom: 1px solid var(--%NS%matrix-edge);\n}\n\n.matrix__corner[_ngcontent-%COMP%], \n.matrix__variant[_ngcontent-%COMP%] {\n    left: 0;\n    z-index: 1;\n    border-right: 1px solid var(--%NS%matrix-edge);\n}\n\n\n.matrix__corner[_ngcontent-%COMP%] {\n    z-index: 3;\n    font-family: var(--%NS%prism-font-mono);\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-muted);\n}\n\n.matrix__variant[_ngcontent-%COMP%] {\n    justify-content: center;\n}\n\n.matrix__head-line[_ngcontent-%COMP%] {\n    display: flex;\n    gap: var(--%NS%sp-3);\n    align-items: baseline;\n    justify-content: space-between;\n    min-width: 0;\n}\n\n.matrix__title[_ngcontent-%COMP%], \n.matrix__name[_ngcontent-%COMP%] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--%NS%fs-sm);\n    font-weight: 600;\n    color: var(--%NS%prism-text);\n    white-space: nowrap;\n}\n\n.matrix__signature[_ngcontent-%COMP%], \n.matrix__fit[_ngcontent-%COMP%] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--%NS%prism-font-mono);\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-muted);\n    white-space: nowrap;\n}\n\n.matrix__fit[_ngcontent-%COMP%] {\n    flex: none;\n    font-variant-numeric: tabular-nums;\n    cursor: help;\n}\n\n\n.matrix__head[data-fits-nowhere][_ngcontent-%COMP%] {\n    box-shadow: inset 0 -2px 0 var(--%NS%prism-warn);\n}\n\n.matrix__head[data-fits-nowhere][_ngcontent-%COMP%]   .matrix__fit[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-warn);\n}\n\n\n.matrix__slot[_ngcontent-%COMP%] {\n    display: flex;\n    min-width: 0;\n    padding: var(--%NS%sp-2);\n}\n\n\n\n.matrix__slot--span[_ngcontent-%COMP%] {\n    grid-column: 2 / -1;\n}\n\n.matrix__list[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    min-width: 0;\n}\n\n.matrix__list[_ngcontent-%COMP%]    > prism-overview-cell[_ngcontent-%COMP%] {\n    flex: 1;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismOverviewMatrixComponent, [{
         type: Component,
-        args: [{ selector: 'prism-overview-matrix', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismOverviewCellComponent], template: "<div\n    class=\"matrix\"\n    role=\"table\"\n    [attr.aria-label]=\"component().meta.showcaseConfig.title + ' variants by state'\"\n    [style.--matrix-columns]=\"matrix().columns.length\">\n    <div\n        class=\"matrix__row\"\n        role=\"row\">\n        <div\n            class=\"matrix__corner\"\n            role=\"columnheader\">\n            Variant\n        </div>\n        @for (header of headers(); track header.column.state) {\n            <div\n                class=\"matrix__head\"\n                role=\"columnheader\"\n                [attr.data-fits-nowhere]=\"header.fitsNowhere ? '' : null\"\n                [attr.title]=\"header.fitsNowhere ? header.column.title + ' fits no variant; check its selectors' : null\">\n                <span class=\"matrix__title\">{{ header.column.title }}</span>\n                <span class=\"matrix__signature\">{{ header.column.signature }}</span>\n                @if (header.fit; as fit) {\n                    <span class=\"matrix__fit\">{{ fit }}</span>\n                }\n            </div>\n        }\n    </div>\n    @for (row of matrix().rows; track row.variant) {\n        <div\n            class=\"matrix__row\"\n            role=\"row\">\n            <div\n                class=\"matrix__variant\"\n                role=\"rowheader\">\n                <span class=\"matrix__name\">{{ row.title }}</span>\n                @if (row.note; as note) {\n                    <span class=\"matrix__note\">{{ note }}</span>\n                }\n            </div>\n            @if (row.optedOut) {\n                <div\n                    class=\"matrix__slot matrix__slot--span\"\n                    role=\"cell\">\n                    <div\n                        class=\"matrix__list\"\n                        role=\"list\">\n                        <prism-overview-cell\n                            [component]=\"component()\"\n                            [index]=\"row.variant\"\n                            mode=\"matrix\" />\n                    </div>\n                </div>\n            } @else {\n                @for (column of matrix().columns; track column.state) {\n                    <div\n                        class=\"matrix__slot\"\n                        role=\"cell\">\n                        <div\n                            class=\"matrix__list\"\n                            role=\"list\">\n                            <prism-overview-cell\n                                [component]=\"component()\"\n                                [index]=\"row.variant\"\n                                [state]=\"column.state\"\n                                mode=\"matrix\"\n                                (fitChange)=\"onFit(row.variant, column.state, $event)\" />\n                        </div>\n                    </div>\n                }\n            }\n        </div>\n    }\n</div>\n", styles: ["/* The host hands its height to the matrix, which scrolls on its own: the\n   header row and the variant column stay in view only if the scrolling\n   happens inside the grid that holds them. */\n:host {\n    display: flex;\n    flex: 1 1 0;\n    flex-direction: column;\n    min-height: 0;\n}\n\n.matrix {\n    --matrix-edge: var(--prism-border);\n\n    display: grid;\n    flex: 1 1 0;\n    grid-template-columns: minmax(120px, max-content) repeat(var(--matrix-columns, 1), minmax(160px, 1fr));\n    align-content: start;\n    min-height: 0;\n    overflow: auto;\n}\n\n/* The rows only carry the roles. Their cells are the grid's, so the columns\n   line up from the header down. */\n.matrix__row {\n    display: contents;\n}\n\n.matrix__corner,\n.matrix__head,\n.matrix__variant {\n    position: sticky;\n    display: flex;\n    flex-direction: column;\n    gap: var(--sp-1);\n    min-width: 0;\n    padding: var(--sp-3) var(--sp-4);\n    background: var(--prism-bg-elevated);\n}\n\n.matrix__corner,\n.matrix__head {\n    top: 0;\n    z-index: 2;\n    justify-content: flex-end;\n    border-bottom: 1px solid var(--matrix-edge);\n}\n\n.matrix__corner,\n.matrix__variant {\n    left: 0;\n    z-index: 1;\n    border-right: 1px solid var(--matrix-edge);\n}\n\n/* Above the header row and the variant column both, where they cross. */\n.matrix__corner {\n    z-index: 3;\n    font-family: var(--prism-font-mono);\n    font-size: var(--fs-xs);\n    color: var(--prism-text-muted);\n}\n\n.matrix__variant {\n    justify-content: center;\n}\n\n.matrix__title,\n.matrix__name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--fs-sm);\n    font-weight: 600;\n    color: var(--prism-text);\n    white-space: nowrap;\n}\n\n.matrix__signature,\n.matrix__fit,\n.matrix__note {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--prism-font-mono);\n    font-size: var(--fs-xs);\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n}\n\n/* A state that fits no variant at all: most likely a selector with a typo. */\n.matrix__head[data-fits-nowhere] {\n    box-shadow: inset 0 -2px 0 var(--prism-mark-attention);\n}\n\n.matrix__head[data-fits-nowhere] .matrix__fit {\n    color: var(--prism-mark-attention);\n}\n\n.matrix__slot {\n    display: flex;\n    min-width: 0;\n    padding: var(--sp-3);\n}\n\n/* A variant that opted out has a single cell, over Default and every state:\n   it is not combined with any of them. */\n.matrix__slot--span {\n    grid-column: 2 / -1;\n}\n\n.matrix__list {\n    display: flex;\n    flex: 1;\n    min-width: 0;\n}\n\n.matrix__list > prism-overview-cell {\n    flex: 1;\n}\n"] }]
+        args: [{ selector: 'prism-overview-matrix', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismOverviewCellComponent], template: "<div\n    class=\"matrix\"\n    role=\"table\"\n    [attr.aria-label]=\"component().meta.showcaseConfig.title + ' variants by state'\"\n    [style.--matrix-columns]=\"matrix().columns.length\">\n    <div\n        class=\"matrix__row\"\n        role=\"row\">\n        <div\n            class=\"matrix__corner\"\n            role=\"columnheader\">\n            Variant \\ State\n        </div>\n        @for (header of headers(); track header.column.state) {\n            <div\n                class=\"matrix__head\"\n                role=\"columnheader\"\n                [attr.data-fits-nowhere]=\"header.fitsNowhere ? '' : null\"\n                [attr.title]=\"header.fitsNowhere ? header.column.title + ' fits no variant; check its selectors' : null\">\n                <span class=\"matrix__head-line\">\n                    <span class=\"matrix__title\">{{ header.column.title }}</span>\n                    @if (header.fit; as fit) {\n                        <span\n                            class=\"matrix__fit\"\n                            [attr.title]=\"fit.title\"\n                            >{{ fit.text }}</span\n                        >\n                    }\n                </span>\n                <span class=\"matrix__signature\">{{ header.column.signature }}</span>\n            </div>\n        }\n    </div>\n    @for (row of matrix().rows; track row.variant) {\n        <div\n            class=\"matrix__row\"\n            role=\"row\">\n            <div\n                class=\"matrix__variant\"\n                role=\"rowheader\"\n                [attr.title]=\"row.note\">\n                <span class=\"matrix__name\">{{ row.title }}</span>\n            </div>\n            @if (row.optedOut) {\n                <div\n                    class=\"matrix__slot matrix__slot--span\"\n                    role=\"cell\">\n                    <div\n                        class=\"matrix__list\"\n                        role=\"list\">\n                        <prism-overview-cell\n                            [component]=\"component()\"\n                            [index]=\"row.variant\"\n                            mode=\"matrix\" />\n                    </div>\n                </div>\n            } @else {\n                @for (column of matrix().columns; track column.state) {\n                    <div\n                        class=\"matrix__slot\"\n                        role=\"cell\">\n                        <div\n                            class=\"matrix__list\"\n                            role=\"list\">\n                            <prism-overview-cell\n                                [component]=\"component()\"\n                                [index]=\"row.variant\"\n                                [state]=\"column.state\"\n                                mode=\"matrix\"\n                                (fitChange)=\"onFit(row.variant, column.state, $event)\" />\n                        </div>\n                    </div>\n                }\n            }\n        </div>\n    }\n</div>\n", styles: ["/* The host hands its height to the matrix, which scrolls on its own: the\n   header row and the variant column stay in view only if the scrolling\n   happens inside the grid that holds them. */\n:host {\n    display: flex;\n    flex: 1 1 0;\n    flex-direction: column;\n    min-height: 0;\n}\n\n.matrix {\n    --matrix-edge: var(--prism-border);\n\n    display: grid;\n    flex: 1 1 0;\n    grid-template-columns: minmax(120px, max-content) repeat(var(--matrix-columns, 1), minmax(160px, 1fr));\n    align-content: start;\n    min-height: 0;\n    overflow: auto;\n}\n\n/* The rows only carry the roles. Their cells are the grid's, so the columns\n   line up from the header down. */\n.matrix__row {\n    display: contents;\n}\n\n.matrix__corner,\n.matrix__head,\n.matrix__variant {\n    position: sticky;\n    display: flex;\n    flex-direction: column;\n    gap: var(--sp-1);\n    min-width: 0;\n    padding: var(--sp-3) var(--sp-4);\n    background: var(--prism-bg-elevated);\n}\n\n/* Top-aligned: a title and its signature read from the same line in every\n   column, however long a neighbour's signature runs. */\n.matrix__corner,\n.matrix__head {\n    top: 0;\n    z-index: 2;\n    justify-content: flex-start;\n    border-bottom: 1px solid var(--matrix-edge);\n}\n\n.matrix__corner,\n.matrix__variant {\n    left: 0;\n    z-index: 1;\n    border-right: 1px solid var(--matrix-edge);\n}\n\n/* Above the header row and the variant column both, where they cross. */\n.matrix__corner {\n    z-index: 3;\n    font-family: var(--prism-font-mono);\n    font-size: var(--fs-xs);\n    color: var(--prism-text-muted);\n}\n\n.matrix__variant {\n    justify-content: center;\n}\n\n.matrix__head-line {\n    display: flex;\n    gap: var(--sp-3);\n    align-items: baseline;\n    justify-content: space-between;\n    min-width: 0;\n}\n\n.matrix__title,\n.matrix__name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--fs-sm);\n    font-weight: 600;\n    color: var(--prism-text);\n    white-space: nowrap;\n}\n\n.matrix__signature,\n.matrix__fit {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--prism-font-mono);\n    font-size: var(--fs-xs);\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n}\n\n.matrix__fit {\n    flex: none;\n    font-variant-numeric: tabular-nums;\n    cursor: help;\n}\n\n/* A state that fits no variant at all: most likely a selector with a typo. */\n.matrix__head[data-fits-nowhere] {\n    box-shadow: inset 0 -2px 0 var(--prism-warn);\n}\n\n.matrix__head[data-fits-nowhere] .matrix__fit {\n    color: var(--prism-warn);\n}\n\n/* 4px each side: 8px between neighbouring cells. */\n.matrix__slot {\n    display: flex;\n    min-width: 0;\n    padding: var(--sp-2);\n}\n\n/* A variant that opted out has a single cell, over Default and every state:\n   it is not combined with any of them. */\n.matrix__slot--span {\n    grid-column: 2 / -1;\n}\n\n.matrix__list {\n    display: flex;\n    flex: 1;\n    min-width: 0;\n}\n\n.matrix__list > prism-overview-cell {\n    flex: 1;\n}\n"] }]
     }], () => [], { component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismOverviewMatrixComponent, { className: "PrismOverviewMatrixComponent", filePath: "app/overview/prism-overview-matrix.component.ts", lineNumber: 34 }); })();

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-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 }); })();