@ng-prism/core 22.2.0 → 22.3.0

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

@@ -1,24 +1,24 @@
-import { Component, computed, effect, inject, untracked, HostListener, ChangeDetectionStrategy, } from '@angular/core';
-import { PRISM_CONFIG } from '../tokens/prism-tokens.js';
-import { PrismThemeService } from '../services/prism-theme.service.js';
-import { PrismLayoutService } from '../services/prism-layout.service.js';
-import { PrismNavigationService } from '../services/prism-navigation.service.js';
-import { PrismPanelService } from '../services/prism-panel.service.js';
+import { ChangeDetectionStrategy, Component, computed, effect, HostListener, inject, untracked } from '@angular/core';
+import { PrismCanvasToolbarComponent } from '../canvas/prism-canvas-toolbar.component.js';
+import { PrismTemplatePopoverComponent } from '../canvas/prism-template-popover.component.js';
 import { PrismComponentHeadComponent } from '../component-head/prism-component-head.component.js';
-import { PrismVariantRibbonComponent } from '../variant-ribbon/prism-variant-ribbon.component.js';
+import { PrismResizerDirective } from '../directives/prism-resizer.directive.js';
 import { PrismHeaderComponent } from '../header/prism-header.component.js';
+import { PrismPageRendererComponent } from '../page-renderer/prism-page-renderer.component.js';
 import { PrismPanelHostComponent } from '../panels/panel-host/prism-panel-host.component.js';
 import { PrismRendererComponent } from '../renderer/prism-renderer.component.js';
-import { PrismSidebarComponent } from '../sidebar/prism-sidebar.component.js';
-import { PrismPageRendererComponent } from '../page-renderer/prism-page-renderer.component.js';
-import { PrismUrlStateService } from '../services/prism-url-state.service.js';
+import { PrismLayoutService } from '../services/prism-layout.service.js';
+import { PrismNavigationService } from '../services/prism-navigation.service.js';
+import { PrismPanelService } from '../services/prism-panel.service.js';
 import { PrismPersistenceService } from '../services/prism-persistence.service.js';
-import { PrismViewTabBarComponent } from '../view-tab-bar/prism-view-tab-bar.component.js';
-import { PrismViewPanelHostComponent } from '../view-tab-bar/prism-view-panel-host.component.js';
-import { PrismResizerDirective } from '../directives/prism-resizer.directive.js';
-import { PrismCanvasToolbarComponent } from '../canvas/prism-canvas-toolbar.component.js';
-import { PrismTemplatePopoverComponent } from '../canvas/prism-template-popover.component.js';
+import { PrismThemeService } from '../services/prism-theme.service.js';
+import { PrismUrlStateService } from '../services/prism-url-state.service.js';
+import { PrismSidebarComponent } from '../sidebar/prism-sidebar.component.js';
+import { PRISM_CONFIG } from '../tokens/prism-tokens.js';
+import { PrismVariantRibbonComponent } from '../variant-ribbon/prism-variant-ribbon.component.js';
 import { nextViewId } from '../view-tab-bar/next-view-id.js';
+import { PrismViewPanelHostComponent } from '../view-tab-bar/prism-view-panel-host.component.js';
+import { PrismViewTabBarComponent } from '../view-tab-bar/prism-view-tab-bar.component.js';
 import * as i0 from "@angular/core";
 function PrismShellComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -111,9 +111,7 @@ export class PrismShellComponent {
     urlStateService = inject(PrismUrlStateService);
     persistenceService = inject(PrismPersistenceService);
     viewPanels = this.panelService.visibleViewPanels;
-    showPanel = computed(() => this.layout.addonsVisible() &&
-        this.panelService.activeViewId() === 'renderer' &&
-        !this.navigationService.activePage(), /* @ts-ignore */
+    showPanel = computed(() => this.layout.addonsVisible() && this.panelService.activeViewId() === 'renderer' && !this.navigationService.activePage(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showPanel" }] : /* istanbul ignore next */ []));
     shellStyle = computed(() => {
         const sw = this.layout.sidebarVisible() ? this.layout.sidebarWidth() : 0;
@@ -200,7 +198,7 @@ export class PrismShellComponent {
             PrismViewPanelHostComponent,
             PrismResizerDirective,
             PrismCanvasToolbarComponent,
-            PrismTemplatePopoverComponent], styles: ["[_nghost-%COMP%] { display: block; height: 100%; }\n\n    .prism-shell[_ngcontent-%COMP%] {\n      height: 100vh;\n      display: grid;\n      grid-template-rows: var(--%NS%band-header) 1fr;\n      background: var(--%NS%prism-void);\n      font-family: var(--%NS%font-sans, var(--%NS%prism-font-sans));\n      color: var(--%NS%prism-text);\n      overflow: hidden;\n    }\n\n    .prism-body[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: var(--%NS%sw, 264px) 4px 1fr;\n      min-height: 0;\n    }\n    .prism-body--no-sidebar[_ngcontent-%COMP%] {\n      grid-template-columns: 1fr;\n    }\n\n    .prism-sidebar-wrap[_ngcontent-%COMP%] {\n      background: var(--%NS%prism-bg);\n      border-right: 1px solid var(--%NS%prism-border);\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      overflow: hidden;\n    }\n\n    .prism-sidebar-wrap[_ngcontent-%COMP%]   prism-sidebar[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 0;\n    }\n\n    .prism-sidebar-foot[_ngcontent-%COMP%] {\n      border-top: 1px solid var(--%NS%prism-border);\n      padding: 10px 14px;\n      font-size: 11px;\n      color: var(--%NS%prism-text-ghost);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    .prism-sidebar-foot__logo[_ngcontent-%COMP%] {\n      width: 16px;\n      flex-shrink: 0;\n    }\n    .prism-sidebar-foot__link[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-ghost);\n      text-decoration: none;\n      transition: color var(--%NS%dur-fast);\n    }\n    .prism-sidebar-foot__link[_ngcontent-%COMP%]:hover {\n      color: var(--%NS%prism-text-2);\n    }\n\n    .prism-resizer-col[_ngcontent-%COMP%] {\n      width: 4px;\n      background: transparent;\n      transition: background var(--%NS%dur-fast) var(--%NS%ease-default);\n      position: relative;\n      z-index: 5;\n    }\n    .prism-resizer-col[_ngcontent-%COMP%]:hover, \n   .prism-resizer-col.active[_ngcontent-%COMP%] {\n      background: var(--%NS%prism-primary);\n    }\n\n    .prism-main[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      background: var(--%NS%prism-void);\n      overflow: hidden;\n    }\n\n    .prism-resizer-row[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      height: 4px;\n      background: transparent;\n      transition: background var(--%NS%dur-fast) var(--%NS%ease-default);\n      position: relative;\n      z-index: 5;\n    }\n    .prism-resizer-row[_ngcontent-%COMP%]:hover, \n   .prism-resizer-row.active[_ngcontent-%COMP%] {\n      background: var(--%NS%prism-primary);\n    }\n\n    \n\n\n    .prism-canvas-wrap[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 0;\n      display: grid;\n      grid-template-rows: minmax(0, 1fr);\n      background: var(--%NS%prism-bg-surface);\n      overflow: hidden;\n      position: relative;\n    }\n    .prism-main__canvas[_ngcontent-%COMP%] { flex: 1; min-height: 0; overflow: auto; }\n\n    .prism-main__panel[_ngcontent-%COMP%] {\n      height: var(--%NS%ph, 260px);\n      flex-shrink: 0;\n      overflow: hidden;\n      min-height: 0;\n    }\n\n    .prism-shell__empty[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      grid-row: 1 / -1;\n    }\n    .prism-shell__empty-icon[_ngcontent-%COMP%] {\n      width: 48px;\n      height: 48px;\n      color: var(--%NS%prism-text-ghost);\n      margin-bottom: 8px;\n    }\n    .prism-shell__empty-text[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: var(--%NS%fs-xl);\n      font-weight: 500;\n      color: var(--%NS%prism-text-muted);\n    }\n    .prism-shell__empty-hint[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: var(--%NS%fs-lg);\n      color: var(--%NS%prism-text-ghost);\n    }"] });
+            PrismTemplatePopoverComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n}\n\n.prism-shell[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-rows: var(--%NS%band-header) 1fr;\n\n    \n\n\n\n\n\n\n\n\n\n\n\n\n    grid-template-columns: minmax(0, 1fr);\n    height: 100vh;\n    overflow: hidden;\n    font-family: var(--%NS%font-sans, var(--%NS%prism-font-sans));\n    color: var(--%NS%prism-text);\n    background: var(--%NS%prism-void);\n}\n\n.prism-body[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: var(--%NS%sw, 264px) 4px 1fr;\n    min-height: 0;\n}\n\n.prism-body--no-sidebar[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n}\n\n.prism-sidebar-wrap[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--%NS%prism-bg);\n    border-right: 1px solid var(--%NS%prism-border);\n}\n\n.prism-sidebar-wrap[_ngcontent-%COMP%]   prism-sidebar[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n}\n\n.prism-sidebar-foot[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    padding: 10px 14px;\n    font-size: 11px;\n    color: var(--%NS%prism-text-ghost);\n    border-top: 1px solid var(--%NS%prism-border);\n}\n\n.prism-sidebar-foot__logo[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    width: 16px;\n}\n\n.prism-sidebar-foot__link[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text-ghost);\n    text-decoration: none;\n    transition: color var(--%NS%dur-fast);\n}\n\n.prism-sidebar-foot__link[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text-2);\n}\n\n.prism-resizer-col[_ngcontent-%COMP%] {\n    position: relative;\n    z-index: 5;\n    width: 4px;\n    background: transparent;\n    transition: background var(--%NS%dur-fast) var(--%NS%ease-default);\n}\n\n.prism-resizer-col[_ngcontent-%COMP%]:hover, \n.prism-resizer-col.active[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-primary);\n}\n\n.prism-main[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--%NS%prism-void);\n}\n\n.prism-resizer-row[_ngcontent-%COMP%] {\n    position: relative;\n    z-index: 5;\n    flex-shrink: 0;\n    height: 4px;\n    background: transparent;\n    transition: background var(--%NS%dur-fast) var(--%NS%ease-default);\n}\n\n.prism-resizer-row[_ngcontent-%COMP%]:hover, \n.prism-resizer-row.active[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-primary);\n}\n\n\n\n\n.prism-canvas-wrap[_ngcontent-%COMP%] {\n    position: relative;\n    display: grid;\n    flex: 1;\n    grid-template-rows: minmax(0, 1fr);\n    min-height: 0;\n    overflow: hidden;\n    background: var(--%NS%prism-bg-surface);\n}\n\n.prism-main__canvas[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n}\n\n.prism-main__panel[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    height: var(--%NS%ph, 260px);\n    min-height: 0;\n    overflow: hidden;\n}\n\n.prism-shell__empty[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    grid-row: 1 / -1;\n    gap: 8px;\n    align-items: center;\n    justify-content: center;\n}\n\n.prism-shell__empty-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    margin-bottom: 8px;\n    color: var(--%NS%prism-text-ghost);\n}\n\n.prism-shell__empty-text[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: var(--%NS%fs-xl);\n    font-weight: 500;\n    color: var(--%NS%prism-text-muted);\n}\n\n.prism-shell__empty-hint[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: var(--%NS%fs-lg);\n    color: var(--%NS%prism-text-ghost);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismShellComponent, [{
         type: Component,
@@ -216,110 +214,10 @@ export class PrismShellComponent {
                     PrismViewPanelHostComponent,
                     PrismResizerDirective,
                     PrismCanvasToolbarComponent,
-                    PrismTemplatePopoverComponent,
-                ], template: `
-    <div class="prism-shell" [style]="shellStyle()">
-      <prism-header class="prism-shell__header" />
-
-      <div
-        class="prism-body"
-        [class.prism-body--no-sidebar]="!layout.sidebarVisible()"
-      >
-        @if (layout.sidebarVisible()) {
-        <aside class="prism-sidebar-wrap">
-          <prism-sidebar />
-          <div class="prism-sidebar-foot">
-            <img
-              class="prism-sidebar-foot__logo"
-              alt="ng-prism logo"
-              src="data:image/png;base64,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"
-            />
-            <a
-              class="prism-sidebar-foot__link"
-              href="https://dyingangel666.github.io/ng-prism/#/"
-              target="_blank"
-              rel="noopener"
-            >
-              Powered by ng-prism
-            </a>
-          </div>
-        </aside>
-        <div
-          class="prism-resizer-col"
-          prismResizer
-          axis="x"
-          [min]="200"
-          [max]="360"
-          [value]="layout.sidebarWidth()"
-          (valueChange)="layout.setSidebarWidth($event)"
-        ></div>
-        }
-
-        <main
-          class="prism-main"
-          [style.--ph.px]="showPanel() ? layout.panelHeight() : 0"
-        >
-          @if (navigationService.activeComponent()) { @if
-          (panelService.activeViewId() === 'renderer') {
-          <prism-component-head>
-            @if (viewPanels().length > 0) {
-            <prism-view-tab-bar headEnd />
-            }
-          </prism-component-head>
-          @if (layout.toolbarVisible()) {
-          <prism-variant-ribbon />
-          }
-          <div class="prism-canvas-wrap">
-            <prism-canvas-toolbar />
-            <prism-renderer />
-            <prism-template-popover />
-          </div>
-          } @else {
-          <prism-component-head>
-            <prism-view-tab-bar headEnd />
-          </prism-component-head>
-          <prism-view-panel-host class="prism-main__canvas" />
-          } @if (showPanel()) {
-          <div
-            class="prism-resizer-row"
-            prismResizer
-            axis="y"
-            [min]="200"
-            [max]="560"
-            [value]="layout.panelHeight()"
-            (valueChange)="layout.setPanelHeight($event)"
-          ></div>
-          <div class="prism-main__panel">
-            <prism-panel-host />
-          </div>
-          } } @else if (navigationService.activePage()) {
-          <prism-page-renderer class="prism-main__canvas" />
-          } @else {
-          <div class="prism-shell__empty">
-            <svg
-              class="prism-shell__empty-icon"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path d="M12 2L4 14h16L12 2z" />
-              <path d="M4 14l4 8h8l4-8" />
-            </svg>
-            <p class="prism-shell__empty-text">Select a component</p>
-            <p class="prism-shell__empty-hint">
-              from the sidebar to preview it here
-            </p>
-          </div>
-          }
-        </main>
-      </div>
-    </div>
-  `, styles: ["\n    :host { display: block; height: 100%; }\n\n    .prism-shell {\n      height: 100vh;\n      display: grid;\n      grid-template-rows: var(--band-header) 1fr;\n      background: var(--prism-void);\n      font-family: var(--font-sans, var(--prism-font-sans));\n      color: var(--prism-text);\n      overflow: hidden;\n    }\n\n    .prism-body {\n      display: grid;\n      grid-template-columns: var(--sw, 264px) 4px 1fr;\n      min-height: 0;\n    }\n    .prism-body--no-sidebar {\n      grid-template-columns: 1fr;\n    }\n\n    .prism-sidebar-wrap {\n      background: var(--prism-bg);\n      border-right: 1px solid var(--prism-border);\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      overflow: hidden;\n    }\n\n    .prism-sidebar-wrap prism-sidebar {\n      flex: 1;\n      min-height: 0;\n    }\n\n    .prism-sidebar-foot {\n      border-top: 1px solid var(--prism-border);\n      padding: 10px 14px;\n      font-size: 11px;\n      color: var(--prism-text-ghost);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    .prism-sidebar-foot__logo {\n      width: 16px;\n      flex-shrink: 0;\n    }\n    .prism-sidebar-foot__link {\n      color: var(--prism-text-ghost);\n      text-decoration: none;\n      transition: color var(--dur-fast);\n    }\n    .prism-sidebar-foot__link:hover {\n      color: var(--prism-text-2);\n    }\n\n    .prism-resizer-col {\n      width: 4px;\n      background: transparent;\n      transition: background var(--dur-fast) var(--ease-default);\n      position: relative;\n      z-index: 5;\n    }\n    .prism-resizer-col:hover,\n    .prism-resizer-col.active {\n      background: var(--prism-primary);\n    }\n\n    .prism-main {\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      background: var(--prism-void);\n      overflow: hidden;\n    }\n\n    .prism-resizer-row {\n      flex-shrink: 0;\n      height: 4px;\n      background: transparent;\n      transition: background var(--dur-fast) var(--ease-default);\n      position: relative;\n      z-index: 5;\n    }\n    .prism-resizer-row:hover,\n    .prism-resizer-row.active {\n      background: var(--prism-primary);\n    }\n\n    /* One row, not two: the canvas tools no longer occupy a band above the\n       stage, they float over it from a rail absolutely positioned against\n       this element. The position: relative below is what anchors it. */\n    .prism-canvas-wrap {\n      flex: 1;\n      min-height: 0;\n      display: grid;\n      grid-template-rows: minmax(0, 1fr);\n      background: var(--prism-bg-surface);\n      overflow: hidden;\n      position: relative;\n    }\n    .prism-main__canvas { flex: 1; min-height: 0; overflow: auto; }\n\n    .prism-main__panel {\n      height: var(--ph, 260px);\n      flex-shrink: 0;\n      overflow: hidden;\n      min-height: 0;\n    }\n\n    .prism-shell__empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      grid-row: 1 / -1;\n    }\n    .prism-shell__empty-icon {\n      width: 48px;\n      height: 48px;\n      color: var(--prism-text-ghost);\n      margin-bottom: 8px;\n    }\n    .prism-shell__empty-text {\n      margin: 0;\n      font-size: var(--fs-xl);\n      font-weight: 500;\n      color: var(--prism-text-muted);\n    }\n    .prism-shell__empty-hint {\n      margin: 0;\n      font-size: var(--fs-lg);\n      color: var(--prism-text-ghost);\n    }\n  "] }]
+                    PrismTemplatePopoverComponent
+                ], template: "<div\n    class=\"prism-shell\"\n    [style]=\"shellStyle()\">\n    <prism-header class=\"prism-shell__header\" />\n\n    <div\n        class=\"prism-body\"\n        [class.prism-body--no-sidebar]=\"!layout.sidebarVisible()\">\n        @if (layout.sidebarVisible()) {\n            <aside class=\"prism-sidebar-wrap\">\n                <prism-sidebar />\n                <div class=\"prism-sidebar-foot\">\n                    <img\n                        class=\"prism-sidebar-foot__logo\"\n                        alt=\"ng-prism logo\"\n                        src=\"data:image/png;base64,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\" />\n                    <a\n                        class=\"prism-sidebar-foot__link\"\n                        href=\"https://dyingangel666.github.io/ng-prism/#/\"\n                        target=\"_blank\"\n                        rel=\"noopener\">\n                        Powered by ng-prism\n                    </a>\n                </div>\n            </aside>\n            <div\n                class=\"prism-resizer-col\"\n                prismResizer\n                axis=\"x\"\n                [min]=\"200\"\n                [max]=\"360\"\n                [value]=\"layout.sidebarWidth()\"\n                (valueChange)=\"layout.setSidebarWidth($event)\"></div>\n        }\n\n        <main\n            class=\"prism-main\"\n            [style.--ph.px]=\"showPanel() ? layout.panelHeight() : 0\">\n            @if (navigationService.activeComponent()) {\n                @if (panelService.activeViewId() === 'renderer') {\n                    <prism-component-head>\n                        @if (viewPanels().length > 0) {\n                            <prism-view-tab-bar headEnd />\n                        }\n                    </prism-component-head>\n                    @if (layout.toolbarVisible()) {\n                        <prism-variant-ribbon />\n                    }\n                    <div class=\"prism-canvas-wrap\">\n                        <prism-canvas-toolbar />\n                        <prism-renderer />\n                        <prism-template-popover />\n                    </div>\n                } @else {\n                    <prism-component-head>\n                        <prism-view-tab-bar headEnd />\n                    </prism-component-head>\n                    <prism-view-panel-host class=\"prism-main__canvas\" />\n                }\n                @if (showPanel()) {\n                    <div\n                        class=\"prism-resizer-row\"\n                        prismResizer\n                        axis=\"y\"\n                        [min]=\"200\"\n                        [max]=\"560\"\n                        [value]=\"layout.panelHeight()\"\n                        (valueChange)=\"layout.setPanelHeight($event)\"></div>\n                    <div class=\"prism-main__panel\">\n                        <prism-panel-host />\n                    </div>\n                }\n            } @else if (navigationService.activePage()) {\n                <prism-page-renderer class=\"prism-main__canvas\" />\n            } @else {\n                <div class=\"prism-shell__empty\">\n                    <svg\n                        class=\"prism-shell__empty-icon\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.5\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\">\n                        <path d=\"M12 2L4 14h16L12 2z\" />\n                        <path d=\"M4 14l4 8h8l4-8\" />\n                    </svg>\n                    <p class=\"prism-shell__empty-text\">Select a component</p>\n                    <p class=\"prism-shell__empty-hint\"> from the sidebar to preview it here </p>\n                </div>\n            }\n        </main>\n    </div>\n</div>\n", styles: [":host {\n    display: block;\n    height: 100%;\n}\n\n.prism-shell {\n    display: grid;\n    grid-template-rows: var(--band-header) 1fr;\n\n    /* Declared for its minimum, not for its size. An implicit grid track is\n     auto, and an auto track's minimum is the min-content width of what sits\n     in it -- here the whole body, sidebar and resizer and main together. The\n     track therefore grows to whatever the widest panel demands and the\n     overflow: hidden below clips the remainder, instead of the viewport ever\n     getting a chance to reflow. Measured at a 500px viewport the track stood\n     at 763px and held the canvas at 415px however far the window was dragged\n     in, so responsive behaviour inside a showcased component was impossible\n     to reach.\n     The rows stay bare because min-height: 0 is already spelled out on every\n     level below them. The inline axis had no such counterpart anywhere, and\n     the levels below zero their own minimum through overflow: hidden, which\n     is why this one track is the only place that needs saying. */\n    grid-template-columns: minmax(0, 1fr);\n    height: 100vh;\n    overflow: hidden;\n    font-family: var(--font-sans, var(--prism-font-sans));\n    color: var(--prism-text);\n    background: var(--prism-void);\n}\n\n.prism-body {\n    display: grid;\n    grid-template-columns: var(--sw, 264px) 4px 1fr;\n    min-height: 0;\n}\n\n.prism-body--no-sidebar {\n    grid-template-columns: 1fr;\n}\n\n.prism-sidebar-wrap {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--prism-bg);\n    border-right: 1px solid var(--prism-border);\n}\n\n.prism-sidebar-wrap prism-sidebar {\n    flex: 1;\n    min-height: 0;\n}\n\n.prism-sidebar-foot {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    padding: 10px 14px;\n    font-size: 11px;\n    color: var(--prism-text-ghost);\n    border-top: 1px solid var(--prism-border);\n}\n\n.prism-sidebar-foot__logo {\n    flex-shrink: 0;\n    width: 16px;\n}\n\n.prism-sidebar-foot__link {\n    color: var(--prism-text-ghost);\n    text-decoration: none;\n    transition: color var(--dur-fast);\n}\n\n.prism-sidebar-foot__link:hover {\n    color: var(--prism-text-2);\n}\n\n.prism-resizer-col {\n    position: relative;\n    z-index: 5;\n    width: 4px;\n    background: transparent;\n    transition: background var(--dur-fast) var(--ease-default);\n}\n\n.prism-resizer-col:hover,\n.prism-resizer-col.active {\n    background: var(--prism-primary);\n}\n\n.prism-main {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--prism-void);\n}\n\n.prism-resizer-row {\n    position: relative;\n    z-index: 5;\n    flex-shrink: 0;\n    height: 4px;\n    background: transparent;\n    transition: background var(--dur-fast) var(--ease-default);\n}\n\n.prism-resizer-row:hover,\n.prism-resizer-row.active {\n    background: var(--prism-primary);\n}\n\n/* One row, not two: the canvas tools no longer occupy a band above the\n   stage, they float over it from a rail absolutely positioned against\n   this element. The position: relative below is what anchors it. */\n.prism-canvas-wrap {\n    position: relative;\n    display: grid;\n    flex: 1;\n    grid-template-rows: minmax(0, 1fr);\n    min-height: 0;\n    overflow: hidden;\n    background: var(--prism-bg-surface);\n}\n\n.prism-main__canvas {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n}\n\n.prism-main__panel {\n    flex-shrink: 0;\n    height: var(--ph, 260px);\n    min-height: 0;\n    overflow: hidden;\n}\n\n.prism-shell__empty {\n    display: flex;\n    flex-direction: column;\n    grid-row: 1 / -1;\n    gap: 8px;\n    align-items: center;\n    justify-content: center;\n}\n\n.prism-shell__empty-icon {\n    width: 48px;\n    height: 48px;\n    margin-bottom: 8px;\n    color: var(--prism-text-ghost);\n}\n\n.prism-shell__empty-text {\n    margin: 0;\n    font-size: var(--fs-xl);\n    font-weight: 500;\n    color: var(--prism-text-muted);\n}\n\n.prism-shell__empty-hint {\n    margin: 0;\n    font-size: var(--fs-lg);\n    color: var(--prism-text-ghost);\n}\n"] }]
     }], () => [], { onKeyDown: [{
             type: HostListener,
             args: ['document:keydown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismShellComponent, { className: "PrismShellComponent", filePath: "app/shell/prism-shell.component.ts", lineNumber: 290 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismShellComponent, { className: "PrismShellComponent", filePath: "app/shell/prism-shell.component.ts", lineNumber: 45 }); })();

package/dist/app/sidebar/navigation-decorations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-decorations.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/navigation-decorations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AACnF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAE3E,qEAAqE;AACrE,MAAM,WAAW,QAAQ;IACvB;;;;;OAKG;IACH,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,wEAAwE;IACxE,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzB,8DAA8D;IAC9D,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,kEAAkE;IAClE,QAAQ,EAAE,MAAM,CAAC;IACjB,8DAA8D;IAC9D,OAAO,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC;CACnC;AAID;;;;;;;;GAQG;AACH,wBAAgB,4BAA4B,CAC1C,OAAO,EAAE,SAAS,8BAA8B,EAAE,EAClD,WAAW,EAAE,SAAS,8BAA8B,EAAE,GACrD,8BAA8B,EAAE,CAWlC;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,cAAc,EACpB,IAAI,EAAE,SAAS,8BAA8B,EAAE,GAC9C,eAAe,GAAG,IAAI,CAuBxB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC,EAAE,GAC/C,cAAc,CAahB;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,eAAe,GAAG,SAAS,GAAG,MAAM,CAEzE"}
+{"version":3,"file":"navigation-decorations.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/navigation-decorations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AACnF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAE3E,qEAAqE;AACrE,MAAM,WAAW,QAAQ;IACrB;;;;;OAKG;IACH,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC5B,wEAAwE;IACxE,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzB,8DAA8D;IAC9D,OAAO,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,cAAc;IAC3B,kEAAkE;IAClE,QAAQ,EAAE,MAAM,CAAC;IACjB,8DAA8D;IAC9D,OAAO,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC;CACrC;AAID;;;;;;;;GAQG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,EAAE,SAAS,8BAA8B,EAAE,EAClD,WAAW,EAAE,SAAS,8BAA8B,EAAE,GACvD,8BAA8B,EAAE,CAWlC;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,8BAA8B,EAAE,GAAG,eAAe,GAAG,IAAI,CA0B1H;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,WAAW,EAAE,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC,EAAE,GAAG,cAAc,CAa/F;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,eAAe,GAAG,SAAS,GAAG,MAAM,CAEzE"}

package/dist/app/sidebar/navigation-decorations.js

@@ -37,7 +37,7 @@ export function decorateItem(item, defs) {
             id: def.id,
             icon: def.icon,
             variant: badge.variant,
-            label: badge.label,
+            label: badge.label
         });
     }
     if (marks.length === 0)

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

@@ -1,7 +1,7 @@
+import type { ComponentStatus } from '../../decorator/showcase.types.js';
 import type { NavigationItem } from '../services/navigation-item.types.js';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import { PrismSearchService } from '../services/prism-search.service.js';
-import type { ComponentStatus } from '../../decorator/showcase.types.js';
 import { type CategoryRollup, type ItemDecorations } from './navigation-decorations.js';
 import * as i0 from "@angular/core";
 interface SidebarCategory {

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

@@ -1 +1 @@
-{"version":3,"file":"prism-sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/prism-sidebar.component.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAEjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAKL,KAAK,cAAc,EACnB,KAAK,eAAe,EACrB,MAAM,6BAA6B,CAAC;;AAcrC,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,UAAU,WAAW;IACnB,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,eAAe,GAAG,IAAI,CAAC;CACrC;AAED,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;CACxB;AAED,qBAkVa,qBAAqB;IAChC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAC6B;IAEzD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAK1B;IAGF,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAa7C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6C;IAE1E,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAE1B;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,oDAa9B;IAEH,SAAS,CAAC,QAAQ,CAAC,iBAAiB;;;;;SAmBjC;IAEH,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAI3C,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAU3C,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAM/C,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAMjD,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,eAAe,GAAG,SAAS;IAMvE;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,aAAa,CAAC,MAAM,EAAE,cAAc,GAAG,MAAM;IAKvD,SAAS,CAAC,WAAW,CACnB,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,eAAe,GAAG,IAAI,GAClC,MAAM,GAAG,IAAI;IAShB,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO;IAWjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAQ9C,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,aAAa;yCAhKV,qBAAqB;2CAArB,qBAAqB;CAqKjC"}
+{"version":3,"file":"prism-sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/prism-sidebar.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAGzE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAEjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,KAAK,cAAc,EAAgB,KAAK,eAAe,EAA+D,MAAM,6BAA6B,CAAC;;AAcnK,UAAU,eAAe;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,cAAc,EAAE,CAAC;CAC3B;AAED,UAAU,WAAW;IACjB,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,eAAe,GAAG,IAAI,CAAC;CACvC;AAED,UAAU,iBAAiB;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;CAC1B;AAED,qBAQa,qBAAqB;IAC9B,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA0D;IAEtF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA4H;IAGxJ,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAS7C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6C;IAE1E,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAE1B;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,oDAe9B;IAEH,SAAS,CAAC,QAAQ,CAAC,iBAAiB;;;;;SAqBjC;IAEH,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAI3C,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAW3C,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAI/C,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAIjD,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,eAAe,GAAG,SAAS;IAIvE;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,aAAa,CAAC,MAAM,EAAE,cAAc,GAAG,MAAM;IAMvD,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,eAAe,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI;IAU/F,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO;IAUjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAQ9C,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,aAAa;yCApJZ,qBAAqB;2CAArB,qBAAqB;CA4JjC"}

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

@@ -1,10 +1,10 @@
-import { Component, computed, inject, signal, viewChild, HostListener, ChangeDetectionStrategy, } from '@angular/core';
+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 { 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 { decorateItem, lifecycleIcon, resolveNavigationDecorations, rollupCategory } from './navigation-decorations.js';
 import * as i0 from "@angular/core";
 const _c0 = ["filterInput"];
 const _c1 = () => [];
@@ -182,7 +182,7 @@ 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'
 };
 const DEFAULT_SECTION_ICON = 'box-select';
 function sectionIcon(name) {
@@ -200,9 +200,7 @@ export class PrismSidebarComponent {
         if (e.key !== '/' || e.ctrlKey || e.metaKey || e.altKey)
             return;
         const tag = e.target.tagName;
-        if (tag === 'INPUT' ||
-            tag === 'TEXTAREA' ||
-            e.target.isContentEditable)
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || e.target.isContentEditable)
             return;
         e.preventDefault();
         this.filterInput()?.nativeElement.focus();
@@ -224,7 +222,7 @@ export class PrismSidebarComponent {
         }
         return [...catMap.entries()].map(([name, items]) => ({
             name,
-            items,
+            items
         }));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pageCategories" }] : /* istanbul ignore next */ []));
@@ -238,14 +236,14 @@ export class PrismSidebarComponent {
                 const items = cat.items.map((item) => ({
                     item,
                     icon: lifecycleIcon(this.itemStatus(item)),
-                    decorations: decorateItem(item, defs),
+                    decorations: decorateItem(item, defs)
                 }));
                 return {
                     name: cat.name,
                     rollup: rollupCategory(items.map((row) => row.decorations)),
-                    items,
+                    items
                 };
-            }),
+            })
         }));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "componentSections" }] : /* istanbul ignore next */ []));
@@ -264,19 +262,13 @@ export class PrismSidebarComponent {
         });
     }
     itemKey(item) {
-        return item.kind === 'component'
-            ? item.data.meta.className
-            : `page:${item.data.title}`;
+        return item.kind === 'component' ? item.data.meta.className : `page:${item.data.title}`;
     }
     itemLabel(item) {
-        return item.kind === 'component'
-            ? item.data.meta.showcaseConfig.title
-            : item.data.title;
+        return item.kind === 'component' ? item.data.meta.showcaseConfig.title : item.data.title;
     }
     itemStatus(item) {
-        return item.kind === 'component'
-            ? item.data.meta.showcaseConfig.status
-            : undefined;
+        return item.kind === 'component' ? item.data.meta.showcaseConfig.status : undefined;
     }
     /**
      * Accessible name for the roll-up pill, for the deviating case only. The
@@ -311,7 +303,7 @@ export class PrismSidebarComponent {
         if (!active || active.kind !== item.kind)
             return false;
         if (item.kind === 'component') {
-            return (item.data.meta.className === active.data.meta.className);
+            return item.data.meta.className === active.data.meta.className;
         }
         return item.data.title === active.data.title;
     }
@@ -336,7 +328,10 @@ export class PrismSidebarComponent {
         try {
             localStorage.setItem(STORAGE_KEY, JSON.stringify([...set]));
         }
-        catch { }
+        catch {
+            // Storage may be full or disabled (e.g. private browsing); the
+            // collapsed set just stays unpersisted for this session.
+        }
     }
     static ɵfac = function PrismSidebarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismSidebarComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismSidebarComponent, selectors: [["prism-sidebar"]], viewQuery: function PrismSidebarComponent_Query(rf, ctx) { if (rf & 1) {
@@ -367,143 +362,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      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    }"] });
+        } }, 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}"] });
 }
 (() => { (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">
-      <div class="sb-filter">
-        <prism-icon name="search" [size]="12" />
-        <input
-          #filterInput
-          placeholder="Filter components…"
-          [value]="searchService.query()"
-          (input)="searchService.search($any($event.target).value)"
-        />
-        <kbd>/</kbd>
-      </div>
-
-      <div class="sb-scroll">
-        @if (pageCategories().length > 0) {
-        <div class="sb-pinned">
-          <div class="sb-pinned-head">
-            <span class="sb-pinned-head-l">
-              <prism-icon name="pin" [size]="10" class="sb-pinned-pin" />
-              Pages
-            </span>
-            <span>{{ totalPages() }}</span>
-          </div>
-          @for (cat of pageCategories(); track cat.name) {
-          <div
-            class="sb-group"
-            [class.sb-group--collapsed]="isCollapsed('page:' + cat.name)"
-          >
-            <button
-              class="sb-group-head"
-              (click)="toggleCollapse('page:' + cat.name)"
-              [attr.aria-expanded]="!isCollapsed('page:' + cat.name)"
-            >
-              <prism-icon name="chevron-down" [size]="10" />
-              <span class="sb-group-chip"></span>
-              {{ cat.name }}
-            </button>
-            @if (!isCollapsed('page:' + cat.name)) {
-            <div class="sb-group-body">
-              @for (item of cat.items; track itemKey(item)) {
-              <button
-                class="sb-item"
-                [class.sb-item--active]="isActive(item)"
-                (click)="onSelect(item)"
-              >
-                <span class="sb-item-name">{{ itemLabel(item) }}</span>
-              </button>
-              }
-            </div>
-            }
-          </div>
-          }
-        </div>
-        } @for (section of componentSections(); track section.name) {
-        <div class="sb-section-head">
-          <span class="sb-section-head-l">
-            <prism-icon
-              [name]="section.icon"
-              [size]="10"
-              class="sb-section-icon"
-            />
-            {{ section.name }}
-          </span>
-          <span>{{ section.totalCount }}</span>
-        </div>
-        @for (cat of section.categories; track cat.name) {
-        <div
-          class="sb-group"
-          [class.sb-group--collapsed]="
-            isCollapsed('sec:' + section.name + ':' + cat.name)
-          "
-        >
-          <button
-            class="sb-group-head"
-            (click)="toggleCollapse('sec:' + section.name + ':' + cat.name)"
-            [attr.aria-expanded]="
-              !isCollapsed('sec:' + section.name + ':' + cat.name)
-            "
-          >
-            <prism-icon name="chevron-down" [size]="10" />
-            <span class="sb-group-chip"></span>
-            {{ cat.name }}
-            <span
-              class="sb-group-count"
-              [class.sb-group-count--warn]="cat.rollup.variant === 'warn'"
-              [class.sb-group-count--danger]="cat.rollup.variant === 'danger'"
-              [attr.title]="
-                cat.rollup.problems ? rollupTooltip(cat.rollup) : null
-              "
-              [attr.aria-label]="
-                cat.rollup.problems ? rollupTooltip(cat.rollup) : null
-              "
-            >
-              @if (cat.rollup.problems) { {{ cat.rollup.problems }}/{{
-                cat.items.length
-              }}
-              } @else { {{ cat.items.length }} }
-            </span>
-          </button>
-          @if (!isCollapsed('sec:' + section.name + ':' + cat.name)) {
-          <div class="sb-group-body">
-            @for (row of cat.items; track itemKey(row.item)) {
-            <button
-              class="sb-item"
-              [class.sb-item--active]="isActive(row.item)"
-              [class.sb-item--deprecated]="
-                itemStatus(row.item) === 'deprecated'
-              "
-              [attr.title]="itemTooltip(row.item, row.decorations)"
-              (click)="onSelect(row.item)"
-            >
-              <prism-icon [name]="row.icon" [size]="12" class="sb-item-icon" />
-              <span class="sb-item-name">{{ itemLabel(row.item) }}</span>
-              <span class="sb-item-health">
-                @for (mark of row.decorations?.marks ?? []; track mark.id) {
-                <prism-icon
-                  [name]="mark.icon"
-                  [size]="11"
-                  [class]="'sb-health sb-health--' + mark.variant"
-                />
-                }
-              </span>
-            </button>
-            }
-          </div>
-          }
-        </div>
-        } }
-      </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(--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  "] }]
+        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 \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    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"] }]
     }], 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: 394 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismSidebarComponent, { className: "PrismSidebarComponent", filePath: "app/sidebar/prism-sidebar.component.ts", lineNumber: 48 }); })();

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,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"}
+{"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,CA0DpD,CAAC;AAEF,eAAO,MAAM,mBAAmB,wBAAmB,CAAC"}