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

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

@@ -1,10 +1,12 @@
 import { ChangeDetectionStrategy, Component, computed, HostListener, inject, signal, viewChild } from '@angular/core';
 import { PrismIconComponent } from '../icons/prism-icon.component.js';
 import { BUILTIN_NAVIGATION_DECORATIONS } from '../panels/builtin-navigation-decorations.js';
+import { itemKey, itemShowcaseConfig } from '../services/navigation-item.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 { PrismBadgeComponent } from '../shared/prism-badge.component.js';
+import { categoryCount, decorateItem, lifecycleIcon, resolveNavigationDecorations, rollupCategory, sectionFacet } from './navigation-decorations.js';
 import * as i0 from "@angular/core";
 const _c0 = ["filterInput"];
 const _c1 = () => [];
@@ -18,19 +20,22 @@ function PrismSidebarComponent_Conditional_8_For_8_Conditional_5_For_2_Template(
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 17);
     i0.ɵɵlistener("click", function PrismSidebarComponent_Conditional_8_For_8_Conditional_5_For_2_Template_button_click_0_listener() { const item_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onSelect(item_r5)); });
-    i0.ɵɵelementStart(1, "span", 18);
-    i0.ɵɵtext(2);
+    i0.ɵɵelement(1, "prism-icon", 18);
+    i0.ɵɵelementStart(2, "span", 19);
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const item_r5 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵclassProp("sb-item--active", ctx_r2.isActive(item_r5));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("size", 12);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r2.itemLabel(item_r5));
 } }
 function PrismSidebarComponent_Conditional_8_For_8_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵrepeaterCreate(1, PrismSidebarComponent_Conditional_8_For_8_Conditional_5_For_2_Template, 3, 3, "button", 16, _forTrack1, true);
+    i0.ɵɵrepeaterCreate(1, PrismSidebarComponent_Conditional_8_For_8_Conditional_5_For_2_Template, 4, 4, "button", 16, _forTrack1, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const cat_r2 = i0.ɵɵnextContext().$implicit;
@@ -78,51 +83,46 @@ function PrismSidebarComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.pageCategories());
 } }
-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);
+    i0.ɵɵelement(0, "prism-badge", 23);
 } if (rf & 2) {
-    const cat_r7 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵtextInterpolate1(" ", cat_r7.items.length, " ");
+    const chip_r9 = ctx;
+    i0.ɵɵproperty("tone", chip_r9.tone)("value", chip_r9.text);
 } }
 function PrismSidebarComponent_For_10_For_7_Conditional_8_For_2_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-icon", 27);
+    i0.ɵɵelement(0, "prism-icon", 28);
 } 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);
+    const mark_r12 = ctx.$implicit;
+    i0.ɵɵclassMap("sb-health sb-health--" + mark_r12.variant);
+    i0.ɵɵproperty("name", mark_r12.icon)("size", 11);
+    i0.ɵɵattribute("aria-label", mark_r12.label);
 } }
 function PrismSidebarComponent_For_10_For_7_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
+    const _r10 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 17);
-    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.ɵɵlistener("click", function PrismSidebarComponent_For_10_For_7_Conditional_8_For_2_Template_button_click_0_listener() { const row_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onSelect(row_r11.item)); });
+    i0.ɵɵelement(1, "prism-icon", 25);
+    i0.ɵɵelementStart(2, "span", 19);
     i0.ɵɵtext(3);
     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.ɵɵelementStart(4, "span", 26);
+    i0.ɵɵrepeaterCreate(5, PrismSidebarComponent_For_10_For_7_Conditional_8_For_2_For_6_Template, 1, 5, "prism-icon", 27, _forTrack3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const row_r10 = ctx.$implicit;
+    const row_r11 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(4);
-    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.ɵɵclassProp("sb-item--active", ctx_r2.isActive(row_r11.item))("sb-item--deprecated", ctx_r2.itemStatus(row_r11.item) === "deprecated");
+    i0.ɵɵattribute("title", ctx_r2.itemTooltip(row_r11.item, row_r11.decorations));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("name", row_r10.icon)("size", 12);
+    i0.ɵɵproperty("name", row_r11.icon)("size", 12);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r2.itemLabel(row_r10.item));
+    i0.ɵɵtextInterpolate(ctx_r2.itemLabel(row_r11.item));
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(row_r10.decorations?.marks ?? i0.ɵɵpureFunction0(8, _c1));
+    i0.ɵɵrepeater(row_r11.decorations?.marks ?? i0.ɵɵpureFunction0(8, _c1));
 } }
 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_8_For_2_Template, 7, 9, "button", 23, _forTrack2, true);
+    i0.ɵɵrepeaterCreate(1, PrismSidebarComponent_For_10_For_7_Conditional_8_For_2_Template, 7, 9, "button", 24, _forTrack2, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const cat_r7 = i0.ɵɵnextContext().$implicit;
@@ -136,11 +136,13 @@ 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.ɵɵconditionalCreate(6, PrismSidebarComponent_For_10_For_7_Conditional_6_Template, 1, 2)(7, PrismSidebarComponent_For_10_For_7_Conditional_7_Template, 1, 1);
+    i0.ɵɵtext(6);
+    i0.ɵɵconditionalCreate(7, PrismSidebarComponent_For_10_For_7_Conditional_7_Template, 1, 2, "prism-badge", 23);
     i0.ɵɵelementEnd()();
     i0.ɵɵconditionalCreate(8, PrismSidebarComponent_For_10_For_7_Conditional_8_Template, 3, 0, "div", 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
+    let tmp_29_0;
     const cat_r7 = ctx.$implicit;
     const section_r8 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
@@ -151,27 +153,31 @@ function PrismSidebarComponent_For_10_For_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("size", 10);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", cat_r7.name, " ");
+    const count_r13 = ctx_r2.countOf(cat_r7.rollup, cat_r7.items.length);
     i0.ɵɵadvance();
-    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.ɵɵattribute("title", count_r13.title)("aria-label", count_r13.title);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", count_r13.total, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_29_0 = count_r13.chip) ? 7 : -1, tmp_29_0);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(cat_r7.rollup.problems ? 6 : 7);
-    i0.ɵɵadvance(2);
     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);
+    i0.ɵɵelementStart(0, "div", 20)(1, "span", 8);
     i0.ɵɵelement(2, "prism-icon", 21);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "span");
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵrepeaterCreate(6, PrismSidebarComponent_For_10_For_7_Template, 9, 13, "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;
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("name", section_r8.icon)("size", 10);
+    i0.ɵɵproperty("name", section_r8.icon)("size", 11);
+    i0.ɵɵattribute("data-facet", ctx_r2.facet(section_r8.name));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", section_r8.name, " ");
     i0.ɵɵadvance(2);
@@ -182,12 +188,27 @@ function PrismSidebarComponent_For_10_Template(rf, ctx) { if (rf & 1) {
 const STORAGE_KEY = 'ng-prism-sidebar-collapsed';
 const SECTION_ICONS = {
     Components: 'box',
-    Directives: 'zap'
+    Directives: 'zap',
+    Services: 'plug',
+    Pipes: 'pipette'
 };
 const DEFAULT_SECTION_ICON = 'box-select';
+const SERVICE_ICON = 'plug';
+const PIPE_ICON = 'pipette';
 function sectionIcon(name) {
     return SECTION_ICONS[name] ?? DEFAULT_SECTION_ICON;
 }
+/** The glyph of an item's kind, shown unless it is a work in progress. `undefined` for a component: `lifecycleIcon` falls back to the box. */
+function idleIcon(item) {
+    switch (item.kind) {
+        case 'service':
+            return SERVICE_ICON;
+        case 'pipe':
+            return PIPE_ICON;
+        default:
+            return undefined;
+    }
+}
 export class PrismSidebarComponent {
     navigationService = inject(PrismNavigationService);
     searchService = inject(PrismSearchService);
@@ -235,7 +256,7 @@ export class PrismSidebarComponent {
             categories: section.categories.map((cat) => {
                 const items = cat.items.map((item) => ({
                     item,
-                    icon: lifecycleIcon(this.itemStatus(item)),
+                    icon: lifecycleIcon(this.itemStatus(item), idleIcon(item)),
                     decorations: decorateItem(item, defs)
                 }));
                 return {
@@ -261,31 +282,19 @@ export class PrismSidebarComponent {
             return next;
         });
     }
-    itemKey(item) {
-        return item.kind === 'component' ? item.data.meta.className : `page:${item.data.title}`;
-    }
+    itemKey = itemKey;
     itemLabel(item) {
-        return item.kind === 'component' ? item.data.meta.showcaseConfig.title : item.data.title;
+        return item.kind === 'page' ? item.data.title : item.data.meta.showcaseConfig.title;
     }
     itemStatus(item) {
-        return item.kind === 'component' ? item.data.meta.showcaseConfig.status : undefined;
+        return itemShowcaseConfig(item)?.status;
+    }
+    /** The category head's count and problem chip. A clean category shows only its size. */
+    countOf(rollup, total) {
+        return categoryCount(rollup, total);
     }
-    /**
-     * 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 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`;
+    facet(sectionName) {
+        return sectionFacet(sectionName);
     }
     itemTooltip(item, decorations) {
         const status = this.itemStatus(item);
@@ -300,19 +309,22 @@ export class PrismSidebarComponent {
     }
     isActive(item) {
         const active = this.navigationService.activeItem();
-        if (!active || active.kind !== item.kind)
-            return false;
-        if (item.kind === 'component') {
-            return item.data.meta.className === active.data.meta.className;
-        }
-        return item.data.title === active.data.title;
+        return active !== null && itemKey(active) === itemKey(item);
     }
     onSelect(item) {
-        if (item.kind === 'component') {
-            this.navigationService.select(item.data);
-        }
-        else {
-            this.navigationService.selectPage(item.data);
+        switch (item.kind) {
+            case 'component':
+                this.navigationService.select(item.data);
+                break;
+            case 'service':
+                this.navigationService.selectService(item.data);
+                break;
+            case 'pipe':
+                this.navigationService.selectPipe(item.data);
+                break;
+            case 'page':
+                this.navigationService.selectPage(item.data);
+                break;
         }
     }
     loadCollapsed() {
@@ -340,7 +352,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"], [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) {
+        } }, decls: 11, vars: 3, consts: [["filterInput", ""], [1, "prism-sidebar"], [1, "sb-filter"], ["name", "search", 3, "size"], ["placeholder", "Filter\u2026", 3, "input", "value"], [1, "sb-scroll"], [1, "sb-pinned"], [1, "sb-section-head", "sb-section-head--first"], [1, "sb-section-head-l"], ["name", "pin", 1, "sb-section-icon", "sb-section-icon--muted", 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"], ["name", "file-text", 1, "sb-item-icon", 3, "size"], [1, "sb-item-name"], [1, "sb-section-head"], [1, "sb-section-icon", 3, "name", "size"], [1, "sb-group-count"], ["size", "sm", "dot", "", "aria-hidden", "true", 3, "tone", "value"], [1, "sb-item", 3, "sb-item--active", "sb-item--deprecated"], [1, "sb-item-icon", 3, "name", "size"], [1, "sb-item-health"], ["role", "img", 3, "name", "size", "class"], ["role", "img", 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);
@@ -351,7 +363,7 @@ export class PrismSidebarComponent {
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(7, "div", 5);
             i0.ɵɵconditionalCreate(8, PrismSidebarComponent_Conditional_8_Template, 9, 2, "div", 6);
-            i0.ɵɵrepeaterCreate(9, PrismSidebarComponent_For_10_Template, 8, 4, null, null, _forTrack0);
+            i0.ɵɵrepeaterCreate(9, PrismSidebarComponent_For_10_Template, 8, 5, null, null, _forTrack0);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
@@ -362,13 +374,13 @@ 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    gap: 8px;\n    align-items: center;\n    height: 30px;\n    padding: 0 10px;\n    margin: 12px;\n    color: var(--%NS%prism-text-muted);\n    background: var(--%NS%prism-input-bg);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 6px;\n}\n\n.sb-filter[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    font-family: var(--%NS%font-sans);\n    font-size: var(--%NS%fs-md);\n    color: var(--%NS%prism-text);\n    outline: none;\n    background: transparent;\n    border: 0;\n}\n\n.sb-filter[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder {\n    color: var(--%NS%prism-text-muted);\n}\n\n.sb-filter[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n    padding: 1px 5px;\n    font-family: var(--%NS%font-mono);\n    font-size: 10px;\n    color: var(--%NS%prism-text-ghost);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 3px;\n}\n\n.sb-scroll[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 10px 0 16px;\n    padding-top: 0;\n    overflow-y: auto;\n}\n\n.sb-scroll[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 8px;\n}\n\n.sb-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: var(--%NS%prism-border-strong);\n    border-radius: 4px;\n}\n\n.sb-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n    background: transparent;\n}\n\n.sb-pinned[_ngcontent-%COMP%] {\n    padding: 0 0 10px;\n    margin-bottom: 4px;\n    border-top: 1px solid var(--%NS%prism-border);\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\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    margin-top: 6px;\n    font-size: 10.5px;\n    font-weight: 700;\n    color: var(--%NS%prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.09em;\n}\n\n.sb-section-head-l[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n}\n\n.sb-section-icon[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-primary);\n}\n\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    color: var(--%NS%prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.09em;\n}\n\n.sb-pinned-head-l[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n}\n\n.sb-pinned-pin[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-accent);\n}\n\n.sb-group[_ngcontent-%COMP%] {\n    margin-bottom: 4px;\n}\n\n.sb-group-head[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    width: 100%;\n    padding: 8px 14px 6px;\n    font-family: var(--%NS%font-sans);\n    font-size: 10.5px;\n    font-weight: 700;\n    color: var(--%NS%prism-text-ghost);\n    text-align: left;\n    text-transform: uppercase;\n    letter-spacing: 0.09em;\n    cursor: pointer;\n    user-select: none;\n    background: none;\n    border: none;\n}\n\n.sb-group-head[_ngcontent-%COMP%]   prism-icon[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text-ghost);\n    transition: transform var(--%NS%dur-fast);\n}\n\n.sb-group--collapsed[_ngcontent-%COMP%]   .sb-group-head[_ngcontent-%COMP%]   prism-icon[_ngcontent-%COMP%] {\n    transform: rotate(-90deg);\n}\n\n.sb-group-chip[_ngcontent-%COMP%] {\n    width: 6px;\n    height: 6px;\n    background: var(--%NS%prism-text-ghost);\n    border-radius: 2px;\n}\n\n.sb-group-count[_ngcontent-%COMP%] {\n    margin-left: auto;\n    font-family: var(--%NS%font-mono);\n    font-size: 10px;\n    font-weight: 500;\n    color: var(--%NS%prism-text-ghost);\n}\n\n.sb-group-count--warn[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-attention);\n}\n\n.sb-group-count--danger[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-critical);\n}\n\n.sb-item[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    width: 100%;\n    height: 30px;\n    padding: 0 14px 0 28px;\n    font-family: var(--%NS%font-sans);\n    font-size: 13px;\n    color: var(--%NS%prism-text-2);\n    text-align: left;\n    cursor: pointer;\n    background: none;\n    border: none;\n    transition:\n        background var(--%NS%dur-fast),\n        color var(--%NS%dur-fast);\n}\n\n.sb-item[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text);\n    background: color-mix(in srgb, var(--%NS%prism-primary) 5%, transparent);\n}\n\n.sb-item--active[_ngcontent-%COMP%] {\n    font-weight: 500;\n    background: color-mix(in srgb, var(--%NS%prism-primary) 12%, transparent);\n}\n\n.sb-item-icon[_ngcontent-%COMP%] {\n    flex: 0 0 12px;\n    opacity: 0.7;\n}\n\n.sb-item-name[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n\n\n\n\n\n\n\n.sb-item-health[_ngcontent-%COMP%] {\n    display: flex;\n    flex: none;\n    gap: var(--%NS%sp-1);\n    align-items: center;\n    justify-content: flex-end;\n    width: 40px;\n    overflow: hidden;\n}\n\n\n\n\n\n\n.sb-health[_ngcontent-%COMP%] {\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: 2;\n}\n\n.sb-health--warn[_ngcontent-%COMP%] {\n    color: color-mix(in srgb, var(--%NS%prism-mark-attention) 80%, transparent);\n}\n\n.sb-health--danger[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-critical);\n}\n\n.sb-item--deprecated[_ngcontent-%COMP%]   .sb-item-name[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text-ghost);\n    text-decoration: line-through;\n    text-decoration-thickness: 1px;\n    opacity: 0.7;\n}\n\n[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 2px;\n}"] });
+        } }, dependencies: [PrismIconComponent, PrismBadgeComponent], 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    gap: 8px;\n    align-items: center;\n    height: 30px;\n    padding: 0 10px;\n    margin: 12px;\n    color: var(--%NS%prism-text-muted);\n    background: var(--%NS%prism-input-bg);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 6px;\n}\n\n.sb-filter[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    font-family: var(--%NS%font-sans);\n    font-size: var(--%NS%fs-md);\n    color: var(--%NS%prism-text);\n    outline: none;\n    background: transparent;\n    border: 0;\n}\n\n.sb-filter[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder {\n    color: var(--%NS%prism-text-muted);\n}\n\n.sb-filter[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n    padding: 1px 5px;\n    font-family: var(--%NS%font-mono);\n    font-size: 10px;\n    color: var(--%NS%prism-text-muted);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 3px;\n}\n\n.sb-scroll[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 0 0 16px;\n    margin-right: 6px;\n    overflow-y: auto;\n    scrollbar-color: var(--%NS%prism-border-strong) transparent;\n    scrollbar-width: thin;\n}\n\n.sb-scroll[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 8px;\n}\n\n.sb-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: var(--%NS%prism-border-strong);\n    border-radius: 4px;\n}\n\n.sb-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n    background: transparent;\n}\n\n.sb-pinned[_ngcontent-%COMP%] {\n    padding: 0 0 6px;\n}\n\n.sb-section-head[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 14px 6px;\n    margin-top: 6px;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--%NS%prism-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.07em;\n    border-top: 1px solid var(--%NS%prism-border);\n}\n\n.sb-section-head-l[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n}\n\n.sb-section-icon[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-primary);\n}\n\n.sb-group[_ngcontent-%COMP%] {\n    margin-bottom: 4px;\n}\n\n.sb-group-head[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    width: 100%;\n    padding: 6px 14px 4px;\n    font-family: var(--%NS%font-sans);\n    font-size: 12.5px;\n    font-weight: 500;\n    color: var(--%NS%prism-text-2);\n    text-align: left;\n    cursor: pointer;\n    user-select: none;\n    background: none;\n    border: none;\n}\n\n.sb-group-head[_ngcontent-%COMP%]    > prism-icon[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text-muted);\n    transition: transform var(--%NS%dur-fast);\n}\n\n.sb-group--collapsed[_ngcontent-%COMP%]   .sb-group-head[_ngcontent-%COMP%]    > prism-icon[_ngcontent-%COMP%] {\n    transform: rotate(-90deg);\n}\n\n.sb-group-chip[_ngcontent-%COMP%] {\n    width: 6px;\n    height: 6px;\n    background: var(--%NS%prism-text-ghost);\n    border-radius: 2px;\n}\n\n.sb-group-count[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    margin-left: auto;\n    font-family: var(--%NS%font-mono);\n    font-size: 10.5px;\n    font-weight: 500;\n    color: var(--%NS%prism-text-muted);\n}\n\n.sb-item[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    width: 100%;\n    height: 30px;\n    padding: 0 14px 0 28px;\n    font-family: var(--%NS%font-sans);\n    font-size: 13px;\n    color: var(--%NS%prism-text-2);\n    text-align: left;\n    cursor: pointer;\n    background: none;\n    border: none;\n    transition:\n        background var(--%NS%dur-fast),\n        color var(--%NS%dur-fast);\n}\n\n.sb-item[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text);\n    background: color-mix(in srgb, var(--%NS%prism-primary) 5%, transparent);\n}\n\n.sb-item--active[_ngcontent-%COMP%] {\n    position: relative;\n    font-weight: 500;\n    color: var(--%NS%prism-text);\n    background: var(--%NS%prism-primary-bg);\n}\n\n.sb-item-icon[_ngcontent-%COMP%] {\n    flex: 0 0 12px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.sb-item--active[_ngcontent-%COMP%]   .sb-item-icon[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-primary);\n}\n\n.sb-item-name[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n\n\n\n\n\n\n\n.sb-item-health[_ngcontent-%COMP%] {\n    display: flex;\n    flex: none;\n    gap: var(--%NS%sp-1);\n    align-items: center;\n    justify-content: flex-end;\n    width: 40px;\n    overflow: hidden;\n}\n\n\n\n\n\n\n.sb-health[_ngcontent-%COMP%] {\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: 2;\n}\n\n.sb-health--warn[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-warn);\n}\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    color: var(--%NS%prism-text-muted);\n    text-decoration: line-through;\n    text-decoration-thickness: 1px;\n}\n\n[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 2px;\n}\n\n\n.sb-section-head--first[_ngcontent-%COMP%] {\n    margin-top: 0;\n    border-top: 0;\n}\n\n.sb-section-icon--muted[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text-muted);\n}\n\n\n.sb-section-icon[data-facet='cyan'][_ngcontent-%COMP%] {\n    color: var(--%NS%prism-facet-cyan);\n}\n\n.sb-section-icon[data-facet='blue'][_ngcontent-%COMP%] {\n    color: var(--%NS%prism-facet-blue);\n}\n\n.sb-section-icon[data-facet='violet'][_ngcontent-%COMP%] {\n    color: var(--%NS%prism-facet-violet);\n}\n\n.sb-section-icon[data-facet='magenta'][_ngcontent-%COMP%] {\n    color: var(--%NS%prism-facet-magenta);\n}\n\n\n\n\n.sb-item--%NS%active[_ngcontent-%COMP%]::before {\n    position: absolute;\n    top: 50%;\n    left: 4px;\n    width: 16px;\n    height: 3px;\n    margin-top: -1.5px;\n    content: '';\n    background: var(--%NS%prism-brand-ink);\n    border-radius: 2px;\n    transform: rotate(90deg);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismSidebarComponent, [{
         type: Component,
-        args: [{ selector: 'prism-sidebar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: "<nav class=\"prism-sidebar\">\n    <div class=\"sb-filter\">\n        <prism-icon\n            name=\"search\"\n            [size]=\"12\" />\n        <input\n            #filterInput\n            placeholder=\"Filter components\u2026\"\n            [value]=\"searchService.query()\"\n            (input)=\"searchService.search($any($event.target).value)\" />\n        <kbd>/</kbd>\n    </div>\n\n    <div class=\"sb-scroll\">\n        @if (pageCategories().length > 0) {\n            <div class=\"sb-pinned\">\n                <div class=\"sb-pinned-head\">\n                    <span class=\"sb-pinned-head-l\">\n                        <prism-icon\n                            name=\"pin\"\n                            [size]=\"10\"\n                            class=\"sb-pinned-pin\" />\n                        Pages\n                    </span>\n                    <span>{{ totalPages() }}</span>\n                </div>\n                @for (cat of pageCategories(); track cat.name) {\n                    <div\n                        class=\"sb-group\"\n                        [class.sb-group--collapsed]=\"isCollapsed('page:' + cat.name)\">\n                        <button\n                            class=\"sb-group-head\"\n                            (click)=\"toggleCollapse('page:' + cat.name)\"\n                            [attr.aria-expanded]=\"!isCollapsed('page:' + cat.name)\">\n                            <prism-icon\n                                name=\"chevron-down\"\n                                [size]=\"10\" />\n                            <span class=\"sb-group-chip\"></span>\n                            {{ cat.name }}\n                        </button>\n                        @if (!isCollapsed('page:' + cat.name)) {\n                            <div class=\"sb-group-body\">\n                                @for (item of cat.items; track itemKey(item)) {\n                                    <button\n                                        class=\"sb-item\"\n                                        [class.sb-item--active]=\"isActive(item)\"\n                                        (click)=\"onSelect(item)\">\n                                        <span class=\"sb-item-name\">{{ itemLabel(item) }}</span>\n                                    </button>\n                                }\n                            </div>\n                        }\n                    </div>\n                }\n            </div>\n        }\n        @for (section of componentSections(); track section.name) {\n            <div class=\"sb-section-head\">\n                <span class=\"sb-section-head-l\">\n                    <prism-icon\n                        [name]=\"section.icon\"\n                        [size]=\"10\"\n                        class=\"sb-section-icon\" />\n                    {{ section.name }}\n                </span>\n                <span>{{ section.totalCount }}</span>\n            </div>\n            @for (cat of section.categories; track cat.name) {\n                <div\n                    class=\"sb-group\"\n                    [class.sb-group--collapsed]=\"isCollapsed('sec:' + section.name + ':' + cat.name)\">\n                    <button\n                        class=\"sb-group-head\"\n                        (click)=\"toggleCollapse('sec:' + section.name + ':' + cat.name)\"\n                        [attr.aria-expanded]=\"!isCollapsed('sec:' + section.name + ':' + cat.name)\">\n                        <prism-icon\n                            name=\"chevron-down\"\n                            [size]=\"10\" />\n                        <span class=\"sb-group-chip\"></span>\n                        {{ cat.name }}\n                        <span\n                            class=\"sb-group-count\"\n                            [class.sb-group-count--warn]=\"cat.rollup.variant === 'warn'\"\n                            [class.sb-group-count--danger]=\"cat.rollup.variant === 'danger'\"\n                            [attr.title]=\"cat.rollup.problems ? rollupTooltip(cat.rollup) : null\"\n                            [attr.aria-label]=\"cat.rollup.problems ? rollupTooltip(cat.rollup) : null\">\n                            @if (cat.rollup.problems) {\n                                {{ cat.rollup.problems }}/{{ cat.items.length }}\n                            } @else {\n                                {{ cat.items.length }}\n                            }\n                        </span>\n                    </button>\n                    @if (!isCollapsed('sec:' + section.name + ':' + cat.name)) {\n                        <div class=\"sb-group-body\">\n                            @for (row of cat.items; track itemKey(row.item)) {\n                                <button\n                                    class=\"sb-item\"\n                                    [class.sb-item--active]=\"isActive(row.item)\"\n                                    [class.sb-item--deprecated]=\"itemStatus(row.item) === 'deprecated'\"\n                                    [attr.title]=\"itemTooltip(row.item, row.decorations)\"\n                                    (click)=\"onSelect(row.item)\">\n                                    <prism-icon\n                                        [name]=\"row.icon\"\n                                        [size]=\"12\"\n                                        class=\"sb-item-icon\" />\n                                    <span class=\"sb-item-name\">{{ itemLabel(row.item) }}</span>\n                                    <span class=\"sb-item-health\">\n                                        @for (mark of row.decorations?.marks ?? []; track mark.id) {\n                                            <prism-icon\n                                                [name]=\"mark.icon\"\n                                                [size]=\"11\"\n                                                [class]=\"'sb-health sb-health--' + mark.variant\" />\n                                        }\n                                    </span>\n                                </button>\n                            }\n                        </div>\n                    }\n                </div>\n            }\n        }\n    </div>\n</nav>\n", styles: [".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    gap: 8px;\n    align-items: center;\n    height: 30px;\n    padding: 0 10px;\n    margin: 12px;\n    color: var(--prism-text-muted);\n    background: var(--prism-input-bg);\n    border: 1px solid var(--prism-border);\n    border-radius: 6px;\n}\n\n.sb-filter input {\n    flex: 1;\n    min-width: 0;\n    font-family: var(--font-sans);\n    font-size: var(--fs-md);\n    color: var(--prism-text);\n    outline: none;\n    background: transparent;\n    border: 0;\n}\n\n.sb-filter input::placeholder {\n    color: var(--prism-text-muted);\n}\n\n.sb-filter kbd {\n    padding: 1px 5px;\n    font-family: var(--font-mono);\n    font-size: 10px;\n    color: var(--prism-text-ghost);\n    border: 1px solid var(--prism-border);\n    border-radius: 3px;\n}\n\n.sb-scroll {\n    flex: 1;\n    padding: 10px 0 16px;\n    padding-top: 0;\n    overflow-y: auto;\n}\n\n.sb-scroll::-webkit-scrollbar {\n    width: 8px;\n}\n\n.sb-scroll::-webkit-scrollbar-thumb {\n    background: var(--prism-border-strong);\n    border-radius: 4px;\n}\n\n.sb-scroll::-webkit-scrollbar-track {\n    background: transparent;\n}\n\n.sb-pinned {\n    padding: 0 0 10px;\n    margin-bottom: 4px;\n    border-top: 1px solid var(--prism-border);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.sb-section-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    color: var(--prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.09em;\n}\n\n.sb-section-head-l {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n}\n\n.sb-section-icon {\n    color: var(--prism-primary);\n}\n\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    color: var(--prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.09em;\n}\n\n.sb-pinned-head-l {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n}\n\n.sb-pinned-pin {\n    color: var(--prism-accent);\n}\n\n.sb-group {\n    margin-bottom: 4px;\n}\n\n.sb-group-head {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    width: 100%;\n    padding: 8px 14px 6px;\n    font-family: var(--font-sans);\n    font-size: 10.5px;\n    font-weight: 700;\n    color: var(--prism-text-ghost);\n    text-align: left;\n    text-transform: uppercase;\n    letter-spacing: 0.09em;\n    cursor: pointer;\n    user-select: none;\n    background: none;\n    border: none;\n}\n\n.sb-group-head prism-icon {\n    color: var(--prism-text-ghost);\n    transition: transform var(--dur-fast);\n}\n\n.sb-group--collapsed .sb-group-head prism-icon {\n    transform: rotate(-90deg);\n}\n\n.sb-group-chip {\n    width: 6px;\n    height: 6px;\n    background: var(--prism-text-ghost);\n    border-radius: 2px;\n}\n\n.sb-group-count {\n    margin-left: auto;\n    font-family: var(--font-mono);\n    font-size: 10px;\n    font-weight: 500;\n    color: var(--prism-text-ghost);\n}\n\n.sb-group-count--warn {\n    color: var(--prism-mark-attention);\n}\n\n.sb-group-count--danger {\n    color: var(--prism-mark-critical);\n}\n\n.sb-item {\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    width: 100%;\n    height: 30px;\n    padding: 0 14px 0 28px;\n    font-family: var(--font-sans);\n    font-size: 13px;\n    color: var(--prism-text-2);\n    text-align: left;\n    cursor: pointer;\n    background: none;\n    border: none;\n    transition:\n        background var(--dur-fast),\n        color var(--dur-fast);\n}\n\n.sb-item:hover {\n    color: var(--prism-text);\n    background: color-mix(in srgb, var(--prism-primary) 5%, transparent);\n}\n\n.sb-item--active {\n    font-weight: 500;\n    background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n}\n\n.sb-item-icon {\n    flex: 0 0 12px;\n    opacity: 0.7;\n}\n\n.sb-item-name {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\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.\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    display: flex;\n    flex: none;\n    gap: var(--sp-1);\n    align-items: center;\n    justify-content: flex-end;\n    width: 40px;\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 {\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: 2;\n}\n\n.sb-health--warn {\n    color: color-mix(in srgb, var(--prism-mark-attention) 80%, transparent);\n}\n\n.sb-health--danger {\n    color: var(--prism-mark-critical);\n}\n\n.sb-item--deprecated .sb-item-name {\n    color: var(--prism-text-ghost);\n    text-decoration: line-through;\n    text-decoration-thickness: 1px;\n    opacity: 0.7;\n}\n\n:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 2px;\n}\n"] }]
+        args: [{ selector: 'prism-sidebar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent, PrismBadgeComponent], template: "<nav class=\"prism-sidebar\">\n    <div class=\"sb-filter\">\n        <prism-icon\n            name=\"search\"\n            [size]=\"12\" />\n        <input\n            #filterInput\n            placeholder=\"Filter\u2026\"\n            [value]=\"searchService.query()\"\n            (input)=\"searchService.search($any($event.target).value)\" />\n        <kbd>/</kbd>\n    </div>\n\n    <div class=\"sb-scroll\">\n        @if (pageCategories().length > 0) {\n            <div class=\"sb-pinned\">\n                <div class=\"sb-section-head sb-section-head--first\">\n                    <span class=\"sb-section-head-l\">\n                        <prism-icon\n                            name=\"pin\"\n                            [size]=\"10\"\n                            class=\"sb-section-icon sb-section-icon--muted\" />\n                        Pages\n                    </span>\n                    <span>{{ totalPages() }}</span>\n                </div>\n                @for (cat of pageCategories(); track cat.name) {\n                    <div\n                        class=\"sb-group\"\n                        [class.sb-group--collapsed]=\"isCollapsed('page:' + cat.name)\">\n                        <button\n                            class=\"sb-group-head\"\n                            (click)=\"toggleCollapse('page:' + cat.name)\"\n                            [attr.aria-expanded]=\"!isCollapsed('page:' + cat.name)\">\n                            <prism-icon\n                                name=\"chevron-down\"\n                                [size]=\"10\" />\n                            <span class=\"sb-group-chip\"></span>\n                            {{ cat.name }}\n                        </button>\n                        @if (!isCollapsed('page:' + cat.name)) {\n                            <div class=\"sb-group-body\">\n                                @for (item of cat.items; track itemKey(item)) {\n                                    <button\n                                        class=\"sb-item\"\n                                        [class.sb-item--active]=\"isActive(item)\"\n                                        (click)=\"onSelect(item)\">\n                                        <prism-icon\n                                            name=\"file-text\"\n                                            [size]=\"12\"\n                                            class=\"sb-item-icon\" />\n                                        <span class=\"sb-item-name\">{{ itemLabel(item) }}</span>\n                                    </button>\n                                }\n                            </div>\n                        }\n                    </div>\n                }\n            </div>\n        }\n        @for (section of componentSections(); track section.name) {\n            <div class=\"sb-section-head\">\n                <span class=\"sb-section-head-l\">\n                    <prism-icon\n                        [name]=\"section.icon\"\n                        [size]=\"11\"\n                        class=\"sb-section-icon\"\n                        [attr.data-facet]=\"facet(section.name)\" />\n                    {{ section.name }}\n                </span>\n                <span>{{ section.totalCount }}</span>\n            </div>\n            @for (cat of section.categories; track cat.name) {\n                <div\n                    class=\"sb-group\"\n                    [class.sb-group--collapsed]=\"isCollapsed('sec:' + section.name + ':' + cat.name)\">\n                    <button\n                        class=\"sb-group-head\"\n                        (click)=\"toggleCollapse('sec:' + section.name + ':' + cat.name)\"\n                        [attr.aria-expanded]=\"!isCollapsed('sec:' + section.name + ':' + cat.name)\">\n                        <prism-icon\n                            name=\"chevron-down\"\n                            [size]=\"10\" />\n                        <span class=\"sb-group-chip\"></span>\n                        {{ cat.name }}\n                        @let count = countOf(cat.rollup, cat.items.length);\n                        <span\n                            class=\"sb-group-count\"\n                            [attr.title]=\"count.title\"\n                            [attr.aria-label]=\"count.title\">\n                            {{ count.total }}\n                            @if (count.chip; as chip) {\n                                <prism-badge\n                                    size=\"sm\"\n                                    dot\n                                    [tone]=\"chip.tone\"\n                                    [value]=\"chip.text\"\n                                    aria-hidden=\"true\" />\n                            }\n                        </span>\n                    </button>\n                    @if (!isCollapsed('sec:' + section.name + ':' + cat.name)) {\n                        <div class=\"sb-group-body\">\n                            @for (row of cat.items; track itemKey(row.item)) {\n                                <button\n                                    class=\"sb-item\"\n                                    [class.sb-item--active]=\"isActive(row.item)\"\n                                    [class.sb-item--deprecated]=\"itemStatus(row.item) === 'deprecated'\"\n                                    [attr.title]=\"itemTooltip(row.item, row.decorations)\"\n                                    (click)=\"onSelect(row.item)\">\n                                    <prism-icon\n                                        [name]=\"row.icon\"\n                                        [size]=\"12\"\n                                        class=\"sb-item-icon\" />\n                                    <span class=\"sb-item-name\">{{ itemLabel(row.item) }}</span>\n                                    <span class=\"sb-item-health\">\n                                        @for (mark of row.decorations?.marks ?? []; track mark.id) {\n                                            <prism-icon\n                                                [name]=\"mark.icon\"\n                                                [size]=\"11\"\n                                                role=\"img\"\n                                                [attr.aria-label]=\"mark.label\"\n                                                [class]=\"'sb-health sb-health--' + mark.variant\" />\n                                        }\n                                    </span>\n                                </button>\n                            }\n                        </div>\n                    }\n                </div>\n            }\n        }\n    </div>\n</nav>\n", styles: [".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    gap: 8px;\n    align-items: center;\n    height: 30px;\n    padding: 0 10px;\n    margin: 12px;\n    color: var(--prism-text-muted);\n    background: var(--prism-input-bg);\n    border: 1px solid var(--prism-border);\n    border-radius: 6px;\n}\n\n.sb-filter input {\n    flex: 1;\n    min-width: 0;\n    font-family: var(--font-sans);\n    font-size: var(--fs-md);\n    color: var(--prism-text);\n    outline: none;\n    background: transparent;\n    border: 0;\n}\n\n.sb-filter input::placeholder {\n    color: var(--prism-text-muted);\n}\n\n.sb-filter kbd {\n    padding: 1px 5px;\n    font-family: var(--font-mono);\n    font-size: 10px;\n    color: var(--prism-text-muted);\n    border: 1px solid var(--prism-border);\n    border-radius: 3px;\n}\n\n.sb-scroll {\n    flex: 1;\n    padding: 0 0 16px;\n    margin-right: 6px;\n    overflow-y: auto;\n    scrollbar-color: var(--prism-border-strong) transparent;\n    scrollbar-width: thin;\n}\n\n.sb-scroll::-webkit-scrollbar {\n    width: 8px;\n}\n\n.sb-scroll::-webkit-scrollbar-thumb {\n    background: var(--prism-border-strong);\n    border-radius: 4px;\n}\n\n.sb-scroll::-webkit-scrollbar-track {\n    background: transparent;\n}\n\n.sb-pinned {\n    padding: 0 0 6px;\n}\n\n.sb-section-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 14px 6px;\n    margin-top: 6px;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--prism-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.07em;\n    border-top: 1px solid var(--prism-border);\n}\n\n.sb-section-head-l {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n}\n\n.sb-section-icon {\n    color: var(--prism-primary);\n}\n\n.sb-group {\n    margin-bottom: 4px;\n}\n\n.sb-group-head {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    width: 100%;\n    padding: 6px 14px 4px;\n    font-family: var(--font-sans);\n    font-size: 12.5px;\n    font-weight: 500;\n    color: var(--prism-text-2);\n    text-align: left;\n    cursor: pointer;\n    user-select: none;\n    background: none;\n    border: none;\n}\n\n.sb-group-head > prism-icon {\n    color: var(--prism-text-muted);\n    transition: transform var(--dur-fast);\n}\n\n.sb-group--collapsed .sb-group-head > prism-icon {\n    transform: rotate(-90deg);\n}\n\n.sb-group-chip {\n    width: 6px;\n    height: 6px;\n    background: var(--prism-text-ghost);\n    border-radius: 2px;\n}\n\n.sb-group-count {\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    margin-left: auto;\n    font-family: var(--font-mono);\n    font-size: 10.5px;\n    font-weight: 500;\n    color: var(--prism-text-muted);\n}\n\n.sb-item {\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    width: 100%;\n    height: 30px;\n    padding: 0 14px 0 28px;\n    font-family: var(--font-sans);\n    font-size: 13px;\n    color: var(--prism-text-2);\n    text-align: left;\n    cursor: pointer;\n    background: none;\n    border: none;\n    transition:\n        background var(--dur-fast),\n        color var(--dur-fast);\n}\n\n.sb-item:hover {\n    color: var(--prism-text);\n    background: color-mix(in srgb, var(--prism-primary) 5%, transparent);\n}\n\n.sb-item--active {\n    position: relative;\n    font-weight: 500;\n    color: var(--prism-text);\n    background: var(--prism-primary-bg);\n}\n\n.sb-item-icon {\n    flex: 0 0 12px;\n    color: var(--prism-text-muted);\n}\n\n.sb-item--active .sb-item-icon {\n    color: var(--prism-primary);\n}\n\n.sb-item-name {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\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.\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    display: flex;\n    flex: none;\n    gap: var(--sp-1);\n    align-items: center;\n    justify-content: flex-end;\n    width: 40px;\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 {\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: 2;\n}\n\n.sb-health--warn {\n    color: var(--prism-warn);\n}\n\n.sb-health--danger {\n    color: var(--prism-danger);\n}\n\n.sb-item--deprecated .sb-item-name {\n    color: var(--prism-text-muted);\n    text-decoration: line-through;\n    text-decoration-thickness: 1px;\n}\n\n:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 2px;\n}\n\n/* The first section sits right under the filter and needs no rule above it. */\n.sb-section-head--first {\n    margin-top: 0;\n    border-top: 0;\n}\n\n.sb-section-icon--muted {\n    color: var(--prism-text-muted);\n}\n\n/* Section icons in the logo's facet colours. */\n.sb-section-icon[data-facet='cyan'] {\n    color: var(--prism-facet-cyan);\n}\n\n.sb-section-icon[data-facet='blue'] {\n    color: var(--prism-facet-blue);\n}\n\n.sb-section-icon[data-facet='violet'] {\n    color: var(--prism-facet-violet);\n}\n\n.sb-section-icon[data-facet='magenta'] {\n    color: var(--prism-facet-magenta);\n}\n\n/* The active entry carries a short ray of the brand light on its inner edge.\n   The ink is a horizontal gradient, so the ray is drawn lying down and turned\n   upright: cyan at the top, magenta at the bottom. */\n.sb-item--active::before {\n    position: absolute;\n    top: 50%;\n    left: 4px;\n    width: 16px;\n    height: 3px;\n    margin-top: -1.5px;\n    content: '';\n    background: var(--prism-brand-ink);\n    border-radius: 2px;\n    transform: rotate(90deg);\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: 48 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismSidebarComponent, { className: "PrismSidebarComponent", filePath: "app/sidebar/prism-sidebar.component.ts", lineNumber: 75 }); })();

package/dist/app/theme/deprecated-tokens.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Theme tokens deprecated since 22.7.0 and removed in 23.0.0, with what
+ * replaces each. A `carried` token's override still reaches its successor until
+ * then; the others are no longer read by anything.
+ *
+ * Framework-free: the theme resolver warns in the browser and the builder
+ * reports the same overrides at build time.
+ */
+export declare const DEPRECATED_THEME_TOKENS: Readonly<Record<string, {
+    successor: string;
+    carried: boolean;
+}>>;
+/** What to tell a user who overrides a deprecated token. */
+export declare function deprecatedTokenNotice(token: string): string;
+//# sourceMappingURL=deprecated-tokens.d.ts.map

package/dist/app/theme/deprecated-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deprecated-tokens.d.ts","sourceRoot":"","sources":["../../../src/app/theme/deprecated-tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,uBAAuB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,CAOrG,CAAC;AAEF,4DAA4D;AAC5D,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAK3D"}

package/dist/app/theme/deprecated-tokens.js

@@ -0,0 +1,22 @@
+/**
+ * Theme tokens deprecated since 22.7.0 and removed in 23.0.0, with what
+ * replaces each. A `carried` token's override still reaches its successor until
+ * then; the others are no longer read by anything.
+ *
+ * Framework-free: the theme resolver warns in the browser and the builder
+ * reports the same overrides at build time.
+ */
+export const DEPRECATED_THEME_TOKENS = {
+    '--prism-mark-nominal': { successor: '--prism-success', carried: true },
+    '--prism-mark-attention': { successor: '--prism-warn', carried: true },
+    '--prism-mark-critical': { successor: '--prism-danger', carried: true },
+    '--prism-spectrum': { successor: '--prism-brand-gradient', carried: false },
+    '--prism-primary-from': { successor: '--prism-brand-gradient', carried: false },
+    '--prism-primary-to': { successor: '--prism-brand-gradient', carried: false }
+};
+/** What to tell a user who overrides a deprecated token. */
+export function deprecatedTokenNotice(token) {
+    const { successor, carried } = DEPRECATED_THEME_TOKENS[token];
+    const effect = carried ? `Until then its value is carried over to ${successor}` : 'Nothing reads it any more';
+    return `${token} is deprecated since 22.7.0 and will be removed in 23.0.0. ${effect}; override ${successor} instead.`;
+}

package/dist/app/theme/favicon.d.ts

@@ -0,0 +1,3 @@
+/** The brand mark as the styleguide's favicon, set at runtime by `PrismThemeService`. */
+export declare const FAVICON_SVG_DATA_URI: string;
+//# sourceMappingURL=favicon.d.ts.map

package/dist/app/theme/favicon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"favicon.d.ts","sourceRoot":"","sources":["../../../src/app/theme/favicon.ts"],"names":[],"mappings":"AAEA,yFAAyF;AACzF,eAAO,MAAM,oBAAoB,QAA8F,CAAC"}

package/dist/app/theme/favicon.js

@@ -0,0 +1,3 @@
+import { BRAND_MARK_SQUARE_VIEWBOX, brandMarkSvg } from '../shared/brand-mark.js';
+/** The brand mark as the styleguide's favicon, set at runtime by `PrismThemeService`. */
+export const FAVICON_SVG_DATA_URI = `data:image/svg+xml,${encodeURIComponent(brandMarkSvg('fav-', BRAND_MARK_SQUARE_VIEWBOX))}`;

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,CAyCnD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAyCpD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA2DpD,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":"AAsBA,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA4DnD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAiEpD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA2DpD,CAAC;AAEF,eAAO,MAAM,mBAAmB,wBAAmB,CAAC"}