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

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

@@ -7,6 +7,7 @@ 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); }
@@ -53,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("--%NS%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);
@@ -68,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();
@@ -79,44 +78,36 @@ function PrismSidebarComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.pageCategories());
 } }
-function PrismSidebarComponent_For_10_For_7_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 24);
-    i0.ɵɵtext(1);
-    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;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("sb-group-rollup--warn", cat_r7.rollup.variant === "warn")("sb-group-rollup--danger", cat_r7.rollup.variant === "danger");
-    i0.ɵɵattribute("title", ctx_r2.rollupTooltip(cat_r7.rollup))("aria-label", ctx_r2.rollupTooltip(cat_r7.rollup));
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(cat_r7.rollup.problems);
+    i0.ɵɵtextInterpolate2(" ", cat_r7.rollup.problems, "/", cat_r7.items.length, " ");
 } }
-function PrismSidebarComponent_For_10_For_7_Conditional_8_For_2_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-icon", 29);
+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_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_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 27);
-    i0.ɵɵrepeaterCreate(1, PrismSidebarComponent_For_10_For_7_Conditional_8_For_2_Conditional_4_For_2_Template, 1, 4, "prism-icon", 28, _forTrack3);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const row_r10 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(row_r10.decorations.marks);
-} }
 function PrismSidebarComponent_For_10_For_7_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 17);
     i0.ɵɵlistener("click", function PrismSidebarComponent_For_10_For_7_Conditional_8_For_2_Template_button_click_0_listener() { const row_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onSelect(row_r10.item)); });
-    i0.ɵɵelement(1, "prism-icon", 26);
+    i0.ɵɵelement(1, "prism-icon", 24);
     i0.ɵɵelementStart(2, "span", 18);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, PrismSidebarComponent_For_10_For_7_Conditional_8_For_2_Conditional_4_Template, 3, 0, "span", 27);
-    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 row_r10 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(4);
@@ -126,12 +117,12 @@ function PrismSidebarComponent_For_10_For_7_Conditional_8_For_2_Template(rf, ctx
     i0.ɵɵproperty("name", row_r10.icon)("size", 12);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r2.itemLabel(row_r10.item));
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(row_r10.decorations ? 4 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(row_r10.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, 5, 9, "button", 25, _forTrack2, 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;
@@ -144,9 +135,8 @@ function PrismSidebarComponent_For_10_For_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵlistener("click", function PrismSidebarComponent_For_10_For_7_Template_button_click_1_listener() { const cat_r7 = i0.ɵɵrestoreView(_r6).$implicit; const section_r8 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleCollapse("sec:" + section_r8.name + ":" + cat_r7.name)); });
     i0.ɵɵelement(2, "prism-icon", 13)(3, "span", 14);
     i0.ɵɵtext(4);
-    i0.ɵɵconditionalCreate(5, PrismSidebarComponent_For_10_For_7_Conditional_5_Template, 2, 7, "span", 22);
-    i0.ɵɵelementStart(6, "span", 23);
-    i0.ɵɵtext(7);
+    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.ɵɵelementEnd()();
     i0.ɵɵconditionalCreate(8, PrismSidebarComponent_For_10_For_7_Conditional_8_Template, 3, 0, "div", 15);
     i0.ɵɵelementEnd();
@@ -159,15 +149,14 @@ 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();
-    i0.ɵɵstyleProp("--%NS%chip", cat_r7.color);
-    i0.ɵɵadvance();
+    i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", cat_r7.name, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(cat_r7.rollup.problems ? 5 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(cat_r7.items.length);
+    i0.ɵɵ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.ɵɵ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) {
@@ -178,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, 9, 10, "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);
@@ -191,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',
@@ -208,15 +188,6 @@ 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);
@@ -253,7 +224,6 @@ export class PrismSidebarComponent {
         }
         return [...catMap.entries()].map(([name, items]) => ({
             name,
-            color: categoryColor(name),
             items,
         }));
     }, /* @ts-ignore */
@@ -263,7 +233,6 @@ export class PrismSidebarComponent {
         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) => {
                 const items = cat.items.map((item) => ({
@@ -273,7 +242,6 @@ export class PrismSidebarComponent {
                 }));
                 return {
                     name: cat.name,
-                    color: categoryColor(cat.name),
                     rollup: rollupCategory(items.map((row) => row.decorations)),
                     items,
                 };
@@ -311,10 +279,17 @@ export class PrismSidebarComponent {
             : undefined;
     }
     /**
-     * Accessible name for the roll-up pill. The pill otherwise renders a bare
-     * number distinguished only by colour — a screen reader would read the
-     * group head as "Feedback 3 12" with nothing naming what either number
-     * means, and a colour-blind reader can't tell them apart at all.
+     * 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';
@@ -370,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-rollup", 3, "sb-group-rollup--warn", "sb-group-rollup--danger"], [1, "sb-group-count"], [1, "sb-group-rollup"], [1, "sb-item", 3, "sb-item--active", "sb-item--deprecated"], [1, "sb-item-icon", 3, "name", "size"], [1, "sb-item-health"], [3, "name", "size", "class"], [3, "name", "size"]], template: function PrismSidebarComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, 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);
@@ -392,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(--%NS%prism-input-bg);\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: 6px;\n      color: var(--%NS%prism-text-muted);\n    }\n    .sb-filter[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      background: transparent;\n      border: 0;\n      outline: none;\n      font-size: var(--%NS%fs-md);\n      color: var(--%NS%prism-text);\n      font-family: var(--%NS%font-sans);\n    }\n    .sb-filter[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder { color: var(--%NS%prism-text-muted); }\n    .sb-filter[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: 10px;\n      color: var(--%NS%prism-text-ghost);\n      padding: 1px 5px;\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: 3px;\n    }\n\n    .sb-scroll[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow-y: auto;\n      padding: 10px 0 16px;\n      padding-top: 0;\n    }\n    .sb-scroll[_ngcontent-%COMP%]::-webkit-scrollbar { width: 8px; }\n    .sb-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-thumb { background: var(--%NS%prism-border-strong); border-radius: 4px; }\n    .sb-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-track { background: transparent; }\n\n    .sb-pinned[_ngcontent-%COMP%] {\n      padding: 0 0 10px;\n      margin-bottom: 4px;\n      border-bottom: 1px solid var(--%NS%prism-border);\n      border-top: 1px solid var(--%NS%prism-border);\n    }\n    .sb-section-head[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 14px 6px;\n      font-size: 10.5px;\n      font-weight: 700;\n      letter-spacing: 0.09em;\n      text-transform: uppercase;\n      color: var(--%NS%prism-text-ghost);\n      margin-top: 6px;\n    }\n    .sb-section-head-l[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 6px; }\n    .sb-section-icon[_ngcontent-%COMP%] { color: var(--%NS%prism-primary); }\n    .sb-pinned-head[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 14px 6px;\n      margin-top: 6px;\n      font-size: 10.5px;\n      font-weight: 700;\n      letter-spacing: 0.09em;\n      text-transform: uppercase;\n      color: var(--%NS%prism-text-ghost);\n    }\n    .sb-pinned-head-l[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 6px; }\n    .sb-pinned-pin[_ngcontent-%COMP%] { color: var(--%NS%prism-accent); }\n\n    .sb-group[_ngcontent-%COMP%] { margin-bottom: 4px; }\n    .sb-group-head[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      padding: 8px 14px 6px;\n      font-size: 10.5px;\n      font-weight: 700;\n      letter-spacing: 0.09em;\n      text-transform: uppercase;\n      color: var(--%NS%prism-text-ghost);\n      cursor: pointer;\n      user-select: none;\n      background: none;\n      border: none;\n      text-align: left;\n      font-family: var(--%NS%font-sans);\n    }\n    .sb-group-head[_ngcontent-%COMP%]   prism-icon[_ngcontent-%COMP%] {\n      transition: transform var(--%NS%dur-fast);\n      color: var(--%NS%prism-text-ghost);\n    }\n    .sb-group--collapsed[_ngcontent-%COMP%]   .sb-group-head[_ngcontent-%COMP%]   prism-icon[_ngcontent-%COMP%] { transform: rotate(-90deg); }\n\n    .sb-group-chip[_ngcontent-%COMP%] {\n      width: 6px;\n      height: 6px;\n      border-radius: 2px;\n      background: var(--%NS%chip, var(--%NS%prism-primary));\n      box-shadow: 0 0 6px var(--%NS%chip, var(--%NS%prism-primary));\n    }\n    .sb-group-count[_ngcontent-%COMP%] {\n      margin-left: auto;\n      font-family: var(--%NS%font-mono);\n      font-size: 10px;\n      color: var(--%NS%prism-text-ghost);\n      font-weight: 500;\n    }\n\n    .sb-group-rollup[_ngcontent-%COMP%] {\n      margin-left: auto;\n      font-family: var(--%NS%font-mono);\n      font-size: 9.5px;\n      font-weight: 600;\n      letter-spacing: 0;\n      padding: 1px 5px;\n      border-radius: 8px;\n    }\n    .sb-group-rollup--warn[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-warn);\n      background: color-mix(in srgb, var(--%NS%prism-warn) 16%, transparent);\n    }\n    .sb-group-rollup--danger[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-danger);\n      background: color-mix(in srgb, var(--%NS%prism-danger) 16%, transparent);\n    }\n    .sb-group-rollup[_ngcontent-%COMP%]    + .sb-group-count[_ngcontent-%COMP%] {\n      margin-left: 6px;\n    }\n\n    .sb-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n      height: 30px;\n      padding: 0 14px 0 28px;\n      font-size: 13px;\n      color: var(--%NS%prism-text-2);\n      cursor: pointer;\n      border: none;\n      border-left: 2px solid transparent;\n      background: none;\n      position: relative;\n      transition: background var(--%NS%dur-fast), color var(--%NS%dur-fast);\n      text-align: left;\n      font-family: var(--%NS%font-sans);\n    }\n    .sb-item[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--%NS%prism-primary) 5%, transparent);\n      color: var(--%NS%prism-text);\n    }\n    .sb-item--active[_ngcontent-%COMP%] {\n      border-left-color: var(--%NS%prism-primary);\n      background: color-mix(in srgb, var(--%NS%prism-primary) 12%, transparent);\n      color: var(--%NS%prism-text);\n      font-weight: 500;\n    }\n    .sb-item--%NS%active[_ngcontent-%COMP%]::before {\n      content: '';\n      position: absolute;\n      left: -1px;\n      top: 0;\n      bottom: 0;\n      width: 3px;\n      background: linear-gradient(180deg, var(--%NS%prism-primary-from), var(--%NS%prism-primary-to));\n    }\n    .sb-item-icon[_ngcontent-%COMP%] { flex: 0 0 12px; opacity: 0.7; }\n    .sb-item-name[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .sb-item-health[_ngcontent-%COMP%] {\n      flex: 0 0 auto;\n      margin-left: auto;\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n    .sb-health--warn[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-warn);\n    }\n    .sb-health--danger[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-danger);\n    }\n\n    .sb-item--deprecated[_ngcontent-%COMP%]   .sb-item-name[_ngcontent-%COMP%] {\n      text-decoration: line-through;\n      text-decoration-thickness: 1px;\n      color: var(--%NS%prism-text-ghost);\n      opacity: 0.7;\n    }\n\n\n    [_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--%NS%prism-primary);\n      outline-offset: 2px;\n    }"] });
+        } }, 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,
@@ -430,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)) {
@@ -476,19 +451,24 @@ 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 }}
-            @if (cat.rollup.problems) {
             <span
-              class="sb-group-rollup"
-              [class.sb-group-rollup--warn]="cat.rollup.variant === 'warn'"
-              [class.sb-group-rollup--danger]="cat.rollup.variant === 'danger'"
-              [attr.title]="rollupTooltip(cat.rollup)"
-              [attr.aria-label]="rollupTooltip(cat.rollup)"
-              >{{ cat.rollup.problems }}</span
+              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
+              "
             >
-            }
-            <span class="sb-group-count">{{ cat.items.length }}</span>
+              @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">
@@ -504,9 +484,8 @@ export class PrismSidebarComponent {
             >
               <prism-icon [name]="row.icon" [size]="12" class="sb-item-icon" />
               <span class="sb-item-name">{{ itemLabel(row.item) }}</span>
-              @if (row.decorations) {
               <span class="sb-item-health">
-                @for (mark of row.decorations.marks; track mark.id) {
+                @for (mark of row.decorations?.marks ?? []; track mark.id) {
                 <prism-icon
                   [name]="mark.icon"
                   [size]="11"
@@ -514,7 +493,6 @@ export class PrismSidebarComponent {
                 />
                 }
               </span>
-              }
             </button>
             }
           </div>
@@ -523,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-group-rollup {\n      margin-left: auto;\n      font-family: var(--font-mono);\n      font-size: 9.5px;\n      font-weight: 600;\n      letter-spacing: 0;\n      padding: 1px 5px;\n      border-radius: 8px;\n    }\n    .sb-group-rollup--warn {\n      color: var(--prism-warn);\n      background: color-mix(in srgb, var(--prism-warn) 16%, transparent);\n    }\n    .sb-group-rollup--danger {\n      color: var(--prism-danger);\n      background: color-mix(in srgb, var(--prism-danger) 16%, transparent);\n    }\n    .sb-group-rollup + .sb-group-count {\n      margin-left: 6px;\n    }\n\n    .sb-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n      height: 30px;\n      padding: 0 14px 0 28px;\n      font-size: 13px;\n      color: var(--prism-text-2);\n      cursor: pointer;\n      border: none;\n      border-left: 2px solid transparent;\n      background: none;\n      position: relative;\n      transition: background var(--dur-fast), color var(--dur-fast);\n      text-align: left;\n      font-family: var(--font-sans);\n    }\n    .sb-item:hover {\n      background: color-mix(in srgb, var(--prism-primary) 5%, transparent);\n      color: var(--prism-text);\n    }\n    .sb-item--active {\n      border-left-color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      color: var(--prism-text);\n      font-weight: 500;\n    }\n    .sb-item--active::before {\n      content: '';\n      position: absolute;\n      left: -1px;\n      top: 0;\n      bottom: 0;\n      width: 3px;\n      background: linear-gradient(180deg, var(--prism-primary-from), var(--prism-primary-to));\n    }\n    .sb-item-icon { flex: 0 0 12px; opacity: 0.7; }\n    .sb-item-name {\n      flex: 1;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .sb-item-health {\n      flex: 0 0 auto;\n      margin-left: auto;\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n    .sb-health--warn {\n      color: var(--prism-warn);\n    }\n    .sb-health--danger {\n      color: var(--prism-danger);\n    }\n\n    .sb-item--deprecated .sb-item-name {\n      text-decoration: line-through;\n      text-decoration-thickness: 1px;\n      color: var(--prism-text-ghost);\n      opacity: 0.7;\n    }\n\n\n    :focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 2px;\n    }\n  "] }]
+  `, 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: 431 }); })();
+(() => { (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"}

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

@@ -2,6 +2,7 @@ import { Component, inject, computed, effect, viewChild, viewChildren, ChangeDet
 import { PrismIconComponent } from '../icons/prism-icon.component.js';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import { PrismRendererService } from '../services/prism-renderer.service.js';
+import { spectrumSlot } from './spectrum.js';
 import * as i0 from "@angular/core";
 const _c0 = ["tabsContainer"];
 const _c1 = ["tabButton"];
@@ -10,22 +11,21 @@ function PrismVariantRibbonComponent_Conditional_0_For_4_Template(rf, ctx) { if
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 10, 1);
     i0.ɵɵlistener("click", function PrismVariantRibbonComponent_Conditional_0_For_4_Template_button_click_0_listener() { const ɵ$index_6_r3 = i0.ɵɵrestoreView(_r2).$index; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.rendererService.selectVariant(ɵ$index_6_r3)); });
-    i0.ɵɵelement(2, "span", 11);
-    i0.ɵɵtext(3);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const v_r5 = ctx.$implicit;
     const ɵ$index_6_r3 = ctx.$index;
     const ctx_r3 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleProp("--%NS%vc", ctx_r3.variantColor(v_r5.name, ɵ$index_6_r3));
+    i0.ɵɵstyleProp("--%NS%i", ctx_r3.slot(ɵ$index_6_r3).i)("--%NS%n", ctx_r3.slot(ɵ$index_6_r3).n);
     i0.ɵɵclassProp("v-tab--active", ctx_r3.rendererService.activeVariantIndex() === ɵ$index_6_r3);
-    i0.ɵɵadvance(3);
+    i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", v_r5.name, " ");
 } }
 function PrismVariantRibbonComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "nav", 2)(1, "div", 3, 0);
-    i0.ɵɵrepeaterCreate(3, PrismVariantRibbonComponent_Conditional_0_For_4_Template, 4, 5, "button", 4, _forTrack0);
+    i0.ɵɵrepeaterCreate(3, PrismVariantRibbonComponent_Conditional_0_For_4_Template, 3, 7, "button", 4, _forTrack0);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "div", 5)(6, "button", 6);
     i0.ɵɵlistener("click", function PrismVariantRibbonComponent_Conditional_0_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r1); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.prev()); });
@@ -48,19 +48,6 @@ function PrismVariantRibbonComponent_Conditional_0_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵproperty("size", 14);
 } }
-function variantColor(name, index) {
-    const palette = [
-        '#a78bfa',
-        '#60a5fa',
-        '#34d399',
-        '#fbbf24',
-        '#f472b6',
-        '#8476a2',
-        '#ec4899',
-        '#06b6d4',
-    ];
-    return palette[index % palette.length];
-}
 export class PrismVariantRibbonComponent {
     navigationService = inject(PrismNavigationService);
     rendererService = inject(PrismRendererService);
@@ -92,8 +79,8 @@ export class PrismVariantRibbonComponent {
             }
         });
     }
-    variantColor(name, index) {
-        return variantColor(name, index);
+    slot(index) {
+        return spectrumSlot(index, this.variants().length);
     }
     prev() {
         const idx = this.rendererService.activeVariantIndex();
@@ -110,11 +97,11 @@ export class PrismVariantRibbonComponent {
             i0.ɵɵviewQuerySignal(ctx.tabsContainer, _c0, 5)(ctx.tabButtons, _c1, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance(2);
-        } }, decls: 1, vars: 1, consts: [["tabsContainer", ""], ["tabButton", ""], [1, "variant-ribbon"], [1, "variant-ribbon-tabs"], [1, "v-tab", 3, "v-tab--active", "--%NS%vc"], [1, "variant-ribbon-right"], ["title", "Previous variant", "aria-label", "Previous variant", 1, "tool-btn", 3, "click", "disabled"], ["name", "chevron-right", 2, "transform", "rotate(180deg)", 3, "size"], ["title", "Next variant", "aria-label", "Next variant", 1, "tool-btn", 3, "click", "disabled"], ["name", "chevron-right", 3, "size"], [1, "v-tab", 3, "click"], [1, "v-dot"]], template: function PrismVariantRibbonComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, decls: 1, vars: 1, consts: [["tabsContainer", ""], ["tabButton", ""], [1, "variant-ribbon"], [1, "variant-ribbon-tabs"], [1, "v-tab", 3, "v-tab--active", "--%NS%i", "--%NS%n"], [1, "variant-ribbon-right"], ["title", "Previous variant", "aria-label", "Previous variant", 1, "tool-btn", 3, "click", "disabled"], ["name", "chevron-right", 2, "transform", "rotate(180deg)", 3, "size"], ["title", "Next variant", "aria-label", "Next variant", 1, "tool-btn", 3, "click", "disabled"], ["name", "chevron-right", 3, "size"], [1, "v-tab", 3, "click"]], template: function PrismVariantRibbonComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, PrismVariantRibbonComponent_Conditional_0_Template, 10, 4, "nav", 2);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.variants().length > 0 ? 0 : -1);
-        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] { display: block; flex-shrink: 0; }\n\n    .variant-ribbon[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      padding: 0 28px;\n      background: var(--%NS%prism-bg);\n      border-bottom: 1px solid var(--%NS%prism-border);\n      height: 42px;\n    }\n\n    .variant-ribbon-tabs[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      align-items: center;\n      gap: 2px;\n      height: 100%;\n      overflow-x: auto;\n      scrollbar-width: none;\n    }\n    .variant-ribbon-tabs[_ngcontent-%COMP%]::-webkit-scrollbar { display: none; }\n\n    .v-tab[_ngcontent-%COMP%] {\n      position: relative;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 0 14px;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--%NS%prism-text-muted);\n      white-space: nowrap;\n      transition: color var(--%NS%dur-fast);\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--%NS%font-sans);\n    }\n    .v-tab[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      left: 10px;\n      right: 10px;\n      bottom: 0;\n      height: 2px;\n      background: linear-gradient(90deg, var(--%NS%prism-primary-from), var(--%NS%prism-primary-to));\n      opacity: 0;\n      transition: opacity var(--%NS%dur-fast);\n      border-radius: 1px 1px 0 0;\n    }\n    .v-tab[_ngcontent-%COMP%]:hover { color: var(--%NS%prism-text-2); }\n    .v-tab--active[_ngcontent-%COMP%] { color: var(--%NS%prism-text); }\n    .v-tab--%NS%active[_ngcontent-%COMP%]::after { opacity: 1; }\n\n    .v-dot[_ngcontent-%COMP%] {\n      width: 6px;\n      height: 6px;\n      border-radius: 2px;\n      background: var(--%NS%vc, var(--%NS%prism-primary));\n      opacity: 0.6;\n    }\n    .v-tab--active[_ngcontent-%COMP%]   .v-dot[_ngcontent-%COMP%] {\n      opacity: 1;\n      box-shadow: 0 0 6px var(--%NS%vc);\n    }\n\n    .variant-ribbon-right[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding-left: 12px;\n      margin-left: 12px;\n      border-left: 1px solid var(--%NS%prism-border);\n      height: 24px;\n    }\n\n    .tool-btn[_ngcontent-%COMP%] {\n      height: 24px;\n      width: 24px;\n      display: grid;\n      place-items: center;\n      border-radius: var(--%NS%radius-sm);\n      color: var(--%NS%prism-text-muted);\n      background: none;\n      border: none;\n      cursor: pointer;\n      transition: all var(--%NS%dur-fast);\n    }\n    .tool-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n      color: var(--%NS%prism-text);\n      background: color-mix(in srgb, var(--%NS%prism-primary) 8%, transparent);\n    }\n    .tool-btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.3;\n      cursor: default;\n    }\n\n    [_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--%NS%prism-primary);\n      outline-offset: 2px;\n    }"] });
+        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] { display: block; flex-shrink: 0; }\n\n    .variant-ribbon[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      padding: 0 var(--%NS%sp-5);\n      background: var(--%NS%prism-bg);\n      border-bottom: 1px solid var(--%NS%prism-border);\n      height: var(--%NS%band-rail);\n    }\n\n    .variant-ribbon-tabs[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      align-items: center;\n      gap: 2px;\n      height: 100%;\n      overflow-x: auto;\n      scrollbar-width: none;\n    }\n    .variant-ribbon-tabs[_ngcontent-%COMP%]::-webkit-scrollbar { display: none; }\n\n    .v-tab[_ngcontent-%COMP%] {\n      position: relative;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 0 14px;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--%NS%prism-text-muted);\n      white-space: nowrap;\n      transition: color var(--%NS%dur-fast);\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--%NS%font-sans);\n    }\n    \n\n\n    .v-tab[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      left: var(--%NS%sp-3);\n      right: var(--%NS%sp-3);\n      bottom: 0;\n      height: 2px;\n      border-radius: 2px;\n      background: var(--%NS%prism-spectrum);\n      background-size: calc(var(--%NS%n) * 100%) 100%;\n      background-position: calc(var(--%NS%i) / (var(--%NS%n) - 1) * 100%) 0;\n      opacity: 0;\n      transition: opacity var(--%NS%dur-fast) var(--%NS%ease-default);\n    }\n    .v-tab[_ngcontent-%COMP%]:hover { color: var(--%NS%prism-text-2); }\n    .v-tab--active[_ngcontent-%COMP%] { color: var(--%NS%prism-text); }\n    .v-tab--%NS%active[_ngcontent-%COMP%]::after { opacity: 1; }\n    .v-tab[_ngcontent-%COMP%]:hover::after { opacity: 0.4; }\n\n    .variant-ribbon-right[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding-left: 12px;\n      margin-left: 12px;\n      border-left: 1px solid var(--%NS%prism-border);\n      height: 24px;\n    }\n\n    .tool-btn[_ngcontent-%COMP%] {\n      height: 24px;\n      width: 24px;\n      display: grid;\n      place-items: center;\n      border-radius: var(--%NS%radius-sm);\n      color: var(--%NS%prism-text-muted);\n      background: none;\n      border: none;\n      cursor: pointer;\n      transition: all var(--%NS%dur-fast);\n    }\n    .tool-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n      color: var(--%NS%prism-text);\n      background: color-mix(in srgb, var(--%NS%prism-primary) 8%, transparent);\n    }\n    .tool-btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.3;\n      cursor: default;\n    }\n\n    [_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--%NS%prism-primary);\n      outline-offset: 2px;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismVariantRibbonComponent, [{
         type: Component,
@@ -127,10 +114,10 @@ export class PrismVariantRibbonComponent {
           #tabButton
           class="v-tab"
           [class.v-tab--active]="rendererService.activeVariantIndex() === i"
-          [style.--vc]="variantColor(v.name, i)"
+          [style.--i]="slot(i).i"
+          [style.--n]="slot(i).n"
           (click)="rendererService.selectVariant(i)"
         >
-          <span class="v-dot"></span>
           {{ v.name }}
         </button>
         }
@@ -163,6 +150,6 @@ export class PrismVariantRibbonComponent {
       </div>
     </nav>
     }
-  `, styles: ["\n    :host { display: block; flex-shrink: 0; }\n\n    .variant-ribbon {\n      display: flex;\n      align-items: center;\n      padding: 0 28px;\n      background: var(--prism-bg);\n      border-bottom: 1px solid var(--prism-border);\n      height: 42px;\n    }\n\n    .variant-ribbon-tabs {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      align-items: center;\n      gap: 2px;\n      height: 100%;\n      overflow-x: auto;\n      scrollbar-width: none;\n    }\n    .variant-ribbon-tabs::-webkit-scrollbar { display: none; }\n\n    .v-tab {\n      position: relative;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 0 14px;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--prism-text-muted);\n      white-space: nowrap;\n      transition: color var(--dur-fast);\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--font-sans);\n    }\n    .v-tab::after {\n      content: '';\n      position: absolute;\n      left: 10px;\n      right: 10px;\n      bottom: 0;\n      height: 2px;\n      background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n      opacity: 0;\n      transition: opacity var(--dur-fast);\n      border-radius: 1px 1px 0 0;\n    }\n    .v-tab:hover { color: var(--prism-text-2); }\n    .v-tab--active { color: var(--prism-text); }\n    .v-tab--active::after { opacity: 1; }\n\n    .v-dot {\n      width: 6px;\n      height: 6px;\n      border-radius: 2px;\n      background: var(--vc, var(--prism-primary));\n      opacity: 0.6;\n    }\n    .v-tab--active .v-dot {\n      opacity: 1;\n      box-shadow: 0 0 6px var(--vc);\n    }\n\n    .variant-ribbon-right {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding-left: 12px;\n      margin-left: 12px;\n      border-left: 1px solid var(--prism-border);\n      height: 24px;\n    }\n\n    .tool-btn {\n      height: 24px;\n      width: 24px;\n      display: grid;\n      place-items: center;\n      border-radius: var(--radius-sm);\n      color: var(--prism-text-muted);\n      background: none;\n      border: none;\n      cursor: pointer;\n      transition: all var(--dur-fast);\n    }\n    .tool-btn:hover:not(:disabled) {\n      color: var(--prism-text);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    }\n    .tool-btn:disabled {\n      opacity: 0.3;\n      cursor: default;\n    }\n\n    :focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 2px;\n    }\n  "] }]
+  `, styles: ["\n    :host { display: block; flex-shrink: 0; }\n\n    .variant-ribbon {\n      display: flex;\n      align-items: center;\n      padding: 0 var(--sp-5);\n      background: var(--prism-bg);\n      border-bottom: 1px solid var(--prism-border);\n      height: var(--band-rail);\n    }\n\n    .variant-ribbon-tabs {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      align-items: center;\n      gap: 2px;\n      height: 100%;\n      overflow-x: auto;\n      scrollbar-width: none;\n    }\n    .variant-ribbon-tabs::-webkit-scrollbar { display: none; }\n\n    .v-tab {\n      position: relative;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 0 14px;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--prism-text-muted);\n      white-space: nowrap;\n      transition: color var(--dur-fast);\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--font-sans);\n    }\n    /* Colour as position, not assignment: each tab shows the slice of one\n       broken spectrum that corresponds to where it sits in the sequence. Nine\n       arbitrary hues used to say nothing at all; this says \"you are here\". */\n    .v-tab::after {\n      content: '';\n      position: absolute;\n      left: var(--sp-3);\n      right: var(--sp-3);\n      bottom: 0;\n      height: 2px;\n      border-radius: 2px;\n      background: var(--prism-spectrum);\n      background-size: calc(var(--n) * 100%) 100%;\n      background-position: calc(var(--i) / (var(--n) - 1) * 100%) 0;\n      opacity: 0;\n      transition: opacity var(--dur-fast) var(--ease-default);\n    }\n    .v-tab:hover { color: var(--prism-text-2); }\n    .v-tab--active { color: var(--prism-text); }\n    .v-tab--active::after { opacity: 1; }\n    .v-tab:hover::after { opacity: 0.4; }\n\n    .variant-ribbon-right {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding-left: 12px;\n      margin-left: 12px;\n      border-left: 1px solid var(--prism-border);\n      height: 24px;\n    }\n\n    .tool-btn {\n      height: 24px;\n      width: 24px;\n      display: grid;\n      place-items: center;\n      border-radius: var(--radius-sm);\n      color: var(--prism-text-muted);\n      background: none;\n      border: none;\n      cursor: pointer;\n      transition: all var(--dur-fast);\n    }\n    .tool-btn:hover:not(:disabled) {\n      color: var(--prism-text);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    }\n    .tool-btn:disabled {\n      opacity: 0.3;\n      cursor: default;\n    }\n\n    :focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 2px;\n    }\n  "] }]
     }], () => [], { tabsContainer: [{ type: i0.ViewChild, args: ['tabsContainer', { isSignal: true }] }], tabButtons: [{ type: i0.ViewChildren, args: ['tabButton', { isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismVariantRibbonComponent, { className: "PrismVariantRibbonComponent", filePath: "app/variant-ribbon/prism-variant-ribbon.component.ts", lineNumber: 187 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismVariantRibbonComponent, { className: "PrismVariantRibbonComponent", filePath: "app/variant-ribbon/prism-variant-ribbon.component.ts", lineNumber: 168 }); })();