@ng-prism/core 22.2.1 → 22.4.0

package/dist/app/component-head/head-metrics.d.ts

@@ -1,7 +1,7 @@
 /**
  * How a metric compares to its threshold.
  *
- * `none` means there is no verdict to give — either the value is missing, or
+ * `none` means there is no verdict to give: either the value is missing, or
  * it is a plain fact with no threshold to compare against, like a count of
  * variants. Those render grey and stay out of the gauge's tally, which counts
  * the metrics that actually passed something.
@@ -28,7 +28,7 @@ export interface GaugeSummary {
 /**
  * Folds the head's metrics into what one chip can say.
  *
- * Deliberately a pure function rather than a computed inside the component:
+ * A pure function instead of a computed inside the component:
  * components using signal inputs cannot be rendered through TestBed in this
  * repo's Jest setup, so any logic left in a template is logic that never gets
  * a test. This mirrors `decorateItem` in the sidebar, which resolves the same

package/dist/app/component-head/head-metrics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"head-metrics.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/head-metrics.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE9D,yDAAyD;AACzD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,aAAa,CAAC;CACxB;AAED,sEAAsE;AACtE,MAAM,WAAW,YAAY;IAC3B,+DAA+D;IAC/D,QAAQ,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,wDAAwD;IACxD,MAAM,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,OAAO,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAC;CACnC;AASD;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,SAAS,UAAU,EAAE,GAAG,YAAY,CAoB7E"}
+{"version":3,"file":"head-metrics.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/head-metrics.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE9D,yDAAyD;AACzD,MAAM,WAAW,UAAU;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,aAAa,CAAC;CAC1B;AAED,sEAAsE;AACtE,MAAM,WAAW,YAAY;IACzB,+DAA+D;IAC/D,QAAQ,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,wDAAwD;IACxD,MAAM,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,OAAO,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAC;CACrC;AASD;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,SAAS,UAAU,EAAE,GAAG,YAAY,CAoB7E"}

package/dist/app/component-head/head-metrics.js

@@ -2,12 +2,12 @@ const SEVERITY = {
     none: 0,
     ok: 0,
     warn: 1,
-    danger: 2,
+    danger: 2
 };
 /**
  * Folds the head's metrics into what one chip can say.
  *
- * Deliberately a pure function rather than a computed inside the component:
+ * A pure function instead of a computed inside the component:
  * components using signal inputs cannot be rendered through TestBed in this
  * repo's Jest setup, so any logic left in a template is logic that never gets
  * a test. This mirrors `decorateItem` in the sidebar, which resolves the same
@@ -34,6 +34,6 @@ export function summarizeMetrics(metrics) {
         measured,
         worst,
         others: deviating > 0 ? deviating - 1 : 0,
-        variant: worst === null ? 'ok' : worst.variant,
+        variant: worst === null ? 'ok' : worst.variant
     };
 }

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

@@ -1,5 +1,5 @@
-import type { HeadMetric } from './head-metrics.js';
 import type { ComponentStatus } from '../../decorator/showcase.types.js';
+import type { HeadMetric } from './head-metrics.js';
 import * as i0 from "@angular/core";
 interface StatusBadge {
     label: string;
@@ -19,8 +19,8 @@ export declare class PrismComponentHeadComponent {
      * The visual regression headline, as the plugin already derived it.
      *
      * Read whole rather than recomputed: the colour follows the plugin's status
-     * semantics — red for any changed variant, amber for ones that could not be
-     * compared — and duplicating that rule here would mean the stat and the
+     * semantics (red for any changed variant, amber for ones that could not be
+     * compared), and duplicating that rule here would mean the stat and the
      * plugin's own panel could disagree about the same component.
      */
     protected readonly vrtStat: import("@angular/core").Signal<{

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

@@ -1 +1 @@
-{"version":3,"file":"prism-component-head.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-component-head.component.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;;AAEzE,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAqBD,qBA6Ia,2BAA2B;IACtC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IAEzD,SAAS,CAAC,QAAQ,CAAC,IAAI,mFAErB;IAEF,SAAS,CAAC,QAAQ,CAAC,QAAQ,yCAGxB;IAEH,SAAS,CAAC,QAAQ,CAAC,YAAY,yCAG5B;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,8DAEvB;IAEF,SAAS,CAAC,QAAQ,CAAC,WAAW,qDAG3B;IAEH,SAAS,CAAC,QAAQ,CAAC,eAAe,gDAM/B;IAkBH,SAAS,CAAC,QAAQ,CAAC,SAAS,gDAEzB;IAEH;;;;;;;OAOG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO;eACjB,MAAM;iBACJ,IAAI,GAAG,MAAM,GAAG,QAAQ;cAUhC;IAEH;;;;;;OAMG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO,+CAyBvB;IAEH,OAAO,CAAC,QAAQ,CAAC,aAAa,CAM3B;yCArHQ,2BAA2B;2CAA3B,2BAA2B;CAsHvC"}
+{"version":3,"file":"prism-component-head.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-component-head.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAGzE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;;AAIpD,UAAU,WAAW;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACnB;AAqBD,qBAQa,2BAA2B;IACpC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IAEzD,SAAS,CAAC,QAAQ,CAAC,IAAI,mFAA4D;IAEnF,SAAS,CAAC,QAAQ,CAAC,QAAQ,yCAIxB;IAEH,SAAS,CAAC,QAAQ,CAAC,YAAY,yCAI5B;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,8DAAwF;IAEjH,SAAS,CAAC,QAAQ,CAAC,WAAW,qDAI3B;IAEH,SAAS,CAAC,QAAQ,CAAC,eAAe,gDAM/B;IAWH,SAAS,CAAC,QAAQ,CAAC,SAAS,gDAEzB;IAEH;;;;;;;OAOG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO;eACf,MAAM;iBACJ,IAAI,GAAG,MAAM,GAAG,QAAQ;cAQlC;IAEH;;;;;;OAMG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO,+CAyBvB;IAEH,OAAO,CAAC,QAAQ,CAAC,aAAa,CAK3B;yCA1GM,2BAA2B;2CAA3B,2BAA2B;CA2GvC"}

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

@@ -1,8 +1,8 @@
-import { Component, inject, computed, ChangeDetectionStrategy, } from '@angular/core';
-import { PrismNavigationService } from '../services/prism-navigation.service.js';
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { A11yAuditService } from '../panels/a11y/a11y-audit.service.js';
-import { PrismHeadInfoComponent } from './prism-head-info.component.js';
+import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import { PrismHeadGaugeComponent } from './prism-head-gauge.component.js';
+import { PrismHeadInfoComponent } from './prism-head-info.component.js';
 import * as i0 from "@angular/core";
 const _c0 = [[["", "headEnd", ""]]];
 const _c1 = ["[headEnd]"];
@@ -51,20 +51,20 @@ function PrismComponentHeadComponent_Conditional_0_Template(rf, ctx) { if (rf &
 const STATUS_BADGES = {
     stable: {
         label: 'Stable',
-        tooltip: 'Migrated and production-ready',
+        tooltip: 'Migrated and production-ready'
     },
     beta: {
         label: 'Beta',
-        tooltip: 'Beta — API may change',
+        tooltip: 'Beta: API may change'
     },
     wip: {
         label: 'Work in progress',
-        tooltip: 'Migration in progress',
+        tooltip: 'Migration in progress'
     },
     deprecated: {
         label: 'Deprecated',
-        tooltip: 'Deprecated / Legacy — do not use in new code',
-    },
+        tooltip: 'Deprecated / Legacy. Do not use in new code'
+    }
 };
 export class PrismComponentHeadComponent {
     navigationService = inject(PrismNavigationService);
@@ -97,19 +97,12 @@ export class PrismComponentHeadComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "coveragePercent" }] : /* istanbul ignore next */ []));
     /*
-     * There is deliberately no bundle metric here.
-     *
-     * The computed that used to produce one read `meta.perf.bundle.gzipKb` and
-     * `.sizeKb`. `@ng-prism/plugin-perf` writes neither: `bundle-scanner.ts`
-     * stores `sourceSize` and `gzipEstimate`, and `perf.types.ts` declares only
-     * those two. So the value was always null, and the old head simply hid the
-     * tile — a gauge row reading `Bundle —` on every component is noise, not
-     * information.
+     * No bundle metric here. Reading `meta.perf.bundle.gzipKb`/`.sizeKb` finds
+     * nothing: `@ng-prism/plugin-perf` stores `sourceSize` and `gzipEstimate`
+     * (see `perf.types.ts`), so the tile would read `Bundle —` everywhere.
      *
-     * Do not re-add the read against the real key names without first settling
-     * whether `gzipEstimate` is bytes or kilobytes. The old code appended ' kb'
-     * to whatever it found, and that question belongs to the perf plugin, not
-     * to the head.
+     * Before wiring it to the real keys, settle with the perf plugin whether
+     * `gzipEstimate` is bytes or kilobytes.
      */
     a11yScore = computed(() => {
         return this.auditService.scoreResult()?.score ?? null;
@@ -119,8 +112,8 @@ export class PrismComponentHeadComponent {
      * The visual regression headline, as the plugin already derived it.
      *
      * Read whole rather than recomputed: the colour follows the plugin's status
-     * semantics — red for any changed variant, amber for ones that could not be
-     * compared — and duplicating that rule here would mean the stat and the
+     * semantics (red for any changed variant, amber for ones that could not be
+     * compared), and duplicating that rule here would mean the stat and the
      * plugin's own panel could disagree about the same component.
      */
     vrtStat = computed(() => {
@@ -128,9 +121,7 @@ export class PrismComponentHeadComponent {
         if (!vrt?.found || !vrt.summary)
             return null;
         const { value, variant } = vrt.summary;
-        return variant === 'ok' || variant === 'warn' || variant === 'danger'
-            ? { value, variant }
-            : null;
+        return variant === 'ok' || variant === 'warn' || variant === 'danger' ? { value, variant } : null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "vrtStat" }] : /* istanbul ignore next */ []));
     /**
@@ -149,29 +140,27 @@ export class PrismComponentHeadComponent {
                 id: 'coverage',
                 label: 'Coverage',
                 value: coverage === null ? '—' : `${coverage}%`,
-                variant: coverage === null ? 'none' : coverage >= 90 ? 'ok' : 'warn',
+                variant: coverage === null ? 'none' : coverage >= 90 ? 'ok' : 'warn'
             },
             {
                 id: 'a11y',
                 label: 'A11y score',
                 value: a11y === null ? '—' : String(a11y),
-                variant: a11y === null ? 'none' : a11y >= 90 ? 'ok' : 'warn',
+                variant: a11y === null ? 'none' : a11y >= 90 ? 'ok' : 'warn'
             },
             {
                 id: 'vrt',
                 label: 'VRT diff',
                 value: vrt === null ? '—' : vrt.value,
-                variant: vrt === null ? 'none' : vrt.variant,
-            },
+                variant: vrt === null ? 'none' : vrt.variant
+            }
         ];
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "metrics" }] : /* istanbul ignore next */ []));
     componentMeta = computed(() => {
         const c = this.comp();
         const meta = c?.meta.showcaseConfig.meta;
-        return meta && typeof meta === 'object'
-            ? meta
-            : null;
+        return meta && typeof meta === 'object' ? meta : null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "componentMeta" }] : /* istanbul ignore next */ []));
     static ɵfac = function PrismComponentHeadComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismComponentHeadComponent)(); };
@@ -181,39 +170,10 @@ export class PrismComponentHeadComponent {
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.comp()) ? 0 : -1, tmp_0_0);
-        } }, dependencies: [PrismHeadInfoComponent, PrismHeadGaugeComponent], styles: ["[_nghost-%COMP%] { display: block; flex-shrink: 0; }\n\n    .comp-head[_ngcontent-%COMP%] {\n      height: var(--%NS%band-head);\n      display: flex;\n      align-items: center;\n      gap: var(--%NS%sp-3);\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    \n\n\n\n\n\n\n    .comp-crumb[_ngcontent-%COMP%] {\n      flex: 0 8 auto;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      font-size: var(--%NS%fs-xs);\n      color: var(--%NS%prism-text-ghost);\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n      white-space: nowrap;\n    }\n    .comp-crumb[_ngcontent-%COMP%]::after { content: ' /'; }\n\n    .comp-title[_ngcontent-%COMP%] {\n      flex: 0 1 auto;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      margin: 0;\n      font-size: var(--%NS%fs-xl);\n      font-weight: 600;\n      letter-spacing: -0.015em;\n      color: var(--%NS%prism-text);\n      white-space: nowrap;\n    }\n\n    .comp-spacer[_ngcontent-%COMP%] { flex: 1; }\n\n    .comp-status[_ngcontent-%COMP%], \n   prism-head-info[_ngcontent-%COMP%], \n   prism-head-gauge[_ngcontent-%COMP%], \n   .comp-head-end[_ngcontent-%COMP%] { flex: none; }\n\n    \n\n\n    .comp-head-end[_ngcontent-%COMP%] { display: inline-flex; align-items: center; }\n    .comp-head-end[_ngcontent-%COMP%]:empty { display: none; }\n\n    \n\n\n\n    .comp-status[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--%NS%sp-2);\n      height: 18px;\n      padding: 0 var(--%NS%sp-3) 0 var(--%NS%sp-2);\n      border-radius: var(--%NS%radius-xs);\n      border: 1px solid currentColor;\n      font-size: var(--%NS%fs-xs);\n      font-weight: 600;\n      letter-spacing: 0.03em;\n      white-space: nowrap;\n      color: var(--%NS%prism-text-muted);\n    }\n    .comp-status-mark[_ngcontent-%COMP%] {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: currentColor;\n    }\n    .comp-status--stable[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-mark-nominal);\n      background: color-mix(in srgb, var(--%NS%prism-mark-nominal) 10%, transparent);\n    }\n    .comp-status--beta[_ngcontent-%COMP%], \n   .comp-status--wip[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-mark-attention);\n      background: color-mix(in srgb, var(--%NS%prism-mark-attention) 10%, transparent);\n    }\n    .comp-status--wip[_ngcontent-%COMP%]   .comp-status-mark[_ngcontent-%COMP%] {\n      background: transparent;\n      border: 1.5px solid currentColor;\n      box-sizing: border-box;\n      width: 7px;\n      height: 7px;\n    }\n    .comp-status--deprecated[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-mark-critical);\n      background: color-mix(in srgb, var(--%NS%prism-mark-critical) 12%, transparent);\n      border-color: color-mix(in srgb, var(--%NS%prism-mark-critical) 55%, transparent);\n    }"] });
+        } }, dependencies: [PrismHeadInfoComponent, PrismHeadGaugeComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n    flex-shrink: 0;\n}\n\n.comp-head[_ngcontent-%COMP%] {\n    display: flex;\n    gap: var(--%NS%sp-3);\n    align-items: center;\n    height: var(--%NS%band-head);\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\n\n\n\n\n\n.comp-crumb[_ngcontent-%COMP%] {\n    flex: 0 8 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    white-space: nowrap;\n}\n\n.comp-crumb[_ngcontent-%COMP%]::after {\n    content: ' /';\n}\n\n.comp-title[_ngcontent-%COMP%] {\n    flex: 0 1 auto;\n    min-width: 0;\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--%NS%fs-xl);\n    font-weight: 600;\n    color: var(--%NS%prism-text);\n    letter-spacing: -0.015em;\n    white-space: nowrap;\n}\n\n.comp-spacer[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.comp-status[_ngcontent-%COMP%], \nprism-head-info[_ngcontent-%COMP%], \nprism-head-gauge[_ngcontent-%COMP%], \n.comp-head-end[_ngcontent-%COMP%] {\n    flex: none;\n}\n\n\n\n\n.comp-head-end[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n}\n\n.comp-head-end[_ngcontent-%COMP%]:empty {\n    display: none;\n}\n\n\n\n\n\n.comp-status[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: var(--%NS%sp-2);\n    align-items: center;\n    height: 18px;\n    padding: 0 var(--%NS%sp-3) 0 var(--%NS%sp-2);\n    font-size: var(--%NS%fs-xs);\n    font-weight: 600;\n    color: var(--%NS%prism-text-muted);\n    letter-spacing: 0.03em;\n    white-space: nowrap;\n    border: 1px solid currentcolor;\n    border-radius: var(--%NS%radius-xs);\n}\n\n.comp-status-mark[_ngcontent-%COMP%] {\n    width: 6px;\n    height: 6px;\n    background: currentcolor;\n    border-radius: 50%;\n}\n\n.comp-status--stable[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-nominal);\n    background: color-mix(in srgb, var(--%NS%prism-mark-nominal) 10%, transparent);\n}\n\n.comp-status--beta[_ngcontent-%COMP%], \n.comp-status--wip[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-attention);\n    background: color-mix(in srgb, var(--%NS%prism-mark-attention) 10%, transparent);\n}\n\n.comp-status--wip[_ngcontent-%COMP%]   .comp-status-mark[_ngcontent-%COMP%] {\n    box-sizing: border-box;\n    width: 7px;\n    height: 7px;\n    background: transparent;\n    border: 1.5px solid currentcolor;\n}\n\n.comp-status--deprecated[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-critical);\n    background: color-mix(in srgb, var(--%NS%prism-mark-critical) 12%, transparent);\n    border-color: color-mix(in srgb, var(--%NS%prism-mark-critical) 55%, transparent);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismComponentHeadComponent, [{
         type: Component,
-        args: [{ selector: 'prism-component-head', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismHeadInfoComponent, PrismHeadGaugeComponent], template: `
-    @if (comp(); as c) {
-    <section class="comp-head">
-      <span class="comp-crumb">{{ category() }}</span>
-      <h1 class="comp-title">{{ c.meta.showcaseConfig.title }}</h1>
-
-      <prism-head-info
-        [selector]="c.meta.componentMeta.selector"
-        [description]="c.meta.showcaseConfig.description"
-        [tags]="c.meta.showcaseConfig.tags ?? []"
-        [variantCount]="variantCount()"
-      />
-
-      @if (statusBadge(); as badge) {
-      <span
-        class="comp-status comp-status--{{ status() }}"
-        [attr.title]="badge.tooltip"
-      >
-        <span class="comp-status-mark" aria-hidden="true"></span>
-        {{ badge.label }}
-      </span>
-      }
-
-      <span class="comp-spacer"></span>
-
-      <prism-head-gauge [metrics]="metrics()" />
-      <span class="comp-head-end"><ng-content select="[headEnd]" /></span>
-    </section>
-    }
-  `, styles: ["\n    :host { display: block; flex-shrink: 0; }\n\n    .comp-head {\n      height: var(--band-head);\n      display: flex;\n      align-items: center;\n      gap: var(--sp-3);\n      padding: 0 var(--sp-5);\n      background: var(--prism-bg);\n      border-bottom: 1px solid var(--prism-border);\n    }\n\n    /* The text yields, the controls never do. A long category and a long title\n       would otherwise push the gauge out of a fixed-height row whose ancestors\n       clip \u2014 making the measurement unreachable in exactly the case where you\n       most want to read it, and costing the gauge the fixed position it was\n       designed around. The trade is deliberate: a title truncated with an\n       ellipsis, so the chip stays put at the right edge. The crumb gives way\n       first, being the least important text in the row. */\n    .comp-crumb {\n      flex: 0 8 auto;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      font-size: var(--fs-xs);\n      color: var(--prism-text-ghost);\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n      white-space: nowrap;\n    }\n    .comp-crumb::after { content: ' /'; }\n\n    .comp-title {\n      flex: 0 1 auto;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      margin: 0;\n      font-size: var(--fs-xl);\n      font-weight: 600;\n      letter-spacing: -0.015em;\n      color: var(--prism-text);\n      white-space: nowrap;\n    }\n\n    .comp-spacer { flex: 1; }\n\n    .comp-status,\n    prism-head-info,\n    prism-head-gauge,\n    .comp-head-end { flex: none; }\n\n    /* Wraps the slot rather than styling the projected element, which this\n       stylesheet cannot reach. :empty keeps the row's trailing gap from\n       appearing when nothing is projected \u2014 comment anchors do not count. */\n    .comp-head-end { display: inline-flex; align-items: center; }\n    .comp-head-end:empty { display: none; }\n\n    /* Always an outline, never a filled surface \u2014 deprecated separates itself\n       by hue, not by weight. A filled alarm-coloured chip in a permanently\n       visible band is exactly the \"red as background texture\" problem this\n       redesign exists to fix. */\n    .comp-status {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--sp-2);\n      height: 18px;\n      padding: 0 var(--sp-3) 0 var(--sp-2);\n      border-radius: var(--radius-xs);\n      border: 1px solid currentColor;\n      font-size: var(--fs-xs);\n      font-weight: 600;\n      letter-spacing: 0.03em;\n      white-space: nowrap;\n      color: var(--prism-text-muted);\n    }\n    .comp-status-mark {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: currentColor;\n    }\n    .comp-status--stable {\n      color: var(--prism-mark-nominal);\n      background: color-mix(in srgb, var(--prism-mark-nominal) 10%, transparent);\n    }\n    .comp-status--beta,\n    .comp-status--wip {\n      color: var(--prism-mark-attention);\n      background: color-mix(in srgb, var(--prism-mark-attention) 10%, transparent);\n    }\n    .comp-status--wip .comp-status-mark {\n      background: transparent;\n      border: 1.5px solid currentColor;\n      box-sizing: border-box;\n      width: 7px;\n      height: 7px;\n    }\n    .comp-status--deprecated {\n      color: var(--prism-mark-critical);\n      background: color-mix(in srgb, var(--prism-mark-critical) 12%, transparent);\n      border-color: color-mix(in srgb, var(--prism-mark-critical) 55%, transparent);\n    }\n  "] }]
+        args: [{ selector: 'prism-component-head', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismHeadInfoComponent, PrismHeadGaugeComponent], template: "@if (comp(); as c) {\n    <section class=\"comp-head\">\n        <span class=\"comp-crumb\">{{ category() }}</span>\n        <h1 class=\"comp-title\">{{ c.meta.showcaseConfig.title }}</h1>\n\n        <prism-head-info\n            [selector]=\"c.meta.componentMeta.selector\"\n            [description]=\"c.meta.showcaseConfig.description\"\n            [tags]=\"c.meta.showcaseConfig.tags ?? []\"\n            [variantCount]=\"variantCount()\" />\n\n        @if (statusBadge(); as badge) {\n            <span\n                class=\"comp-status comp-status--{{ status() }}\"\n                [attr.title]=\"badge.tooltip\">\n                <span\n                    class=\"comp-status-mark\"\n                    aria-hidden=\"true\"></span>\n                {{ badge.label }}\n            </span>\n        }\n\n        <span class=\"comp-spacer\"></span>\n\n        <prism-head-gauge [metrics]=\"metrics()\" />\n        <span class=\"comp-head-end\"><ng-content select=\"[headEnd]\" /></span>\n    </section>\n}\n", styles: [":host {\n    display: block;\n    flex-shrink: 0;\n}\n\n.comp-head {\n    display: flex;\n    gap: var(--sp-3);\n    align-items: center;\n    height: var(--band-head);\n    padding: 0 var(--sp-5);\n    background: var(--prism-bg);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n/* The text yields, the controls never do. A long category and a long title\n   would otherwise push the gauge out of a fixed-height row whose ancestors\n   clip, making the measurement unreachable when you most want to read it,\n   and costing the gauge the fixed position it was designed around. So the\n   title truncates with an ellipsis and the chip stays at the right edge. The crumb gives way\n   first, being the least important text in the row. */\n.comp-crumb {\n    flex: 0 8 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--fs-xs);\n    color: var(--prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    white-space: nowrap;\n}\n\n.comp-crumb::after {\n    content: ' /';\n}\n\n.comp-title {\n    flex: 0 1 auto;\n    min-width: 0;\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--fs-xl);\n    font-weight: 600;\n    color: var(--prism-text);\n    letter-spacing: -0.015em;\n    white-space: nowrap;\n}\n\n.comp-spacer {\n    flex: 1;\n}\n\n.comp-status,\nprism-head-info,\nprism-head-gauge,\n.comp-head-end {\n    flex: none;\n}\n\n/* Wraps the slot rather than styling the projected element, which this\n   stylesheet cannot reach. :empty keeps the row's trailing gap from\n   appearing when nothing is projected; comment anchors do not count. */\n.comp-head-end {\n    display: inline-flex;\n    align-items: center;\n}\n\n.comp-head-end:empty {\n    display: none;\n}\n\n/* Always an outline, never a filled surface. Deprecated separates itself\n   by hue, not by weight. A filled alarm-coloured chip in a permanently\n   visible band is the \"red as background texture\" problem this\n   redesign exists to fix. */\n.comp-status {\n    display: inline-flex;\n    gap: var(--sp-2);\n    align-items: center;\n    height: 18px;\n    padding: 0 var(--sp-3) 0 var(--sp-2);\n    font-size: var(--fs-xs);\n    font-weight: 600;\n    color: var(--prism-text-muted);\n    letter-spacing: 0.03em;\n    white-space: nowrap;\n    border: 1px solid currentcolor;\n    border-radius: var(--radius-xs);\n}\n\n.comp-status-mark {\n    width: 6px;\n    height: 6px;\n    background: currentcolor;\n    border-radius: 50%;\n}\n\n.comp-status--stable {\n    color: var(--prism-mark-nominal);\n    background: color-mix(in srgb, var(--prism-mark-nominal) 10%, transparent);\n}\n\n.comp-status--beta,\n.comp-status--wip {\n    color: var(--prism-mark-attention);\n    background: color-mix(in srgb, var(--prism-mark-attention) 10%, transparent);\n}\n\n.comp-status--wip .comp-status-mark {\n    box-sizing: border-box;\n    width: 7px;\n    height: 7px;\n    background: transparent;\n    border: 1.5px solid currentcolor;\n}\n\n.comp-status--deprecated {\n    color: var(--prism-mark-critical);\n    background: color-mix(in srgb, var(--prism-mark-critical) 12%, transparent);\n    border-color: color-mix(in srgb, var(--prism-mark-critical) 55%, transparent);\n}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismComponentHeadComponent, { className: "PrismComponentHeadComponent", filePath: "app/component-head/prism-component-head.component.ts", lineNumber: 179 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismComponentHeadComponent, { className: "PrismComponentHeadComponent", filePath: "app/component-head/prism-component-head.component.ts", lineNumber: 41 }); })();

package/dist/app/component-head/prism-head-gauge.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-head-gauge.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-head-gauge.component.ts"],"names":[],"mappings":"AAMA,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;;AAGtE;;;;;;;;;;;;GAYG;AACH,qBAmHa,uBAAuB;IAClC,QAAQ,CAAC,OAAO,6DAA2C;IAC3D,SAAS,CAAC,QAAQ,CAAC,OAAO,2EAAoD;IAC9E,SAAS,CAAC,QAAQ,CAAC,SAAS,yCAOzB;yCAVQ,uBAAuB;2CAAvB,uBAAuB;CAWnC"}
+{"version":3,"file":"prism-head-gauge.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-head-gauge.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,UAAU,EAAoB,MAAM,mBAAmB,CAAC;;AAGtE;;;;;;;;;;;;GAYG;AACH,qBAQa,uBAAuB;IAChC,QAAQ,CAAC,OAAO,6DAA2C;IAC3D,SAAS,CAAC,QAAQ,CAAC,OAAO,2EAAoD;IAC9E,SAAS,CAAC,QAAQ,CAAC,SAAS,yCAMzB;yCATM,uBAAuB;2CAAvB,uBAAuB;CAUnC"}

package/dist/app/component-head/prism-head-gauge.component.js

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, input, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { summarizeMetrics } from './head-metrics.js';
 import { PrismStatComponent } from './prism-stat.component.js';
 import * as i0 from "@angular/core";
@@ -82,42 +82,10 @@ export class PrismHeadGaugeComponent {
             i0.ɵɵconditional((tmp_5_0 = ctx.summary().worst) ? 2 : 3, tmp_5_0);
             i0.ɵɵadvance(3);
             i0.ɵɵrepeater(ctx.metrics());
-        } }, dependencies: [PrismStatComponent], styles: ["[_nghost-%COMP%] { display: inline-flex; }\n\n    .gauge[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--%NS%sp-2);\n      height: 20px;\n      padding: 0 var(--%NS%sp-3);\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: var(--%NS%radius-xs);\n      background: transparent;\n      color: var(--%NS%prism-text-muted);\n      font-family: var(--%NS%font-mono);\n      font-size: var(--%NS%fs-xs);\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n      cursor: pointer;\n      anchor-name: --prism-head-gauge;\n    }\n    .gauge[_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--%NS%prism-primary);\n      outline-offset: 1px;\n    }\n    .gauge__dot[_ngcontent-%COMP%] {\n      width: 5px;\n      height: 5px;\n      border-radius: 50%;\n      background: currentColor;\n      opacity: 0.5;\n    }\n    .gauge__more[_ngcontent-%COMP%] { opacity: 0.6; }\n\n    \n\n\n    .gauge--ok[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-mark-nominal);\n      border-color: color-mix(in srgb, var(--%NS%prism-mark-nominal) 40%, transparent);\n    }\n    .gauge--warn[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-mark-attention);\n      border-color: color-mix(in srgb, var(--%NS%prism-mark-attention) 40%, transparent);\n    }\n    .gauge--danger[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-mark-critical);\n      border-color: color-mix(in srgb, var(--%NS%prism-mark-critical) 45%, transparent);\n    }\n    .gauge--ok[_ngcontent-%COMP%]   .gauge__dot[_ngcontent-%COMP%], \n   .gauge--warn[_ngcontent-%COMP%]   .gauge__dot[_ngcontent-%COMP%], \n   .gauge--danger[_ngcontent-%COMP%]   .gauge__dot[_ngcontent-%COMP%] { opacity: 1; }\n\n    .gauge-card[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: var(--%NS%sp-2);\n      min-width: 200px;\n      border: 1px solid var(--%NS%prism-border-strong);\n      border-radius: var(--%NS%radius-md);\n      background: var(--%NS%prism-bg-elevated);\n      box-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.45);\n      gap: 1px;\n      position-anchor: --prism-head-gauge;\n      position-area: block-end span-inline-start;\n      position-try-fallbacks: flip-block, flip-inline;\n      inset: auto;\n    }\n\n    \n\n\n\n    .gauge-card[_ngcontent-%COMP%]:popover-open {\n      display: flex;\n      flex-direction: column;\n    }"] });
+        } }, dependencies: [PrismStatComponent], styles: ["[_nghost-%COMP%] {\n    display: inline-flex;\n}\n\n.gauge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: var(--%NS%sp-2);\n    align-items: center;\n    height: 20px;\n    padding: 0 var(--%NS%sp-3);\n    anchor-name: --prism-head-gauge;\n    font-family: var(--%NS%font-mono);\n    font-size: var(--%NS%fs-xs);\n    font-variant-numeric: tabular-nums;\n    color: var(--%NS%prism-text-muted);\n    white-space: nowrap;\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: var(--%NS%radius-xs);\n}\n\n.gauge[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 1px;\n}\n\n.gauge__dot[_ngcontent-%COMP%] {\n    width: 5px;\n    height: 5px;\n    background: currentcolor;\n    border-radius: 50%;\n    opacity: 0.5;\n}\n\n.gauge__more[_ngcontent-%COMP%] {\n    opacity: 0.6;\n}\n\n\n\n\n.gauge--ok[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-nominal);\n    border-color: color-mix(in srgb, var(--%NS%prism-mark-nominal) 40%, transparent);\n}\n\n.gauge--warn[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-attention);\n    border-color: color-mix(in srgb, var(--%NS%prism-mark-attention) 40%, transparent);\n}\n\n.gauge--danger[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-critical);\n    border-color: color-mix(in srgb, var(--%NS%prism-mark-critical) 45%, transparent);\n}\n\n.gauge--ok[_ngcontent-%COMP%]   .gauge__dot[_ngcontent-%COMP%], \n.gauge--warn[_ngcontent-%COMP%]   .gauge__dot[_ngcontent-%COMP%], \n.gauge--danger[_ngcontent-%COMP%]   .gauge__dot[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.gauge-card[_ngcontent-%COMP%] {\n    inset: auto;\n    gap: 1px;\n    min-width: 200px;\n    padding: var(--%NS%sp-2);\n    margin: 0;\n    position-area: block-end span-inline-start;\n    position-anchor: --prism-head-gauge;\n    position-try-fallbacks: flip-block, flip-inline;\n    background: var(--%NS%prism-bg-elevated);\n    border: 1px solid var(--%NS%prism-border-strong);\n    border-radius: var(--%NS%radius-md);\n    box-shadow: 0 8px 28px -10px rgb(0 0 0 / 45%);\n}\n\n\n\n\n\n.gauge-card[_ngcontent-%COMP%]:popover-open {\n    display: flex;\n    flex-direction: column;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismHeadGaugeComponent, [{
         type: Component,
-        args: [{ selector: 'prism-head-gauge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismStatComponent], template: `
-    <button
-      class="gauge"
-      type="button"
-      [class.gauge--ok]="summary().variant === 'ok'"
-      [class.gauge--warn]="summary().variant === 'warn'"
-      [class.gauge--danger]="summary().variant === 'danger'"
-      popovertarget="prism-head-gauge"
-      [attr.aria-label]="ariaLabel()"
-      [attr.title]="ariaLabel()"
-    >
-      <span class="gauge__dot" aria-hidden="true"></span>
-      @if (summary().worst; as worst) {
-      <span class="gauge__text">{{ worst.label }} {{ worst.value }}</span>
-      @if (summary().others > 0) {
-      <span class="gauge__more">+{{ summary().others }}</span>
-      } } @else {
-      <span class="gauge__text">{{ summary().measured }}</span>
-      }
-    </button>
-
-    <div
-      popover
-      id="prism-head-gauge"
-      class="gauge-card"
-      role="dialog"
-      aria-label="Component metrics"
-    >
-      @for (m of metrics(); track m.id) {
-      <prism-stat [label]="m.label" [value]="m.value" [variant]="m.variant" />
-      }
-    </div>
-  `, styles: ["\n    :host { display: inline-flex; }\n\n    .gauge {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--sp-2);\n      height: 20px;\n      padding: 0 var(--sp-3);\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-xs);\n      background: transparent;\n      color: var(--prism-text-muted);\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n      cursor: pointer;\n      anchor-name: --prism-head-gauge;\n    }\n    .gauge:focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 1px;\n    }\n    .gauge__dot {\n      width: 5px;\n      height: 5px;\n      border-radius: 50%;\n      background: currentColor;\n      opacity: 0.5;\n    }\n    .gauge__more { opacity: 0.6; }\n\n    /* The quiet state is green now, not grey: the gauge says \"these values\n       were measured and all of them are fine\", which is a result, not an\n       absence. A metric with no data at all stays grey in the readout rows. */\n    .gauge--ok {\n      color: var(--prism-mark-nominal);\n      border-color: color-mix(in srgb, var(--prism-mark-nominal) 40%, transparent);\n    }\n    .gauge--warn {\n      color: var(--prism-mark-attention);\n      border-color: color-mix(in srgb, var(--prism-mark-attention) 40%, transparent);\n    }\n    .gauge--danger {\n      color: var(--prism-mark-critical);\n      border-color: color-mix(in srgb, var(--prism-mark-critical) 45%, transparent);\n    }\n    .gauge--ok .gauge__dot,\n    .gauge--warn .gauge__dot,\n    .gauge--danger .gauge__dot { opacity: 1; }\n\n    .gauge-card {\n      margin: 0;\n      padding: var(--sp-2);\n      min-width: 200px;\n      border: 1px solid var(--prism-border-strong);\n      border-radius: var(--radius-md);\n      background: var(--prism-bg-elevated);\n      box-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.45);\n      gap: 1px;\n      position-anchor: --prism-head-gauge;\n      position-area: block-end span-inline-start;\n      position-try-fallbacks: flip-block, flip-inline;\n      inset: auto;\n    }\n\n    /* display belongs on :popover-open and nowhere else \u2014 see the note in\n       prism-template-popover.component.ts. An author display on the base\n       rule outranks the UA's [popover]:not(:popover-open) { display: none }\n       and pins the readout open. */\n    .gauge-card:popover-open {\n      display: flex;\n      flex-direction: column;\n    }\n  "] }]
+        args: [{ selector: 'prism-head-gauge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismStatComponent], template: "<button\n    class=\"gauge\"\n    type=\"button\"\n    [class.gauge--ok]=\"summary().variant === 'ok'\"\n    [class.gauge--warn]=\"summary().variant === 'warn'\"\n    [class.gauge--danger]=\"summary().variant === 'danger'\"\n    popovertarget=\"prism-head-gauge\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.title]=\"ariaLabel()\">\n    <span\n        class=\"gauge__dot\"\n        aria-hidden=\"true\"></span>\n    @if (summary().worst; as worst) {\n        <span class=\"gauge__text\">{{ worst.label }} {{ worst.value }}</span>\n        @if (summary().others > 0) {\n            <span class=\"gauge__more\">+{{ summary().others }}</span>\n        }\n    } @else {\n        <span class=\"gauge__text\">{{ summary().measured }}</span>\n    }\n</button>\n\n<div\n    popover\n    id=\"prism-head-gauge\"\n    class=\"gauge-card\"\n    role=\"dialog\"\n    aria-label=\"Component metrics\">\n    @for (m of metrics(); track m.id) {\n        <prism-stat\n            [label]=\"m.label\"\n            [value]=\"m.value\"\n            [variant]=\"m.variant\" />\n    }\n</div>\n", styles: [":host {\n    display: inline-flex;\n}\n\n.gauge {\n    display: inline-flex;\n    gap: var(--sp-2);\n    align-items: center;\n    height: 20px;\n    padding: 0 var(--sp-3);\n    anchor-name: --prism-head-gauge;\n    font-family: var(--font-mono);\n    font-size: var(--fs-xs);\n    font-variant-numeric: tabular-nums;\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-xs);\n}\n\n.gauge:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 1px;\n}\n\n.gauge__dot {\n    width: 5px;\n    height: 5px;\n    background: currentcolor;\n    border-radius: 50%;\n    opacity: 0.5;\n}\n\n.gauge__more {\n    opacity: 0.6;\n}\n\n/* The quiet state is green now, not grey: the gauge says \"these values\n   were measured and all of them are fine\", which is a result, not an\n   absence. A metric with no data at all stays grey in the readout rows. */\n.gauge--ok {\n    color: var(--prism-mark-nominal);\n    border-color: color-mix(in srgb, var(--prism-mark-nominal) 40%, transparent);\n}\n\n.gauge--warn {\n    color: var(--prism-mark-attention);\n    border-color: color-mix(in srgb, var(--prism-mark-attention) 40%, transparent);\n}\n\n.gauge--danger {\n    color: var(--prism-mark-critical);\n    border-color: color-mix(in srgb, var(--prism-mark-critical) 45%, transparent);\n}\n\n.gauge--ok .gauge__dot,\n.gauge--warn .gauge__dot,\n.gauge--danger .gauge__dot {\n    opacity: 1;\n}\n\n.gauge-card {\n    inset: auto;\n    gap: 1px;\n    min-width: 200px;\n    padding: var(--sp-2);\n    margin: 0;\n    position-area: block-end span-inline-start;\n    position-anchor: --prism-head-gauge;\n    position-try-fallbacks: flip-block, flip-inline;\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border-strong);\n    border-radius: var(--radius-md);\n    box-shadow: 0 8px 28px -10px rgb(0 0 0 / 45%);\n}\n\n/* display belongs on :popover-open and nowhere else (see the note in\n   prism-template-popover.component.ts). An author display on the base\n   rule outranks the UA's [popover]:not(:popover-open) { display: none }\n   and pins the readout open. */\n.gauge-card:popover-open {\n    display: flex;\n    flex-direction: column;\n}\n"] }]
     }], null, { metrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "metrics", required: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismHeadGaugeComponent, { className: "PrismHeadGaugeComponent", filePath: "app/component-head/prism-head-gauge.component.ts", lineNumber: 138 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismHeadGaugeComponent, { className: "PrismHeadGaugeComponent", filePath: "app/component-head/prism-head-gauge.component.ts", lineNumber: 26 }); })();

package/dist/app/component-head/prism-head-info.component.d.ts

@@ -2,7 +2,7 @@ import * as i0 from "@angular/core";
 /**
  * Identity disclosure for the component head.
  *
- * Selector, description and tags all answer "what is this component" — a
+ * Selector, description and tags all answer "what is this component", a
  * question you read once on arrival and never again while building. Keeping
  * them permanently on screen cost a 128px band to say something that belongs
  * behind one glyph.

package/dist/app/component-head/prism-head-info.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-head-info.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-head-info.component.ts"],"names":[],"mappings":";AAGA;;;;;;;;;;;;GAYG;AACH,qBAgHa,sBAAsB;IACjC,QAAQ,CAAC,QAAQ,8CAA4B;IAC7C,QAAQ,CAAC,WAAW,0DAAwC;IAC5D,QAAQ,CAAC,IAAI,yDAAgC;IAC7C,QAAQ,CAAC,YAAY,8CAAoB;yCAJ9B,sBAAsB;2CAAtB,sBAAsB;CAKlC"}
+{"version":3,"file":"prism-head-info.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-head-info.component.ts"],"names":[],"mappings":";AAGA;;;;;;;;;;;;GAYG;AACH,qBAQa,sBAAsB;IAC/B,QAAQ,CAAC,QAAQ,8CAA4B;IAC7C,QAAQ,CAAC,WAAW,0DAAwC;IAC5D,QAAQ,CAAC,IAAI,yDAAgC;IAC7C,QAAQ,CAAC,YAAY,8CAAoB;yCAJhC,sBAAsB;2CAAtB,sBAAsB;CAKlC"}

package/dist/app/component-head/prism-head-info.component.js

@@ -40,7 +40,7 @@ function PrismHeadInfoComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
 /**
  * Identity disclosure for the component head.
  *
- * Selector, description and tags all answer "what is this component" — a
+ * Selector, description and tags all answer "what is this component", a
  * question you read once on arrival and never again while building. Keeping
  * them permanently on screen cost a 128px band to say something that belongs
  * behind one glyph.
@@ -82,43 +82,10 @@ export class PrismHeadInfoComponent {
             i0.ɵɵconditional(ctx.variantCount() > 0 ? 6 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.tags().length ? 7 : -1);
-        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] { display: inline-flex; }\n\n    .info-btn[_ngcontent-%COMP%] {\n      display: grid;\n      place-items: center;\n      width: 20px;\n      height: 20px;\n      padding: 0;\n      border: 0;\n      border-radius: var(--%NS%radius-xs);\n      background: transparent;\n      color: var(--%NS%prism-text-ghost);\n      cursor: pointer;\n      anchor-name: --prism-head-info;\n    }\n    .info-btn[_ngcontent-%COMP%]:hover { color: var(--%NS%prism-text-2); }\n    .info-btn[_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--%NS%prism-primary);\n      outline-offset: 1px;\n    }\n\n    .info-card[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: var(--%NS%sp-4);\n      width: 320px;\n      max-width: calc(100vw - var(--%NS%sp-6));\n      border: 1px solid var(--%NS%prism-border-strong);\n      border-radius: var(--%NS%radius-md);\n      background: var(--%NS%prism-bg-elevated);\n      color: var(--%NS%prism-text-2);\n      box-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.45);\n      position-anchor: --prism-head-info;\n      position-area: block-end span-inline-end;\n      position-try-fallbacks: flip-block, flip-inline;\n      inset: auto;\n    }\n\n    .info-card__selector[_ngcontent-%COMP%] {\n      display: block;\n      font-family: var(--%NS%font-mono);\n      font-size: var(--%NS%fs-md);\n      color: var(--%NS%prism-primary);\n      user-select: all;\n    }\n    .info-card__desc[_ngcontent-%COMP%] {\n      margin: var(--%NS%sp-3) 0 0;\n      font-size: var(--%NS%fs-lg);\n      line-height: 1.55;\n    }\n    \n\n\n    .info-card__meta[_ngcontent-%COMP%] {\n      margin: var(--%NS%sp-3) 0 0;\n      font-size: var(--%NS%fs-md);\n      color: var(--%NS%prism-text-muted);\n    }\n    .info-card__tags[_ngcontent-%COMP%] {\n      margin-top: var(--%NS%sp-4);\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--%NS%sp-2);\n    }\n    .info-card__tag[_ngcontent-%COMP%] {\n      padding: 1px var(--%NS%sp-3);\n      font-size: var(--%NS%fs-xs);\n      border-radius: var(--%NS%radius-xs);\n      border: 1px solid var(--%NS%prism-border);\n      color: var(--%NS%prism-text-muted);\n    }"] });
+        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] {\n    display: inline-flex;\n}\n\n.info-btn[_ngcontent-%COMP%] {\n    display: grid;\n    place-items: center;\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    anchor-name: --prism-head-info;\n    color: var(--%NS%prism-text-ghost);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--%NS%radius-xs);\n}\n\n.info-btn[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text-2);\n}\n\n.info-btn[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 1px;\n}\n\n.info-card[_ngcontent-%COMP%] {\n    inset: auto;\n    width: 320px;\n    max-width: calc(100vw - var(--%NS%sp-6));\n    padding: var(--%NS%sp-4);\n    margin: 0;\n    position-area: block-end span-inline-end;\n    position-anchor: --prism-head-info;\n    position-try-fallbacks: flip-block, flip-inline;\n    color: var(--%NS%prism-text-2);\n    background: var(--%NS%prism-bg-elevated);\n    border: 1px solid var(--%NS%prism-border-strong);\n    border-radius: var(--%NS%radius-md);\n    box-shadow: 0 8px 28px -10px rgb(0 0 0 / 45%);\n}\n\n.info-card__selector[_ngcontent-%COMP%] {\n    display: block;\n    font-family: var(--%NS%font-mono);\n    font-size: var(--%NS%fs-md);\n    color: var(--%NS%prism-primary);\n    user-select: all;\n}\n\n.info-card__desc[_ngcontent-%COMP%] {\n    margin: var(--%NS%sp-3) 0 0;\n    font-size: var(--%NS%fs-lg);\n    line-height: 1.55;\n}\n\n\n\n\n.info-card__meta[_ngcontent-%COMP%] {\n    margin: var(--%NS%sp-3) 0 0;\n    font-size: var(--%NS%fs-md);\n    color: var(--%NS%prism-text-muted);\n}\n\n.info-card__tags[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--%NS%sp-2);\n    margin-top: var(--%NS%sp-4);\n}\n\n.info-card__tag[_ngcontent-%COMP%] {\n    padding: 1px var(--%NS%sp-3);\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-muted);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: var(--%NS%radius-xs);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismHeadInfoComponent, [{
         type: Component,
-        args: [{ selector: 'prism-head-info', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: `
-    <button
-      class="info-btn"
-      type="button"
-      popovertarget="prism-head-info"
-      title="Component details"
-      aria-label="Component details"
-    >
-      <prism-icon name="info" [size]="13" />
-    </button>
-
-    <div
-      popover
-      id="prism-head-info"
-      class="info-card"
-      role="dialog"
-      aria-label="Component details"
-    >
-      <code class="info-card__selector">&lt;{{ selector() }}&gt;</code>
-      @if (description()) {
-      <p class="info-card__desc">{{ description() }}</p>
-      } @if (variantCount() > 0) {
-      <p class="info-card__meta">
-        {{ variantCount() }} {{ variantCount() === 1 ? 'variant' : 'variants' }}
-      </p>
-      } @if (tags().length) {
-      <div class="info-card__tags">
-        @for (tag of tags(); track tag) {
-        <span class="info-card__tag">{{ tag }}</span>
-        }
-      </div>
-      }
-    </div>
-  `, styles: ["\n    :host { display: inline-flex; }\n\n    .info-btn {\n      display: grid;\n      place-items: center;\n      width: 20px;\n      height: 20px;\n      padding: 0;\n      border: 0;\n      border-radius: var(--radius-xs);\n      background: transparent;\n      color: var(--prism-text-ghost);\n      cursor: pointer;\n      anchor-name: --prism-head-info;\n    }\n    .info-btn:hover { color: var(--prism-text-2); }\n    .info-btn:focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 1px;\n    }\n\n    .info-card {\n      margin: 0;\n      padding: var(--sp-4);\n      width: 320px;\n      max-width: calc(100vw - var(--sp-6));\n      border: 1px solid var(--prism-border-strong);\n      border-radius: var(--radius-md);\n      background: var(--prism-bg-elevated);\n      color: var(--prism-text-2);\n      box-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.45);\n      position-anchor: --prism-head-info;\n      position-area: block-end span-inline-end;\n      position-try-fallbacks: flip-block, flip-inline;\n      inset: auto;\n    }\n\n    .info-card__selector {\n      display: block;\n      font-family: var(--font-mono);\n      font-size: var(--fs-md);\n      color: var(--prism-primary);\n      user-select: all;\n    }\n    .info-card__desc {\n      margin: var(--sp-3) 0 0;\n      font-size: var(--fs-lg);\n      line-height: 1.55;\n    }\n    /* A plain fact about the component, not a measurement \u2014 it sits here with\n       the selector and the tags rather than in the gauge, whose numbers all\n       answer \"did this pass its threshold\". A count cannot. */\n    .info-card__meta {\n      margin: var(--sp-3) 0 0;\n      font-size: var(--fs-md);\n      color: var(--prism-text-muted);\n    }\n    .info-card__tags {\n      margin-top: var(--sp-4);\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--sp-2);\n    }\n    .info-card__tag {\n      padding: 1px var(--sp-3);\n      font-size: var(--fs-xs);\n      border-radius: var(--radius-xs);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n    }\n  "] }]
+        args: [{ selector: 'prism-head-info', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: "<button\n    class=\"info-btn\"\n    type=\"button\"\n    popovertarget=\"prism-head-info\"\n    title=\"Component details\"\n    aria-label=\"Component details\">\n    <prism-icon\n        name=\"info\"\n        [size]=\"13\" />\n</button>\n\n<div\n    popover\n    id=\"prism-head-info\"\n    class=\"info-card\"\n    role=\"dialog\"\n    aria-label=\"Component details\">\n    <code class=\"info-card__selector\">&lt;{{ selector() }}&gt;</code>\n    @if (description()) {\n        <p class=\"info-card__desc\">{{ description() }}</p>\n    }\n    @if (variantCount() > 0) {\n        <p class=\"info-card__meta\"> {{ variantCount() }} {{ variantCount() === 1 ? 'variant' : 'variants' }} </p>\n    }\n    @if (tags().length) {\n        <div class=\"info-card__tags\">\n            @for (tag of tags(); track tag) {\n                <span class=\"info-card__tag\">{{ tag }}</span>\n            }\n        </div>\n    }\n</div>\n", styles: [":host {\n    display: inline-flex;\n}\n\n.info-btn {\n    display: grid;\n    place-items: center;\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    anchor-name: --prism-head-info;\n    color: var(--prism-text-ghost);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--radius-xs);\n}\n\n.info-btn:hover {\n    color: var(--prism-text-2);\n}\n\n.info-btn:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 1px;\n}\n\n.info-card {\n    inset: auto;\n    width: 320px;\n    max-width: calc(100vw - var(--sp-6));\n    padding: var(--sp-4);\n    margin: 0;\n    position-area: block-end span-inline-end;\n    position-anchor: --prism-head-info;\n    position-try-fallbacks: flip-block, flip-inline;\n    color: var(--prism-text-2);\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border-strong);\n    border-radius: var(--radius-md);\n    box-shadow: 0 8px 28px -10px rgb(0 0 0 / 45%);\n}\n\n.info-card__selector {\n    display: block;\n    font-family: var(--font-mono);\n    font-size: var(--fs-md);\n    color: var(--prism-primary);\n    user-select: all;\n}\n\n.info-card__desc {\n    margin: var(--sp-3) 0 0;\n    font-size: var(--fs-lg);\n    line-height: 1.55;\n}\n\n/* A plain fact about the component, not a measurement. It sits here with\n   the selector and the tags rather than in the gauge, whose numbers all\n   answer \"did this pass its threshold\". A count cannot. */\n.info-card__meta {\n    margin: var(--sp-3) 0 0;\n    font-size: var(--fs-md);\n    color: var(--prism-text-muted);\n}\n\n.info-card__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--sp-2);\n    margin-top: var(--sp-4);\n}\n\n.info-card__tag {\n    padding: 1px var(--sp-3);\n    font-size: var(--fs-xs);\n    color: var(--prism-text-muted);\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-xs);\n}\n"] }]
     }], null, { selector: [{ type: i0.Input, args: [{ isSignal: true, alias: "selector", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }], variantCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "variantCount", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismHeadInfoComponent, { className: "PrismHeadInfoComponent", filePath: "app/component-head/prism-head-info.component.ts", lineNumber: 129 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismHeadInfoComponent, { className: "PrismHeadInfoComponent", filePath: "app/component-head/prism-head-info.component.ts", lineNumber: 25 }); })();

package/dist/app/component-head/prism-stat.component.d.ts

@@ -4,7 +4,7 @@ import * as i0 from "@angular/core";
  * One line of the gauge's readout: caption left, value right.
  *
  * Was a right-aligned tile in the old head. The pill it used to carry is gone
- * rather than restyled — it duplicated the caption directly beneath it.
+ * rather than restyled, because it duplicated the caption directly beneath it.
  */
 export declare class PrismStatComponent {
     readonly label: import("@angular/core").InputSignal<string>;

package/dist/app/component-head/prism-stat.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-stat.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-stat.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;;AAEvD;;;;;GAKG;AACH,qBAoDa,kBAAkB;IAC7B,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,QAAQ,CAAC,KAAK,uDAAqC;IACnD,QAAQ,CAAC,OAAO,qDAA8B;yCAHnC,kBAAkB;2CAAlB,kBAAkB;CAI9B"}
+{"version":3,"file":"prism-stat.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-stat.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;;AAEvD;;;;;GAKG;AACH,qBAOa,kBAAkB;IAC3B,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,QAAQ,CAAC,KAAK,uDAAqC;IACnD,QAAQ,CAAC,OAAO,qDAA8B;yCAHrC,kBAAkB;2CAAlB,kBAAkB;CAI9B"}

package/dist/app/component-head/prism-stat.component.js

@@ -4,7 +4,7 @@ import * as i0 from "@angular/core";
  * One line of the gauge's readout: caption left, value right.
  *
  * Was a right-aligned tile in the old head. The pill it used to carry is gone
- * rather than restyled — it duplicated the caption directly beneath it.
+ * rather than restyled, because it duplicated the caption directly beneath it.
  */
 export class PrismStatComponent {
     label = input.required(/* @ts-ignore */
@@ -29,21 +29,10 @@ export class PrismStatComponent {
             i0.ɵɵtextInterpolate(ctx.label());
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(ctx.value());
-        } }, styles: [".stat[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: var(--%NS%sp-3);\n      padding: var(--%NS%sp-2) var(--%NS%sp-3);\n      border-radius: var(--%NS%radius-xs);\n      font-size: var(--%NS%fs-md);\n      color: var(--%NS%prism-text-2);\n    }\n    .stat__dot[_ngcontent-%COMP%] {\n      width: 5px;\n      height: 5px;\n      border-radius: 50%;\n      background: transparent;\n      flex: none;\n    }\n    .stat__lbl[_ngcontent-%COMP%] { white-space: nowrap; }\n    .stat__val[_ngcontent-%COMP%] {\n      margin-left: auto;\n      font-family: var(--%NS%font-mono);\n      font-variant-numeric: tabular-nums;\n      color: var(--%NS%prism-text);\n    }\n    \n\n\n\n    .stat--ok[_ngcontent-%COMP%]   .stat__dot[_ngcontent-%COMP%] { background: var(--%NS%prism-mark-nominal); }\n    .stat--ok[_ngcontent-%COMP%]   .stat__val[_ngcontent-%COMP%] { color: var(--%NS%prism-mark-nominal); }\n    .stat--warn[_ngcontent-%COMP%]   .stat__dot[_ngcontent-%COMP%] { background: var(--%NS%prism-mark-attention); }\n    .stat--warn[_ngcontent-%COMP%]   .stat__val[_ngcontent-%COMP%] { color: var(--%NS%prism-mark-attention); }\n    .stat--danger[_ngcontent-%COMP%]   .stat__dot[_ngcontent-%COMP%] { background: var(--%NS%prism-mark-critical); }\n    .stat--danger[_ngcontent-%COMP%]   .stat__val[_ngcontent-%COMP%] { color: var(--%NS%prism-mark-critical); }"] });
+        } }, styles: [".stat[_ngcontent-%COMP%] {\n    display: flex;\n    gap: var(--%NS%sp-3);\n    align-items: center;\n    padding: var(--%NS%sp-2) var(--%NS%sp-3);\n    font-size: var(--%NS%fs-md);\n    color: var(--%NS%prism-text-2);\n    border-radius: var(--%NS%radius-xs);\n}\n\n.stat__dot[_ngcontent-%COMP%] {\n    flex: none;\n    width: 5px;\n    height: 5px;\n    background: transparent;\n    border-radius: 50%;\n}\n\n.stat__lbl[_ngcontent-%COMP%] {\n    white-space: nowrap;\n}\n\n.stat__val[_ngcontent-%COMP%] {\n    margin-left: auto;\n    font-family: var(--%NS%font-mono);\n    font-variant-numeric: tabular-nums;\n    color: var(--%NS%prism-text);\n}\n\n\n\n\n\n.stat--ok[_ngcontent-%COMP%]   .stat__dot[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-mark-nominal);\n}\n\n.stat--ok[_ngcontent-%COMP%]   .stat__val[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-nominal);\n}\n\n.stat--warn[_ngcontent-%COMP%]   .stat__dot[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-mark-attention);\n}\n\n.stat--warn[_ngcontent-%COMP%]   .stat__val[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-attention);\n}\n\n.stat--danger[_ngcontent-%COMP%]   .stat__dot[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-mark-critical);\n}\n\n.stat--danger[_ngcontent-%COMP%]   .stat__val[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-critical);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismStatComponent, [{
         type: Component,
-        args: [{ selector: 'prism-stat', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div
-      class="stat"
-      [class.stat--ok]="variant() === 'ok'"
-      [class.stat--warn]="variant() === 'warn'"
-      [class.stat--danger]="variant() === 'danger'"
-    >
-      <span class="stat__dot" aria-hidden="true"></span>
-      <span class="stat__lbl">{{ label() }}</span>
-      <span class="stat__val">{{ value() }}</span>
-    </div>
-  `, styles: ["\n    .stat {\n      display: flex;\n      align-items: center;\n      gap: var(--sp-3);\n      padding: var(--sp-2) var(--sp-3);\n      border-radius: var(--radius-xs);\n      font-size: var(--fs-md);\n      color: var(--prism-text-2);\n    }\n    .stat__dot {\n      width: 5px;\n      height: 5px;\n      border-radius: 50%;\n      background: transparent;\n      flex: none;\n    }\n    .stat__lbl { white-space: nowrap; }\n    .stat__val {\n      margin-left: auto;\n      font-family: var(--font-mono);\n      font-variant-numeric: tabular-nums;\n      color: var(--prism-text);\n    }\n    /* Four states, four treatments. \"ok\" earns the nominal green, and \"none\"\n       deliberately does not: a metric with no data has nothing to report, and\n       colouring it green would claim a clean result the tool never measured.\n       That is the one distinction worth keeping grey. */\n    .stat--ok .stat__dot { background: var(--prism-mark-nominal); }\n    .stat--ok .stat__val { color: var(--prism-mark-nominal); }\n    .stat--warn .stat__dot { background: var(--prism-mark-attention); }\n    .stat--warn .stat__val { color: var(--prism-mark-attention); }\n    .stat--danger .stat__dot { background: var(--prism-mark-critical); }\n    .stat--danger .stat__val { color: var(--prism-mark-critical); }\n  "] }]
+        args: [{ selector: 'prism-stat', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"stat\"\n    [class.stat--ok]=\"variant() === 'ok'\"\n    [class.stat--warn]=\"variant() === 'warn'\"\n    [class.stat--danger]=\"variant() === 'danger'\">\n    <span\n        class=\"stat__dot\"\n        aria-hidden=\"true\"></span>\n    <span class=\"stat__lbl\">{{ label() }}</span>\n    <span class=\"stat__val\">{{ value() }}</span>\n</div>\n", styles: [".stat {\n    display: flex;\n    gap: var(--sp-3);\n    align-items: center;\n    padding: var(--sp-2) var(--sp-3);\n    font-size: var(--fs-md);\n    color: var(--prism-text-2);\n    border-radius: var(--radius-xs);\n}\n\n.stat__dot {\n    flex: none;\n    width: 5px;\n    height: 5px;\n    background: transparent;\n    border-radius: 50%;\n}\n\n.stat__lbl {\n    white-space: nowrap;\n}\n\n.stat__val {\n    margin-left: auto;\n    font-family: var(--font-mono);\n    font-variant-numeric: tabular-nums;\n    color: var(--prism-text);\n}\n\n/* Four states, four treatments. \"ok\" gets the nominal green, and \"none\"\n   does not: a metric with no data has nothing to report, and\n   colouring it green would claim a clean result the tool never measured.\n   That is the one distinction worth keeping grey. */\n.stat--ok .stat__dot {\n    background: var(--prism-mark-nominal);\n}\n\n.stat--ok .stat__val {\n    color: var(--prism-mark-nominal);\n}\n\n.stat--warn .stat__dot {\n    background: var(--prism-mark-attention);\n}\n\n.stat--warn .stat__val {\n    color: var(--prism-mark-attention);\n}\n\n.stat--danger .stat__dot {\n    background: var(--prism-mark-critical);\n}\n\n.stat--danger .stat__val {\n    color: var(--prism-mark-critical);\n}\n"] }]
     }], null, { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismStatComponent, { className: "PrismStatComponent", filePath: "app/component-head/prism-stat.component.ts", lineNumber: 62 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismStatComponent, { className: "PrismStatComponent", filePath: "app/component-head/prism-stat.component.ts", lineNumber: 17 }); })();

package/dist/app/controls/boolean-control.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"boolean-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/boolean-control.component.ts"],"names":[],"mappings":";AAOA,qBA+Ca,uBAAuB;IAClC,QAAQ,CAAC,KAAK,+CAAgB;IAC9B,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,WAAW,oDAAqB;yCAJ9B,uBAAuB;2CAAvB,uBAAuB;CAKnC"}
+{"version":3,"file":"boolean-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/boolean-control.component.ts"],"names":[],"mappings":";AAEA,qBAOa,uBAAuB;IAChC,QAAQ,CAAC,KAAK,+CAAgB;IAC9B,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,WAAW,oDAAqB;yCAJhC,uBAAuB;2CAAvB,uBAAuB;CAKnC"}

package/dist/app/controls/boolean-control.component.js

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, input, output, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
 import * as i0 from "@angular/core";
 export class BooleanControlComponent {
     value = input(false, /* @ts-ignore */
@@ -16,18 +16,10 @@ export class BooleanControlComponent {
         } if (rf & 2) {
             i0.ɵɵclassProp("on", ctx.value());
             i0.ɵɵattribute("aria-checked", ctx.value());
-        } }, styles: [".ctl-toggle[_ngcontent-%COMP%] {\n      position: relative;\n      width: 34px;\n      height: 18px;\n      border-radius: 9px;\n      background: var(--%NS%prism-input-bg);\n      border: 1px solid var(--%NS%prism-border);\n      transition: all var(--%NS%dur-fast);\n      cursor: pointer;\n      flex-shrink: 0;\n      padding: 0;\n    }\n    .ctl-toggle[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      left: 2px;\n      top: 2px;\n      width: 12px;\n      height: 12px;\n      border-radius: 50%;\n      background: var(--%NS%prism-text-muted);\n      transition: transform var(--%NS%dur-fast), background var(--%NS%dur-fast);\n    }\n    .ctl-toggle.on[_ngcontent-%COMP%] {\n      background: var(--%NS%prism-primary);\n      border-color: var(--%NS%prism-primary);\n    }\n    .ctl-toggle.on[_ngcontent-%COMP%]::after {\n      transform: translateX(16px);\n      background: white;\n    }"] });
+        } }, styles: [".ctl-toggle[_ngcontent-%COMP%] {\n    position: relative;\n    flex-shrink: 0;\n    width: 34px;\n    height: 18px;\n    padding: 0;\n    cursor: pointer;\n    background: var(--%NS%prism-input-bg);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 9px;\n    transition: all var(--%NS%dur-fast);\n}\n\n.ctl-toggle[_ngcontent-%COMP%]::after {\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 12px;\n    height: 12px;\n    content: '';\n    background: var(--%NS%prism-text-muted);\n    border-radius: 50%;\n    transition:\n        transform var(--%NS%dur-fast),\n        background var(--%NS%dur-fast);\n}\n\n.ctl-toggle.on[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-primary);\n    border-color: var(--%NS%prism-primary);\n}\n\n.ctl-toggle.on[_ngcontent-%COMP%]::after {\n    background: white;\n    transform: translateX(16px);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BooleanControlComponent, [{
         type: Component,
-        args: [{ selector: 'prism-boolean-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <button
-      class="ctl-toggle"
-      [class.on]="value()"
-      (click)="valueChange.emit(!value())"
-      role="switch"
-      [attr.aria-checked]="value()"
-    ></button>
-  `, styles: ["\n    .ctl-toggle {\n      position: relative;\n      width: 34px;\n      height: 18px;\n      border-radius: 9px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      transition: all var(--dur-fast);\n      cursor: pointer;\n      flex-shrink: 0;\n      padding: 0;\n    }\n    .ctl-toggle::after {\n      content: '';\n      position: absolute;\n      left: 2px;\n      top: 2px;\n      width: 12px;\n      height: 12px;\n      border-radius: 50%;\n      background: var(--prism-text-muted);\n      transition: transform var(--dur-fast), background var(--dur-fast);\n    }\n    .ctl-toggle.on {\n      background: var(--prism-primary);\n      border-color: var(--prism-primary);\n    }\n    .ctl-toggle.on::after {\n      transform: translateX(16px);\n      background: white;\n    }\n  "] }]
+        args: [{ selector: 'prism-boolean-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    class=\"ctl-toggle\"\n    [class.on]=\"value()\"\n    (click)=\"valueChange.emit(!value())\"\n    role=\"switch\"\n    [attr.aria-checked]=\"value()\"></button>\n", styles: [".ctl-toggle {\n    position: relative;\n    flex-shrink: 0;\n    width: 34px;\n    height: 18px;\n    padding: 0;\n    cursor: pointer;\n    background: var(--prism-input-bg);\n    border: 1px solid var(--prism-border);\n    border-radius: 9px;\n    transition: all var(--dur-fast);\n}\n\n.ctl-toggle::after {\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 12px;\n    height: 12px;\n    content: '';\n    background: var(--prism-text-muted);\n    border-radius: 50%;\n    transition:\n        transform var(--dur-fast),\n        background var(--dur-fast);\n}\n\n.ctl-toggle.on {\n    background: var(--prism-primary);\n    border-color: var(--prism-primary);\n}\n\n.ctl-toggle.on::after {\n    background: white;\n    transform: translateX(16px);\n}\n"] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], typeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeName", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BooleanControlComponent, { className: "BooleanControlComponent", filePath: "app/controls/boolean-control.component.ts", lineNumber: 55 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BooleanControlComponent, { className: "BooleanControlComponent", filePath: "app/controls/boolean-control.component.ts", lineNumber: 10 }); })();

package/dist/app/controls/json-control.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"json-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/json-control.component.ts"],"names":[],"mappings":";AAWA,wBAAgB,aAAa,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,CAanD;AAED,wBAAgB,uBAAuB,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM,CAU5D;AAED,qBAuFa,oBAAoB;IAC/B,QAAQ,CAAC,KAAK,+CAAwB;IACtC,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,WAAW,oDAAqB;IAEzC,QAAQ,CAAC,UAAU,kDAAiB;IACpC,QAAQ,CAAC,SAAS,wDAA+B;IAEjD,OAAO,CAAC,QAAQ,CAAC,UAAU,CACgC;IAC3D,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAkD;IAExE,QAAQ,CAAC,WAAW,yCAIjB;IAEH,QAAQ,CAAC,eAAe,yCAAqD;IAE7E,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAW1B,UAAU,IAAI,IAAI;yCAhCP,oBAAoB;2CAApB,oBAAoB;CAwChC"}
+{"version":3,"file":"json-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/json-control.component.ts"],"names":[],"mappings":";AAEA,wBAAgB,aAAa,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,CAanD;AAED,wBAAgB,uBAAuB,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM,CAW5D;AAED,qBAOa,oBAAoB;IAC7B,QAAQ,CAAC,KAAK,+CAAwB;IACtC,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,WAAW,oDAAqB;IAEzC,QAAQ,CAAC,UAAU,kDAAiB;IACpC,QAAQ,CAAC,SAAS,wDAA+B;IAEjD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA4D;IACvF,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAkD;IAExE,QAAQ,CAAC,WAAW,yCAKjB;IAEH,QAAQ,CAAC,eAAe,yCAAqD;IAE7E,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAY1B,UAAU,IAAI,IAAI;yCAjCT,oBAAoB;2CAApB,oBAAoB;CA0ChC"}