@ng-prism/core 22.2.1 → 22.4.0

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,28 +262,22 @@ 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
-     * pill otherwise renders a bare number distinguished only by colour — a
+     * 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
+     * There is no zero branch: a clean category renders its plain
      * item count and the template leaves both attributes off, because
      * `aria-label` on a descendant feeds the group button's name-from-content
      * and "Buttons 0 components need review" is a claim about a group that has
@@ -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.\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"}

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

@@ -29,8 +29,8 @@ export const PRISM_DARK_THEME = {
     '--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))',
+    '--prism-measure': '#f632ff',
+    '--prism-spectrum': 'linear-gradient(90deg, var(--prism-accent), var(--prism-primary), var(--prism-primary-to))'
 };
 export const PRISM_LIGHT_THEME = {
     '--prism-code-tag': '#be185d',
@@ -63,8 +63,8 @@ export const PRISM_LIGHT_THEME = {
     '--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))',
+    '--prism-measure': '#ca00c1',
+    '--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",
@@ -96,7 +96,7 @@ export const PRISM_BASE_TOKENS = {
      *
      *   prism-shell { --density: .8 }
      *
-     * There is deliberately no signal, service or menu behind this — the whole
+     * There is no signal, service or menu behind this. The whole
      * control surface is the custom property.
      */
     '--density': '1',
@@ -114,6 +114,6 @@ export const PRISM_BASE_TOKENS = {
      */
     '--prism-header-height': 'var(--band-header)',
     '--prism-font-sans': 'var(--font-sans)',
-    '--prism-font-mono': 'var(--font-mono)',
+    '--prism-font-mono': 'var(--font-mono)'
 };
 export const PRISM_DEFAULT_THEME = PRISM_DARK_THEME;

package/dist/app/tokens/prism-tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-tokens.d.ts","sourceRoot":"","sources":["../../../src/app/tokens/prism-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EACf,eAAe,EAChB,MAAM,8BAA8B,CAAC;AAEtC,eAAO,MAAM,cAAc,iCAAwD,CAAC;AAEpF,eAAO,MAAM,YAAY,+BAGvB,CAAC;AAEH,MAAM,WAAW,kBAAkB;IACjC,cAAc,CAAC,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,aAAa,CAAC,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,cAAc,CAAC,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,oBAAoB,oCAC+B,CAAC;AAEjE,eAAO,MAAM,oBAAoB,mCAGhC,CAAC"}
+{"version":3,"file":"prism-tokens.d.ts","sourceRoot":"","sources":["../../../src/app/tokens/prism-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAEpG,eAAO,MAAM,cAAc,iCAAwD,CAAC;AAEpF,eAAO,MAAM,YAAY,+BAGvB,CAAC;AAEH,MAAM,WAAW,kBAAkB;IAC/B,cAAc,CAAC,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,aAAa,CAAC,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,cAAc,CAAC,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,oBAAoB,oCAAiE,CAAC;AAEnG,eAAO,MAAM,oBAAoB,mCAA2G,CAAC"}

package/dist/app/tokens/prism-tokens.js

@@ -2,7 +2,7 @@ import { InjectionToken } from '@angular/core';
 export const PRISM_MANIFEST = new InjectionToken('PRISM_MANIFEST');
 export const PRISM_CONFIG = new InjectionToken('PRISM_CONFIG', {
     providedIn: 'root',
-    factory: () => ({}),
+    factory: () => ({})
 });
 export const PRISM_RENDERER_HOOKS = new InjectionToken('PRISM_RENDERER_HOOKS');
 export const PRISM_BUILTIN_PANELS = new InjectionToken('PRISM_BUILTIN_PANELS', { providedIn: 'root', factory: () => [] });

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;;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"}
+{"version":3,"file":"prism-variant-ribbon.component.d.ts","sourceRoot":"","sources":["../../../src/app/variant-ribbon/prism-variant-ribbon.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;;AAG7E,qBAQa,2BAA2B;IACpC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAElE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAuD;IACrF,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA4D;IAEvF,SAAS,CAAC,QAAQ,CAAC,QAAQ,8EAIxB;;IAuBH,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;IAMtB,SAAS,CAAC,IAAI,IAAI,IAAI;yCA5Cb,2BAA2B;2CAA3B,2BAA2B;CAiDvC"}

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

@@ -1,4 +1,4 @@
-import { Component, inject, computed, effect, viewChild, viewChildren, ChangeDetectionStrategy, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, inject, viewChild, viewChildren } from '@angular/core';
 import { PrismIconComponent } from '../icons/prism-icon.component.js';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import { PrismRendererService } from '../services/prism-renderer.service.js';
@@ -101,55 +101,10 @@ export class PrismVariantRibbonComponent {
             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 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    }"] });
+        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n    flex-shrink: 0;\n}\n\n.variant-ribbon[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    height: var(--%NS%band-rail);\n    padding: 0 var(--%NS%sp-5);\n    background: var(--%NS%prism-bg);\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.variant-ribbon-tabs[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    gap: 2px;\n    align-items: center;\n    min-width: 0;\n    height: 100%;\n    overflow-x: auto;\n    scrollbar-width: none;\n}\n\n.variant-ribbon-tabs[_ngcontent-%COMP%]::-webkit-scrollbar {\n    display: none;\n}\n\n.v-tab[_ngcontent-%COMP%] {\n    position: relative;\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    height: 100%;\n    padding: 0 14px;\n    font-family: var(--%NS%font-sans);\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--%NS%prism-text-muted);\n    white-space: nowrap;\n    cursor: pointer;\n    background: none;\n    border: none;\n    transition: color var(--%NS%dur-fast);\n}\n\n\n\n\n.v-tab[_ngcontent-%COMP%]::after {\n    position: absolute;\n    right: var(--%NS%sp-3);\n    bottom: 0;\n    left: var(--%NS%sp-3);\n    height: 2px;\n    content: '';\n    background: var(--%NS%prism-spectrum);\n    background-position: calc(var(--%NS%i) / (var(--%NS%n) - 1) * 100%) 0;\n    background-size: calc(var(--%NS%n) * 100%) 100%;\n    border-radius: 2px;\n    opacity: 0;\n    transition: opacity var(--%NS%dur-fast) var(--%NS%ease-default);\n}\n\n.v-tab[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text-2);\n}\n\n.v-tab--active[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text);\n}\n\n.v-tab--%NS%active[_ngcontent-%COMP%]::after {\n    opacity: 1;\n}\n\n.v-tab[_ngcontent-%COMP%]:hover::after {\n    opacity: 0.4;\n}\n\n.variant-ribbon-right[_ngcontent-%COMP%] {\n    display: flex;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n    height: 24px;\n    padding-left: 12px;\n    margin-left: 12px;\n    border-left: 1px solid var(--%NS%prism-border);\n}\n\n.tool-btn[_ngcontent-%COMP%] {\n    display: grid;\n    place-items: center;\n    width: 24px;\n    height: 24px;\n    color: var(--%NS%prism-text-muted);\n    cursor: pointer;\n    background: none;\n    border: none;\n    border-radius: var(--%NS%radius-sm);\n    transition: all var(--%NS%dur-fast);\n}\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\n.tool-btn[_ngcontent-%COMP%]:disabled {\n    cursor: default;\n    opacity: 0.3;\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,
-        args: [{ selector: 'prism-variant-ribbon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: `
-    @if (variants().length > 0) {
-    <nav class="variant-ribbon">
-      <div class="variant-ribbon-tabs" #tabsContainer>
-        @for (v of variants(); track v.name; let i = $index) {
-        <button
-          #tabButton
-          class="v-tab"
-          [class.v-tab--active]="rendererService.activeVariantIndex() === i"
-          [style.--i]="slot(i).i"
-          [style.--n]="slot(i).n"
-          (click)="rendererService.selectVariant(i)"
-        >
-          {{ v.name }}
-        </button>
-        }
-      </div>
-      <div class="variant-ribbon-right">
-        <button
-          class="tool-btn"
-          title="Previous variant"
-          aria-label="Previous variant"
-          [disabled]="rendererService.activeVariantIndex() === 0"
-          (click)="prev()"
-        >
-          <prism-icon
-            name="chevron-right"
-            [size]="14"
-            style="transform: rotate(180deg)"
-          />
-        </button>
-        <button
-          class="tool-btn"
-          title="Next variant"
-          aria-label="Next variant"
-          [disabled]="
-            rendererService.activeVariantIndex() >= variants().length - 1
-          "
-          (click)="next()"
-        >
-          <prism-icon name="chevron-right" [size]="14" />
-        </button>
-      </div>
-    </nav>
-    }
-  `, 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  "] }]
+        args: [{ selector: 'prism-variant-ribbon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: "@if (variants().length > 0) {\n    <nav class=\"variant-ribbon\">\n        <div\n            class=\"variant-ribbon-tabs\"\n            #tabsContainer>\n            @for (v of variants(); track v.name; let i = $index) {\n                <button\n                    #tabButton\n                    class=\"v-tab\"\n                    [class.v-tab--active]=\"rendererService.activeVariantIndex() === i\"\n                    [style.--i]=\"slot(i).i\"\n                    [style.--n]=\"slot(i).n\"\n                    (click)=\"rendererService.selectVariant(i)\">\n                    {{ v.name }}\n                </button>\n            }\n        </div>\n        <div class=\"variant-ribbon-right\">\n            <button\n                class=\"tool-btn\"\n                title=\"Previous variant\"\n                aria-label=\"Previous variant\"\n                [disabled]=\"rendererService.activeVariantIndex() === 0\"\n                (click)=\"prev()\">\n                <prism-icon\n                    name=\"chevron-right\"\n                    [size]=\"14\"\n                    style=\"transform: rotate(180deg)\" />\n            </button>\n            <button\n                class=\"tool-btn\"\n                title=\"Next variant\"\n                aria-label=\"Next variant\"\n                [disabled]=\"rendererService.activeVariantIndex() >= variants().length - 1\"\n                (click)=\"next()\">\n                <prism-icon\n                    name=\"chevron-right\"\n                    [size]=\"14\" />\n            </button>\n        </div>\n    </nav>\n}\n", styles: [":host {\n    display: block;\n    flex-shrink: 0;\n}\n\n.variant-ribbon {\n    display: flex;\n    align-items: center;\n    height: var(--band-rail);\n    padding: 0 var(--sp-5);\n    background: var(--prism-bg);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.variant-ribbon-tabs {\n    display: flex;\n    flex: 1;\n    gap: 2px;\n    align-items: center;\n    min-width: 0;\n    height: 100%;\n    overflow-x: auto;\n    scrollbar-width: none;\n}\n\n.variant-ribbon-tabs::-webkit-scrollbar {\n    display: none;\n}\n\n.v-tab {\n    position: relative;\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    height: 100%;\n    padding: 0 14px;\n    font-family: var(--font-sans);\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n    cursor: pointer;\n    background: none;\n    border: none;\n    transition: color var(--dur-fast);\n}\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    position: absolute;\n    right: var(--sp-3);\n    bottom: 0;\n    left: var(--sp-3);\n    height: 2px;\n    content: '';\n    background: var(--prism-spectrum);\n    background-position: calc(var(--i) / (var(--n) - 1) * 100%) 0;\n    background-size: calc(var(--n) * 100%) 100%;\n    border-radius: 2px;\n    opacity: 0;\n    transition: opacity var(--dur-fast) var(--ease-default);\n}\n\n.v-tab:hover {\n    color: var(--prism-text-2);\n}\n\n.v-tab--active {\n    color: var(--prism-text);\n}\n\n.v-tab--active::after {\n    opacity: 1;\n}\n\n.v-tab:hover::after {\n    opacity: 0.4;\n}\n\n.variant-ribbon-right {\n    display: flex;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n    height: 24px;\n    padding-left: 12px;\n    margin-left: 12px;\n    border-left: 1px solid var(--prism-border);\n}\n\n.tool-btn {\n    display: grid;\n    place-items: center;\n    width: 24px;\n    height: 24px;\n    color: var(--prism-text-muted);\n    cursor: pointer;\n    background: none;\n    border: none;\n    border-radius: var(--radius-sm);\n    transition: all var(--dur-fast);\n}\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\n.tool-btn:disabled {\n    cursor: default;\n    opacity: 0.3;\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: 168 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismVariantRibbonComponent, { className: "PrismVariantRibbonComponent", filePath: "app/variant-ribbon/prism-variant-ribbon.component.ts", lineNumber: 15 }); })();

package/dist/app/variant-ribbon/spectrum.d.ts

@@ -9,7 +9,7 @@ export interface SpectrumSlot {
  * Maps a variant's index onto the spectrum rail.
  *
  * The CSS reads `calc(var(--i) / (var(--n) - 1) * 100%)`, so n = 1 would
- * divide by zero — and an invalid calc() drops the whole declaration rather
+ * divide by zero, and an invalid calc() drops the whole declaration rather
  * than falling back to a sane default, leaving the result dependent on
  * whatever else happens to target background-position. Reporting a floor of 2
  * keeps the arithmetic defined and parks a lone variant at the start of the

package/dist/app/variant-ribbon/spectrum.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spectrum.d.ts","sourceRoot":"","sources":["../../../src/app/variant-ribbon/spectrum.ts"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,MAAM,WAAW,YAAY;IAC3B,2BAA2B;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,sCAAsC;IACtC,CAAC,EAAE,MAAM,CAAC;CACX;AAED;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,YAAY,CAIvE"}
+{"version":3,"file":"spectrum.d.ts","sourceRoot":"","sources":["../../../src/app/variant-ribbon/spectrum.ts"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,MAAM,WAAW,YAAY;IACzB,2BAA2B;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,sCAAsC;IACtC,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,YAAY,CAKvE"}

package/dist/app/variant-ribbon/spectrum.js

@@ -2,7 +2,7 @@
  * Maps a variant's index onto the spectrum rail.
  *
  * The CSS reads `calc(var(--i) / (var(--n) - 1) * 100%)`, so n = 1 would
- * divide by zero — and an invalid calc() drops the whole declaration rather
+ * divide by zero, and an invalid calc() drops the whole declaration rather
  * than falling back to a sane default, leaving the result dependent on
  * whatever else happens to target background-position. Reporting a floor of 2
  * keeps the arithmetic defined and parks a lone variant at the start of the

package/dist/app/view-tab-bar/next-view-id.d.ts

@@ -3,7 +3,7 @@ import type { PanelDefinition } from '../../plugin/plugin.types.js';
  * The view to switch to, or `null` when the active one still stands.
  *
  * A view survives a component switch for as long as the new component still
- * offers it — that is the whole rule. `renderer` needs no check of its own
+ * offers it. That is the whole rule. `renderer` needs no check of its own
  * because it is the one view every component has: there is no `isVisible` for
  * the Playground, so it can never drop out of the visible list and never
  * needs a fallback away from itself.

package/dist/app/view-tab-bar/next-view-id.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"next-view-id.d.ts","sourceRoot":"","sources":["../../../src/app/view-tab-bar/next-view-id.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAEpE;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CACxB,YAAY,EAAE,MAAM,EACpB,iBAAiB,EAAE,SAAS,eAAe,EAAE,GAC5C,MAAM,GAAG,IAAI,CAKf"}
+{"version":3,"file":"next-view-id.d.ts","sourceRoot":"","sources":["../../../src/app/view-tab-bar/next-view-id.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAEpE;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,YAAY,EAAE,MAAM,EAAE,iBAAiB,EAAE,SAAS,eAAe,EAAE,GAAG,MAAM,GAAG,IAAI,CAG7G"}

package/dist/app/view-tab-bar/next-view-id.js

@@ -2,7 +2,7 @@
  * The view to switch to, or `null` when the active one still stands.
  *
  * A view survives a component switch for as long as the new component still
- * offers it — that is the whole rule. `renderer` needs no check of its own
+ * offers it. That is the whole rule. `renderer` needs no check of its own
  * because it is the one view every component has: there is no `isVisible` for
  * the Playground, so it can never drop out of the visible list and never
  * needs a fallback away from itself.
@@ -10,7 +10,5 @@
 export function nextViewId(activeViewId, visibleViewPanels) {
     if (activeViewId === 'renderer')
         return null;
-    return visibleViewPanels.some((p) => p.id === activeViewId)
-        ? null
-        : 'renderer';
+    return visibleViewPanels.some((p) => p.id === activeViewId) ? null : 'renderer';
 }

package/dist/app/view-tab-bar/prism-view-panel-host.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-view-panel-host.component.d.ts","sourceRoot":"","sources":["../../../src/app/view-tab-bar/prism-view-panel-host.component.ts"],"names":[],"mappings":"AACA,OAAO,EAKL,mBAAmB,EAEnB,SAAS,EAET,KAAK,IAAI,EACV,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;;AAEvE,qBA2Ba,2BAA4B,YAAW,SAAS;IAC3D,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAC5D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA+B;IAE3D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAgC;IAE9D,SAAS,CAAC,QAAQ,CAAC,iBAAiB,+DAAsC;IAC1E,SAAS,CAAC,QAAQ,CAAC,WAAW;;OAE1B;IAEJ,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoC;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA0C;IAExE,SAAS,CAAC,QAAQ,CAAC,cAAc,sDAgB9B;;IAkCH,WAAW,IAAI,IAAI;yCAjER,2BAA2B;2CAA3B,2BAA2B;CAoEvC"}
+{"version":3,"file":"prism-view-panel-host.component.d.ts","sourceRoot":"","sources":["../../../src/app/view-tab-bar/prism-view-panel-host.component.ts"],"names":[],"mappings":"AACA,OAAO,EAA0D,mBAAmB,EAAU,SAAS,EAAU,KAAK,IAAI,EAAE,MAAM,eAAe,CAAC;AAElJ,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;;AAEvE,qBAOa,2BAA4B,YAAW,SAAS;IACzD,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAC5D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA+B;IAE3D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAgC;IAE9D,SAAS,CAAC,QAAQ,CAAC,iBAAiB,+DAAsC;IAC1E,SAAS,CAAC,QAAQ,CAAC,WAAW;;OAE1B;IAEJ,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoC;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA0C;IAExE,SAAS,CAAC,QAAQ,CAAC,cAAc,sDAU9B;;IAiCH,WAAW,IAAI,IAAI;yCA1DV,2BAA2B;2CAA3B,2BAA2B;CA6DvC"}

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

@@ -1,5 +1,5 @@
 import { NgComponentOutlet } from '@angular/common';
-import { Component, computed, createEnvironmentInjector, effect, EnvironmentInjector, inject, signal, } from '@angular/core';
+import { Component, computed, createEnvironmentInjector, effect, EnvironmentInjector, inject, signal } from '@angular/core';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import { PrismPanelService } from '../services/prism-panel.service.js';
 import * as i0 from "@angular/core";
@@ -20,7 +20,7 @@ export class PrismViewPanelHostComponent {
     resolvedComponent = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedComponent" }] : /* istanbul ignore next */ []));
     panelInputs = computed(() => ({
-        activeComponent: this.nav.activeComponent(),
+        activeComponent: this.nav.activeComponent()
     }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelInputs" }] : /* istanbul ignore next */ []));
     lazyCache = new Map();
@@ -72,22 +72,10 @@ export class PrismViewPanelHostComponent {
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.resolvedComponent() ? 1 : -1);
-        } }, dependencies: [NgComponentOutlet], styles: [".prism-view-panel-host[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      overflow: auto;\n      background: var(--%NS%prism-bg-elevated);\n    }"] });
+        } }, dependencies: [NgComponentOutlet], styles: [".prism-view-panel-host[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: auto;\n    background: var(--%NS%prism-bg-elevated);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismViewPanelHostComponent, [{
         type: Component,
-        args: [{ selector: 'prism-view-panel-host', standalone: true, imports: [NgComponentOutlet], template: `
-    <div class="prism-view-panel-host">
-      @if (resolvedComponent()) {
-      <ng-container
-        *ngComponentOutlet="
-          resolvedComponent();
-          inputs: panelInputs();
-          injector: activeInjector()
-        "
-      />
-      }
-    </div>
-  `, styles: ["\n    .prism-view-panel-host {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      overflow: auto;\n      background: var(--prism-bg-elevated);\n    }\n  "] }]
+        args: [{ selector: 'prism-view-panel-host', standalone: true, imports: [NgComponentOutlet], template: "<div class=\"prism-view-panel-host\">\n    @if (resolvedComponent()) {\n        <ng-container *ngComponentOutlet=\"resolvedComponent(); inputs: panelInputs(); injector: activeInjector()\" />\n    }\n</div>\n", styles: [".prism-view-panel-host {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: auto;\n    background: var(--prism-bg-elevated);\n}\n"] }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismViewPanelHostComponent, { className: "PrismViewPanelHostComponent", filePath: "app/view-tab-bar/prism-view-panel-host.component.ts", lineNumber: 43 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismViewPanelHostComponent, { className: "PrismViewPanelHostComponent", filePath: "app/view-tab-bar/prism-view-panel-host.component.ts", lineNumber: 13 }); })();

package/dist/app/view-tab-bar/prism-view-tab-bar.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-view-tab-bar.component.d.ts","sourceRoot":"","sources":["../../../src/app/view-tab-bar/prism-view-tab-bar.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;;AAEvE,qBAgEa,wBAAwB;IACnC,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAE5D,SAAS,CAAC,QAAQ,CAAC,UAAU,6EAAuC;yCAHzD,wBAAwB;2CAAxB,wBAAwB;CAIpC"}
+{"version":3,"file":"prism-view-tab-bar.component.d.ts","sourceRoot":"","sources":["../../../src/app/view-tab-bar/prism-view-tab-bar.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;;AAEvE,qBAOa,wBAAwB;IACjC,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAE5D,SAAS,CAAC,QAAQ,CAAC,UAAU,6EAAuC;yCAH3D,wBAAwB;2CAAxB,wBAAwB;CAIpC"}