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

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

@@ -1,149 +1,52 @@
 import { Component, inject, computed, ChangeDetectionStrategy, } from '@angular/core';
-import { PrismIconComponent } from '../icons/prism-icon.component.js';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import { A11yAuditService } from '../panels/a11y/a11y-audit.service.js';
-import { PrismStatComponent } from './prism-stat.component.js';
+import { PrismHeadInfoComponent } from './prism-head-info.component.js';
+import { PrismHeadGaugeComponent } from './prism-head-gauge.component.js';
 import * as i0 from "@angular/core";
-function PrismComponentHeadComponent_Conditional_0_Conditional_13_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-icon", 15);
-} if (rf & 2) {
-    i0.ɵɵproperty("size", 13);
-} }
-function PrismComponentHeadComponent_Conditional_0_Conditional_13_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 16);
-} }
-function PrismComponentHeadComponent_Conditional_0_Conditional_13_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 17);
-} }
-function PrismComponentHeadComponent_Conditional_0_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+const _c0 = [[["", "headEnd", ""]]];
+const _c1 = ["[headEnd]"];
+const _c2 = () => [];
+function PrismComponentHeadComponent_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵconditionalCreate(1, PrismComponentHeadComponent_Conditional_0_Conditional_13_Conditional_1_Template, 1, 1, "prism-icon", 15)(2, PrismComponentHeadComponent_Conditional_0_Conditional_13_Conditional_2_Template, 1, 0, "span", 16)(3, PrismComponentHeadComponent_Conditional_0_Conditional_13_Conditional_3_Template, 1, 0, "span", 17);
-    i0.ɵɵelementStart(4, "span", 18);
-    i0.ɵɵtext(5);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const s_r1 = ctx;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassMap(i0.ɵɵinterpolate1("comp-status comp-status--", s_r1));
-    i0.ɵɵattribute("title", ctx_r1.statusBadge().tooltip);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(s_r1 === "stable" ? 1 : s_r1 === "wip" ? 2 : 3);
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r1.statusBadge().label);
-} }
-function PrismComponentHeadComponent_Conditional_0_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 7);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const c_r3 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(c_r3.meta.showcaseConfig.description);
-} }
-function PrismComponentHeadComponent_Conditional_0_Conditional_15_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 19);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const tag_r4 = ctx.$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(tag_r4);
-} }
-function PrismComponentHeadComponent_Conditional_0_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵrepeaterCreate(1, PrismComponentHeadComponent_Conditional_0_Conditional_15_For_2_Template, 2, 1, "span", 19, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelement(1, "span", 8);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const c_r3 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(c_r3.meta.showcaseConfig.tags);
-} }
-function PrismComponentHeadComponent_Conditional_0_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-stat", 10);
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r1.variantCount());
-} }
-function PrismComponentHeadComponent_Conditional_0_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-stat", 11);
-} if (rf & 2) {
+    const badge_r1 = ctx;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r1.coveragePercent() + "%")("pill", ctx_r1.coveragePercent() >= 90 ? "OK" : "WARN")("pillVariant", ctx_r1.coveragePercent() >= 90 ? "ok" : "warn");
-} }
-function PrismComponentHeadComponent_Conditional_0_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-stat", 12);
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r1.bundleSize());
-} }
-function PrismComponentHeadComponent_Conditional_0_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-stat", 13);
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r1.a11yScore())("pillVariant", ctx_r1.a11yScore() >= 90 ? "ok" : "warn");
-} }
-function PrismComponentHeadComponent_Conditional_0_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-stat", 14);
-} if (rf & 2) {
-    const vrt_r5 = ctx;
-    i0.ɵɵproperty("value", vrt_r5.value)("pillVariant", vrt_r5.variant);
+    i0.ɵɵclassMap(i0.ɵɵinterpolate1("comp-status comp-status--", ctx_r1.status()));
+    i0.ɵɵattribute("title", badge_r1.tooltip);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", badge_r1.label, " ");
 } }
 function PrismComponentHeadComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "section", 0)(1, "div", 1)(2, "div")(3, "div", 2)(4, "span");
-    i0.ɵɵtext(5);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(6, "prism-icon", 3);
-    i0.ɵɵelementStart(7, "span");
-    i0.ɵɵtext(8);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "h1", 4);
-    i0.ɵɵtext(10);
-    i0.ɵɵelementStart(11, "span", 5);
-    i0.ɵɵtext(12);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(13, PrismComponentHeadComponent_Conditional_0_Conditional_13_Template, 6, 6, "span", 6);
+    i0.ɵɵelementStart(0, "section", 0)(1, "span", 1);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(14, PrismComponentHeadComponent_Conditional_0_Conditional_14_Template, 2, 1, "p", 7);
-    i0.ɵɵconditionalCreate(15, PrismComponentHeadComponent_Conditional_0_Conditional_15_Template, 3, 0, "div", 8);
+    i0.ɵɵelementStart(3, "h1", 2);
+    i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "div", 9);
-    i0.ɵɵconditionalCreate(17, PrismComponentHeadComponent_Conditional_0_Conditional_17_Template, 1, 1, "prism-stat", 10);
-    i0.ɵɵconditionalCreate(18, PrismComponentHeadComponent_Conditional_0_Conditional_18_Template, 1, 3, "prism-stat", 11);
-    i0.ɵɵconditionalCreate(19, PrismComponentHeadComponent_Conditional_0_Conditional_19_Template, 1, 1, "prism-stat", 12);
-    i0.ɵɵconditionalCreate(20, PrismComponentHeadComponent_Conditional_0_Conditional_20_Template, 1, 2, "prism-stat", 13);
-    i0.ɵɵconditionalCreate(21, PrismComponentHeadComponent_Conditional_0_Conditional_21_Template, 1, 2, "prism-stat", 14);
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵelement(5, "prism-head-info", 3);
+    i0.ɵɵconditionalCreate(6, PrismComponentHeadComponent_Conditional_0_Conditional_6_Template, 3, 5, "span", 4);
+    i0.ɵɵelement(7, "span", 5)(8, "prism-head-gauge", 6);
+    i0.ɵɵelementStart(9, "span", 7);
+    i0.ɵɵprojection(10);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    let tmp_7_0;
-    let tmp_14_0;
+    let tmp_8_0;
     const c_r3 = ctx;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(5);
+    i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r1.category());
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("size", 10);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(c_r3.meta.showcaseConfig.title);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", c_r3.meta.showcaseConfig.title, " ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("<", c_r3.meta.componentMeta.selector, ">");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_7_0 = ctx_r1.status()) ? 13 : -1, tmp_7_0);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(c_r3.meta.showcaseConfig.description ? 14 : -1);
+    i0.ɵɵproperty("selector", c_r3.meta.componentMeta.selector)("description", c_r3.meta.showcaseConfig.description)("tags", c_r3.meta.showcaseConfig.tags ?? i0.ɵɵpureFunction0(8, _c2))("variantCount", ctx_r1.variantCount());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(c_r3.meta.showcaseConfig.tags?.length ? 15 : -1);
+    i0.ɵɵconditional((tmp_8_0 = ctx_r1.statusBadge()) ? 6 : -1, tmp_8_0);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.variantCount() > 0 ? 17 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.coveragePercent() !== null ? 18 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.bundleSize() !== null ? 19 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.a11yScore() !== null ? 20 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_14_0 = ctx_r1.vrtStat()) ? 21 : -1, tmp_14_0);
+    i0.ɵɵproperty("metrics", ctx_r1.metrics());
 } }
 const STATUS_BADGES = {
     stable: {
@@ -193,17 +96,21 @@ export class PrismComponentHeadComponent {
         return null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "coveragePercent" }] : /* istanbul ignore next */ []));
-    bundleSize = computed(() => {
-        const meta = this.componentMeta();
-        const perf = meta?.['perf'];
-        const bundle = perf?.['bundle'];
-        if (bundle && typeof bundle['gzipKb'] === 'number')
-            return bundle['gzipKb'] + ' kb';
-        if (bundle && typeof bundle['sizeKb'] === 'number')
-            return bundle['sizeKb'] + ' kb';
-        return null;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "bundleSize" }] : /* 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.
+     *
+     * 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.
+     */
     a11yScore = computed(() => {
         return this.auditService.scoreResult()?.score ?? null;
     }, /* @ts-ignore */
@@ -226,6 +133,39 @@ export class PrismComponentHeadComponent {
             : null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "vrtStat" }] : /* istanbul ignore next */ []));
+    /**
+     * The full metric list for the gauge, in source order.
+     *
+     * Order matters: `summarizeMetrics` breaks severity ties by position, so
+     * this sequence is what makes the chip show a stable metric rather than
+     * flickering between two equally bad ones.
+     */
+    metrics = computed(() => {
+        const coverage = this.coveragePercent();
+        const a11y = this.a11yScore();
+        const vrt = this.vrtStat();
+        return [
+            {
+                id: 'coverage',
+                label: 'Coverage',
+                value: coverage === null ? '—' : `${coverage}%`,
+                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',
+            },
+            {
+                id: 'vrt',
+                label: 'VRT diff',
+                value: vrt === null ? '—' : vrt.value,
+                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;
@@ -235,87 +175,45 @@ export class PrismComponentHeadComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "componentMeta" }] : /* istanbul ignore next */ []));
     static ɵfac = function PrismComponentHeadComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismComponentHeadComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismComponentHeadComponent, selectors: [["prism-component-head"]], decls: 1, vars: 1, consts: [[1, "comp-head"], [1, "comp-head-top"], [1, "comp-crumb"], ["name", "chevron-right", 3, "size"], [1, "comp-title"], [1, "comp-selector"], [3, "class"], [1, "comp-desc"], [1, "comp-tags"], [1, "comp-head-stats"], ["label", "Variants", 3, "value"], ["label", "Coverage", 3, "value", "pill", "pillVariant"], ["label", "Bundle", 3, "value"], ["label", "Score", "pill", "A11y", 3, "value", "pillVariant"], ["label", "VRT Diff", "pill", "VRT", 3, "value", "pillVariant"], ["name", "check", 3, "size"], ["aria-hidden", "true", 1, "comp-status-ring"], ["aria-hidden", "true", 1, "comp-status-dot"], [1, "comp-status-label"], [1, "comp-tag"]], template: function PrismComponentHeadComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, PrismComponentHeadComponent_Conditional_0_Template, 22, 13, "section", 0);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismComponentHeadComponent, selectors: [["prism-component-head"]], ngContentSelectors: _c1, decls: 1, vars: 1, consts: [[1, "comp-head"], [1, "comp-crumb"], [1, "comp-title"], [3, "selector", "description", "tags", "variantCount"], [3, "class"], [1, "comp-spacer"], [3, "metrics"], [1, "comp-head-end"], ["aria-hidden", "true", 1, "comp-status-mark"]], template: function PrismComponentHeadComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0);
+            i0.ɵɵconditionalCreate(0, PrismComponentHeadComponent_Conditional_0_Template, 11, 9, "section", 0);
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.comp()) ? 0 : -1, tmp_0_0);
-        } }, dependencies: [PrismIconComponent, PrismStatComponent], styles: ["[_nghost-%COMP%] { display: block; flex-shrink: 0; }\n\n    .comp-head[_ngcontent-%COMP%] {\n      padding: 12px 28px;\n      background: var(--%NS%prism-bg);\n      border-bottom: 1px solid var(--%NS%prism-border);\n      position: relative;\n    }\n    .comp-head[_ngcontent-%COMP%]::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      width: 6px;\n      background: linear-gradient(180deg, var(--%NS%prism-primary-from) 0%, var(--%NS%prism-accent) 50%, var(--%NS%prism-primary-to) 100%);\n    }\n\n    .comp-head-top[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 16px;\n    }\n\n    .comp-crumb[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: var(--%NS%fs-sm);\n      color: var(--%NS%prism-text-ghost);\n      margin-bottom: 6px;\n      font-weight: 500;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n    }\n    .comp-crumb[_ngcontent-%COMP%]   prism-icon[_ngcontent-%COMP%] { opacity: 0.6; }\n\n    .comp-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: var(--%NS%fs-2xl);\n      font-weight: 700;\n      letter-spacing: -0.02em;\n      color: var(--%NS%prism-text);\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n\n    .comp-selector[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: 12px;\n      color: var(--%NS%prism-primary);\n      padding: 3px 8px;\n      border-radius: var(--%NS%radius-sm);\n      background: color-mix(in srgb, var(--%NS%prism-primary) 10%, transparent);\n      border: 1px solid color-mix(in srgb, var(--%NS%prism-primary) 20%, transparent);\n      font-weight: 500;\n    }\n\n    .comp-status[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      height: 24px;\n      padding: 0 10px 0 8px;\n      border-radius: 5px;\n      font-size: 11.5px;\n      font-weight: 600;\n      letter-spacing: 0.02em;\n      border: 1px solid;\n      background: transparent;\n    }\n    .comp-status-label[_ngcontent-%COMP%] { line-height: 1; }\n    .comp-status-dot[_ngcontent-%COMP%] {\n      width: 7px;\n      height: 7px;\n      border-radius: 50%;\n      background: currentColor;\n    }\n    .comp-status-ring[_ngcontent-%COMP%] {\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      border: 1.5px solid currentColor;\n      background: transparent;\n      box-sizing: border-box;\n    }\n    .comp-status[_ngcontent-%COMP%]   prism-icon[_ngcontent-%COMP%] { display: inline-flex; }\n\n    .comp-status--stable[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-success);\n      background: color-mix(in srgb, var(--%NS%prism-success) 10%, transparent);\n      border-color: color-mix(in srgb, var(--%NS%prism-success) 35%, transparent);\n    }\n    .comp-status--beta[_ngcontent-%COMP%] {\n      color: #60a5fa;\n      background: color-mix(in srgb, #60a5fa 10%, transparent);\n      border-color: color-mix(in srgb, #60a5fa 35%, transparent);\n    }\n    .comp-status--wip[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-warn);\n      background: color-mix(in srgb, var(--%NS%prism-warn) 10%, transparent);\n      border-color: color-mix(in srgb, var(--%NS%prism-warn) 35%, transparent);\n    }\n    .comp-status--deprecated[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-muted);\n      background: var(--%NS%prism-input-bg);\n      border-color: var(--%NS%prism-border-strong);\n    }\n\n    .comp-desc[_ngcontent-%COMP%] {\n      margin: 6px 0 0;\n      font-size: var(--%NS%fs-lg);\n      color: var(--%NS%prism-text-2);\n      max-width: 72ch;\n      line-height: 1.55;\n    }\n\n    .comp-tags[_ngcontent-%COMP%] {\n      margin-top: 10px;\n      display: flex;\n      gap: 6px;\n      flex-wrap: wrap;\n    }\n    .comp-tag[_ngcontent-%COMP%] {\n      padding: 2px 8px;\n      font-size: 11px;\n      font-weight: 500;\n      border-radius: var(--%NS%radius-xs);\n      background: color-mix(in srgb, var(--%NS%prism-primary) 12%, transparent);\n      color: var(--%NS%prism-primary);\n      border: 1px solid color-mix(in srgb, var(--%NS%prism-primary) 20%, transparent);\n    }\n\n    .comp-head-stats[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 18px;\n      flex-shrink: 0;\n    }"] });
+        } }, 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    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismComponentHeadComponent, [{
         type: Component,
-        args: [{ selector: 'prism-component-head', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent, PrismStatComponent], template: `
+        args: [{ selector: 'prism-component-head', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismHeadInfoComponent, PrismHeadGaugeComponent], template: `
     @if (comp(); as c) {
     <section class="comp-head">
-      <div class="comp-head-top">
-        <div>
-          <div class="comp-crumb">
-            <span>{{ category() }}</span>
-            <prism-icon name="chevron-right" [size]="10" />
-            <span>{{ c.meta.showcaseConfig.title }}</span>
-          </div>
-          <h1 class="comp-title">
-            {{ c.meta.showcaseConfig.title }}
-            <span class="comp-selector"
-              >&lt;{{ c.meta.componentMeta.selector }}&gt;</span
-            >
-            @if (status(); as s) {
-            <span
-              class="comp-status comp-status--{{ s }}"
-              [attr.title]="statusBadge()!.tooltip"
-            >
-              @if (s === 'stable') {
-              <prism-icon name="check" [size]="13" />
-              } @else if (s === 'wip') {
-              <span class="comp-status-ring" aria-hidden="true"></span>
-              } @else {
-              <span class="comp-status-dot" aria-hidden="true"></span>
-              }
-              <span class="comp-status-label">{{ statusBadge()!.label }}</span>
-            </span>
-            }
-          </h1>
-          @if (c.meta.showcaseConfig.description) {
-          <p class="comp-desc">{{ c.meta.showcaseConfig.description }}</p>
-          } @if (c.meta.showcaseConfig.tags?.length) {
-          <div class="comp-tags">
-            @for (tag of c.meta.showcaseConfig.tags; track tag) {
-            <span class="comp-tag">{{ tag }}</span>
-            }
-          </div>
-          }
-        </div>
-        <div class="comp-head-stats">
-          @if (variantCount() > 0) {
-          <prism-stat [value]="variantCount()" label="Variants" />
-          } @if (coveragePercent() !== null) {
-          <prism-stat
-            [value]="coveragePercent()! + '%'"
-            label="Coverage"
-            [pill]="coveragePercent()! >= 90 ? 'OK' : 'WARN'"
-            [pillVariant]="coveragePercent()! >= 90 ? 'ok' : 'warn'"
-          />
-          } @if (bundleSize() !== null) {
-          <prism-stat [value]="bundleSize()!" label="Bundle" />
-          } @if (a11yScore() !== null) {
-          <prism-stat
-            [value]="a11yScore()!"
-            label="Score"
-            pill="A11y"
-            [pillVariant]="a11yScore()! >= 90 ? 'ok' : 'warn'"
-          />
-          } @if (vrtStat(); as vrt) {
-          <prism-stat
-            [value]="vrt.value"
-            label="VRT Diff"
-            pill="VRT"
-            [pillVariant]="vrt.variant"
-          />
-          }
-        </div>
-      </div>
+      <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      padding: 12px 28px;\n      background: var(--prism-bg);\n      border-bottom: 1px solid var(--prism-border);\n      position: relative;\n    }\n    .comp-head::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      width: 6px;\n      background: linear-gradient(180deg, var(--prism-primary-from) 0%, var(--prism-accent) 50%, var(--prism-primary-to) 100%);\n    }\n\n    .comp-head-top {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 16px;\n    }\n\n    .comp-crumb {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: var(--fs-sm);\n      color: var(--prism-text-ghost);\n      margin-bottom: 6px;\n      font-weight: 500;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n    }\n    .comp-crumb prism-icon { opacity: 0.6; }\n\n    .comp-title {\n      margin: 0;\n      font-size: var(--fs-2xl);\n      font-weight: 700;\n      letter-spacing: -0.02em;\n      color: var(--prism-text);\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n\n    .comp-selector {\n      font-family: var(--font-mono);\n      font-size: 12px;\n      color: var(--prism-primary);\n      padding: 3px 8px;\n      border-radius: var(--radius-sm);\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n      font-weight: 500;\n    }\n\n    .comp-status {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      height: 24px;\n      padding: 0 10px 0 8px;\n      border-radius: 5px;\n      font-size: 11.5px;\n      font-weight: 600;\n      letter-spacing: 0.02em;\n      border: 1px solid;\n      background: transparent;\n    }\n    .comp-status-label { line-height: 1; }\n    .comp-status-dot {\n      width: 7px;\n      height: 7px;\n      border-radius: 50%;\n      background: currentColor;\n    }\n    .comp-status-ring {\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      border: 1.5px solid currentColor;\n      background: transparent;\n      box-sizing: border-box;\n    }\n    .comp-status prism-icon { display: inline-flex; }\n\n    .comp-status--stable {\n      color: var(--prism-success);\n      background: color-mix(in srgb, var(--prism-success) 10%, transparent);\n      border-color: color-mix(in srgb, var(--prism-success) 35%, transparent);\n    }\n    .comp-status--beta {\n      color: #60a5fa;\n      background: color-mix(in srgb, #60a5fa 10%, transparent);\n      border-color: color-mix(in srgb, #60a5fa 35%, transparent);\n    }\n    .comp-status--wip {\n      color: var(--prism-warn);\n      background: color-mix(in srgb, var(--prism-warn) 10%, transparent);\n      border-color: color-mix(in srgb, var(--prism-warn) 35%, transparent);\n    }\n    .comp-status--deprecated {\n      color: var(--prism-text-muted);\n      background: var(--prism-input-bg);\n      border-color: var(--prism-border-strong);\n    }\n\n    .comp-desc {\n      margin: 6px 0 0;\n      font-size: var(--fs-lg);\n      color: var(--prism-text-2);\n      max-width: 72ch;\n      line-height: 1.55;\n    }\n\n    .comp-tags {\n      margin-top: 10px;\n      display: flex;\n      gap: 6px;\n      flex-wrap: wrap;\n    }\n    .comp-tag {\n      padding: 2px 8px;\n      font-size: 11px;\n      font-weight: 500;\n      border-radius: var(--radius-xs);\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      color: var(--prism-primary);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n\n    .comp-head-stats {\n      display: flex;\n      gap: 18px;\n      flex-shrink: 0;\n    }\n  "] }]
+  `, 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  "] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismComponentHeadComponent, { className: "PrismComponentHeadComponent", filePath: "app/component-head/prism-component-head.component.ts", lineNumber: 258 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismComponentHeadComponent, { className: "PrismComponentHeadComponent", filePath: "app/component-head/prism-component-head.component.ts", lineNumber: 179 }); })();

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

@@ -0,0 +1,23 @@
+import { type HeadMetric } from './head-metrics.js';
+import * as i0 from "@angular/core";
+/**
+ * Measurement disclosure for the component head.
+ *
+ * Replaces four always-present stat tiles with one element of fixed width at a
+ * fixed position, so the row does not shift when you switch components. It
+ * shows a plain count in the nominal green while everything is within
+ * threshold, and the worst value in plain text when it is not. The full
+ * readout is one click away and never disappears.
+ *
+ * It knows no individual metric. The list arrives already resolved, in the
+ * same shape `decorateItem` produces for the sidebar, which is less code than
+ * the five @if branches it replaces and keeps the colour rule in one place.
+ */
+export declare class PrismHeadGaugeComponent {
+    readonly metrics: import("@angular/core").InputSignal<readonly HeadMetric[]>;
+    protected readonly summary: import("@angular/core").Signal<import("./head-metrics.js").GaugeSummary>;
+    protected readonly ariaLabel: import("@angular/core").Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismHeadGaugeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismHeadGaugeComponent, "prism-head-gauge", never, { "metrics": { "alias": "metrics"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=prism-head-gauge.component.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,123 @@
+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";
+const _forTrack0 = ($index, $item) => $item.id;
+function PrismHeadGaugeComponent_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 5);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("+", ctx_r0.summary().others);
+} }
+function PrismHeadGaugeComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 2);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(2, PrismHeadGaugeComponent_Conditional_2_Conditional_2_Template, 2, 1, "span", 5);
+} if (rf & 2) {
+    const worst_r2 = ctx;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2("", worst_r2.label, " ", worst_r2.value);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.summary().others > 0 ? 2 : -1);
+} }
+function PrismHeadGaugeComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 2);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.summary().measured);
+} }
+function PrismHeadGaugeComponent_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-stat", 4);
+} if (rf & 2) {
+    const m_r3 = ctx.$implicit;
+    i0.ɵɵproperty("label", m_r3.label)("value", m_r3.value)("variant", m_r3.variant);
+} }
+/**
+ * Measurement disclosure for the component head.
+ *
+ * Replaces four always-present stat tiles with one element of fixed width at a
+ * fixed position, so the row does not shift when you switch components. It
+ * shows a plain count in the nominal green while everything is within
+ * threshold, and the worst value in plain text when it is not. The full
+ * readout is one click away and never disappears.
+ *
+ * It knows no individual metric. The list arrives already resolved, in the
+ * same shape `decorateItem` produces for the sidebar, which is less code than
+ * the five @if branches it replaces and keeps the colour rule in one place.
+ */
+export class PrismHeadGaugeComponent {
+    metrics = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "metrics" }] : /* istanbul ignore next */ []));
+    summary = computed(() => summarizeMetrics(this.metrics()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => {
+        const s = this.summary();
+        return s.worst === null
+            ? `${s.measured} metrics, all within threshold`
+            : `${s.worst.label} ${s.worst.value}${s.others > 0 ? `, ${s.others} more deviating` : ''}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = function PrismHeadGaugeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismHeadGaugeComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismHeadGaugeComponent, selectors: [["prism-head-gauge"]], inputs: { metrics: [1, "metrics"] }, decls: 7, vars: 9, consts: [["type", "button", "popovertarget", "prism-head-gauge", 1, "gauge"], ["aria-hidden", "true", 1, "gauge__dot"], [1, "gauge__text"], ["popover", "", "id", "prism-head-gauge", "role", "dialog", "aria-label", "Component metrics", 1, "gauge-card"], [3, "label", "value", "variant"], [1, "gauge__more"]], template: function PrismHeadGaugeComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "button", 0);
+            i0.ɵɵelement(1, "span", 1);
+            i0.ɵɵconditionalCreate(2, PrismHeadGaugeComponent_Conditional_2_Template, 3, 3)(3, PrismHeadGaugeComponent_Conditional_3_Template, 2, 1, "span", 2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "div", 3);
+            i0.ɵɵrepeaterCreate(5, PrismHeadGaugeComponent_For_6_Template, 1, 3, "prism-stat", 4, _forTrack0);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            let tmp_5_0;
+            i0.ɵɵclassProp("gauge--ok", ctx.summary().variant === "ok")("gauge--warn", ctx.summary().variant === "warn")("gauge--danger", ctx.summary().variant === "danger");
+            i0.ɵɵattribute("aria-label", ctx.ariaLabel())("title", ctx.ariaLabel());
+            i0.ɵɵadvance(2);
+            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    }"] });
+}
+(() => { (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  "] }]
+    }], 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 }); })();

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

@@ -0,0 +1,23 @@
+import * as i0 from "@angular/core";
+/**
+ * Identity disclosure for the component head.
+ *
+ * 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.
+ *
+ * Opening is click-only, through the native Popover API. Escape, click-outside
+ * dismissal and top-layer placement come with it declaratively; a hover panel
+ * would mean rebuilding all three by hand, and crossing the gap between icon
+ * and card without the card closing is its own problem.
+ */
+export declare class PrismHeadInfoComponent {
+    readonly selector: import("@angular/core").InputSignal<string>;
+    readonly description: import("@angular/core").InputSignal<string | undefined>;
+    readonly tags: import("@angular/core").InputSignal<readonly string[]>;
+    readonly variantCount: import("@angular/core").InputSignal<number>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismHeadInfoComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismHeadInfoComponent, "prism-head-info", never, { "selector": { "alias": "selector"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "tags": { "alias": "tags"; "required": false; "isSignal": true; }; "variantCount": { "alias": "variantCount"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=prism-head-info.component.d.ts.map

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

@@ -0,0 +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"}