@ng-prism/core 22.2.0-beta.3 → 22.2.0-beta.5

package/dist/app/sidebar/prism-sidebar.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/prism-sidebar.component.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;;AAiCzE,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,qBA0Ta,qBAAqB;IAChC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAC6B;IAGzD,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAa7C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6C;IAE1E,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAE1B;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,oDAc9B;IAEH,SAAS,CAAC,QAAQ,CAAC,iBAAiB;;;;;;;;;;SAYjC;IAEH,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAI3C,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAU3C,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAM/C,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAMjD,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,eAAe,GAAG,SAAS;IAMvE,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM,GAAG,IAAI;IAO1D,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO;IAWjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAQ9C,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,aAAa;yCA3HV,qBAAqB;2CAArB,qBAAqB;CAgIjC"}
+{"version":3,"file":"prism-sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/prism-sidebar.component.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAEjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAKL,KAAK,cAAc,EACnB,KAAK,eAAe,EACrB,MAAM,6BAA6B,CAAC;;AAiCrC,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,UAAU,WAAW;IACnB,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,eAAe,GAAG,IAAI,CAAC;CACrC;AAED,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;CACxB;AAED,qBAkWa,qBAAqB;IAChC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAC6B;IAEzD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAK1B;IAGF,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAa7C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6C;IAE1E,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAE1B;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,oDAc9B;IAEH,SAAS,CAAC,QAAQ,CAAC,iBAAiB;;;;;;SAqBjC;IAEH,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAI3C,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAU3C,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAM/C,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAMjD,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,eAAe,GAAG,SAAS;IAMvE;;;;;OAKG;IACH,SAAS,CAAC,aAAa,CAAC,MAAM,EAAE,cAAc,GAAG,MAAM;IAKvD,SAAS,CAAC,WAAW,CACnB,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,eAAe,GAAG,IAAI,GAClC,MAAM,GAAG,IAAI;IAShB,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO;IAWjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAQ9C,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,aAAa;yCA5JV,qBAAqB;2CAArB,qBAAqB;CAiKjC"}

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

@@ -1,12 +1,18 @@
 import { Component, computed, inject, signal, viewChild, HostListener, ChangeDetectionStrategy, } from '@angular/core';
 import { PrismIconComponent } from '../icons/prism-icon.component.js';
+import { BUILTIN_NAVIGATION_DECORATIONS } from '../panels/builtin-navigation-decorations.js';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
+import { PrismPluginService } from '../services/prism-plugin.service.js';
 import { PrismSearchService } from '../services/prism-search.service.js';
+import { decorateItem, lifecycleIcon, resolveNavigationDecorations, rollupCategory, } from './navigation-decorations.js';
 import * as i0 from "@angular/core";
 const _c0 = ["filterInput"];
 const _forTrack0 = ($index, $item) => $item.name;
 function _forTrack1($index, $item) { /* @ts-ignore */
 return this.itemKey($item); }
+function _forTrack2($index, $item) { /* @ts-ignore */
+return this.itemKey($item.item); }
+const _forTrack3 = ($index, $item) => $item.id;
 function PrismSidebarComponent_Conditional_8_For_8_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 17);
@@ -48,7 +54,7 @@ function PrismSidebarComponent_Conditional_8_For_8_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵproperty("size", 10);
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("--chip", cat_r2.color);
+    i0.ɵɵstyleProp("--%NS%chip", cat_r2.color);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", cat_r2.name, " ");
     i0.ɵɵadvance();
@@ -73,36 +79,59 @@ function PrismSidebarComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.pageCategories());
 } }
-function PrismSidebarComponent_For_10_For_7_Conditional_7_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 25);
-    i0.ɵɵelement(1, "span", 26);
+function PrismSidebarComponent_For_10_For_7_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 24);
+    i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const cat_r7 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("sb-group-rollup--warn", cat_r7.rollup.variant === "warn")("sb-group-rollup--danger", cat_r7.rollup.variant === "danger");
+    i0.ɵɵattribute("title", ctx_r2.rollupTooltip(cat_r7.rollup))("aria-label", ctx_r2.rollupTooltip(cat_r7.rollup));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(cat_r7.rollup.problems);
 } }
-function PrismSidebarComponent_For_10_For_7_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
+function PrismSidebarComponent_For_10_For_7_Conditional_8_For_2_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-icon", 29);
+} if (rf & 2) {
+    const mark_r11 = ctx.$implicit;
+    i0.ɵɵclassMap("sb-health sb-health--" + mark_r11.variant);
+    i0.ɵɵproperty("name", mark_r11.icon)("size", 11);
+} }
+function PrismSidebarComponent_For_10_For_7_Conditional_8_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 27);
+    i0.ɵɵrepeaterCreate(1, PrismSidebarComponent_For_10_For_7_Conditional_8_For_2_Conditional_4_For_2_Template, 1, 4, "prism-icon", 28, _forTrack3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const row_r10 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(row_r10.decorations.marks);
+} }
+function PrismSidebarComponent_For_10_For_7_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 17);
-    i0.ɵɵlistener("click", function PrismSidebarComponent_For_10_For_7_Conditional_7_For_2_Template_button_click_0_listener() { const item_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onSelect(item_r10)); });
-    i0.ɵɵelement(1, "prism-icon", 24);
+    i0.ɵɵlistener("click", function PrismSidebarComponent_For_10_For_7_Conditional_8_For_2_Template_button_click_0_listener() { const row_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onSelect(row_r10.item)); });
+    i0.ɵɵelement(1, "prism-icon", 26);
     i0.ɵɵelementStart(2, "span", 18);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, PrismSidebarComponent_For_10_For_7_Conditional_7_For_2_Conditional_4_Template, 2, 0, "span", 25);
+    i0.ɵɵconditionalCreate(4, PrismSidebarComponent_For_10_For_7_Conditional_8_For_2_Conditional_4_Template, 3, 0, "span", 27);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r10 = ctx.$implicit;
+    const row_r10 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassProp("sb-item--active", ctx_r2.isActive(item_r10))("sb-item--deprecated", ctx_r2.itemStatus(item_r10) === "deprecated");
-    i0.ɵɵattribute("title", ctx_r2.itemTooltip(item_r10));
+    i0.ɵɵclassProp("sb-item--active", ctx_r2.isActive(row_r10.item))("sb-item--deprecated", ctx_r2.itemStatus(row_r10.item) === "deprecated");
+    i0.ɵɵattribute("title", ctx_r2.itemTooltip(row_r10.item, row_r10.decorations));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("size", 12);
+    i0.ɵɵproperty("name", row_r10.icon)("size", 12);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r2.itemLabel(item_r10));
+    i0.ɵɵtextInterpolate(ctx_r2.itemLabel(row_r10.item));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.itemStatus(item_r10) === "wip" ? 4 : -1);
+    i0.ɵɵconditional(row_r10.decorations ? 4 : -1);
 } }
-function PrismSidebarComponent_For_10_For_7_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+function PrismSidebarComponent_For_10_For_7_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵrepeaterCreate(1, PrismSidebarComponent_For_10_For_7_Conditional_7_For_2_Template, 5, 8, "button", 23, _forTrack1, true);
+    i0.ɵɵrepeaterCreate(1, PrismSidebarComponent_For_10_For_7_Conditional_8_For_2_Template, 5, 9, "button", 25, _forTrack2, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const cat_r7 = i0.ɵɵnextContext().$implicit;
@@ -115,10 +144,11 @@ function PrismSidebarComponent_For_10_For_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵlistener("click", function PrismSidebarComponent_For_10_For_7_Template_button_click_1_listener() { const cat_r7 = i0.ɵɵrestoreView(_r6).$implicit; const section_r8 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleCollapse("sec:" + section_r8.name + ":" + cat_r7.name)); });
     i0.ɵɵelement(2, "prism-icon", 13)(3, "span", 14);
     i0.ɵɵtext(4);
-    i0.ɵɵelementStart(5, "span", 22);
-    i0.ɵɵtext(6);
+    i0.ɵɵconditionalCreate(5, PrismSidebarComponent_For_10_For_7_Conditional_5_Template, 2, 7, "span", 22);
+    i0.ɵɵelementStart(6, "span", 23);
+    i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(7, PrismSidebarComponent_For_10_For_7_Conditional_7_Template, 3, 0, "div", 15);
+    i0.ɵɵconditionalCreate(8, PrismSidebarComponent_For_10_For_7_Conditional_8_Template, 3, 0, "div", 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const cat_r7 = ctx.$implicit;
@@ -130,13 +160,15 @@ function PrismSidebarComponent_For_10_For_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("size", 10);
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("--chip", cat_r7.color);
+    i0.ɵɵstyleProp("--%NS%chip", cat_r7.color);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", cat_r7.name, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(cat_r7.rollup.problems ? 5 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(cat_r7.items.length);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r2.isCollapsed("sec:" + section_r8.name + ":" + cat_r7.name) ? 7 : -1);
+    i0.ɵɵconditional(!ctx_r2.isCollapsed("sec:" + section_r8.name + ":" + cat_r7.name) ? 8 : -1);
 } }
 function PrismSidebarComponent_For_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 19)(1, "span", 20);
@@ -146,7 +178,7 @@ function PrismSidebarComponent_For_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(4, "span");
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵrepeaterCreate(6, PrismSidebarComponent_For_10_For_7_Template, 8, 9, "div", 10, _forTrack0);
+    i0.ɵɵrepeaterCreate(6, PrismSidebarComponent_For_10_For_7_Template, 9, 10, "div", 10, _forTrack0);
 } if (rf & 2) {
     const section_r8 = ctx.$implicit;
     i0.ɵɵadvance(2);
@@ -188,8 +220,11 @@ function categoryColor(name) {
 export class PrismSidebarComponent {
     navigationService = inject(PrismNavigationService);
     searchService = inject(PrismSearchService);
+    pluginService = inject(PrismPluginService);
     filterInput = viewChild('filterInput', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filterInput" }] : /* istanbul ignore next */ []));
+    decorations = computed(() => resolveNavigationDecorations(BUILTIN_NAVIGATION_DECORATIONS, this.pluginService.navigationDecorations()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "decorations" }] : /* istanbul ignore next */ []));
     onGlobalKey(e) {
         if (e.key !== '/' || e.ctrlKey || e.metaKey || e.altKey)
             return;
@@ -224,16 +259,25 @@ export class PrismSidebarComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pageCategories" }] : /* istanbul ignore next */ []));
     componentSections = computed(() => {
+        const defs = this.decorations();
         return this.navigationService.sectionTree().map((section) => ({
             name: section.name,
             icon: sectionIcon(section.name),
             color: categoryColor(section.name),
             totalCount: section.totalCount,
-            categories: section.categories.map((cat) => ({
-                name: cat.name,
-                color: categoryColor(cat.name),
-                items: cat.items,
-            })),
+            categories: section.categories.map((cat) => {
+                const items = cat.items.map((item) => ({
+                    item,
+                    icon: lifecycleIcon(this.itemStatus(item)),
+                    decorations: decorateItem(item, defs),
+                }));
+                return {
+                    name: cat.name,
+                    color: categoryColor(cat.name),
+                    rollup: rollupCategory(items.map((row) => row.decorations)),
+                    items,
+                };
+            }),
         }));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "componentSections" }] : /* istanbul ignore next */ []));
@@ -266,13 +310,26 @@ export class PrismSidebarComponent {
             ? item.data.meta.showcaseConfig.status
             : undefined;
     }
-    itemTooltip(item) {
+    /**
+     * Accessible name for the roll-up pill. The pill otherwise renders a bare
+     * number distinguished only by colour — a screen reader would read the
+     * group head as "Feedback 3 12" with nothing naming what either number
+     * means, and a colour-blind reader can't tell them apart at all.
+     */
+    rollupTooltip(rollup) {
+        const noun = rollup.problems === 1 ? 'component needs' : 'components need';
+        return `${rollup.problems} ${noun} review`;
+    }
+    itemTooltip(item, decorations) {
         const status = this.itemStatus(item);
+        const lines = [];
         if (status === 'wip')
-            return 'Work in progress';
+            lines.push('Work in progress');
         if (status === 'deprecated')
-            return 'Deprecated / Legacy';
-        return null;
+            lines.push('Deprecated / Legacy');
+        if (decorations)
+            lines.push(decorations.tooltip);
+        return lines.length ? lines.join('\n') : null;
     }
     isActive(item) {
         const active = this.navigationService.activeItem();
@@ -313,7 +370,7 @@ export class PrismSidebarComponent {
             i0.ɵɵqueryAdvance();
         } }, hostBindings: function PrismSidebarComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown", function PrismSidebarComponent_keydown_HostBindingHandler($event) { return ctx.onGlobalKey($event); }, i0.ɵɵresolveDocument);
-        } }, decls: 11, vars: 3, consts: [["filterInput", ""], [1, "prism-sidebar"], [1, "sb-filter"], ["name", "search", 3, "size"], ["placeholder", "Filter components\u2026", 3, "input", "value"], [1, "sb-scroll"], [1, "sb-pinned"], [1, "sb-pinned-head"], [1, "sb-pinned-head-l"], ["name", "pin", 1, "sb-pinned-pin", 3, "size"], [1, "sb-group", 3, "sb-group--collapsed"], [1, "sb-group"], [1, "sb-group-head", 3, "click"], ["name", "chevron-down", 3, "size"], [1, "sb-group-chip"], [1, "sb-group-body"], [1, "sb-item", 3, "sb-item--active"], [1, "sb-item", 3, "click"], [1, "sb-item-name"], [1, "sb-section-head"], [1, "sb-section-head-l"], [1, "sb-section-icon", 3, "name", "size"], [1, "sb-group-count"], [1, "sb-item", 3, "sb-item--active", "sb-item--deprecated"], ["name", "box", 1, "sb-item-icon", 3, "size"], ["title", "Work in progress", 1, "sb-item-status"], [1, "sb-item-status-dot"]], template: function PrismSidebarComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, decls: 11, vars: 3, consts: [["filterInput", ""], [1, "prism-sidebar"], [1, "sb-filter"], ["name", "search", 3, "size"], ["placeholder", "Filter components\u2026", 3, "input", "value"], [1, "sb-scroll"], [1, "sb-pinned"], [1, "sb-pinned-head"], [1, "sb-pinned-head-l"], ["name", "pin", 1, "sb-pinned-pin", 3, "size"], [1, "sb-group", 3, "sb-group--collapsed"], [1, "sb-group"], [1, "sb-group-head", 3, "click"], ["name", "chevron-down", 3, "size"], [1, "sb-group-chip"], [1, "sb-group-body"], [1, "sb-item", 3, "sb-item--active"], [1, "sb-item", 3, "click"], [1, "sb-item-name"], [1, "sb-section-head"], [1, "sb-section-head-l"], [1, "sb-section-icon", 3, "name", "size"], [1, "sb-group-rollup", 3, "sb-group-rollup--warn", "sb-group-rollup--danger"], [1, "sb-group-count"], [1, "sb-group-rollup"], [1, "sb-item", 3, "sb-item--active", "sb-item--deprecated"], [1, "sb-item-icon", 3, "name", "size"], [1, "sb-item-health"], [3, "name", "size", "class"], [3, "name", "size"]], template: function PrismSidebarComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "nav", 1)(1, "div", 2);
             i0.ɵɵelement(2, "prism-icon", 3);
             i0.ɵɵelementStart(3, "input", 4, 0);
@@ -335,7 +392,7 @@ export class PrismSidebarComponent {
             i0.ɵɵconditional(ctx.pageCategories().length > 0 ? 8 : -1);
             i0.ɵɵadvance();
             i0.ɵɵrepeater(ctx.componentSections());
-        } }, dependencies: [PrismIconComponent], styles: [".prism-sidebar[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      min-height: 0;\n      overflow: hidden;\n    }\n\n    .sb-filter[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin: 12px;\n      padding: 0 10px;\n      height: 30px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: 6px;\n      color: var(--prism-text-muted);\n    }\n    .sb-filter[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      background: transparent;\n      border: 0;\n      outline: none;\n      font-size: var(--fs-md);\n      color: var(--prism-text);\n      font-family: var(--font-sans);\n    }\n    .sb-filter[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder { color: var(--prism-text-muted); }\n    .sb-filter[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 10px;\n      color: var(--prism-text-ghost);\n      padding: 1px 5px;\n      border: 1px solid var(--prism-border);\n      border-radius: 3px;\n    }\n\n    .sb-scroll[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow-y: auto;\n      padding: 10px 0 16px;\n      padding-top: 0;\n    }\n    .sb-scroll[_ngcontent-%COMP%]::-webkit-scrollbar { width: 8px; }\n    .sb-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 4px; }\n    .sb-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-track { background: transparent; }\n\n    .sb-pinned[_ngcontent-%COMP%] {\n      padding: 0 0 10px;\n      margin-bottom: 4px;\n      border-bottom: 1px solid var(--prism-border);\n      border-top: 1px solid var(--prism-border);\n    }\n    .sb-section-head[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 14px 6px;\n      font-size: 10.5px;\n      font-weight: 700;\n      letter-spacing: 0.09em;\n      text-transform: uppercase;\n      color: var(--prism-text-ghost);\n      margin-top: 6px;\n    }\n    .sb-section-head-l[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 6px; }\n    .sb-section-icon[_ngcontent-%COMP%] { color: var(--prism-primary); }\n    .sb-pinned-head[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 14px 6px;\n      margin-top: 6px;\n      font-size: 10.5px;\n      font-weight: 700;\n      letter-spacing: 0.09em;\n      text-transform: uppercase;\n      color: var(--prism-text-ghost);\n    }\n    .sb-pinned-head-l[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 6px; }\n    .sb-pinned-pin[_ngcontent-%COMP%] { color: var(--prism-accent); }\n\n    .sb-group[_ngcontent-%COMP%] { margin-bottom: 4px; }\n    .sb-group-head[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      padding: 8px 14px 6px;\n      font-size: 10.5px;\n      font-weight: 700;\n      letter-spacing: 0.09em;\n      text-transform: uppercase;\n      color: var(--prism-text-ghost);\n      cursor: pointer;\n      user-select: none;\n      background: none;\n      border: none;\n      text-align: left;\n      font-family: var(--font-sans);\n    }\n    .sb-group-head[_ngcontent-%COMP%]   prism-icon[_ngcontent-%COMP%] {\n      transition: transform var(--dur-fast);\n      color: var(--prism-text-ghost);\n    }\n    .sb-group--collapsed[_ngcontent-%COMP%]   .sb-group-head[_ngcontent-%COMP%]   prism-icon[_ngcontent-%COMP%] { transform: rotate(-90deg); }\n\n    .sb-group-chip[_ngcontent-%COMP%] {\n      width: 6px;\n      height: 6px;\n      border-radius: 2px;\n      background: var(--chip, var(--prism-primary));\n      box-shadow: 0 0 6px var(--chip, var(--prism-primary));\n    }\n    .sb-group-count[_ngcontent-%COMP%] {\n      margin-left: auto;\n      font-family: var(--font-mono);\n      font-size: 10px;\n      color: var(--prism-text-ghost);\n      font-weight: 500;\n    }\n\n    .sb-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n      height: 30px;\n      padding: 0 14px 0 28px;\n      font-size: 13px;\n      color: var(--prism-text-2);\n      cursor: pointer;\n      border: none;\n      border-left: 2px solid transparent;\n      background: none;\n      position: relative;\n      transition: background var(--dur-fast), color var(--dur-fast);\n      text-align: left;\n      font-family: var(--font-sans);\n    }\n    .sb-item[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 5%, transparent);\n      color: var(--prism-text);\n    }\n    .sb-item--active[_ngcontent-%COMP%] {\n      border-left-color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      color: var(--prism-text);\n      font-weight: 500;\n    }\n    .sb-item--active[_ngcontent-%COMP%]::before {\n      content: '';\n      position: absolute;\n      left: -1px;\n      top: 0;\n      bottom: 0;\n      width: 3px;\n      background: linear-gradient(180deg, var(--prism-primary-from), var(--prism-primary-to));\n    }\n    .sb-item-icon[_ngcontent-%COMP%] { flex: 0 0 12px; opacity: 0.7; }\n    .sb-item-name[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .sb-item-status[_ngcontent-%COMP%] {\n      flex: 0 0 auto;\n      margin-left: auto;\n      display: flex;\n      align-items: center;\n    }\n    .sb-item-status-dot[_ngcontent-%COMP%] {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--prism-warn);\n    }\n\n    .sb-item--deprecated[_ngcontent-%COMP%]   .sb-item-name[_ngcontent-%COMP%] {\n      text-decoration: line-through;\n      text-decoration-thickness: 1px;\n      color: var(--prism-text-ghost);\n      opacity: 0.7;\n    }\n\n\n    [_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 2px;\n    }"] });
+        } }, dependencies: [PrismIconComponent], styles: [".prism-sidebar[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      min-height: 0;\n      overflow: hidden;\n    }\n\n    .sb-filter[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin: 12px;\n      padding: 0 10px;\n      height: 30px;\n      background: var(--%NS%prism-input-bg);\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: 6px;\n      color: var(--%NS%prism-text-muted);\n    }\n    .sb-filter[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      background: transparent;\n      border: 0;\n      outline: none;\n      font-size: var(--%NS%fs-md);\n      color: var(--%NS%prism-text);\n      font-family: var(--%NS%font-sans);\n    }\n    .sb-filter[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder { color: var(--%NS%prism-text-muted); }\n    .sb-filter[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: 10px;\n      color: var(--%NS%prism-text-ghost);\n      padding: 1px 5px;\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: 3px;\n    }\n\n    .sb-scroll[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow-y: auto;\n      padding: 10px 0 16px;\n      padding-top: 0;\n    }\n    .sb-scroll[_ngcontent-%COMP%]::-webkit-scrollbar { width: 8px; }\n    .sb-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-thumb { background: var(--%NS%prism-border-strong); border-radius: 4px; }\n    .sb-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-track { background: transparent; }\n\n    .sb-pinned[_ngcontent-%COMP%] {\n      padding: 0 0 10px;\n      margin-bottom: 4px;\n      border-bottom: 1px solid var(--%NS%prism-border);\n      border-top: 1px solid var(--%NS%prism-border);\n    }\n    .sb-section-head[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 14px 6px;\n      font-size: 10.5px;\n      font-weight: 700;\n      letter-spacing: 0.09em;\n      text-transform: uppercase;\n      color: var(--%NS%prism-text-ghost);\n      margin-top: 6px;\n    }\n    .sb-section-head-l[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 6px; }\n    .sb-section-icon[_ngcontent-%COMP%] { color: var(--%NS%prism-primary); }\n    .sb-pinned-head[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 14px 6px;\n      margin-top: 6px;\n      font-size: 10.5px;\n      font-weight: 700;\n      letter-spacing: 0.09em;\n      text-transform: uppercase;\n      color: var(--%NS%prism-text-ghost);\n    }\n    .sb-pinned-head-l[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 6px; }\n    .sb-pinned-pin[_ngcontent-%COMP%] { color: var(--%NS%prism-accent); }\n\n    .sb-group[_ngcontent-%COMP%] { margin-bottom: 4px; }\n    .sb-group-head[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      padding: 8px 14px 6px;\n      font-size: 10.5px;\n      font-weight: 700;\n      letter-spacing: 0.09em;\n      text-transform: uppercase;\n      color: var(--%NS%prism-text-ghost);\n      cursor: pointer;\n      user-select: none;\n      background: none;\n      border: none;\n      text-align: left;\n      font-family: var(--%NS%font-sans);\n    }\n    .sb-group-head[_ngcontent-%COMP%]   prism-icon[_ngcontent-%COMP%] {\n      transition: transform var(--%NS%dur-fast);\n      color: var(--%NS%prism-text-ghost);\n    }\n    .sb-group--collapsed[_ngcontent-%COMP%]   .sb-group-head[_ngcontent-%COMP%]   prism-icon[_ngcontent-%COMP%] { transform: rotate(-90deg); }\n\n    .sb-group-chip[_ngcontent-%COMP%] {\n      width: 6px;\n      height: 6px;\n      border-radius: 2px;\n      background: var(--%NS%chip, var(--%NS%prism-primary));\n      box-shadow: 0 0 6px var(--%NS%chip, var(--%NS%prism-primary));\n    }\n    .sb-group-count[_ngcontent-%COMP%] {\n      margin-left: auto;\n      font-family: var(--%NS%font-mono);\n      font-size: 10px;\n      color: var(--%NS%prism-text-ghost);\n      font-weight: 500;\n    }\n\n    .sb-group-rollup[_ngcontent-%COMP%] {\n      margin-left: auto;\n      font-family: var(--%NS%font-mono);\n      font-size: 9.5px;\n      font-weight: 600;\n      letter-spacing: 0;\n      padding: 1px 5px;\n      border-radius: 8px;\n    }\n    .sb-group-rollup--warn[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-warn);\n      background: color-mix(in srgb, var(--%NS%prism-warn) 16%, transparent);\n    }\n    .sb-group-rollup--danger[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-danger);\n      background: color-mix(in srgb, var(--%NS%prism-danger) 16%, transparent);\n    }\n    .sb-group-rollup[_ngcontent-%COMP%]    + .sb-group-count[_ngcontent-%COMP%] {\n      margin-left: 6px;\n    }\n\n    .sb-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n      height: 30px;\n      padding: 0 14px 0 28px;\n      font-size: 13px;\n      color: var(--%NS%prism-text-2);\n      cursor: pointer;\n      border: none;\n      border-left: 2px solid transparent;\n      background: none;\n      position: relative;\n      transition: background var(--%NS%dur-fast), color var(--%NS%dur-fast);\n      text-align: left;\n      font-family: var(--%NS%font-sans);\n    }\n    .sb-item[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--%NS%prism-primary) 5%, transparent);\n      color: var(--%NS%prism-text);\n    }\n    .sb-item--active[_ngcontent-%COMP%] {\n      border-left-color: var(--%NS%prism-primary);\n      background: color-mix(in srgb, var(--%NS%prism-primary) 12%, transparent);\n      color: var(--%NS%prism-text);\n      font-weight: 500;\n    }\n    .sb-item--%NS%active[_ngcontent-%COMP%]::before {\n      content: '';\n      position: absolute;\n      left: -1px;\n      top: 0;\n      bottom: 0;\n      width: 3px;\n      background: linear-gradient(180deg, var(--%NS%prism-primary-from), var(--%NS%prism-primary-to));\n    }\n    .sb-item-icon[_ngcontent-%COMP%] { flex: 0 0 12px; opacity: 0.7; }\n    .sb-item-name[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .sb-item-health[_ngcontent-%COMP%] {\n      flex: 0 0 auto;\n      margin-left: auto;\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n    .sb-health--warn[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-warn);\n    }\n    .sb-health--danger[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-danger);\n    }\n\n    .sb-item--deprecated[_ngcontent-%COMP%]   .sb-item-name[_ngcontent-%COMP%] {\n      text-decoration: line-through;\n      text-decoration-thickness: 1px;\n      color: var(--%NS%prism-text-ghost);\n      opacity: 0.7;\n    }\n\n\n    [_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--%NS%prism-primary);\n      outline-offset: 2px;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismSidebarComponent, [{
         type: Component,
@@ -421,23 +478,41 @@ export class PrismSidebarComponent {
             <prism-icon name="chevron-down" [size]="10" />
             <span class="sb-group-chip" [style.--chip]="cat.color"></span>
             {{ cat.name }}
+            @if (cat.rollup.problems) {
+            <span
+              class="sb-group-rollup"
+              [class.sb-group-rollup--warn]="cat.rollup.variant === 'warn'"
+              [class.sb-group-rollup--danger]="cat.rollup.variant === 'danger'"
+              [attr.title]="rollupTooltip(cat.rollup)"
+              [attr.aria-label]="rollupTooltip(cat.rollup)"
+              >{{ cat.rollup.problems }}</span
+            >
+            }
             <span class="sb-group-count">{{ cat.items.length }}</span>
           </button>
           @if (!isCollapsed('sec:' + section.name + ':' + cat.name)) {
           <div class="sb-group-body">
-            @for (item of cat.items; track itemKey(item)) {
+            @for (row of cat.items; track itemKey(row.item)) {
             <button
               class="sb-item"
-              [class.sb-item--active]="isActive(item)"
-              [class.sb-item--deprecated]="itemStatus(item) === 'deprecated'"
-              [attr.title]="itemTooltip(item)"
-              (click)="onSelect(item)"
+              [class.sb-item--active]="isActive(row.item)"
+              [class.sb-item--deprecated]="
+                itemStatus(row.item) === 'deprecated'
+              "
+              [attr.title]="itemTooltip(row.item, row.decorations)"
+              (click)="onSelect(row.item)"
             >
-              <prism-icon name="box" [size]="12" class="sb-item-icon" />
-              <span class="sb-item-name">{{ itemLabel(item) }}</span>
-              @if (itemStatus(item) === 'wip') {
-              <span class="sb-item-status" title="Work in progress">
-                <span class="sb-item-status-dot"></span>
+              <prism-icon [name]="row.icon" [size]="12" class="sb-item-icon" />
+              <span class="sb-item-name">{{ itemLabel(row.item) }}</span>
+              @if (row.decorations) {
+              <span class="sb-item-health">
+                @for (mark of row.decorations.marks; track mark.id) {
+                <prism-icon
+                  [name]="mark.icon"
+                  [size]="11"
+                  [class]="'sb-health sb-health--' + mark.variant"
+                />
+                }
               </span>
               }
             </button>
@@ -448,9 +523,9 @@ export class PrismSidebarComponent {
         } }
       </div>
     </nav>
-  `, styles: ["\n    .prism-sidebar {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      min-height: 0;\n      overflow: hidden;\n    }\n\n    .sb-filter {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin: 12px;\n      padding: 0 10px;\n      height: 30px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: 6px;\n      color: var(--prism-text-muted);\n    }\n    .sb-filter input {\n      flex: 1;\n      min-width: 0;\n      background: transparent;\n      border: 0;\n      outline: none;\n      font-size: var(--fs-md);\n      color: var(--prism-text);\n      font-family: var(--font-sans);\n    }\n    .sb-filter input::placeholder { color: var(--prism-text-muted); }\n    .sb-filter kbd {\n      font-family: var(--font-mono);\n      font-size: 10px;\n      color: var(--prism-text-ghost);\n      padding: 1px 5px;\n      border: 1px solid var(--prism-border);\n      border-radius: 3px;\n    }\n\n    .sb-scroll {\n      flex: 1;\n      overflow-y: auto;\n      padding: 10px 0 16px;\n      padding-top: 0;\n    }\n    .sb-scroll::-webkit-scrollbar { width: 8px; }\n    .sb-scroll::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 4px; }\n    .sb-scroll::-webkit-scrollbar-track { background: transparent; }\n\n    .sb-pinned {\n      padding: 0 0 10px;\n      margin-bottom: 4px;\n      border-bottom: 1px solid var(--prism-border);\n      border-top: 1px solid var(--prism-border);\n    }\n    .sb-section-head {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 14px 6px;\n      font-size: 10.5px;\n      font-weight: 700;\n      letter-spacing: 0.09em;\n      text-transform: uppercase;\n      color: var(--prism-text-ghost);\n      margin-top: 6px;\n    }\n    .sb-section-head-l { display: flex; align-items: center; gap: 6px; }\n    .sb-section-icon { color: var(--prism-primary); }\n    .sb-pinned-head {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 14px 6px;\n      margin-top: 6px;\n      font-size: 10.5px;\n      font-weight: 700;\n      letter-spacing: 0.09em;\n      text-transform: uppercase;\n      color: var(--prism-text-ghost);\n    }\n    .sb-pinned-head-l { display: flex; align-items: center; gap: 6px; }\n    .sb-pinned-pin { color: var(--prism-accent); }\n\n    .sb-group { margin-bottom: 4px; }\n    .sb-group-head {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      padding: 8px 14px 6px;\n      font-size: 10.5px;\n      font-weight: 700;\n      letter-spacing: 0.09em;\n      text-transform: uppercase;\n      color: var(--prism-text-ghost);\n      cursor: pointer;\n      user-select: none;\n      background: none;\n      border: none;\n      text-align: left;\n      font-family: var(--font-sans);\n    }\n    .sb-group-head prism-icon {\n      transition: transform var(--dur-fast);\n      color: var(--prism-text-ghost);\n    }\n    .sb-group--collapsed .sb-group-head prism-icon { transform: rotate(-90deg); }\n\n    .sb-group-chip {\n      width: 6px;\n      height: 6px;\n      border-radius: 2px;\n      background: var(--chip, var(--prism-primary));\n      box-shadow: 0 0 6px var(--chip, var(--prism-primary));\n    }\n    .sb-group-count {\n      margin-left: auto;\n      font-family: var(--font-mono);\n      font-size: 10px;\n      color: var(--prism-text-ghost);\n      font-weight: 500;\n    }\n\n    .sb-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n      height: 30px;\n      padding: 0 14px 0 28px;\n      font-size: 13px;\n      color: var(--prism-text-2);\n      cursor: pointer;\n      border: none;\n      border-left: 2px solid transparent;\n      background: none;\n      position: relative;\n      transition: background var(--dur-fast), color var(--dur-fast);\n      text-align: left;\n      font-family: var(--font-sans);\n    }\n    .sb-item:hover {\n      background: color-mix(in srgb, var(--prism-primary) 5%, transparent);\n      color: var(--prism-text);\n    }\n    .sb-item--active {\n      border-left-color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      color: var(--prism-text);\n      font-weight: 500;\n    }\n    .sb-item--active::before {\n      content: '';\n      position: absolute;\n      left: -1px;\n      top: 0;\n      bottom: 0;\n      width: 3px;\n      background: linear-gradient(180deg, var(--prism-primary-from), var(--prism-primary-to));\n    }\n    .sb-item-icon { flex: 0 0 12px; opacity: 0.7; }\n    .sb-item-name {\n      flex: 1;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .sb-item-status {\n      flex: 0 0 auto;\n      margin-left: auto;\n      display: flex;\n      align-items: center;\n    }\n    .sb-item-status-dot {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--prism-warn);\n    }\n\n    .sb-item--deprecated .sb-item-name {\n      text-decoration: line-through;\n      text-decoration-thickness: 1px;\n      color: var(--prism-text-ghost);\n      opacity: 0.7;\n    }\n\n\n    :focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 2px;\n    }\n  "] }]
+  `, styles: ["\n    .prism-sidebar {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      min-height: 0;\n      overflow: hidden;\n    }\n\n    .sb-filter {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin: 12px;\n      padding: 0 10px;\n      height: 30px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: 6px;\n      color: var(--prism-text-muted);\n    }\n    .sb-filter input {\n      flex: 1;\n      min-width: 0;\n      background: transparent;\n      border: 0;\n      outline: none;\n      font-size: var(--fs-md);\n      color: var(--prism-text);\n      font-family: var(--font-sans);\n    }\n    .sb-filter input::placeholder { color: var(--prism-text-muted); }\n    .sb-filter kbd {\n      font-family: var(--font-mono);\n      font-size: 10px;\n      color: var(--prism-text-ghost);\n      padding: 1px 5px;\n      border: 1px solid var(--prism-border);\n      border-radius: 3px;\n    }\n\n    .sb-scroll {\n      flex: 1;\n      overflow-y: auto;\n      padding: 10px 0 16px;\n      padding-top: 0;\n    }\n    .sb-scroll::-webkit-scrollbar { width: 8px; }\n    .sb-scroll::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 4px; }\n    .sb-scroll::-webkit-scrollbar-track { background: transparent; }\n\n    .sb-pinned {\n      padding: 0 0 10px;\n      margin-bottom: 4px;\n      border-bottom: 1px solid var(--prism-border);\n      border-top: 1px solid var(--prism-border);\n    }\n    .sb-section-head {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 14px 6px;\n      font-size: 10.5px;\n      font-weight: 700;\n      letter-spacing: 0.09em;\n      text-transform: uppercase;\n      color: var(--prism-text-ghost);\n      margin-top: 6px;\n    }\n    .sb-section-head-l { display: flex; align-items: center; gap: 6px; }\n    .sb-section-icon { color: var(--prism-primary); }\n    .sb-pinned-head {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 14px 6px;\n      margin-top: 6px;\n      font-size: 10.5px;\n      font-weight: 700;\n      letter-spacing: 0.09em;\n      text-transform: uppercase;\n      color: var(--prism-text-ghost);\n    }\n    .sb-pinned-head-l { display: flex; align-items: center; gap: 6px; }\n    .sb-pinned-pin { color: var(--prism-accent); }\n\n    .sb-group { margin-bottom: 4px; }\n    .sb-group-head {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      padding: 8px 14px 6px;\n      font-size: 10.5px;\n      font-weight: 700;\n      letter-spacing: 0.09em;\n      text-transform: uppercase;\n      color: var(--prism-text-ghost);\n      cursor: pointer;\n      user-select: none;\n      background: none;\n      border: none;\n      text-align: left;\n      font-family: var(--font-sans);\n    }\n    .sb-group-head prism-icon {\n      transition: transform var(--dur-fast);\n      color: var(--prism-text-ghost);\n    }\n    .sb-group--collapsed .sb-group-head prism-icon { transform: rotate(-90deg); }\n\n    .sb-group-chip {\n      width: 6px;\n      height: 6px;\n      border-radius: 2px;\n      background: var(--chip, var(--prism-primary));\n      box-shadow: 0 0 6px var(--chip, var(--prism-primary));\n    }\n    .sb-group-count {\n      margin-left: auto;\n      font-family: var(--font-mono);\n      font-size: 10px;\n      color: var(--prism-text-ghost);\n      font-weight: 500;\n    }\n\n    .sb-group-rollup {\n      margin-left: auto;\n      font-family: var(--font-mono);\n      font-size: 9.5px;\n      font-weight: 600;\n      letter-spacing: 0;\n      padding: 1px 5px;\n      border-radius: 8px;\n    }\n    .sb-group-rollup--warn {\n      color: var(--prism-warn);\n      background: color-mix(in srgb, var(--prism-warn) 16%, transparent);\n    }\n    .sb-group-rollup--danger {\n      color: var(--prism-danger);\n      background: color-mix(in srgb, var(--prism-danger) 16%, transparent);\n    }\n    .sb-group-rollup + .sb-group-count {\n      margin-left: 6px;\n    }\n\n    .sb-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n      height: 30px;\n      padding: 0 14px 0 28px;\n      font-size: 13px;\n      color: var(--prism-text-2);\n      cursor: pointer;\n      border: none;\n      border-left: 2px solid transparent;\n      background: none;\n      position: relative;\n      transition: background var(--dur-fast), color var(--dur-fast);\n      text-align: left;\n      font-family: var(--font-sans);\n    }\n    .sb-item:hover {\n      background: color-mix(in srgb, var(--prism-primary) 5%, transparent);\n      color: var(--prism-text);\n    }\n    .sb-item--active {\n      border-left-color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      color: var(--prism-text);\n      font-weight: 500;\n    }\n    .sb-item--active::before {\n      content: '';\n      position: absolute;\n      left: -1px;\n      top: 0;\n      bottom: 0;\n      width: 3px;\n      background: linear-gradient(180deg, var(--prism-primary-from), var(--prism-primary-to));\n    }\n    .sb-item-icon { flex: 0 0 12px; opacity: 0.7; }\n    .sb-item-name {\n      flex: 1;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .sb-item-health {\n      flex: 0 0 auto;\n      margin-left: auto;\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n    .sb-health--warn {\n      color: var(--prism-warn);\n    }\n    .sb-health--danger {\n      color: var(--prism-danger);\n    }\n\n    .sb-item--deprecated .sb-item-name {\n      text-decoration: line-through;\n      text-decoration-thickness: 1px;\n      color: var(--prism-text-ghost);\n      opacity: 0.7;\n    }\n\n\n    :focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 2px;\n    }\n  "] }]
     }], null, { filterInput: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }], onGlobalKey: [{
             type: HostListener,
             args: ['document:keydown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismSidebarComponent, { className: "PrismSidebarComponent", filePath: "app/sidebar/prism-sidebar.component.ts", lineNumber: 368 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismSidebarComponent, { className: "PrismSidebarComponent", filePath: "app/sidebar/prism-sidebar.component.ts", lineNumber: 431 }); })();

package/dist/app/variant-ribbon/prism-variant-ribbon.component.js

@@ -17,7 +17,7 @@ function PrismVariantRibbonComponent_Conditional_0_For_4_Template(rf, ctx) { if
     const v_r5 = ctx.$implicit;
     const ɵ$index_6_r3 = ctx.$index;
     const ctx_r3 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleProp("--vc", ctx_r3.variantColor(v_r5.name, ɵ$index_6_r3));
+    i0.ɵɵstyleProp("--%NS%vc", ctx_r3.variantColor(v_r5.name, ɵ$index_6_r3));
     i0.ɵɵclassProp("v-tab--active", ctx_r3.rendererService.activeVariantIndex() === ɵ$index_6_r3);
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", v_r5.name, " ");
@@ -110,11 +110,11 @@ export class PrismVariantRibbonComponent {
             i0.ɵɵviewQuerySignal(ctx.tabsContainer, _c0, 5)(ctx.tabButtons, _c1, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance(2);
-        } }, decls: 1, vars: 1, consts: [["tabsContainer", ""], ["tabButton", ""], [1, "variant-ribbon"], [1, "variant-ribbon-tabs"], [1, "v-tab", 3, "v-tab--active", "--vc"], [1, "variant-ribbon-right"], ["title", "Previous variant", "aria-label", "Previous variant", 1, "tool-btn", 3, "click", "disabled"], ["name", "chevron-right", 2, "transform", "rotate(180deg)", 3, "size"], ["title", "Next variant", "aria-label", "Next variant", 1, "tool-btn", 3, "click", "disabled"], ["name", "chevron-right", 3, "size"], [1, "v-tab", 3, "click"], [1, "v-dot"]], template: function PrismVariantRibbonComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, decls: 1, vars: 1, consts: [["tabsContainer", ""], ["tabButton", ""], [1, "variant-ribbon"], [1, "variant-ribbon-tabs"], [1, "v-tab", 3, "v-tab--active", "--%NS%vc"], [1, "variant-ribbon-right"], ["title", "Previous variant", "aria-label", "Previous variant", 1, "tool-btn", 3, "click", "disabled"], ["name", "chevron-right", 2, "transform", "rotate(180deg)", 3, "size"], ["title", "Next variant", "aria-label", "Next variant", 1, "tool-btn", 3, "click", "disabled"], ["name", "chevron-right", 3, "size"], [1, "v-tab", 3, "click"], [1, "v-dot"]], template: function PrismVariantRibbonComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, PrismVariantRibbonComponent_Conditional_0_Template, 10, 4, "nav", 2);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.variants().length > 0 ? 0 : -1);
-        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] { display: block; flex-shrink: 0; }\n\n    .variant-ribbon[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      padding: 0 28px;\n      background: var(--prism-bg);\n      border-bottom: 1px solid var(--prism-border);\n      height: 42px;\n    }\n\n    .variant-ribbon-tabs[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      align-items: center;\n      gap: 2px;\n      height: 100%;\n      overflow-x: auto;\n      scrollbar-width: none;\n    }\n    .variant-ribbon-tabs[_ngcontent-%COMP%]::-webkit-scrollbar { display: none; }\n\n    .v-tab[_ngcontent-%COMP%] {\n      position: relative;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 0 14px;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--prism-text-muted);\n      white-space: nowrap;\n      transition: color var(--dur-fast);\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--font-sans);\n    }\n    .v-tab[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      left: 10px;\n      right: 10px;\n      bottom: 0;\n      height: 2px;\n      background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n      opacity: 0;\n      transition: opacity var(--dur-fast);\n      border-radius: 1px 1px 0 0;\n    }\n    .v-tab[_ngcontent-%COMP%]:hover { color: var(--prism-text-2); }\n    .v-tab--active[_ngcontent-%COMP%] { color: var(--prism-text); }\n    .v-tab--active[_ngcontent-%COMP%]::after { opacity: 1; }\n\n    .v-dot[_ngcontent-%COMP%] {\n      width: 6px;\n      height: 6px;\n      border-radius: 2px;\n      background: var(--vc, var(--prism-primary));\n      opacity: 0.6;\n    }\n    .v-tab--active[_ngcontent-%COMP%]   .v-dot[_ngcontent-%COMP%] {\n      opacity: 1;\n      box-shadow: 0 0 6px var(--vc);\n    }\n\n    .variant-ribbon-right[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding-left: 12px;\n      margin-left: 12px;\n      border-left: 1px solid var(--prism-border);\n      height: 24px;\n    }\n\n    .tool-btn[_ngcontent-%COMP%] {\n      height: 24px;\n      width: 24px;\n      display: grid;\n      place-items: center;\n      border-radius: var(--radius-sm);\n      color: var(--prism-text-muted);\n      background: none;\n      border: none;\n      cursor: pointer;\n      transition: all var(--dur-fast);\n    }\n    .tool-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n      color: var(--prism-text);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    }\n    .tool-btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.3;\n      cursor: default;\n    }\n\n    [_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 2px;\n    }"] });
+        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] { display: block; flex-shrink: 0; }\n\n    .variant-ribbon[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      padding: 0 28px;\n      background: var(--%NS%prism-bg);\n      border-bottom: 1px solid var(--%NS%prism-border);\n      height: 42px;\n    }\n\n    .variant-ribbon-tabs[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      align-items: center;\n      gap: 2px;\n      height: 100%;\n      overflow-x: auto;\n      scrollbar-width: none;\n    }\n    .variant-ribbon-tabs[_ngcontent-%COMP%]::-webkit-scrollbar { display: none; }\n\n    .v-tab[_ngcontent-%COMP%] {\n      position: relative;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 0 14px;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--%NS%prism-text-muted);\n      white-space: nowrap;\n      transition: color var(--%NS%dur-fast);\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--%NS%font-sans);\n    }\n    .v-tab[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      left: 10px;\n      right: 10px;\n      bottom: 0;\n      height: 2px;\n      background: linear-gradient(90deg, var(--%NS%prism-primary-from), var(--%NS%prism-primary-to));\n      opacity: 0;\n      transition: opacity var(--%NS%dur-fast);\n      border-radius: 1px 1px 0 0;\n    }\n    .v-tab[_ngcontent-%COMP%]:hover { color: var(--%NS%prism-text-2); }\n    .v-tab--active[_ngcontent-%COMP%] { color: var(--%NS%prism-text); }\n    .v-tab--%NS%active[_ngcontent-%COMP%]::after { opacity: 1; }\n\n    .v-dot[_ngcontent-%COMP%] {\n      width: 6px;\n      height: 6px;\n      border-radius: 2px;\n      background: var(--%NS%vc, var(--%NS%prism-primary));\n      opacity: 0.6;\n    }\n    .v-tab--active[_ngcontent-%COMP%]   .v-dot[_ngcontent-%COMP%] {\n      opacity: 1;\n      box-shadow: 0 0 6px var(--%NS%vc);\n    }\n\n    .variant-ribbon-right[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding-left: 12px;\n      margin-left: 12px;\n      border-left: 1px solid var(--%NS%prism-border);\n      height: 24px;\n    }\n\n    .tool-btn[_ngcontent-%COMP%] {\n      height: 24px;\n      width: 24px;\n      display: grid;\n      place-items: center;\n      border-radius: var(--%NS%radius-sm);\n      color: var(--%NS%prism-text-muted);\n      background: none;\n      border: none;\n      cursor: pointer;\n      transition: all var(--%NS%dur-fast);\n    }\n    .tool-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n      color: var(--%NS%prism-text);\n      background: color-mix(in srgb, var(--%NS%prism-primary) 8%, transparent);\n    }\n    .tool-btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.3;\n      cursor: default;\n    }\n\n    [_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--%NS%prism-primary);\n      outline-offset: 2px;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismVariantRibbonComponent, [{
         type: Component,

package/dist/app/view-tab-bar/prism-view-panel-host.component.js

@@ -79,7 +79,7 @@ export class PrismViewPanelHostComponent {
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.resolvedComponent() ? 1 : -1);
-        } }, dependencies: [NgComponentOutlet], styles: [".prism-view-panel-host[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      overflow: auto;\n      background: var(--prism-bg-elevated);\n    }"] });
+        } }, dependencies: [NgComponentOutlet], styles: [".prism-view-panel-host[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      overflow: auto;\n      background: var(--%NS%prism-bg-elevated);\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismViewPanelHostComponent, [{
         type: Component,

package/dist/app/view-tab-bar/prism-view-tab-bar.component.js

@@ -38,7 +38,7 @@ export class PrismViewTabBarComponent {
             i0.ɵɵclassProp("prism-view-tab-bar__tab--active", ctx.panelService.activeViewId() === "renderer");
             i0.ɵɵadvance(2);
             i0.ɵɵrepeater(ctx.viewPanels());
-        } }, styles: [".prism-view-tab-bar[_ngcontent-%COMP%] {\n      display: flex;\n      border-bottom: 1px solid var(--prism-border);\n      padding: 0 8px;\n      flex-shrink: 0;\n      background: var(--prism-bg-elevated);\n    }\n\n    .prism-view-tab-bar__tab[_ngcontent-%COMP%] {\n      padding: 9px 14px;\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      border: none;\n      background: none;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      position: relative;\n      margin-bottom: -1px;\n      transition: color 0.12s;\n    }\n\n    .prism-view-tab-bar__tab[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 8px;\n      right: 8px;\n      height: 2px;\n      background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n      opacity: 0;\n      transition: opacity 0.12s;\n    }\n\n    .prism-view-tab-bar__tab[_ngcontent-%COMP%]:hover { color: var(--prism-text-2); }\n\n    .prism-view-tab-bar__tab--active[_ngcontent-%COMP%] { color: var(--prism-primary); font-weight: 500; }\n\n    .prism-view-tab-bar__tab--active[_ngcontent-%COMP%]::after { opacity: 1; }"] });
+        } }, styles: [".prism-view-tab-bar[_ngcontent-%COMP%] {\n      display: flex;\n      border-bottom: 1px solid var(--%NS%prism-border);\n      padding: 0 8px;\n      flex-shrink: 0;\n      background: var(--%NS%prism-bg-elevated);\n    }\n\n    .prism-view-tab-bar__tab[_ngcontent-%COMP%] {\n      padding: 9px 14px;\n      font-size: 13px;\n      font-family: var(--%NS%prism-font-sans);\n      border: none;\n      background: none;\n      color: var(--%NS%prism-text-muted);\n      cursor: pointer;\n      position: relative;\n      margin-bottom: -1px;\n      transition: color 0.12s;\n    }\n\n    .prism-view-tab-bar__tab[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 8px;\n      right: 8px;\n      height: 2px;\n      background: linear-gradient(90deg, var(--%NS%prism-primary-from), var(--%NS%prism-primary-to));\n      opacity: 0;\n      transition: opacity 0.12s;\n    }\n\n    .prism-view-tab-bar__tab[_ngcontent-%COMP%]:hover { color: var(--%NS%prism-text-2); }\n\n    .prism-view-tab-bar__tab--active[_ngcontent-%COMP%] { color: var(--%NS%prism-primary); font-weight: 500; }\n\n    .prism-view-tab-bar__tab--%NS%active[_ngcontent-%COMP%]::after { opacity: 1; }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismViewTabBarComponent, [{
         type: Component,

package/dist/builder/a11y/a11y-report-reader.d.ts

@@ -1,7 +1,21 @@
-import type { A11yManifestMeta, A11yReport, A11yThresholds } from '../../app/panels/a11y/a11y.types.js';
+import type { A11yComponentMeta, A11yManifestMeta, A11yReport, A11yThresholds } from '../../app/panels/a11y/a11y.types.js';
+import { deriveA11ySummary } from '../../app/panels/a11y/a11y-summary.js';
+export { deriveA11ySummary };
 export declare const DEFAULT_A11Y_REPORT_PATH = "a11y-report.json";
 export declare function loadA11yReport(reportPath: string): A11yReport | null;
 export declare function readA11yMeta(reportPath: string, thresholdsInput?: Partial<A11yThresholds>): A11yManifestMeta | null;
+/**
+ * Every component's entry, from a single read of the report.
+ *
+ * The plural form exists because {@link readA11yForComponent} re-enters
+ * {@link loadA11yReport}, which `statSync`s the file even on a cache hit.
+ * Calling it once per scanned component turns a 300-component library into 300
+ * redundant syscalls per build, and a watch-mode rebuild repeats them all — so
+ * the pipeline reads the report once and looks components up in the result.
+ */
+export declare function readA11yForComponents(reportPath: string, thresholds: A11yThresholds): Map<string, A11yComponentMeta>;
+/** The per-component entry of the report, or null when there is none. */
+export declare function readA11yForComponent(reportPath: string, className: string, thresholds: A11yThresholds): A11yComponentMeta | null;
 export interface ThresholdViolation {
     metric: 'score' | 'critical' | 'serious' | 'moderate';
     actual: number;

package/dist/builder/a11y/a11y-report-reader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y-report-reader.d.ts","sourceRoot":"","sources":["../../../src/builder/a11y/a11y-report-reader.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,gBAAgB,EAChB,UAAU,EACV,cAAc,EACf,MAAM,qCAAqC,CAAC;AAG7C,eAAO,MAAM,wBAAwB,qBAAqB,CAAC;AAI3D,wBAAgB,cAAc,CAAC,UAAU,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI,CAapE;AAED,wBAAgB,YAAY,CAC1B,UAAU,EAAE,MAAM,EAClB,eAAe,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GACxC,gBAAgB,GAAG,IAAI,CAQzB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;IACtD,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,gBAAgB,GACrB,kBAAkB,EAAE,CAkCtB;AAED,wBAAgB,oBAAoB,IAAI,IAAI,CAE3C"}
+{"version":3,"file":"a11y-report-reader.d.ts","sourceRoot":"","sources":["../../../src/builder/a11y/a11y-report-reader.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EACjB,gBAAgB,EAChB,UAAU,EACV,cAAc,EACf,MAAM,qCAAqC,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAK1E,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,eAAO,MAAM,wBAAwB,qBAAqB,CAAC;AAI3D,wBAAgB,cAAc,CAAC,UAAU,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI,CAapE;AAED,wBAAgB,YAAY,CAC1B,UAAU,EAAE,MAAM,EAClB,eAAe,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GACxC,gBAAgB,GAAG,IAAI,CAQzB;AAED;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CACnC,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,cAAc,GACzB,GAAG,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAchC;AAED,yEAAyE;AACzE,wBAAgB,oBAAoB,CAClC,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,cAAc,GACzB,iBAAiB,GAAG,IAAI,CAK1B;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;IACtD,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,gBAAgB,GACrB,kBAAkB,EAAE,CAkCtB;AAED,wBAAgB,oBAAoB,IAAI,IAAI,CAE3C"}

package/dist/builder/a11y/a11y-report-reader.js

@@ -1,5 +1,10 @@
 import { readFileSync, statSync } from 'node:fs';
 import { resolveA11yThresholds } from '../../app/panels/a11y/a11y-thresholds.js';
+import { deriveA11ySummary } from '../../app/panels/a11y/a11y-summary.js';
+// Re-exported so the builder side keeps one import surface for the a11y
+// report. The derivation itself lives in `app/` because the panel tab grades
+// the live audit with it and cannot reach into `builder/`.
+export { deriveA11ySummary };
 export const DEFAULT_A11Y_REPORT_PATH = 'a11y-report.json';
 const cache = new Map();
 export function loadA11yReport(reportPath) {
@@ -26,6 +31,38 @@ export function readA11yMeta(reportPath, thresholdsInput) {
         thresholds: resolveA11yThresholds(thresholdsInput),
     };
 }
+/**
+ * Every component's entry, from a single read of the report.
+ *
+ * The plural form exists because {@link readA11yForComponent} re-enters
+ * {@link loadA11yReport}, which `statSync`s the file even on a cache hit.
+ * Calling it once per scanned component turns a 300-component library into 300
+ * redundant syscalls per build, and a watch-mode rebuild repeats them all — so
+ * the pipeline reads the report once and looks components up in the result.
+ */
+export function readA11yForComponents(reportPath, thresholds) {
+    const components = loadA11yReport(reportPath)?.components;
+    const byClassName = new Map();
+    if (!components)
+        return byClassName;
+    for (const [className, score] of Object.entries(components)) {
+        if (!score)
+            continue;
+        byClassName.set(className, {
+            found: true,
+            score,
+            summary: deriveA11ySummary(score, thresholds),
+        });
+    }
+    return byClassName;
+}
+/** The per-component entry of the report, or null when there is none. */
+export function readA11yForComponent(reportPath, className, thresholds) {
+    const score = loadA11yReport(reportPath)?.components?.[className];
+    if (!score)
+        return null;
+    return { found: true, score, summary: deriveA11ySummary(score, thresholds) };
+}
 export function checkA11yThresholds(meta) {
     const violations = [];
     const t = meta.thresholds;

package/dist/builder/scanner/component.scanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.scanner.d.ts","sourceRoot":"","sources":["../../../src/builder/scanner/component.scanner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAwCrE;;GAEG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,EAAE,CAAC,MAAM,EAAE,EACpB,OAAO,EAAE,EAAE,CAAC,WAAW,GACtB,gBAAgB,EAAE,CA8CpB"}
+{"version":3,"file":"component.scanner.d.ts","sourceRoot":"","sources":["../../../src/builder/scanner/component.scanner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAmErE;;GAEG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,EAAE,CAAC,MAAM,EAAE,EACpB,OAAO,EAAE,EAAE,CAAC,WAAW,GACtB,gBAAgB,EAAE,CA8CpB"}

package/dist/builder/scanner/component.scanner.js

@@ -8,6 +8,29 @@ function isComponentStatus(value) {
 }
 import { evaluateExpression, findDecorator, getDecoratorArgument, } from './ast-utils.js';
 import { extractInputs, extractOutputs } from './input.extractor.js';
+/**
+ * Backgrounds that still work but should not be reached for any more.
+ *
+ * `checker` draws the same checkerboard as `transparent` while browsing, so
+ * the canvas cannot tell them apart — but it captures as `--prism-bg-surface`,
+ * a *theme* token, which makes a baseline recorded on it depend on the theme
+ * the runner's browser started in. Since `transparent` took over as the
+ * default, it is the value that looks like transparency and is not.
+ *
+ * Warned rather than rejected: the value is valid, and dropping it would
+ * change what a component renders on — a break wearing a warning's clothes.
+ * Scheduled for removal in 23.0.0, the next Angular-aligned major.
+ */
+const DEPRECATED_BGS = {
+    checker: "use 'transparent' for the same look with a capture that keeps its alpha, or 'light'/'dark' for an absolute colour",
+};
+function warnDeprecatedBg(bg, where) {
+    const advice = DEPRECATED_BGS[bg];
+    if (!advice)
+        return;
+    console.warn(`⚠ ng-prism: ${where} declares bg "${bg}", which is deprecated and will ` +
+        `be removed in 23.0.0 — ${advice}.`);
+}
 function isCanvasBg(value) {
     return (typeof value === 'string' &&
         CANVAS_BGS.includes(value));
@@ -110,10 +133,10 @@ function extractShowcaseConfig(decorator, className) {
     if (obj['bg'] !== undefined) {
         if (isCanvasBg(obj['bg'])) {
             config.bg = obj['bg'];
+            warnDeprecatedBg(obj['bg'], className);
         }
         else {
-            console.warn(`⚠ ng-prism: ${className} declares invalid bg "${String(obj['bg'])}" — ` +
-                `expected one of: dots, plain, light, dark, checker. Skipping.`);
+            console.warn(`⚠ ng-prism: ${className} declares invalid bg "${String(obj['bg'])}" — ` + `expected one of: ${CANVAS_BGS.join(', ')}. Skipping.`);
         }
     }
     if (obj['canvasLayout'] !== undefined) {
@@ -127,9 +150,13 @@ function extractShowcaseConfig(decorator, className) {
     if (Array.isArray(obj['variants'])) {
         config.variants = obj['variants'].map((variant) => {
             const cleaned = { ...variant };
+            if (isCanvasBg(variant['bg'])) {
+                warnDeprecatedBg(variant['bg'], `${className} variant "${String(variant['name'])}"`);
+            }
             if (variant['bg'] !== undefined && !isCanvasBg(variant['bg'])) {
                 console.warn(`⚠ ng-prism: ${className} variant "${String(variant['name'])}" declares ` +
-                    `invalid bg "${String(variant['bg'])}" — expected one of: dots, plain, light, dark, checker. Skipping.`);
+                    `invalid bg "${String(variant['bg'])}" — expected one of: ` +
+                    `${CANVAS_BGS.join(', ')}. Skipping.`);
                 delete cleaned['bg'];
             }
             if (variant['canvasLayout'] !== undefined &&

package/dist/builder/shared/prism-pipeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-pipeline.d.ts","sourceRoot":"","sources":["../../../src/builder/shared/prism-pipeline.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAGhE,OAAO,EAAiB,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAYpE,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,mGAAmG;IACnG,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,oGAAoG;IACpG,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,mBAAmB,IAAI,kBAAkB,CAExD;AAED,wBAAsB,gBAAgB,CACpC,OAAO,EAAE,oBAAoB,EAC7B,OAAO,EAAE,cAAc,EACvB,KAAK,EAAE,kBAAkB,GACxB,OAAO,CAAC,mBAAmB,CAAC,CAyE9B"}
+{"version":3,"file":"prism-pipeline.d.ts","sourceRoot":"","sources":["../../../src/builder/shared/prism-pipeline.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAGhE,OAAO,EAAiB,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAapE,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,mGAAmG;IACnG,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,oGAAoG;IACpG,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,mBAAmB,IAAI,kBAAkB,CAExD;AAED,wBAAsB,gBAAgB,CACpC,OAAO,EAAE,oBAAoB,EAC7B,OAAO,EAAE,cAAc,EACvB,KAAK,EAAE,kBAAkB,GACxB,OAAO,CAAC,mBAAmB,CAAC,CAyF9B"}