@ng-prism/core 22.2.0-beta.4 → 22.2.0

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

@@ -1,12 +1,19 @@
 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 _c1 = () => [];
 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);
@@ -47,9 +54,7 @@ function PrismSidebarComponent_Conditional_8_For_8_Template(rf, ctx) { if (rf &
     i0.ɵɵattribute("aria-expanded", !ctx_r2.isCollapsed("page:" + cat_r2.name));
     i0.ɵɵadvance();
     i0.ɵɵproperty("size", 10);
-    i0.ɵɵadvance();
-    i0.ɵɵstyleProp("--chip", cat_r2.color);
-    i0.ɵɵadvance();
+    i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", cat_r2.name, " ");
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r2.isCollapsed("page:" + cat_r2.name) ? 5 : -1);
@@ -62,7 +67,7 @@ function PrismSidebarComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(5, "span");
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵrepeaterCreate(7, PrismSidebarComponent_Conditional_8_For_8_Template, 6, 8, "div", 10, _forTrack0);
+    i0.ɵɵrepeaterCreate(7, PrismSidebarComponent_Conditional_8_For_8_Template, 6, 6, "div", 10, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -73,36 +78,51 @@ 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);
-    i0.ɵɵelementEnd();
+function PrismSidebarComponent_For_10_For_7_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const cat_r7 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵtextInterpolate2(" ", cat_r7.rollup.problems, "/", cat_r7.items.length, " ");
+} }
+function PrismSidebarComponent_For_10_For_7_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const cat_r7 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵtextInterpolate1(" ", cat_r7.items.length, " ");
 } }
-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_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-icon", 27);
+} 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_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.ɵɵ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", 24);
     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.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 25);
+    i0.ɵɵrepeaterCreate(5, PrismSidebarComponent_For_10_For_7_Conditional_8_For_2_For_6_Template, 1, 4, "prism-icon", 26, _forTrack3);
+    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.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.itemStatus(item_r10) === "wip" ? 4 : -1);
+    i0.ɵɵtextInterpolate(ctx_r2.itemLabel(row_r10.item));
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(row_r10.decorations?.marks ?? i0.ɵɵpureFunction0(8, _c1));
 } }
-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, 7, 9, "button", 23, _forTrack2, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const cat_r7 = i0.ɵɵnextContext().$implicit;
@@ -116,9 +136,9 @@ function PrismSidebarComponent_For_10_For_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(2, "prism-icon", 13)(3, "span", 14);
     i0.ɵɵtext(4);
     i0.ɵɵelementStart(5, "span", 22);
-    i0.ɵɵtext(6);
+    i0.ɵɵconditionalCreate(6, PrismSidebarComponent_For_10_For_7_Conditional_6_Template, 1, 2)(7, PrismSidebarComponent_For_10_For_7_Conditional_7_Template, 1, 1);
     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;
@@ -129,14 +149,15 @@ function PrismSidebarComponent_For_10_For_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵattribute("aria-expanded", !ctx_r2.isCollapsed("sec:" + section_r8.name + ":" + cat_r7.name));
     i0.ɵɵadvance();
     i0.ɵɵproperty("size", 10);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", cat_r7.name, " ");
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("--chip", cat_r7.color);
+    i0.ɵɵclassProp("sb-group-count--warn", cat_r7.rollup.variant === "warn")("sb-group-count--danger", cat_r7.rollup.variant === "danger");
+    i0.ɵɵattribute("title", cat_r7.rollup.problems ? ctx_r2.rollupTooltip(cat_r7.rollup) : null)("aria-label", cat_r7.rollup.problems ? ctx_r2.rollupTooltip(cat_r7.rollup) : null);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", cat_r7.name, " ");
+    i0.ɵɵconditional(cat_r7.rollup.problems ? 6 : 7);
     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 +167,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, 13, "div", 10, _forTrack0);
 } if (rf & 2) {
     const section_r8 = ctx.$implicit;
     i0.ɵɵadvance(2);
@@ -159,15 +180,6 @@ function PrismSidebarComponent_For_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵrepeater(section_r8.categories);
 } }
 const STORAGE_KEY = 'ng-prism-sidebar-collapsed';
-const CATEGORY_COLORS = {
-    'Data Display': '#f472b6',
-    Feedback: '#fbbf24',
-    Inputs: '#a78bfa',
-    Layout: '#34d399',
-    Navigation: '#60a5fa',
-    Overlay: '#c084fc',
-    Directives: '#ec4899',
-};
 const SECTION_ICONS = {
     Components: 'box',
     Directives: 'zap',
@@ -176,20 +188,14 @@ const DEFAULT_SECTION_ICON = 'box-select';
 function sectionIcon(name) {
     return SECTION_ICONS[name] ?? DEFAULT_SECTION_ICON;
 }
-function categoryColor(name) {
-    if (CATEGORY_COLORS[name])
-        return CATEGORY_COLORS[name];
-    let hash = 0;
-    for (let i = 0; i < name.length; i++)
-        hash = ((hash << 5) - hash + name.charCodeAt(i)) | 0;
-    const hue = Math.abs(hash) % 360;
-    return `hsl(${hue}, 70%, 65%)`;
-}
 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;
@@ -218,22 +224,28 @@ export class PrismSidebarComponent {
         }
         return [...catMap.entries()].map(([name, items]) => ({
             name,
-            color: categoryColor(name),
             items,
         }));
     }, /* @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,
+                    rollup: rollupCategory(items.map((row) => row.decorations)),
+                    items,
+                };
+            }),
         }));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "componentSections" }] : /* istanbul ignore next */ []));
@@ -266,13 +278,33 @@ export class PrismSidebarComponent {
             ? item.data.meta.showcaseConfig.status
             : undefined;
     }
-    itemTooltip(item) {
+    /**
+     * Accessible name for the roll-up pill, for the deviating case only. 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.
+     *
+     * There is deliberately no zero branch: a clean category renders its plain
+     * item count and the template leaves both attributes off, because
+     * `aria-label` on a descendant feeds the group button's name-from-content
+     * and "Buttons 0 components need review" is a claim about a group that has
+     * nothing to review.
+     */
+    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 +345,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-count"], [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 +367,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%prism-text-ghost);\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    .sb-group-count--warn[_ngcontent-%COMP%] { color: var(--%NS%prism-mark-attention); }\n    .sb-group-count--danger[_ngcontent-%COMP%] { color: var(--%NS%prism-mark-critical); }\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      background: none;\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      background: color-mix(in srgb, var(--%NS%prism-primary) 12%, transparent);\n      font-weight: 500;\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    \n\n\n\n\n\n\n    .sb-item-health[_ngcontent-%COMP%] {\n      width: 40px;\n      flex: none;\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      gap: var(--%NS%sp-1);\n      overflow: hidden;\n    }\n\n    \n\n\n\n\n    .sb-health[_ngcontent-%COMP%] { fill: none; stroke: currentColor; stroke-width: 2; }\n    .sb-health--warn[_ngcontent-%COMP%] {\n      color: color-mix(in srgb, var(--%NS%prism-mark-attention) 80%, transparent);\n    }\n    .sb-health--danger[_ngcontent-%COMP%] { color: var(--%NS%prism-mark-critical); }\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,
@@ -373,7 +405,7 @@ export class PrismSidebarComponent {
               [attr.aria-expanded]="!isCollapsed('page:' + cat.name)"
             >
               <prism-icon name="chevron-down" [size]="10" />
-              <span class="sb-group-chip" [style.--chip]="cat.color"></span>
+              <span class="sb-group-chip"></span>
               {{ cat.name }}
             </button>
             @if (!isCollapsed('page:' + cat.name)) {
@@ -419,27 +451,48 @@ export class PrismSidebarComponent {
             "
           >
             <prism-icon name="chevron-down" [size]="10" />
-            <span class="sb-group-chip" [style.--chip]="cat.color"></span>
+            <span class="sb-group-chip"></span>
             {{ cat.name }}
-            <span class="sb-group-count">{{ cat.items.length }}</span>
+            <span
+              class="sb-group-count"
+              [class.sb-group-count--warn]="cat.rollup.variant === 'warn'"
+              [class.sb-group-count--danger]="cat.rollup.variant === 'danger'"
+              [attr.title]="
+                cat.rollup.problems ? rollupTooltip(cat.rollup) : null
+              "
+              [attr.aria-label]="
+                cat.rollup.problems ? rollupTooltip(cat.rollup) : null
+              "
+            >
+              @if (cat.rollup.problems) { {{ cat.rollup.problems }}/{{
+                cat.items.length
+              }}
+              } @else { {{ 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>
+              <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>
             }
           </div>
@@ -448,9 +501,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(--prism-text-ghost);\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    .sb-group-count--warn { color: var(--prism-mark-attention); }\n    .sb-group-count--danger { color: var(--prism-mark-critical); }\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      background: none;\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      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      font-weight: 500;\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    /* Fixed width sized for the three built-in decoration sources (a11y,\n       plugin-coverage, plugin-visual-regression) at 11px each plus two\n       --sp-1 gaps, with a little headroom. navigationDecorations is an open\n       extension point, so a fourth mark from a third-party plugin is\n       clipped via overflow: hidden rather than allowed to grow the gutter \u2014\n       the point of a fixed-width gutter is that rows never shift\n       horizontally as you scan the list. */\n    .sb-item-health {\n      width: 40px;\n      flex: none;\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      gap: var(--sp-1);\n      overflow: hidden;\n    }\n\n    /* Outline, not fill, and full saturation only for danger. The mechanism\n       behind these marks is already deviation-driven: decorateItem returns\n       null for a clean component and every source bails out at variant === 'ok'.\n       What made them read as wallpaper was the drawing: a filled shape at full\n       saturation, one per row, in a repo where deviating is the normal case. */\n    .sb-health { fill: none; stroke: currentColor; stroke-width: 2; }\n    .sb-health--warn {\n      color: color-mix(in srgb, var(--prism-mark-attention) 80%, transparent);\n    }\n    .sb-health--danger { color: var(--prism-mark-critical); }\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: 394 }); })();

package/dist/app/theme/prism-default-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-default-theme.d.ts","sourceRoot":"","sources":["../../../src/app/theme/prism-default-theme.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAiCnD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAiCpD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA6BpD,CAAC;AAEF,eAAO,MAAM,mBAAmB,wBAAmB,CAAC"}
+{"version":3,"file":"prism-default-theme.d.ts","sourceRoot":"","sources":["../../../src/app/theme/prism-default-theme.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA0CnD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA0CpD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA0DpD,CAAC;AAEF,eAAO,MAAM,mBAAmB,wBAAmB,CAAC"}

package/dist/app/theme/prism-default-theme.js

@@ -7,6 +7,8 @@ export const PRISM_DARK_THEME = {
     '--prism-bg': '#0d0b1c',
     '--prism-bg-surface': '#131022',
     '--prism-bg-elevated': '#1a1535',
+    '--prism-stage': '#16122b',
+    '--prism-stage-edge': 'rgba(255, 255, 255, 0.10)',
     '--prism-text': '#ede9f8',
     '--prism-text-2': '#b0a6c8',
     '--prism-text-muted': '#8476a2',
@@ -24,6 +26,11 @@ export const PRISM_DARK_THEME = {
     '--prism-success': '#34d399',
     '--prism-warn': '#fbbf24',
     '--prism-danger': '#f87171',
+    '--prism-mark-nominal': '#34d399',
+    '--prism-mark-attention': '#e8a33d',
+    '--prism-mark-critical': '#e5484d',
+    '--prism-measure': '#22d3ee',
+    '--prism-spectrum': 'linear-gradient(90deg, var(--prism-accent), var(--prism-primary), var(--prism-primary-to))',
 };
 export const PRISM_LIGHT_THEME = {
     '--prism-code-tag': '#be185d',
@@ -34,6 +41,8 @@ export const PRISM_LIGHT_THEME = {
     '--prism-bg': '#ffffff',
     '--prism-bg-surface': '#faf9fd',
     '--prism-bg-elevated': '#ffffff',
+    '--prism-stage': '#ffffff',
+    '--prism-stage-edge': 'rgba(28, 21, 48, 0.14)',
     '--prism-text': '#1c1530',
     '--prism-text-2': '#4d4266',
     '--prism-text-muted': '#6b5e80',
@@ -48,9 +57,14 @@ export const PRISM_LIGHT_THEME = {
     '--prism-glow-strong': 'rgba(124, 58, 237, 0.25)',
     '--prism-input-bg': 'rgba(28, 21, 48, 0.04)',
     '--prism-dot': 'rgba(124, 58, 237, 0.2)',
-    '--prism-success': '#059669',
-    '--prism-warn': '#d97706',
-    '--prism-danger': '#dc2626',
+    '--prism-success': '#047857',
+    '--prism-warn': '#8f6b00',
+    '--prism-danger': '#951226',
+    '--prism-mark-nominal': '#047857',
+    '--prism-mark-attention': '#8f6b00',
+    '--prism-mark-critical': '#951226',
+    '--prism-measure': '#0b93ad',
+    '--prism-spectrum': 'linear-gradient(90deg, var(--prism-accent), var(--prism-primary), var(--prism-primary-to))',
 };
 export const PRISM_BASE_TOKENS = {
     '--font-sans': "'Inter', system-ui, sans-serif",
@@ -61,6 +75,13 @@ export const PRISM_BASE_TOKENS = {
     '--fs-lg': '13.5px',
     '--fs-xl': '15px',
     '--fs-2xl': '22px',
+    '--sp-1': '2px',
+    '--sp-2': '4px',
+    '--sp-3': '8px',
+    '--sp-4': '12px',
+    '--sp-5': '16px',
+    '--sp-6': '24px',
+    '--sp-7': '40px',
     '--radius-xs': '3px',
     '--radius-sm': '5px',
     '--radius-md': '7px',
@@ -69,10 +90,29 @@ export const PRISM_BASE_TOKENS = {
     '--dur-fast': '0.12s',
     '--dur-base': '0.2s',
     '--dur-slow': '0.3s',
+    /**
+     * Chrome density. Set on the shell host, so a consuming app can compact or
+     * loosen the entire interface from CSS alone:
+     *
+     *   prism-shell { --density: .8 }
+     *
+     * There is deliberately no signal, service or menu behind this — the whole
+     * control surface is the custom property.
+     */
+    '--density': '1',
+    '--band-header': 'calc(40px * var(--density))',
+    '--band-head': 'calc(36px * var(--density))',
+    '--band-rail': 'calc(28px * var(--density))',
+    '--band-tabs': 'calc(34px * var(--density))',
     '--prism-void-light': '#f7f5fc',
     '--prism-void-dark': '#07050f',
     '--prism-text-light': '#ede9f8',
-    '--prism-header-height': '52px',
+    /**
+     * Kept as an alias rather than removed: it is exported through
+     * PRISM_BASE_TOKENS, so a consuming stylesheet may reference it even though
+     * nothing inside this package does.
+     */
+    '--prism-header-height': 'var(--band-header)',
     '--prism-font-sans': 'var(--font-sans)',
     '--prism-font-mono': 'var(--font-mono)',
 };

package/dist/app/variant-ribbon/prism-variant-ribbon.component.d.ts

@@ -7,7 +7,10 @@ export declare class PrismVariantRibbonComponent {
     private readonly tabButtons;
     protected readonly variants: import("@angular/core").Signal<import("../../index.js").Variant<unknown>[]>;
     constructor();
-    protected variantColor(name: string, index: number): string;
+    protected slot(index: number): {
+        i: number;
+        n: number;
+    };
     protected prev(): void;
     protected next(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismVariantRibbonComponent, never>;

package/dist/app/variant-ribbon/prism-variant-ribbon.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-variant-ribbon.component.d.ts","sourceRoot":"","sources":["../../../src/app/variant-ribbon/prism-variant-ribbon.component.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;;AAgB7E,qBA8Ja,2BAA2B;IACtC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAElE,OAAO,CAAC,QAAQ,CAAC,aAAa,CACwB;IACtD,OAAO,CAAC,QAAQ,CAAC,UAAU,CACgC;IAE3D,SAAS,CAAC,QAAQ,CAAC,QAAQ,8EAGxB;;IAsBH,SAAS,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM;IAI3D,SAAS,CAAC,IAAI,IAAI,IAAI;IAKtB,SAAS,CAAC,IAAI,IAAI,IAAI;yCA3CX,2BAA2B;2CAA3B,2BAA2B;CAgDvC"}
+{"version":3,"file":"prism-variant-ribbon.component.d.ts","sourceRoot":"","sources":["../../../src/app/variant-ribbon/prism-variant-ribbon.component.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;;AAG7E,qBAwJa,2BAA2B;IACtC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAElE,OAAO,CAAC,QAAQ,CAAC,aAAa,CACwB;IACtD,OAAO,CAAC,QAAQ,CAAC,UAAU,CACgC;IAE3D,SAAS,CAAC,QAAQ,CAAC,QAAQ,8EAGxB;;IAsBH,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;IAIvD,SAAS,CAAC,IAAI,IAAI,IAAI;IAKtB,SAAS,CAAC,IAAI,IAAI,IAAI;yCA3CX,2BAA2B;2CAA3B,2BAA2B;CAgDvC"}