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

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

@@ -1,91 +1,75 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { summarizeMetrics } from './head-metrics.js';
+import { toneForStatus } from '../shared/badge.types.js';
+import { PrismBadgeComponent } from '../shared/prism-badge.component.js';
+import { gaugeChip } 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();
+function PrismHeadGaugeComponent_Conditional_0_For_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-stat", 4);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("+", ctx_r0.summary().others);
+    const m_r1 = ctx.$implicit;
+    i0.ɵɵproperty("label", m_r1.label)("threshold", m_r1.threshold)("value", m_r1.value)("variant", m_r1.variant);
 } }
-function PrismHeadGaugeComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 2);
-    i0.ɵɵtext(1);
+function PrismHeadGaugeComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 0);
+    i0.ɵɵelement(1, "prism-badge", 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.ɵɵelementStart(2, "div", 2)(3, "div", 3)(4, "span");
+    i0.ɵɵtext(5, "Metric");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span");
+    i0.ɵɵtext(7, "Threshold");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "span");
+    i0.ɵɵtext(9, "Value");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵrepeaterCreate(10, PrismHeadGaugeComponent_Conditional_0_For_11_Template, 1, 4, "prism-stat", 4, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const c_r2 = ctx;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("aria-label", c_r2.metric.label + " " + c_r2.metric.value + ". " + ctx_r2.title())("title", ctx_r2.title());
     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);
+    i0.ɵɵproperty("tone", ctx_r2.tone())("label", c_r2.metric.label)("value", c_r2.metric.value);
+    i0.ɵɵadvance(9);
+    i0.ɵɵrepeater(ctx_r2.metrics());
 } }
 /**
- * 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.
+ * Measurement disclosure for the component head, right behind the status.
  *
- * 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.
+ * One soft badge in the tone of the worst metric ("VRT diff 10.26%"), or of the
+ * first measured one when everything is fine. How many metrics were measured
+ * is in the tooltip, not on the chip. The readout behind it lists every metric
+ * with its threshold.
  */
 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` : ''}`;
+    chip = computed(() => gaugeChip(this.metrics()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chip" }] : /* istanbul ignore next */ []));
+    tone = computed(() => {
+        const chip = this.chip();
+        return chip ? toneForStatus(chip.variant) : 'neutral';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    title = computed(() => {
+        const chip = this.chip();
+        if (!chip)
+            return '';
+        return `${chip.measured} ${chip.measured === 1 ? 'metric' : 'metrics'} measured. Show all`;
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ...(ngDevMode ? [{ debugName: "title" }] : /* 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();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismHeadGaugeComponent, selectors: [["prism-head-gauge"]], inputs: { metrics: [1, "metrics"] }, decls: 1, vars: 1, consts: [["type", "button", "popovertarget", "prism-head-gauge", 1, "gauge"], ["dot", "", 3, "tone", "label", "value"], ["popover", "", "id", "prism-head-gauge", "role", "dialog", "aria-label", "Component metrics", 1, "gauge-card"], ["aria-hidden", "true", 1, "gauge-card__row", "gauge-card__row--head"], [3, "label", "threshold", "value", "variant"]], template: function PrismHeadGaugeComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, PrismHeadGaugeComponent_Conditional_0_Template, 12, 5);
         } 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%] {\n    display: inline-flex;\n}\n\n.gauge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: var(--%NS%sp-2);\n    align-items: center;\n    height: 20px;\n    padding: 0 var(--%NS%sp-3);\n    anchor-name: --prism-head-gauge;\n    font-family: var(--%NS%font-mono);\n    font-size: var(--%NS%fs-xs);\n    font-variant-numeric: tabular-nums;\n    color: var(--%NS%prism-text-muted);\n    white-space: nowrap;\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: var(--%NS%radius-xs);\n}\n\n.gauge[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 1px;\n}\n\n.gauge__dot[_ngcontent-%COMP%] {\n    width: 5px;\n    height: 5px;\n    background: currentcolor;\n    border-radius: 50%;\n    opacity: 0.5;\n}\n\n.gauge__more[_ngcontent-%COMP%] {\n    opacity: 0.6;\n}\n\n\n\n\n.gauge--ok[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-nominal);\n    border-color: color-mix(in srgb, var(--%NS%prism-mark-nominal) 40%, transparent);\n}\n\n.gauge--warn[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-attention);\n    border-color: color-mix(in srgb, var(--%NS%prism-mark-attention) 40%, transparent);\n}\n\n.gauge--danger[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-critical);\n    border-color: color-mix(in srgb, var(--%NS%prism-mark-critical) 45%, transparent);\n}\n\n.gauge--ok[_ngcontent-%COMP%]   .gauge__dot[_ngcontent-%COMP%], \n.gauge--warn[_ngcontent-%COMP%]   .gauge__dot[_ngcontent-%COMP%], \n.gauge--danger[_ngcontent-%COMP%]   .gauge__dot[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.gauge-card[_ngcontent-%COMP%] {\n    inset: auto;\n    gap: 1px;\n    min-width: 200px;\n    padding: var(--%NS%sp-2);\n    margin: 0;\n    position-area: block-end span-inline-start;\n    position-anchor: --prism-head-gauge;\n    position-try-fallbacks: flip-block, flip-inline;\n    background: var(--%NS%prism-bg-elevated);\n    border: 1px solid var(--%NS%prism-border-strong);\n    border-radius: var(--%NS%radius-md);\n    box-shadow: 0 8px 28px -10px rgb(0 0 0 / 45%);\n}\n\n\n\n\n\n.gauge-card[_ngcontent-%COMP%]:popover-open {\n    display: flex;\n    flex-direction: column;\n}"] });
+            let tmp_0_0;
+            i0.ɵɵconditional((tmp_0_0 = ctx.chip()) ? 0 : -1, tmp_0_0);
+        } }, dependencies: [PrismBadgeComponent, PrismStatComponent], styles: ["[_nghost-%COMP%] {\n    display: inline-flex;\n}\n\n.gauge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    padding: 0;\n    anchor-name: --prism-head-gauge;\n    cursor: pointer;\n    background: none;\n    border: 0;\n    border-radius: 4px;\n}\n\n.gauge[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 2px;\n}\n\n.gauge-card[_ngcontent-%COMP%] {\n    inset: auto;\n    gap: 1px;\n    min-width: 200px;\n    padding: var(--%NS%sp-2);\n    margin: 0;\n    position-area: block-end span-inline-end;\n    position-anchor: --prism-head-gauge;\n    position-try-fallbacks: flip-block, flip-inline;\n    background: var(--%NS%prism-bg-elevated);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: var(--%NS%radius-md);\n    box-shadow: var(--%NS%prism-shadow-md);\n}\n\n\n\n\n\n.gauge-card[_ngcontent-%COMP%]:popover-open {\n    display: flex;\n    flex-direction: column;\n}\n\n.gauge-card__row--head[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: minmax(110px, 1fr) 90px 70px;\n    gap: var(--%NS%sp-4);\n    padding: var(--%NS%sp-2) var(--%NS%sp-3) var(--%NS%sp-1);\n    font-size: var(--%NS%fs-xs);\n    font-weight: 600;\n    color: var(--%NS%prism-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n}\n\n.gauge-card__row--head[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:last-child {\n    text-align: right;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismHeadGaugeComponent, [{
         type: Component,
-        args: [{ selector: 'prism-head-gauge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismStatComponent], template: "<button\n    class=\"gauge\"\n    type=\"button\"\n    [class.gauge--ok]=\"summary().variant === 'ok'\"\n    [class.gauge--warn]=\"summary().variant === 'warn'\"\n    [class.gauge--danger]=\"summary().variant === 'danger'\"\n    popovertarget=\"prism-head-gauge\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.title]=\"ariaLabel()\">\n    <span\n        class=\"gauge__dot\"\n        aria-hidden=\"true\"></span>\n    @if (summary().worst; as worst) {\n        <span class=\"gauge__text\">{{ worst.label }} {{ worst.value }}</span>\n        @if (summary().others > 0) {\n            <span class=\"gauge__more\">+{{ summary().others }}</span>\n        }\n    } @else {\n        <span class=\"gauge__text\">{{ summary().measured }}</span>\n    }\n</button>\n\n<div\n    popover\n    id=\"prism-head-gauge\"\n    class=\"gauge-card\"\n    role=\"dialog\"\n    aria-label=\"Component metrics\">\n    @for (m of metrics(); track m.id) {\n        <prism-stat\n            [label]=\"m.label\"\n            [value]=\"m.value\"\n            [variant]=\"m.variant\" />\n    }\n</div>\n", styles: [":host {\n    display: inline-flex;\n}\n\n.gauge {\n    display: inline-flex;\n    gap: var(--sp-2);\n    align-items: center;\n    height: 20px;\n    padding: 0 var(--sp-3);\n    anchor-name: --prism-head-gauge;\n    font-family: var(--font-mono);\n    font-size: var(--fs-xs);\n    font-variant-numeric: tabular-nums;\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-xs);\n}\n\n.gauge:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 1px;\n}\n\n.gauge__dot {\n    width: 5px;\n    height: 5px;\n    background: currentcolor;\n    border-radius: 50%;\n    opacity: 0.5;\n}\n\n.gauge__more {\n    opacity: 0.6;\n}\n\n/* The quiet state is green now, not grey: the gauge says \"these values\n   were measured and all of them are fine\", which is a result, not an\n   absence. A metric with no data at all stays grey in the readout rows. */\n.gauge--ok {\n    color: var(--prism-mark-nominal);\n    border-color: color-mix(in srgb, var(--prism-mark-nominal) 40%, transparent);\n}\n\n.gauge--warn {\n    color: var(--prism-mark-attention);\n    border-color: color-mix(in srgb, var(--prism-mark-attention) 40%, transparent);\n}\n\n.gauge--danger {\n    color: var(--prism-mark-critical);\n    border-color: color-mix(in srgb, var(--prism-mark-critical) 45%, transparent);\n}\n\n.gauge--ok .gauge__dot,\n.gauge--warn .gauge__dot,\n.gauge--danger .gauge__dot {\n    opacity: 1;\n}\n\n.gauge-card {\n    inset: auto;\n    gap: 1px;\n    min-width: 200px;\n    padding: var(--sp-2);\n    margin: 0;\n    position-area: block-end span-inline-start;\n    position-anchor: --prism-head-gauge;\n    position-try-fallbacks: flip-block, flip-inline;\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border-strong);\n    border-radius: var(--radius-md);\n    box-shadow: 0 8px 28px -10px rgb(0 0 0 / 45%);\n}\n\n/* display belongs on :popover-open and nowhere else (see the note in\n   prism-template-popover.component.ts). An author display on the base\n   rule outranks the UA's [popover]:not(:popover-open) { display: none }\n   and pins the readout open. */\n.gauge-card:popover-open {\n    display: flex;\n    flex-direction: column;\n}\n"] }]
+        args: [{ selector: 'prism-head-gauge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismBadgeComponent, PrismStatComponent], template: "@if (chip(); as c) {\n    <button\n        class=\"gauge\"\n        type=\"button\"\n        popovertarget=\"prism-head-gauge\"\n        [attr.aria-label]=\"c.metric.label + ' ' + c.metric.value + '. ' + title()\"\n        [attr.title]=\"title()\">\n        <prism-badge\n            dot\n            [tone]=\"tone()\"\n            [label]=\"c.metric.label\"\n            [value]=\"c.metric.value\" />\n    </button>\n\n    <div\n        popover\n        id=\"prism-head-gauge\"\n        class=\"gauge-card\"\n        role=\"dialog\"\n        aria-label=\"Component metrics\">\n        <div\n            class=\"gauge-card__row gauge-card__row--head\"\n            aria-hidden=\"true\">\n            <span>Metric</span>\n            <span>Threshold</span>\n            <span>Value</span>\n        </div>\n        @for (m of metrics(); track m.id) {\n            <prism-stat\n                [label]=\"m.label\"\n                [threshold]=\"m.threshold\"\n                [value]=\"m.value\"\n                [variant]=\"m.variant\" />\n        }\n    </div>\n}\n", styles: [":host {\n    display: inline-flex;\n}\n\n.gauge {\n    display: inline-flex;\n    padding: 0;\n    anchor-name: --prism-head-gauge;\n    cursor: pointer;\n    background: none;\n    border: 0;\n    border-radius: 4px;\n}\n\n.gauge:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 2px;\n}\n\n.gauge-card {\n    inset: auto;\n    gap: 1px;\n    min-width: 200px;\n    padding: var(--sp-2);\n    margin: 0;\n    position-area: block-end span-inline-end;\n    position-anchor: --prism-head-gauge;\n    position-try-fallbacks: flip-block, flip-inline;\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-md);\n    box-shadow: var(--prism-shadow-md);\n}\n\n/* display belongs on :popover-open and nowhere else (see the note in\n   prism-template-popover.component.ts). An author display on the base\n   rule outranks the UA's [popover]:not(:popover-open) { display: none }\n   and pins the readout open. */\n.gauge-card:popover-open {\n    display: flex;\n    flex-direction: column;\n}\n\n.gauge-card__row--head {\n    display: grid;\n    grid-template-columns: minmax(110px, 1fr) 90px 70px;\n    gap: var(--sp-4);\n    padding: var(--sp-2) var(--sp-3) var(--sp-1);\n    font-size: var(--fs-xs);\n    font-weight: 600;\n    color: var(--prism-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n}\n\n.gauge-card__row--head span:last-child {\n    text-align: right;\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: 26 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismHeadGaugeComponent, { className: "PrismHeadGaugeComponent", filePath: "app/component-head/prism-head-gauge.component.ts", lineNumber: 23 }); })();

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

@@ -7,18 +7,29 @@ import * as i0 from "@angular/core";
  * them permanently on screen cost a 128px band to say something that belongs
  * behind one glyph.
  *
+ * A service has no selector, so its code block shows the class name instead,
+ * and `facts` carries the plain lines that stand in for the variant and state
+ * counts a service does not have. A pipe has none either; its code block is
+ * whatever `code` says, which is how it is written in a template.
+ *
  * 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 selector: import("@angular/core").InputSignal<string | undefined>;
+    /** Replaces the code block, which otherwise shows the selector of a component or the class name of a service. */
+    readonly code: import("@angular/core").InputSignal<string | undefined>;
+    readonly className: import("@angular/core").InputSignal<string | undefined>;
     readonly description: import("@angular/core").InputSignal<string | undefined>;
     readonly tags: import("@angular/core").InputSignal<readonly string[]>;
     readonly variantCount: import("@angular/core").InputSignal<number>;
     readonly stateCount: import("@angular/core").InputSignal<number>;
+    readonly facts: import("@angular/core").InputSignal<readonly string[]>;
+    protected readonly label: import("@angular/core").Signal<"Component details" | "Service details" | "Pipe details">;
+    protected readonly codeBlock: import("@angular/core").Signal<string>;
     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; }; "stateCount": { "alias": "stateCount"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismHeadInfoComponent, "prism-head-info", never, { "selector": { "alias": "selector"; "required": false; "isSignal": true; }; "code": { "alias": "code"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "tags": { "alias": "tags"; "required": false; "isSignal": true; }; "variantCount": { "alias": "variantCount"; "required": false; "isSignal": true; }; "stateCount": { "alias": "stateCount"; "required": false; "isSignal": true; }; "facts": { "alias": "facts"; "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

@@ -1 +1 @@
-{"version":3,"file":"prism-head-info.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-head-info.component.ts"],"names":[],"mappings":";AAGA;;;;;;;;;;;;GAYG;AACH,qBAQa,sBAAsB;IAC/B,QAAQ,CAAC,QAAQ,8CAA4B;IAC7C,QAAQ,CAAC,WAAW,0DAAwC;IAC5D,QAAQ,CAAC,IAAI,yDAAgC;IAC7C,QAAQ,CAAC,YAAY,8CAAoB;IACzC,QAAQ,CAAC,UAAU,8CAAoB;yCAL9B,sBAAsB;2CAAtB,sBAAsB;CAMlC"}
+{"version":3,"file":"prism-head-info.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-head-info.component.ts"],"names":[],"mappings":";AAGA;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAQa,sBAAsB;IAC/B,QAAQ,CAAC,QAAQ,0DAAwC;IACzD,iHAAiH;IACjH,QAAQ,CAAC,IAAI,0DAAwC;IACrD,QAAQ,CAAC,SAAS,0DAAwC;IAC1D,QAAQ,CAAC,WAAW,0DAAwC;IAC5D,QAAQ,CAAC,IAAI,yDAAgC;IAC7C,QAAQ,CAAC,YAAY,8CAAoB;IACzC,QAAQ,CAAC,UAAU,8CAAoB;IACvC,QAAQ,CAAC,KAAK,yDAAgC;IAE9C,SAAS,CAAC,QAAQ,CAAC,KAAK,2FAGrB;IAEH,SAAS,CAAC,QAAQ,CAAC,SAAS,yCAOzB;yCAvBM,sBAAsB;2CAAtB,sBAAsB;CAwBlC"}

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { PrismIconComponent } from '../icons/prism-icon.component.js';
 import * as i0 from "@angular/core";
 function PrismHeadInfoComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
@@ -40,18 +40,27 @@ function PrismHeadInfoComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.stateCount() > 0 ? 3 : -1);
 } }
-function PrismHeadInfoComponent_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
+function PrismHeadInfoComponent_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 5);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const fact_r2 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(fact_r2);
+} }
+function PrismHeadInfoComponent_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 7);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const tag_r2 = ctx.$implicit;
+    const tag_r3 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(tag_r2);
+    i0.ɵɵtextInterpolate(tag_r3);
 } }
-function PrismHeadInfoComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+function PrismHeadInfoComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 6);
-    i0.ɵɵrepeaterCreate(1, PrismHeadInfoComponent_Conditional_7_For_2_Template, 2, 1, "span", 7, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(1, PrismHeadInfoComponent_Conditional_9_For_2_Template, 2, 1, "span", 7, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -66,14 +75,24 @@ function PrismHeadInfoComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
  * them permanently on screen cost a 128px band to say something that belongs
  * behind one glyph.
  *
+ * A service has no selector, so its code block shows the class name instead,
+ * and `facts` carries the plain lines that stand in for the variant and state
+ * counts a service does not have. A pipe has none either; its code block is
+ * whatever `code` says, which is how it is written in a template.
+ *
  * 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 class PrismHeadInfoComponent {
-    selector = input.required(/* @ts-ignore */
+    selector = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selector" }] : /* istanbul ignore next */ []));
+    /** Replaces the code block, which otherwise shows the selector of a component or the class name of a service. */
+    code = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "code" }] : /* istanbul ignore next */ []));
+    className = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
     description = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
     tags = input([], /* @ts-ignore */
@@ -82,8 +101,24 @@ export class PrismHeadInfoComponent {
     ...(ngDevMode ? [{ debugName: "variantCount" }] : /* istanbul ignore next */ []));
     stateCount = input(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "stateCount" }] : /* istanbul ignore next */ []));
+    facts = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "facts" }] : /* istanbul ignore next */ []));
+    label = computed(() => {
+        if (this.selector() !== undefined)
+            return 'Component details';
+        return this.code() === undefined ? 'Service details' : 'Pipe details';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    codeBlock = computed(() => {
+        const code = this.code();
+        if (code !== undefined)
+            return code;
+        const selector = this.selector();
+        return selector ? `<${selector}>` : (this.className() ?? '');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "codeBlock" }] : /* istanbul ignore next */ []));
     static ɵfac = function PrismHeadInfoComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismHeadInfoComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismHeadInfoComponent, selectors: [["prism-head-info"]], inputs: { selector: [1, "selector"], description: [1, "description"], tags: [1, "tags"], variantCount: [1, "variantCount"], stateCount: [1, "stateCount"] }, decls: 8, vars: 5, consts: [["type", "button", "popovertarget", "prism-head-info", "title", "Component details", "aria-label", "Component details", 1, "info-btn"], ["name", "info", 3, "size"], ["popover", "", "id", "prism-head-info", "role", "dialog", "aria-label", "Component details", 1, "info-card"], [1, "info-card__selector"], [1, "info-card__desc"], [1, "info-card__meta"], [1, "info-card__tags"], [1, "info-card__tag"]], template: function PrismHeadInfoComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismHeadInfoComponent, selectors: [["prism-head-info"]], inputs: { selector: [1, "selector"], code: [1, "code"], className: [1, "className"], description: [1, "description"], tags: [1, "tags"], variantCount: [1, "variantCount"], stateCount: [1, "stateCount"], facts: [1, "facts"] }, decls: 10, vars: 8, consts: [["type", "button", "popovertarget", "prism-head-info", 1, "info-btn"], ["name", "info", 3, "size"], ["popover", "", "id", "prism-head-info", "role", "dialog", 1, "info-card"], [1, "info-card__selector"], [1, "info-card__desc"], [1, "info-card__meta"], [1, "info-card__tags"], [1, "info-card__tag"]], template: function PrismHeadInfoComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "button", 0);
             i0.ɵɵelement(1, "prism-icon", 1);
             i0.ɵɵelementEnd();
@@ -92,23 +127,29 @@ export class PrismHeadInfoComponent {
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(5, PrismHeadInfoComponent_Conditional_5_Template, 2, 1, "p", 4);
             i0.ɵɵconditionalCreate(6, PrismHeadInfoComponent_Conditional_6_Template, 4, 3, "p", 5);
-            i0.ɵɵconditionalCreate(7, PrismHeadInfoComponent_Conditional_7_Template, 3, 0, "div", 6);
+            i0.ɵɵrepeaterCreate(7, PrismHeadInfoComponent_For_8_Template, 2, 1, "p", 5, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵconditionalCreate(9, PrismHeadInfoComponent_Conditional_9_Template, 3, 0, "div", 6);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
+            i0.ɵɵattribute("title", ctx.label())("aria-label", ctx.label());
             i0.ɵɵadvance();
             i0.ɵɵproperty("size", 13);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1("<", ctx.selector(), ">");
+            i0.ɵɵadvance();
+            i0.ɵɵattribute("aria-label", ctx.label());
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.codeBlock());
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.description() ? 5 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.variantCount() > 0 || ctx.stateCount() > 0 ? 6 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.tags().length ? 7 : -1);
-        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] {\n    display: inline-flex;\n}\n\n.info-btn[_ngcontent-%COMP%] {\n    display: grid;\n    place-items: center;\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    anchor-name: --prism-head-info;\n    color: var(--%NS%prism-text-ghost);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--%NS%radius-xs);\n}\n\n.info-btn[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text-2);\n}\n\n.info-btn[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 1px;\n}\n\n.info-card[_ngcontent-%COMP%] {\n    inset: auto;\n    width: 320px;\n    max-width: calc(100vw - var(--%NS%sp-6));\n    padding: var(--%NS%sp-4);\n    margin: 0;\n    position-area: block-end span-inline-end;\n    position-anchor: --prism-head-info;\n    position-try-fallbacks: flip-block, flip-inline;\n    color: var(--%NS%prism-text-2);\n    background: var(--%NS%prism-bg-elevated);\n    border: 1px solid var(--%NS%prism-border-strong);\n    border-radius: var(--%NS%radius-md);\n    box-shadow: 0 8px 28px -10px rgb(0 0 0 / 45%);\n}\n\n.info-card__selector[_ngcontent-%COMP%] {\n    display: block;\n    font-family: var(--%NS%font-mono);\n    font-size: var(--%NS%fs-md);\n    color: var(--%NS%prism-primary);\n    user-select: all;\n}\n\n.info-card__desc[_ngcontent-%COMP%] {\n    margin: var(--%NS%sp-3) 0 0;\n    font-size: var(--%NS%fs-lg);\n    line-height: 1.55;\n}\n\n\n\n\n.info-card__meta[_ngcontent-%COMP%] {\n    margin: var(--%NS%sp-3) 0 0;\n    font-size: var(--%NS%fs-md);\n    color: var(--%NS%prism-text-muted);\n}\n\n.info-card__tags[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--%NS%sp-2);\n    margin-top: var(--%NS%sp-4);\n}\n\n.info-card__tag[_ngcontent-%COMP%] {\n    padding: 1px var(--%NS%sp-3);\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-muted);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: var(--%NS%radius-xs);\n}"] });
+            i0.ɵɵrepeater(ctx.facts());
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.tags().length ? 9 : -1);
+        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] {\n    display: inline-flex;\n}\n\n.info-btn[_ngcontent-%COMP%] {\n    display: grid;\n    place-items: center;\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    anchor-name: --prism-head-info;\n    color: var(--%NS%prism-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--%NS%radius-xs);\n}\n\n.info-btn[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text-2);\n}\n\n.info-btn[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 1px;\n}\n\n.info-card[_ngcontent-%COMP%] {\n    inset: auto;\n    width: 320px;\n    max-width: calc(100vw - var(--%NS%sp-6));\n    padding: var(--%NS%sp-4);\n    margin: 0;\n    position-area: block-end span-inline-end;\n    position-anchor: --prism-head-info;\n    position-try-fallbacks: flip-block, flip-inline;\n    color: var(--%NS%prism-text-2);\n    background: var(--%NS%prism-bg-elevated);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: var(--%NS%radius-md);\n    box-shadow: var(--%NS%prism-shadow-md);\n}\n\n.info-card__selector[_ngcontent-%COMP%] {\n    display: block;\n    font-family: var(--%NS%font-mono);\n    font-size: var(--%NS%fs-md);\n    color: var(--%NS%prism-primary);\n    user-select: all;\n}\n\n.info-card__desc[_ngcontent-%COMP%] {\n    margin: var(--%NS%sp-3) 0 0;\n    font-size: var(--%NS%fs-lg);\n    line-height: 1.55;\n}\n\n\n\n\n.info-card__meta[_ngcontent-%COMP%] {\n    margin: var(--%NS%sp-3) 0 0;\n    font-size: var(--%NS%fs-md);\n    color: var(--%NS%prism-text-muted);\n}\n\n.info-card__tags[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--%NS%sp-2);\n    margin-top: var(--%NS%sp-4);\n}\n\n.info-card__tag[_ngcontent-%COMP%] {\n    padding: 1px var(--%NS%sp-3);\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-muted);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: var(--%NS%radius-xs);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismHeadInfoComponent, [{
         type: Component,
-        args: [{ selector: 'prism-head-info', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: "<button\n    class=\"info-btn\"\n    type=\"button\"\n    popovertarget=\"prism-head-info\"\n    title=\"Component details\"\n    aria-label=\"Component details\">\n    <prism-icon\n        name=\"info\"\n        [size]=\"13\" />\n</button>\n\n<div\n    popover\n    id=\"prism-head-info\"\n    class=\"info-card\"\n    role=\"dialog\"\n    aria-label=\"Component details\">\n    <code class=\"info-card__selector\">&lt;{{ selector() }}&gt;</code>\n    @if (description()) {\n        <p class=\"info-card__desc\">{{ description() }}</p>\n    }\n    @if (variantCount() > 0 || stateCount() > 0) {\n        <p class=\"info-card__meta\">\n            @if (variantCount() > 0) {\n                {{ variantCount() }} {{ variantCount() === 1 ? 'variant' : 'variants' }}\n            }\n            @if (variantCount() > 0 && stateCount() > 0) {\n                &middot;\n            }\n            @if (stateCount() > 0) {\n                {{ stateCount() }} {{ stateCount() === 1 ? 'state' : 'states' }}\n            }\n        </p>\n    }\n    @if (tags().length) {\n        <div class=\"info-card__tags\">\n            @for (tag of tags(); track tag) {\n                <span class=\"info-card__tag\">{{ tag }}</span>\n            }\n        </div>\n    }\n</div>\n", styles: [":host {\n    display: inline-flex;\n}\n\n.info-btn {\n    display: grid;\n    place-items: center;\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    anchor-name: --prism-head-info;\n    color: var(--prism-text-ghost);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--radius-xs);\n}\n\n.info-btn:hover {\n    color: var(--prism-text-2);\n}\n\n.info-btn:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 1px;\n}\n\n.info-card {\n    inset: auto;\n    width: 320px;\n    max-width: calc(100vw - var(--sp-6));\n    padding: var(--sp-4);\n    margin: 0;\n    position-area: block-end span-inline-end;\n    position-anchor: --prism-head-info;\n    position-try-fallbacks: flip-block, flip-inline;\n    color: var(--prism-text-2);\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border-strong);\n    border-radius: var(--radius-md);\n    box-shadow: 0 8px 28px -10px rgb(0 0 0 / 45%);\n}\n\n.info-card__selector {\n    display: block;\n    font-family: var(--font-mono);\n    font-size: var(--fs-md);\n    color: var(--prism-primary);\n    user-select: all;\n}\n\n.info-card__desc {\n    margin: var(--sp-3) 0 0;\n    font-size: var(--fs-lg);\n    line-height: 1.55;\n}\n\n/* A plain fact about the component, not a measurement. It sits here with\n   the selector and the tags rather than in the gauge, whose numbers all\n   answer \"did this pass its threshold\". A count cannot. */\n.info-card__meta {\n    margin: var(--sp-3) 0 0;\n    font-size: var(--fs-md);\n    color: var(--prism-text-muted);\n}\n\n.info-card__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--sp-2);\n    margin-top: var(--sp-4);\n}\n\n.info-card__tag {\n    padding: 1px var(--sp-3);\n    font-size: var(--fs-xs);\n    color: var(--prism-text-muted);\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-xs);\n}\n"] }]
-    }], null, { selector: [{ type: i0.Input, args: [{ isSignal: true, alias: "selector", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }], variantCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "variantCount", required: false }] }], stateCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateCount", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismHeadInfoComponent, { className: "PrismHeadInfoComponent", filePath: "app/component-head/prism-head-info.component.ts", lineNumber: 25 }); })();
+        args: [{ selector: 'prism-head-info', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: "<button\n    class=\"info-btn\"\n    type=\"button\"\n    popovertarget=\"prism-head-info\"\n    [attr.title]=\"label()\"\n    [attr.aria-label]=\"label()\">\n    <prism-icon\n        name=\"info\"\n        [size]=\"13\" />\n</button>\n\n<div\n    popover\n    id=\"prism-head-info\"\n    class=\"info-card\"\n    role=\"dialog\"\n    [attr.aria-label]=\"label()\">\n    <code class=\"info-card__selector\">{{ codeBlock() }}</code>\n    @if (description()) {\n        <p class=\"info-card__desc\">{{ description() }}</p>\n    }\n    @if (variantCount() > 0 || stateCount() > 0) {\n        <p class=\"info-card__meta\">\n            @if (variantCount() > 0) {\n                {{ variantCount() }} {{ variantCount() === 1 ? 'variant' : 'variants' }}\n            }\n            @if (variantCount() > 0 && stateCount() > 0) {\n                &middot;\n            }\n            @if (stateCount() > 0) {\n                {{ stateCount() }} {{ stateCount() === 1 ? 'state' : 'states' }}\n            }\n        </p>\n    }\n    @for (fact of facts(); track fact) {\n        <p class=\"info-card__meta\">{{ fact }}</p>\n    }\n    @if (tags().length) {\n        <div class=\"info-card__tags\">\n            @for (tag of tags(); track tag) {\n                <span class=\"info-card__tag\">{{ tag }}</span>\n            }\n        </div>\n    }\n</div>\n", styles: [":host {\n    display: inline-flex;\n}\n\n.info-btn {\n    display: grid;\n    place-items: center;\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    anchor-name: --prism-head-info;\n    color: var(--prism-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--radius-xs);\n}\n\n.info-btn:hover {\n    color: var(--prism-text-2);\n}\n\n.info-btn:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 1px;\n}\n\n.info-card {\n    inset: auto;\n    width: 320px;\n    max-width: calc(100vw - var(--sp-6));\n    padding: var(--sp-4);\n    margin: 0;\n    position-area: block-end span-inline-end;\n    position-anchor: --prism-head-info;\n    position-try-fallbacks: flip-block, flip-inline;\n    color: var(--prism-text-2);\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-md);\n    box-shadow: var(--prism-shadow-md);\n}\n\n.info-card__selector {\n    display: block;\n    font-family: var(--font-mono);\n    font-size: var(--fs-md);\n    color: var(--prism-primary);\n    user-select: all;\n}\n\n.info-card__desc {\n    margin: var(--sp-3) 0 0;\n    font-size: var(--fs-lg);\n    line-height: 1.55;\n}\n\n/* A plain fact about the component, not a measurement. It sits here with\n   the selector and the tags rather than in the gauge, whose numbers all\n   answer \"did this pass its threshold\". A count cannot. */\n.info-card__meta {\n    margin: var(--sp-3) 0 0;\n    font-size: var(--fs-md);\n    color: var(--prism-text-muted);\n}\n\n.info-card__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--sp-2);\n    margin-top: var(--sp-4);\n}\n\n.info-card__tag {\n    padding: 1px var(--sp-3);\n    font-size: var(--fs-xs);\n    color: var(--prism-text-muted);\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-xs);\n}\n"] }]
+    }], null, { selector: [{ type: i0.Input, args: [{ isSignal: true, alias: "selector", required: false }] }], code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }], variantCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "variantCount", required: false }] }], stateCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateCount", required: false }] }], facts: [{ type: i0.Input, args: [{ isSignal: true, alias: "facts", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismHeadInfoComponent, { className: "PrismHeadInfoComponent", filePath: "app/component-head/prism-head-info.component.ts", lineNumber: 30 }); })();

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

@@ -1,16 +1,15 @@
 import type { MetricVariant } from './head-metrics.js';
 import * as i0 from "@angular/core";
 /**
- * One line of the gauge's readout: caption left, value right.
- *
- * Was a right-aligned tile in the old head. The pill it used to carry is gone
- * rather than restyled, because it duplicated the caption directly beneath it.
+ * One row of the gauge's readout: metric, threshold, value. The three columns
+ * line up with the readout's header row through the shared grid template.
  */
 export declare class PrismStatComponent {
     readonly label: import("@angular/core").InputSignal<string>;
+    readonly threshold: import("@angular/core").InputSignal<string>;
     readonly value: import("@angular/core").InputSignal<string | number>;
     readonly variant: import("@angular/core").InputSignal<MetricVariant>;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismStatComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PrismStatComponent, "prism-stat", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismStatComponent, "prism-stat", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "threshold": { "alias": "threshold"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 //# sourceMappingURL=prism-stat.component.d.ts.map

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

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

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

@@ -1,38 +1,42 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * One line of the gauge's readout: caption left, value right.
- *
- * Was a right-aligned tile in the old head. The pill it used to carry is gone
- * rather than restyled, because it duplicated the caption directly beneath it.
+ * One row of the gauge's readout: metric, threshold, value. The three columns
+ * line up with the readout's header row through the shared grid template.
  */
 export class PrismStatComponent {
     label = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    threshold = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "threshold" }] : /* istanbul ignore next */ []));
     value = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     variant = input('ok', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     static ɵfac = function PrismStatComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismStatComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismStatComponent, selectors: [["prism-stat"]], inputs: { label: [1, "label"], value: [1, "value"], variant: [1, "variant"] }, decls: 6, vars: 8, consts: [[1, "stat"], ["aria-hidden", "true", 1, "stat__dot"], [1, "stat__lbl"], [1, "stat__val"]], template: function PrismStatComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵdomElementStart(0, "div", 0);
-            i0.ɵɵdomElement(1, "span", 1);
-            i0.ɵɵdomElementStart(2, "span", 2);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismStatComponent, selectors: [["prism-stat"]], inputs: { label: [1, "label"], threshold: [1, "threshold"], value: [1, "value"], variant: [1, "variant"] }, decls: 8, vars: 9, consts: [[1, "stat"], [1, "stat__lbl"], ["aria-hidden", "true", 1, "stat__dot"], [1, "stat__thr"], [1, "stat__val"]], template: function PrismStatComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0)(1, "span", 1);
+            i0.ɵɵdomElement(2, "span", 2);
             i0.ɵɵtext(3);
             i0.ɵɵdomElementEnd();
             i0.ɵɵdomElementStart(4, "span", 3);
             i0.ɵɵtext(5);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(6, "span", 4);
+            i0.ɵɵtext(7);
             i0.ɵɵdomElementEnd()();
         } if (rf & 2) {
             i0.ɵɵclassProp("stat--ok", ctx.variant() === "ok")("stat--warn", ctx.variant() === "warn")("stat--danger", ctx.variant() === "danger");
             i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate(ctx.label());
             i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.threshold());
+            i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(ctx.value());
-        } }, styles: [".stat[_ngcontent-%COMP%] {\n    display: flex;\n    gap: var(--%NS%sp-3);\n    align-items: center;\n    padding: var(--%NS%sp-2) var(--%NS%sp-3);\n    font-size: var(--%NS%fs-md);\n    color: var(--%NS%prism-text-2);\n    border-radius: var(--%NS%radius-xs);\n}\n\n.stat__dot[_ngcontent-%COMP%] {\n    flex: none;\n    width: 5px;\n    height: 5px;\n    background: transparent;\n    border-radius: 50%;\n}\n\n.stat__lbl[_ngcontent-%COMP%] {\n    white-space: nowrap;\n}\n\n.stat__val[_ngcontent-%COMP%] {\n    margin-left: auto;\n    font-family: var(--%NS%font-mono);\n    font-variant-numeric: tabular-nums;\n    color: var(--%NS%prism-text);\n}\n\n\n\n\n\n.stat--ok[_ngcontent-%COMP%]   .stat__dot[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-mark-nominal);\n}\n\n.stat--ok[_ngcontent-%COMP%]   .stat__val[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-nominal);\n}\n\n.stat--warn[_ngcontent-%COMP%]   .stat__dot[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-mark-attention);\n}\n\n.stat--warn[_ngcontent-%COMP%]   .stat__val[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-attention);\n}\n\n.stat--danger[_ngcontent-%COMP%]   .stat__dot[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-mark-critical);\n}\n\n.stat--danger[_ngcontent-%COMP%]   .stat__val[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-critical);\n}"] });
+        } }, styles: [".stat[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: var(--%NS%prism-stat-columns, minmax(110px, 1fr) 90px 70px);\n    gap: var(--%NS%sp-4);\n    align-items: center;\n    padding: var(--%NS%sp-2) var(--%NS%sp-3);\n    font-size: var(--%NS%fs-md);\n    color: var(--%NS%prism-text-2);\n    border-radius: var(--%NS%radius-xs);\n}\n\n.stat__dot[_ngcontent-%COMP%] {\n    display: inline-block;\n    flex: none;\n    width: 6px;\n    height: 6px;\n    margin-right: var(--%NS%sp-3);\n    vertical-align: 1px;\n    background: transparent;\n    border-radius: 50%;\n}\n\n.stat__lbl[_ngcontent-%COMP%] {\n    white-space: nowrap;\n}\n\n.stat__thr[_ngcontent-%COMP%] {\n    font-family: var(--%NS%font-mono);\n    font-size: var(--%NS%fs-sm);\n    color: var(--%NS%prism-text-muted);\n    white-space: nowrap;\n}\n\n.stat__val[_ngcontent-%COMP%] {\n    font-family: var(--%NS%font-mono);\n    font-variant-numeric: tabular-nums;\n    color: var(--%NS%prism-text);\n    text-align: right;\n}\n\n\n\n\n\n.stat--ok[_ngcontent-%COMP%]   .stat__dot[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-success);\n}\n\n.stat--ok[_ngcontent-%COMP%]   .stat__val[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-success);\n}\n\n.stat--warn[_ngcontent-%COMP%]   .stat__dot[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-warn);\n}\n\n.stat--warn[_ngcontent-%COMP%]   .stat__val[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-warn);\n}\n\n.stat--danger[_ngcontent-%COMP%]   .stat__dot[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-danger);\n}\n\n.stat--danger[_ngcontent-%COMP%]   .stat__val[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-danger);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismStatComponent, [{
         type: Component,
-        args: [{ selector: 'prism-stat', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"stat\"\n    [class.stat--ok]=\"variant() === 'ok'\"\n    [class.stat--warn]=\"variant() === 'warn'\"\n    [class.stat--danger]=\"variant() === 'danger'\">\n    <span\n        class=\"stat__dot\"\n        aria-hidden=\"true\"></span>\n    <span class=\"stat__lbl\">{{ label() }}</span>\n    <span class=\"stat__val\">{{ value() }}</span>\n</div>\n", styles: [".stat {\n    display: flex;\n    gap: var(--sp-3);\n    align-items: center;\n    padding: var(--sp-2) var(--sp-3);\n    font-size: var(--fs-md);\n    color: var(--prism-text-2);\n    border-radius: var(--radius-xs);\n}\n\n.stat__dot {\n    flex: none;\n    width: 5px;\n    height: 5px;\n    background: transparent;\n    border-radius: 50%;\n}\n\n.stat__lbl {\n    white-space: nowrap;\n}\n\n.stat__val {\n    margin-left: auto;\n    font-family: var(--font-mono);\n    font-variant-numeric: tabular-nums;\n    color: var(--prism-text);\n}\n\n/* Four states, four treatments. \"ok\" gets the nominal green, and \"none\"\n   does not: a metric with no data has nothing to report, and\n   colouring it green would claim a clean result the tool never measured.\n   That is the one distinction worth keeping grey. */\n.stat--ok .stat__dot {\n    background: var(--prism-mark-nominal);\n}\n\n.stat--ok .stat__val {\n    color: var(--prism-mark-nominal);\n}\n\n.stat--warn .stat__dot {\n    background: var(--prism-mark-attention);\n}\n\n.stat--warn .stat__val {\n    color: var(--prism-mark-attention);\n}\n\n.stat--danger .stat__dot {\n    background: var(--prism-mark-critical);\n}\n\n.stat--danger .stat__val {\n    color: var(--prism-mark-critical);\n}\n"] }]
-    }], null, { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismStatComponent, { className: "PrismStatComponent", filePath: "app/component-head/prism-stat.component.ts", lineNumber: 17 }); })();
+        args: [{ selector: 'prism-stat', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"stat\"\n    [class.stat--ok]=\"variant() === 'ok'\"\n    [class.stat--warn]=\"variant() === 'warn'\"\n    [class.stat--danger]=\"variant() === 'danger'\">\n    <span class=\"stat__lbl\"\n        ><span\n            class=\"stat__dot\"\n            aria-hidden=\"true\"></span\n        >{{ label() }}</span\n    >\n    <span class=\"stat__thr\">{{ threshold() }}</span>\n    <span class=\"stat__val\">{{ value() }}</span>\n</div>\n", styles: [".stat {\n    display: grid;\n    grid-template-columns: var(--prism-stat-columns, minmax(110px, 1fr) 90px 70px);\n    gap: var(--sp-4);\n    align-items: center;\n    padding: var(--sp-2) var(--sp-3);\n    font-size: var(--fs-md);\n    color: var(--prism-text-2);\n    border-radius: var(--radius-xs);\n}\n\n.stat__dot {\n    display: inline-block;\n    flex: none;\n    width: 6px;\n    height: 6px;\n    margin-right: var(--sp-3);\n    vertical-align: 1px;\n    background: transparent;\n    border-radius: 50%;\n}\n\n.stat__lbl {\n    white-space: nowrap;\n}\n\n.stat__thr {\n    font-family: var(--font-mono);\n    font-size: var(--fs-sm);\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n}\n\n.stat__val {\n    font-family: var(--font-mono);\n    font-variant-numeric: tabular-nums;\n    color: var(--prism-text);\n    text-align: right;\n}\n\n/* Four states, four treatments. \"ok\" gets the nominal green, and \"none\"\n   does not: a metric with no data has nothing to report, and\n   colouring it green would claim a clean result the tool never measured.\n   That is the one distinction worth keeping grey. */\n.stat--ok .stat__dot {\n    background: var(--prism-success);\n}\n\n.stat--ok .stat__val {\n    color: var(--prism-success);\n}\n\n.stat--warn .stat__dot {\n    background: var(--prism-warn);\n}\n\n.stat--warn .stat__val {\n    color: var(--prism-warn);\n}\n\n.stat--danger .stat__dot {\n    background: var(--prism-danger);\n}\n\n.stat--danger .stat__val {\n    color: var(--prism-danger);\n}\n"] }]
+    }], null, { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], threshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "threshold", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismStatComponent, { className: "PrismStatComponent", filePath: "app/component-head/prism-stat.component.ts", lineNumber: 15 }); })();

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

@@ -0,0 +1,8 @@
+import type { ServiceProvision } from '../../plugin/service.types.js';
+/**
+ * The plain facts about a service for the head's info popover: how it gets into
+ * an injector, and where to import it from. The import path is optional on a
+ * scanned service, so a service the scanner could not place just has one fact.
+ */
+export declare function serviceFacts(provision: ServiceProvision, importPath: string | undefined): string[];
+//# sourceMappingURL=service-facts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"service-facts.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/service-facts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAEtE;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,SAAS,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,EAAE,CAKlG"}

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

@@ -0,0 +1,11 @@
+/**
+ * The plain facts about a service for the head's info popover: how it gets into
+ * an injector, and where to import it from. The import path is optional on a
+ * scanned service, so a service the scanner could not place just has one fact.
+ */
+export function serviceFacts(provision, importPath) {
+    const facts = [provision === 'auto' ? 'Provided automatically' : 'Needs a providers entry'];
+    if (importPath)
+        facts.push(importPath);
+    return facts;
+}

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

@@ -16,10 +16,10 @@ export class BooleanControlComponent {
         } if (rf & 2) {
             i0.ɵɵclassProp("on", ctx.value());
             i0.ɵɵattribute("aria-checked", ctx.value());
-        } }, styles: [".ctl-toggle[_ngcontent-%COMP%] {\n    position: relative;\n    flex-shrink: 0;\n    width: 34px;\n    height: 18px;\n    padding: 0;\n    cursor: pointer;\n    background: var(--%NS%prism-input-bg);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 9px;\n    transition: all var(--%NS%dur-fast);\n}\n\n.ctl-toggle[_ngcontent-%COMP%]::after {\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 12px;\n    height: 12px;\n    content: '';\n    background: var(--%NS%prism-text-muted);\n    border-radius: 50%;\n    transition:\n        transform var(--%NS%dur-fast),\n        background var(--%NS%dur-fast);\n}\n\n.ctl-toggle.on[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-primary);\n    border-color: var(--%NS%prism-primary);\n}\n\n.ctl-toggle.on[_ngcontent-%COMP%]::after {\n    background: white;\n    transform: translateX(16px);\n}"] });
+        } }, styles: ["\n\n\n.ctl-toggle[_ngcontent-%COMP%] {\n    position: relative;\n    box-sizing: border-box;\n    flex-shrink: 0;\n    width: 34px;\n    height: 18px;\n    padding: 0;\n    cursor: pointer;\n    background: transparent;\n    border: 1.5px solid var(--%NS%prism-border-strong);\n    border-radius: 9px;\n    transition:\n        background var(--%NS%dur-fast),\n        border-color var(--%NS%dur-fast);\n}\n\n.ctl-toggle[_ngcontent-%COMP%]::after {\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 11px;\n    height: 11px;\n    content: '';\n    background: var(--%NS%prism-border-strong);\n    border-radius: 50%;\n    transition:\n        transform var(--%NS%dur-fast),\n        background var(--%NS%dur-fast);\n}\n\n.ctl-toggle.on[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-toggle-on);\n    border-color: transparent;\n}\n\n.ctl-toggle.on[_ngcontent-%COMP%]::after {\n    background: var(--%NS%prism-on-primary);\n    transform: translateX(16px);\n}\n\n.ctl-toggle[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 2px;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BooleanControlComponent, [{
         type: Component,
-        args: [{ selector: 'prism-boolean-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    class=\"ctl-toggle\"\n    [class.on]=\"value()\"\n    (click)=\"valueChange.emit(!value())\"\n    role=\"switch\"\n    [attr.aria-checked]=\"value()\"></button>\n", styles: [".ctl-toggle {\n    position: relative;\n    flex-shrink: 0;\n    width: 34px;\n    height: 18px;\n    padding: 0;\n    cursor: pointer;\n    background: var(--prism-input-bg);\n    border: 1px solid var(--prism-border);\n    border-radius: 9px;\n    transition: all var(--dur-fast);\n}\n\n.ctl-toggle::after {\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 12px;\n    height: 12px;\n    content: '';\n    background: var(--prism-text-muted);\n    border-radius: 50%;\n    transition:\n        transform var(--dur-fast),\n        background var(--dur-fast);\n}\n\n.ctl-toggle.on {\n    background: var(--prism-primary);\n    border-color: var(--prism-primary);\n}\n\n.ctl-toggle.on::after {\n    background: white;\n    transform: translateX(16px);\n}\n"] }]
+        args: [{ selector: 'prism-boolean-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    class=\"ctl-toggle\"\n    [class.on]=\"value()\"\n    (click)=\"valueChange.emit(!value())\"\n    role=\"switch\"\n    [attr.aria-checked]=\"value()\"></button>\n", styles: ["/* Off: a contour and a knob in the control-contour colour, 3:1 on every\n   surface, instead of a tint that disappears. On: the brand-blue track with a\n   white knob. */\n.ctl-toggle {\n    position: relative;\n    box-sizing: border-box;\n    flex-shrink: 0;\n    width: 34px;\n    height: 18px;\n    padding: 0;\n    cursor: pointer;\n    background: transparent;\n    border: 1.5px solid var(--prism-border-strong);\n    border-radius: 9px;\n    transition:\n        background var(--dur-fast),\n        border-color var(--dur-fast);\n}\n\n.ctl-toggle::after {\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 11px;\n    height: 11px;\n    content: '';\n    background: var(--prism-border-strong);\n    border-radius: 50%;\n    transition:\n        transform var(--dur-fast),\n        background var(--dur-fast);\n}\n\n.ctl-toggle.on {\n    background: var(--prism-toggle-on);\n    border-color: transparent;\n}\n\n.ctl-toggle.on::after {\n    background: var(--prism-on-primary);\n    transform: translateX(16px);\n}\n\n.ctl-toggle:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 2px;\n}\n"] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], typeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeName", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BooleanControlComponent, { className: "BooleanControlComponent", filePath: "app/controls/boolean-control.component.ts", lineNumber: 10 }); })();

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

@@ -101,10 +101,10 @@ export class JsonControlComponent {
             i0.ɵɵdomProperty("value", ctx.displayText());
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.parseError() ? 7 : -1);
-        } }, styles: [".json-editor[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.json-overlay[_ngcontent-%COMP%] {\n    position: relative;\n    overflow: hidden;\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: var(--%NS%radius-sm);\n    transition: border-color var(--%NS%dur-fast);\n}\n\n.json-overlay[_ngcontent-%COMP%]:focus-within {\n    border-color: var(--%NS%prism-primary);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--%NS%prism-primary) 30%, transparent);\n}\n\n.json-pre[_ngcontent-%COMP%], \n.json-input[_ngcontent-%COMP%] {\n    padding: 4px 8px;\n    margin: 0;\n    font-family: var(--%NS%font-mono);\n    font-size: 12px;\n    line-height: 1.4;\n    overflow-wrap: break-word;\n    tab-size: 2;\n    white-space: pre-wrap;\n}\n\n.json-pre[_ngcontent-%COMP%] {\n    min-height: 56px;\n    pointer-events: none;\n}\n\n.json-pre[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    font-family: inherit;\n}\n\n[_nghost-%COMP%]     .jh-key {\n    color: var(--%NS%prism-code-attr);\n}\n\n[_nghost-%COMP%]     .jh-string {\n    color: var(--%NS%prism-code-str);\n}\n\n[_nghost-%COMP%]     .jh-number {\n    color: var(--%NS%prism-warn);\n}\n\n[_nghost-%COMP%]     .jh-bool {\n    color: var(--%NS%prism-primary);\n}\n\n[_nghost-%COMP%]     .jh-null {\n    color: var(--%NS%prism-text-ghost);\n}\n\n.json-input[_ngcontent-%COMP%] {\n    position: absolute;\n    inset: 0;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n    color: transparent;\n    caret-color: var(--%NS%prism-text);\n    resize: none;\n    background: transparent;\n    border: none;\n}\n\n.json-input[_ngcontent-%COMP%]:focus {\n    outline: none;\n}\n\n.json-input[_ngcontent-%COMP%]::selection {\n    background: rgb(99 102 241 / 30%);\n}\n\n.json-error[_ngcontent-%COMP%] {\n    display: block;\n    margin-top: 2px;\n    font-size: 11px;\n    color: var(--%NS%prism-danger);\n}"] });
+        } }, styles: [".json-editor[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.json-overlay[_ngcontent-%COMP%] {\n    position: relative;\n    overflow: hidden;\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: var(--%NS%radius-sm);\n    transition: border-color var(--%NS%dur-fast);\n}\n\n.json-overlay[_ngcontent-%COMP%]:focus-within {\n    border-color: var(--%NS%prism-primary);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--%NS%prism-primary) 30%, transparent);\n}\n\n.json-pre[_ngcontent-%COMP%], \n.json-input[_ngcontent-%COMP%] {\n    padding: 4px 8px;\n    margin: 0;\n    scrollbar-gutter: stable;\n    font-family: var(--%NS%font-mono);\n    font-size: 12px;\n    line-height: 1.4;\n    overflow-wrap: break-word;\n    tab-size: 2;\n    white-space: pre-wrap;\n    scrollbar-color: var(--%NS%prism-border-strong) transparent;\n    scrollbar-width: thin;\n}\n\n\n\n\n.json-pre[_ngcontent-%COMP%] {\n    min-height: 56px;\n    max-height: calc(10lh + 8px);\n    overflow: hidden;\n    pointer-events: none;\n}\n\n.json-pre[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    font-family: inherit;\n}\n\n[_nghost-%COMP%]     .jh-key {\n    color: var(--%NS%prism-code-attr);\n}\n\n[_nghost-%COMP%]     .jh-string {\n    color: var(--%NS%prism-code-str);\n}\n\n[_nghost-%COMP%]     .jh-number {\n    color: var(--%NS%prism-warn);\n}\n\n[_nghost-%COMP%]     .jh-bool {\n    color: var(--%NS%prism-primary);\n}\n\n[_nghost-%COMP%]     .jh-null {\n    color: var(--%NS%prism-text-muted);\n}\n\n.json-input[_ngcontent-%COMP%] {\n    position: absolute;\n    inset: 0;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n    color: transparent;\n    caret-color: var(--%NS%prism-text);\n    resize: none;\n    background: transparent;\n    border: none;\n}\n\n.json-input[_ngcontent-%COMP%]:focus {\n    outline: none;\n}\n\n.json-input[_ngcontent-%COMP%]::selection {\n    background: color-mix(in srgb, var(--%NS%prism-primary) 30%, transparent);\n}\n\n.json-error[_ngcontent-%COMP%] {\n    display: block;\n    margin-top: 2px;\n    font-size: 11px;\n    color: var(--%NS%prism-danger);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(JsonControlComponent, [{
         type: Component,
-        args: [{ selector: 'prism-json-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"json-editor\">\n    <div class=\"json-overlay\">\n        <pre\n            class=\"json-pre\"\n            #preEl><code [innerHTML]=\"highlightedHtml()\"></code></pre>\n        <textarea\n            #textareaEl\n            class=\"json-input\"\n            [value]=\"displayText()\"\n            (input)=\"onInput($any($event.target).value)\"\n            (scroll)=\"syncScroll()\"\n            spellcheck=\"false\"></textarea>\n    </div>\n    @if (parseError()) {\n        <span class=\"json-error\">Invalid JSON</span>\n    }\n</div>\n", styles: [".json-editor {\n    flex: 1;\n    min-width: 0;\n}\n\n.json-overlay {\n    position: relative;\n    overflow: hidden;\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-sm);\n    transition: border-color var(--dur-fast);\n}\n\n.json-overlay:focus-within {\n    border-color: var(--prism-primary);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n}\n\n.json-pre,\n.json-input {\n    padding: 4px 8px;\n    margin: 0;\n    font-family: var(--font-mono);\n    font-size: 12px;\n    line-height: 1.4;\n    overflow-wrap: break-word;\n    tab-size: 2;\n    white-space: pre-wrap;\n}\n\n.json-pre {\n    min-height: 56px;\n    pointer-events: none;\n}\n\n.json-pre code {\n    font-family: inherit;\n}\n\n:host ::ng-deep .jh-key {\n    color: var(--prism-code-attr);\n}\n\n:host ::ng-deep .jh-string {\n    color: var(--prism-code-str);\n}\n\n:host ::ng-deep .jh-number {\n    color: var(--prism-warn);\n}\n\n:host ::ng-deep .jh-bool {\n    color: var(--prism-primary);\n}\n\n:host ::ng-deep .jh-null {\n    color: var(--prism-text-ghost);\n}\n\n.json-input {\n    position: absolute;\n    inset: 0;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n    color: transparent;\n    caret-color: var(--prism-text);\n    resize: none;\n    background: transparent;\n    border: none;\n}\n\n.json-input:focus {\n    outline: none;\n}\n\n.json-input::selection {\n    background: rgb(99 102 241 / 30%);\n}\n\n.json-error {\n    display: block;\n    margin-top: 2px;\n    font-size: 11px;\n    color: var(--prism-danger);\n}\n"] }]
+        args: [{ selector: 'prism-json-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"json-editor\">\n    <div class=\"json-overlay\">\n        <pre\n            class=\"json-pre\"\n            #preEl><code [innerHTML]=\"highlightedHtml()\"></code></pre>\n        <textarea\n            #textareaEl\n            class=\"json-input\"\n            [value]=\"displayText()\"\n            (input)=\"onInput($any($event.target).value)\"\n            (scroll)=\"syncScroll()\"\n            spellcheck=\"false\"></textarea>\n    </div>\n    @if (parseError()) {\n        <span class=\"json-error\">Invalid JSON</span>\n    }\n</div>\n", styles: [".json-editor {\n    flex: 1;\n    min-width: 0;\n}\n\n.json-overlay {\n    position: relative;\n    overflow: hidden;\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-sm);\n    transition: border-color var(--dur-fast);\n}\n\n.json-overlay:focus-within {\n    border-color: var(--prism-primary);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n}\n\n.json-pre,\n.json-input {\n    padding: 4px 8px;\n    margin: 0;\n    scrollbar-gutter: stable;\n    font-family: var(--font-mono);\n    font-size: 12px;\n    line-height: 1.4;\n    overflow-wrap: break-word;\n    tab-size: 2;\n    white-space: pre-wrap;\n    scrollbar-color: var(--prism-border-strong) transparent;\n    scrollbar-width: thin;\n}\n\n/* The pre sizes the editor up to ten lines; past that the textarea scrolls\n   and syncScroll() moves the pre along. Both reserve the same scrollbar\n   gutter, so their text wraps at the same width. */\n.json-pre {\n    min-height: 56px;\n    max-height: calc(10lh + 8px);\n    overflow: hidden;\n    pointer-events: none;\n}\n\n.json-pre code {\n    font-family: inherit;\n}\n\n:host ::ng-deep .jh-key {\n    color: var(--prism-code-attr);\n}\n\n:host ::ng-deep .jh-string {\n    color: var(--prism-code-str);\n}\n\n:host ::ng-deep .jh-number {\n    color: var(--prism-warn);\n}\n\n:host ::ng-deep .jh-bool {\n    color: var(--prism-primary);\n}\n\n:host ::ng-deep .jh-null {\n    color: var(--prism-text-muted);\n}\n\n.json-input {\n    position: absolute;\n    inset: 0;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n    color: transparent;\n    caret-color: var(--prism-text);\n    resize: none;\n    background: transparent;\n    border: none;\n}\n\n.json-input:focus {\n    outline: none;\n}\n\n.json-input::selection {\n    background: color-mix(in srgb, var(--prism-primary) 30%, transparent);\n}\n\n.json-error {\n    display: block;\n    margin-top: 2px;\n    font-size: 11px;\n    color: var(--prism-danger);\n}\n"] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], typeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeName", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], textareaEl: [{ type: i0.ViewChild, args: ['textareaEl', { isSignal: true }] }], preEl: [{ type: i0.ViewChild, args: ['preEl', { isSignal: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(JsonControlComponent, { className: "JsonControlComponent", filePath: "app/controls/json-control.component.ts", lineNumber: 38 }); })();