@ng-prism/core 22.5.0 → 22.7.0-beta.0

package/dist/app/canvas/state-chips.js

@@ -0,0 +1,40 @@
+/**
+ * One chip per state in declaration order. `fits` is parallel to `states`; a
+ * state without an entry yet (nothing evaluated) counts as fitting.
+ *
+ * A chip that does not fit says why, even while it is the active one: it is
+ * selected, but what the title would otherwise promise ("is shown") is not true.
+ */
+export function buildStateChips(states, activeIndex, fits) {
+    return states.map((state, index) => {
+        const fit = fits[index] ?? { fits: true };
+        const active = index === activeIndex;
+        let title = `Show ${state.name} on this variant`;
+        if (!fit.fits)
+            title = `${state.name} does not fit this variant: ${fit.reason}`;
+        else if (active)
+            title = `${state.name} is shown; click to turn it off`;
+        return { index, name: state.name, active, fits: fit.fits, title };
+    });
+}
+/**
+ * Whether each of `states` fits what is on the canvas, in the order of `states`.
+ *
+ * The active state takes the fit the canvas measured, so a chip and the canvas
+ * cannot disagree; the others are evaluated against the same element. Without an
+ * element there is nothing to measure and everything counts as fitting, as it
+ * does on the canvas before the first render.
+ */
+export function chipFits(states, { element, optedOut, activeIndex, canvasFit }, evaluate) {
+    if (optedOut)
+        return states.map(() => ({ fits: false, reason: 'states: false' }));
+    if (element === null)
+        return states.map(() => ({ fits: true }));
+    return states.map((state, index) => (index === activeIndex && canvasFit !== null ? canvasFit : evaluate(element, state.pseudo)));
+}
+/** Tooltip of a `:hover`… toggle: where its default comes from, or what switching it on does. */
+export function toggleTitle(state, source) {
+    if (source === null)
+        return `Force :${state} on the whole component`;
+    return source.by === 'variant' ? `:${state} is forced by this variant` : `:${state} is forced by the state "${source.name}"`;
+}

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

@@ -1,3 +1,5 @@
+import type { StatusTone } from '../../plugin/status.js';
+import type { A11yScoreResult, A11yThresholds } from '../panels/a11y/a11y.types.js';
 /**
  * How a metric compares to its threshold.
  *
@@ -12,30 +14,44 @@ export interface HeadMetric {
     id: string;
     label: string;
     value: string;
+    /** What the value is graded against, for the readout's Threshold column. */
+    threshold: string;
     variant: MetricVariant;
 }
-/** What the gauge chip renders, derived from the full metric list. */
-export interface GaugeSummary {
-    /** Metrics that actually carry data. `none` does not count. */
-    measured: number;
-    /** The worst-ranked deviating metric, or null when nothing deviates. */
-    worst: HeadMetric | null;
-    /** How many further metrics deviate besides `worst`. */
-    others: number;
-    /** Colour role for the chip. */
-    variant: 'ok' | 'warn' | 'danger';
+/** What the head knows about the component it introduces. */
+export interface HeadMetricInput {
+    /** The component's `showcaseConfig.meta`, where plugins leave their verdicts. */
+    meta: Record<string, unknown> | null;
+    /** The live audit of the current variant, or `null` before it ran. */
+    a11y: A11yScoreResult | null;
+    a11yThresholds: A11yThresholds;
 }
 /**
- * Folds the head's metrics into what one chip can say.
+ * The head's metrics, in source order: coverage, the a11y score, the visual
+ * regression headline.
  *
- * 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
- * kind of question for navigation marks.
+ * It reads verdicts rather than computing them. Coverage and visual regression
+ * take what their plugins derived at build time from their own thresholds; the
+ * a11y score is the live audit graded by `deriveA11ySummary`, the rule the tab,
+ * the sidebar and the header use. A figure without a verdict stays `none`
+ * instead of being graded on a scale of the head's own.
+ */
+export declare function headMetrics(input: HeadMetricInput): HeadMetric[];
+/** What the gauge chip shows: one metric and the tone of the chip. */
+export interface GaugeChip {
+    metric: HeadMetric;
+    variant: StatusTone;
+    /** Metrics that carry a verdict, for the tooltip. */
+    measured: number;
+}
+/**
+ * The one metric the chip shows: the worst, ties resolved by source order so
+ * the chip does not flicker between two equally bad ones; when everything is
+ * fine, the first measured one in the ok tone. `null` when nothing is
+ * measured, and the head shows no gauge.
  *
- * Ties resolve by source order so the chip shows a stable metric across
- * renders rather than flickering between two equally bad ones.
+ * 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.
  */
-export declare function summarizeMetrics(metrics: readonly HeadMetric[]): GaugeSummary;
+export declare function gaugeChip(metrics: readonly HeadMetric[]): GaugeChip | null;
 //# sourceMappingURL=head-metrics.d.ts.map

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;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"}
+{"version":3,"file":"head-metrics.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/head-metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAEpF;;;;;;;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,4EAA4E;IAC5E,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,aAAa,CAAC;CAC1B;AAED,6DAA6D;AAC7D,MAAM,WAAW,eAAe;IAC5B,iFAAiF;IACjF,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IACrC,sEAAsE;IACtE,IAAI,EAAE,eAAe,GAAG,IAAI,CAAC;IAC7B,cAAc,EAAE,cAAc,CAAC;CAClC;AAgBD;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,eAAe,GAAG,UAAU,EAAE,CA+BhE;AAED,sEAAsE;AACtE,MAAM,WAAW,SAAS;IACtB,MAAM,EAAE,UAAU,CAAC;IACnB,OAAO,EAAE,UAAU,CAAC;IACpB,qDAAqD;IACrD,QAAQ,EAAE,MAAM,CAAC;CACpB;AASD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,SAAS,UAAU,EAAE,GAAG,SAAS,GAAG,IAAI,CAY1E"}

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

@@ -1,3 +1,46 @@
+import { deriveA11ySummary } from '../panels/a11y/a11y-summary.js';
+const isVerdict = (v) => v === 'ok' || v === 'warn' || v === 'danger';
+/**
+ * The head's metrics, in source order: coverage, the a11y score, the visual
+ * regression headline.
+ *
+ * It reads verdicts rather than computing them. Coverage and visual regression
+ * take what their plugins derived at build time from their own thresholds; the
+ * a11y score is the live audit graded by `deriveA11ySummary`, the rule the tab,
+ * the sidebar and the header use. A figure without a verdict stays `none`
+ * instead of being graded on a scale of the head's own.
+ */
+export function headMetrics(input) {
+    const coverage = input.meta?.['coverage'];
+    const vrt = input.meta?.['visualRegression'];
+    const t = coverage?.thresholds;
+    const coverageTarget = t ? Math.round((t.lines + t.branches + t.functions + t.statements) / 4) : null;
+    const hasCoverage = coverage?.found === true && typeof coverage.score === 'number';
+    const a11y = input.a11y;
+    return [
+        {
+            id: 'coverage',
+            label: 'Coverage',
+            value: hasCoverage ? `${coverage.score}%` : '—',
+            threshold: coverageTarget === null ? '—' : `≥ ${coverageTarget}%`,
+            variant: hasCoverage && isVerdict(coverage.summary?.variant) ? coverage.summary.variant : 'none'
+        },
+        {
+            id: 'a11y',
+            label: 'A11y score',
+            value: a11y === null ? '—' : String(a11y.score),
+            threshold: `≥ ${input.a11yThresholds.score}`,
+            variant: a11y === null ? 'none' : deriveA11ySummary(a11y, input.a11yThresholds).variant
+        },
+        {
+            id: 'vrt',
+            label: 'VRT diff',
+            value: vrt?.found && vrt.summary ? vrt.summary.value : '—',
+            threshold: 'no changes',
+            variant: vrt?.found && isVerdict(vrt.summary?.variant) ? vrt.summary.variant : 'none'
+        }
+    ];
+}
 const SEVERITY = {
     none: 0,
     ok: 0,
@@ -5,35 +48,22 @@ const SEVERITY = {
     danger: 2
 };
 /**
- * Folds the head's metrics into what one chip can say.
- *
- * 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
- * kind of question for navigation marks.
+ * The one metric the chip shows: the worst, ties resolved by source order so
+ * the chip does not flicker between two equally bad ones; when everything is
+ * fine, the first measured one in the ok tone. `null` when nothing is
+ * measured, and the head shows no gauge.
  *
- * Ties resolve by source order so the chip shows a stable metric across
- * renders rather than flickering between two equally bad ones.
+ * 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.
  */
-export function summarizeMetrics(metrics) {
-    let measured = 0;
-    let worst = null;
-    let deviating = 0;
-    for (const m of metrics) {
-        if (m.variant !== 'none')
-            measured++;
-        if (SEVERITY[m.variant] === 0)
-            continue;
-        deviating++;
-        if (worst === null || SEVERITY[m.variant] > SEVERITY[worst.variant]) {
+export function gaugeChip(metrics) {
+    const measured = metrics.filter((m) => m.variant !== 'none');
+    if (measured.length === 0)
+        return null;
+    let worst = measured[0];
+    for (const m of measured) {
+        if (SEVERITY[m.variant] > SEVERITY[worst.variant])
             worst = m;
-        }
     }
-    return {
-        measured,
-        worst,
-        others: deviating > 0 ? deviating - 1 : 0,
-        variant: worst === null ? 'ok' : worst.variant
-    };
+    return { metric: worst, variant: worst.variant, measured: measured.length };
 }

package/dist/app/component-head/pipe-facts.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The plain facts about a pipe for the head's info popover: whether it is pure,
+ * and where to import it from. Both are optional on a scanned pipe (purity when
+ * `@Pipe({ pure })` could not be read, the import path when the scanner could not
+ * place the pipe), so a fact the scanner could not establish is left out rather
+ * than guessed.
+ */
+export declare function pipeFacts(pure: boolean | undefined, importPath: string | undefined): string[];
+//# sourceMappingURL=pipe-facts.d.ts.map

package/dist/app/component-head/pipe-facts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pipe-facts.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/pipe-facts.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,OAAO,GAAG,SAAS,EAAE,UAAU,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,EAAE,CAM7F"}

package/dist/app/component-head/pipe-facts.js

@@ -0,0 +1,15 @@
+/**
+ * The plain facts about a pipe for the head's info popover: whether it is pure,
+ * and where to import it from. Both are optional on a scanned pipe (purity when
+ * `@Pipe({ pure })` could not be read, the import path when the scanner could not
+ * place the pipe), so a fact the scanner could not establish is left out rather
+ * than guessed.
+ */
+export function pipeFacts(pure, importPath) {
+    const facts = [];
+    if (pure !== undefined)
+        facts.push(pure ? 'Pure' : 'Impure');
+    if (importPath)
+        facts.push(importPath);
+    return facts;
+}

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

@@ -1,40 +1,38 @@
 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;
     tooltip: string;
+    tone: 'success' | 'warn' | 'danger';
 }
 export declare class PrismComponentHeadComponent {
     private readonly navigationService;
     private readonly auditService;
-    protected readonly comp: import("@angular/core").Signal<import("../../index.js").RuntimeComponent | null>;
+    private readonly manifest;
+    private readonly config;
+    protected readonly comp: import("@angular/core").Signal<import("../../plugin/plugin.types.js").RuntimeComponent | null>;
+    protected readonly service: import("@angular/core").Signal<import("../../index.js").RuntimeService | null>;
+    protected readonly pipe: import("@angular/core").Signal<import("../../index.js").RuntimePipe | null>;
+    /** What the head introduces: the active component or, on a service or pipe page, the service or the pipe. */
+    protected readonly subject: import("@angular/core").Signal<import("../../index.js").ScannedService | import("../../index.js").ScannedPipe | import("../../plugin/plugin.types.js").ScannedComponent | null>;
     protected readonly category: import("@angular/core").Signal<string>;
+    /** The selector of a component. A service or a pipe has none. */
+    protected readonly selector: import("@angular/core").Signal<string | undefined>;
+    /** A pipe is used in a template as `| name`, so that is what its code block shows. */
+    protected readonly code: import("@angular/core").Signal<string | undefined>;
+    protected readonly facts: import("@angular/core").Signal<string[]>;
     protected readonly variantCount: import("@angular/core").Signal<number>;
+    protected readonly stateCount: import("@angular/core").Signal<number>;
     protected readonly status: import("@angular/core").Signal<ComponentStatus | undefined>;
     protected readonly statusBadge: import("@angular/core").Signal<StatusBadge | null>;
-    protected readonly coveragePercent: import("@angular/core").Signal<number | null>;
-    protected readonly a11yScore: import("@angular/core").Signal<number | null>;
     /**
-     * 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
-     * plugin's own panel could disagree about the same component.
+     * The configured a11y thresholds, resolved the way the panel host and the
+     * header badge resolve them, so the gauge grades the live audit on the
+     * same scale as the tab and the sidebar.
      */
-    protected readonly vrtStat: import("@angular/core").Signal<{
-        value: string;
-        variant: "ok" | "warn" | "danger";
-    } | null>;
-    /**
-     * 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.
-     */
-    protected readonly metrics: import("@angular/core").Signal<HeadMetric[]>;
+    private readonly a11yThresholds;
+    /** The full metric list for the gauge, in source order. */
+    protected readonly metrics: import("@angular/core").Signal<import("./head-metrics.js").HeadMetric[]>;
     private readonly componentMeta;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismComponentHeadComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PrismComponentHeadComponent, "prism-component-head", never, {}, {}, never, ["[headEnd]"], true, never>;

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":"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"}
+{"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;;AAczE,UAAU,WAAW;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;CACvC;AAyBD,qBAQa,2BAA2B;IACpC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IACzD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2C;IACpE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAE9D,SAAS,CAAC,QAAQ,CAAC,IAAI,iGAA4D;IACnF,SAAS,CAAC,QAAQ,CAAC,OAAO,iFAA0D;IACpF,SAAS,CAAC,QAAQ,CAAC,IAAI,8EAAuD;IAE9E,6GAA6G;IAC7G,SAAS,CAAC,QAAQ,CAAC,OAAO,kLAA0F;IAEpH,SAAS,CAAC,QAAQ,CAAC,QAAQ,yCAA8E;IAEzG,iEAAiE;IACjE,SAAS,CAAC,QAAQ,CAAC,QAAQ,qDAA4D;IAEvF,sFAAsF;IACtF,SAAS,CAAC,QAAQ,CAAC,IAAI,qDAIpB;IAEH,SAAS,CAAC,QAAQ,CAAC,KAAK,2CAOrB;IAEH,SAAS,CAAC,QAAQ,CAAC,YAAY,yCAI5B;IAEH,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAI1B;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,8DAAsF;IAE/G,SAAS,CAAC,QAAQ,CAAC,WAAW,qDAI3B;IAEH;;;;OAIG;IACH,OAAO,CAAC,QAAQ,CAAC,cAAc,CAI5B;IAEH,2DAA2D;IAC3D,SAAS,CAAC,QAAQ,CAAC,OAAO,2EAMxB;IAEF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAK3B;yCA/EM,2BAA2B;2CAA3B,2BAA2B;CAgFvC"}

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

@@ -1,24 +1,32 @@
 import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { A11yAuditService } from '../panels/a11y/a11y-audit.service.js';
+import { resolveA11yThresholds } from '../panels/a11y/a11y-thresholds.js';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
+import { PrismBadgeComponent } from '../shared/prism-badge.component.js';
+import { PRISM_CONFIG, PRISM_MANIFEST } from '../tokens/prism-tokens.js';
+import { headMetrics } from './head-metrics.js';
+import { pipeFacts } from './pipe-facts.js';
 import { PrismHeadGaugeComponent } from './prism-head-gauge.component.js';
 import { PrismHeadInfoComponent } from './prism-head-info.component.js';
+import { serviceFacts } from './service-facts.js';
 import * as i0 from "@angular/core";
 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.ɵɵelement(1, "span", 8);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
+    i0.ɵɵelement(0, "prism-badge", 8);
 } if (rf & 2) {
     const badge_r1 = ctx;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassMap(i0.ɵɵinterpolate1("comp-status comp-status--", ctx_r1.status()));
+    i0.ɵɵclassProp("comp-status--wip", ctx_r1.status() === "wip");
+    i0.ɵɵproperty("tone", badge_r1.tone)("label", badge_r1.label);
     i0.ɵɵattribute("title", badge_r1.tooltip);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", badge_r1.label, " ");
+} }
+function PrismComponentHeadComponent_Conditional_0_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-head-gauge", 5);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("metrics", ctx_r1.metrics());
 } }
 function PrismComponentHeadComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "section", 0)(1, "span", 1);
@@ -28,134 +36,115 @@ function PrismComponentHeadComponent_Conditional_0_Template(rf, ctx) { if (rf &
     i0.ɵɵtext(4);
     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.ɵɵconditionalCreate(6, PrismComponentHeadComponent_Conditional_0_Conditional_6_Template, 1, 5, "prism-badge", 4);
+    i0.ɵɵconditionalCreate(7, PrismComponentHeadComponent_Conditional_0_Conditional_7_Template, 1, 1, "prism-head-gauge", 5);
+    i0.ɵɵelement(8, "span", 6);
     i0.ɵɵelementStart(9, "span", 7);
     i0.ɵɵprojection(10);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    let tmp_8_0;
-    const c_r3 = ctx;
+    let tmp_12_0;
+    const s_r3 = ctx;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r1.category());
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(c_r3.meta.showcaseConfig.title);
+    i0.ɵɵtextInterpolate(s_r3.showcaseConfig.title);
     i0.ɵɵadvance();
-    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.ɵɵproperty("selector", ctx_r1.selector())("code", ctx_r1.code())("className", s_r3.className)("description", s_r3.showcaseConfig.description)("tags", s_r3.showcaseConfig.tags ?? i0.ɵɵpureFunction0(12, _c2))("variantCount", ctx_r1.variantCount())("stateCount", ctx_r1.stateCount())("facts", ctx_r1.facts());
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_8_0 = ctx_r1.statusBadge()) ? 6 : -1, tmp_8_0);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("metrics", ctx_r1.metrics());
+    i0.ɵɵconditional((tmp_12_0 = ctx_r1.statusBadge()) ? 6 : -1, tmp_12_0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.comp() ? 7 : -1);
 } }
 const STATUS_BADGES = {
     stable: {
         label: 'Stable',
-        tooltip: 'Migrated and production-ready'
+        tooltip: 'Migrated and production-ready',
+        tone: 'success'
     },
     beta: {
         label: 'Beta',
-        tooltip: 'Beta: API may change'
+        tooltip: 'Beta: API may change',
+        tone: 'warn'
     },
     wip: {
         label: 'Work in progress',
-        tooltip: 'Migration in progress'
+        tooltip: 'Migration in progress',
+        tone: 'warn'
     },
     deprecated: {
         label: 'Deprecated',
-        tooltip: 'Deprecated / Legacy. Do not use in new code'
+        tooltip: 'Deprecated / Legacy. Do not use in new code',
+        tone: 'danger'
     }
 };
 export class PrismComponentHeadComponent {
     navigationService = inject(PrismNavigationService);
     auditService = inject(A11yAuditService);
+    manifest = inject(PRISM_MANIFEST);
+    config = inject(PRISM_CONFIG);
     comp = computed(() => this.navigationService.activeComponent(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "comp" }] : /* istanbul ignore next */ []));
-    category = computed(() => {
-        const c = this.comp();
-        return c?.meta.showcaseConfig.category ?? 'Uncategorized';
-    }, /* @ts-ignore */
+    service = computed(() => this.navigationService.activeService(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "service" }] : /* istanbul ignore next */ []));
+    pipe = computed(() => this.navigationService.activePipe(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pipe" }] : /* istanbul ignore next */ []));
+    /** What the head introduces: the active component or, on a service or pipe page, the service or the pipe. */
+    subject = computed(() => this.comp()?.meta ?? this.service()?.meta ?? this.pipe()?.meta ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subject" }] : /* istanbul ignore next */ []));
+    category = computed(() => this.subject()?.showcaseConfig.category ?? 'Uncategorized', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "category" }] : /* istanbul ignore next */ []));
+    /** The selector of a component. A service or a pipe has none. */
+    selector = computed(() => this.comp()?.meta.componentMeta.selector, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selector" }] : /* istanbul ignore next */ []));
+    /** A pipe is used in a template as `| name`, so that is what its code block shows. */
+    code = computed(() => {
+        const p = this.pipe();
+        return p ? `| ${p.meta.pipeName}` : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "code" }] : /* istanbul ignore next */ []));
+    facts = computed(() => {
+        const s = this.service();
+        if (s)
+            return serviceFacts(s.meta.provision, s.meta.importPath);
+        const p = this.pipe();
+        return p ? pipeFacts(p.meta.pure, p.meta.importPath) : [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "facts" }] : /* istanbul ignore next */ []));
     variantCount = computed(() => {
         const c = this.comp();
         return c?.meta.showcaseConfig.variants?.length ?? 0;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variantCount" }] : /* istanbul ignore next */ []));
-    status = computed(() => this.comp()?.meta.showcaseConfig.status, /* @ts-ignore */
+    stateCount = computed(() => {
+        const c = this.comp();
+        return c?.meta.showcaseConfig.states?.length ?? 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stateCount" }] : /* istanbul ignore next */ []));
+    status = computed(() => this.subject()?.showcaseConfig.status, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
     statusBadge = computed(() => {
         const s = this.status();
         return s ? STATUS_BADGES[s] : null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "statusBadge" }] : /* istanbul ignore next */ []));
-    coveragePercent = computed(() => {
-        const meta = this.componentMeta();
-        const coverage = meta?.['coverage'];
-        if (coverage?.['found'] && typeof coverage['score'] === 'number')
-            return coverage['score'];
-        return null;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "coveragePercent" }] : /* istanbul ignore next */ []));
-    /*
-     * 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.
-     *
-     * 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;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "a11yScore" }] : /* istanbul ignore next */ []));
-    /**
-     * 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
-     * plugin's own panel could disagree about the same component.
-     */
-    vrtStat = computed(() => {
-        const vrt = this.componentMeta()?.['visualRegression'];
-        if (!vrt?.found || !vrt.summary)
-            return null;
-        const { value, variant } = vrt.summary;
-        return variant === 'ok' || variant === 'warn' || variant === 'danger' ? { value, variant } : 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.
+     * The configured a11y thresholds, resolved the way the panel host and the
+     * header badge resolve them, so the gauge grades the live audit on the
+     * same scale as the tab and the sidebar.
      */
-    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
-            }
-        ];
+    a11yThresholds = computed(() => {
+        const meta = this.manifest.meta?.['a11y'];
+        return resolveA11yThresholds({ ...meta?.thresholds, ...this.config.a11y?.thresholds });
     }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "a11yThresholds" }] : /* istanbul ignore next */ []));
+    /** The full metric list for the gauge, in source order. */
+    metrics = computed(() => headMetrics({
+        meta: this.componentMeta(),
+        a11y: this.auditService.scoreResult(),
+        a11yThresholds: this.a11yThresholds()
+    }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "metrics" }] : /* istanbul ignore next */ []));
     componentMeta = computed(() => {
         const c = this.comp();
@@ -164,16 +153,16 @@ 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"]], 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) {
+    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", "code", "className", "description", "tags", "variantCount", "stateCount", "facts"], ["dot", "", 1, "comp-status", 3, "comp-status--wip", "tone", "label"], [3, "metrics"], [1, "comp-spacer"], [1, "comp-head-end"], ["dot", "", 1, "comp-status", 3, "tone", "label"]], template: function PrismComponentHeadComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c0);
-            i0.ɵɵconditionalCreate(0, PrismComponentHeadComponent_Conditional_0_Template, 11, 9, "section", 0);
+            i0.ɵɵconditionalCreate(0, PrismComponentHeadComponent_Conditional_0_Template, 11, 13, "section", 0);
         } 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%] {\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}"] });
+            i0.ɵɵconditional((tmp_0_0 = ctx.subject()) ? 0 : -1, tmp_0_0);
+        } }, dependencies: [PrismHeadInfoComponent, PrismHeadGaugeComponent, PrismBadgeComponent], 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-muted);\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.comp-status--wip[_ngcontent-%COMP%] {\n    --%NS%prism-badge-dot-fill: 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) {\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"] }]
+        args: [{ selector: 'prism-component-head', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismHeadInfoComponent, PrismHeadGaugeComponent, PrismBadgeComponent], template: "@if (subject(); as s) {\n    <section class=\"comp-head\">\n        <span class=\"comp-crumb\">{{ category() }}</span>\n        <h1 class=\"comp-title\">{{ s.showcaseConfig.title }}</h1>\n\n        <prism-head-info\n            [selector]=\"selector()\"\n            [code]=\"code()\"\n            [className]=\"s.className\"\n            [description]=\"s.showcaseConfig.description\"\n            [tags]=\"s.showcaseConfig.tags ?? []\"\n            [variantCount]=\"variantCount()\"\n            [stateCount]=\"stateCount()\"\n            [facts]=\"facts()\" />\n\n        @if (statusBadge(); as badge) {\n            <prism-badge\n                class=\"comp-status\"\n                [class.comp-status--wip]=\"status() === 'wip'\"\n                dot\n                [tone]=\"badge.tone\"\n                [label]=\"badge.label\"\n                [attr.title]=\"badge.tooltip\" />\n        }\n\n        @if (comp()) {\n            <prism-head-gauge [metrics]=\"metrics()\" />\n        }\n\n        <span class=\"comp-spacer\"></span>\n\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-muted);\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/* Work in progress keeps its ring: the one status without a settled state. */\n.comp-status--wip {\n    --prism-badge-dot-fill: transparent;\n}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismComponentHeadComponent, { className: "PrismComponentHeadComponent", filePath: "app/component-head/prism-component-head.component.ts", lineNumber: 41 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismComponentHeadComponent, { className: "PrismComponentHeadComponent", filePath: "app/component-head/prism-component-head.component.ts", lineNumber: 53 }); })();