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

package/dist/app/shared/prism-list-row.component.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+/**
+ * A row in a panel list: badge, title and description, meta on the right.
+ *
+ * Selection is a tinted surface, never a coloured left edge. An interactive row
+ * is a button for assistive technology and activates on Enter and Space, which
+ * reach the host's click listeners.
+ */
+export declare class PrismListRowComponent {
+    readonly selected: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly interactive: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    private readonly host;
+    protected onKey(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismListRowComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismListRowComponent, "prism-list-row", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; }, {}, never, ["[rowBadge]", "[rowTitle]", "[rowDescription]", "[rowMeta]"], true, never>;
+}
+//# sourceMappingURL=prism-list-row.component.d.ts.map

package/dist/app/shared/prism-list-row.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism-list-row.component.d.ts","sourceRoot":"","sources":["../../../src/app/shared/prism-list-row.component.ts"],"names":[],"mappings":";AAEA;;;;;;GAMG;AACH,qBAea,qBAAqB;IAC9B,QAAQ,CAAC,QAAQ,qEAAiD;IAClE,QAAQ,CAAC,WAAW,qEAAiD;IAErE,OAAO,CAAC,QAAQ,CAAC,IAAI,CAA+C;IAEpE,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;yCANlC,qBAAqB;2CAArB,qBAAqB;CAYjC"}

package/dist/app/shared/prism-list-row.component.js

@@ -0,0 +1,57 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, ElementRef, inject, input } from '@angular/core';
+import * as i0 from "@angular/core";
+const _c0 = [[["", "rowBadge", ""]], [["", "rowTitle", ""]], [["", "rowDescription", ""]], [["", "rowMeta", ""]]];
+const _c1 = ["[rowBadge]", "[rowTitle]", "[rowDescription]", "[rowMeta]"];
+/**
+ * A row in a panel list: badge, title and description, meta on the right.
+ *
+ * Selection is a tinted surface, never a coloured left edge. An interactive row
+ * is a button for assistive technology and activates on Enter and Space, which
+ * reach the host's click listeners.
+ */
+export class PrismListRowComponent {
+    selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    host = inject(ElementRef);
+    onKey(event) {
+        if (!this.interactive() || event.target !== this.host.nativeElement)
+            return;
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        event.preventDefault();
+        this.host.nativeElement.click();
+    }
+    static ɵfac = function PrismListRowComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismListRowComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismListRowComponent, selectors: [["prism-list-row"]], hostVars: 7, hostBindings: function PrismListRowComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown", function PrismListRowComponent_keydown_HostBindingHandler($event) { return ctx.onKey($event); });
+        } if (rf & 2) {
+            i0.ɵɵattribute("role", ctx.interactive() ? "button" : null)("tabindex", ctx.interactive() ? 0 : null)("aria-pressed", ctx.interactive() ? ctx.selected() : null);
+            i0.ɵɵclassProp("prism-list-row--selected", ctx.selected())("prism-list-row--interactive", ctx.interactive());
+        } }, inputs: { selected: [1, "selected"], interactive: [1, "interactive"] }, ngContentSelectors: _c1, decls: 9, vars: 0, consts: [[1, "prism-list-row__badge"], [1, "prism-list-row__text"], [1, "prism-list-row__title"], [1, "prism-list-row__description"], [1, "prism-list-row__meta"]], template: function PrismListRowComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0);
+            i0.ɵɵdomElementStart(0, "span", 0);
+            i0.ɵɵprojection(1);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(2, "span", 1)(3, "span", 2);
+            i0.ɵɵprojection(4, 1);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(5, "span", 3);
+            i0.ɵɵprojection(6, 2);
+            i0.ɵɵdomElementEnd()();
+            i0.ɵɵdomElementStart(7, "span", 4);
+            i0.ɵɵprojection(8, 3);
+            i0.ɵɵdomElementEnd();
+        } }, styles: ["\n\n\n[_nghost-%COMP%] {\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    min-height: 34px;\n    padding: 6px 10px;\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 6px;\n}\n\n.prism-list-row--interactive[_nghost-%COMP%] {\n    cursor: pointer;\n}\n\n.prism-list-row--%NS%interactive[_nghost-%COMP%]:hover {\n    background: var(--%NS%prism-input-bg);\n}\n\n.prism-list-row--selected[_nghost-%COMP%] {\n    background: var(--%NS%prism-primary-bg);\n    border-color: transparent;\n}\n\n[_nghost-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 1px;\n}\n\n.prism-list-row__badge[_ngcontent-%COMP%], \n.prism-list-row__meta[_ngcontent-%COMP%] {\n    flex: none;\n}\n\n.prism-list-row__badge[_ngcontent-%COMP%]:empty, \n.prism-list-row__meta[_ngcontent-%COMP%]:empty, \n.prism-list-row__description[_ngcontent-%COMP%]:empty {\n    display: none;\n}\n\n.prism-list-row__text[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1 1 0;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n}\n\n.prism-list-row__title[_ngcontent-%COMP%] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: 12.5px;\n    font-weight: 500;\n    color: var(--%NS%prism-text);\n    white-space: nowrap;\n}\n\n.prism-list-row__description[_ngcontent-%COMP%] {\n    font-size: 11.5px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.prism-list-row__meta[_ngcontent-%COMP%] {\n    font-family: var(--%NS%font-mono);\n    font-size: 11px;\n    font-variant-numeric: tabular-nums;\n    color: var(--%NS%prism-text-muted);\n    white-space: nowrap;\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismListRowComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-list-row', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                    '[class.prism-list-row--selected]': 'selected()',
+                    '[class.prism-list-row--interactive]': 'interactive()',
+                    '[attr.role]': "interactive() ? 'button' : null",
+                    '[attr.tabindex]': 'interactive() ? 0 : null',
+                    '[attr.aria-pressed]': 'interactive() ? selected() : null',
+                    '(keydown)': 'onKey($event)'
+                }, template: "<span class=\"prism-list-row__badge\"><ng-content select=\"[rowBadge]\" /></span>\n<span class=\"prism-list-row__text\">\n    <span class=\"prism-list-row__title\"><ng-content select=\"[rowTitle]\" /></span>\n    <span class=\"prism-list-row__description\"><ng-content select=\"[rowDescription]\" /></span>\n</span>\n<span class=\"prism-list-row__meta\"><ng-content select=\"[rowMeta]\" /></span>\n", styles: ["/* Flex rather than a grid: every slot is optional and an empty one is\n   hidden, so a row without a badge or meta closes up instead of shifting\n   its title into the badge's column. */\n:host {\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    min-height: 34px;\n    padding: 6px 10px;\n    border: 1px solid var(--prism-border);\n    border-radius: 6px;\n}\n\n:host(.prism-list-row--interactive) {\n    cursor: pointer;\n}\n\n:host(.prism-list-row--interactive:hover) {\n    background: var(--prism-input-bg);\n}\n\n:host(.prism-list-row--selected) {\n    background: var(--prism-primary-bg);\n    border-color: transparent;\n}\n\n:host(:focus-visible) {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 1px;\n}\n\n.prism-list-row__badge,\n.prism-list-row__meta {\n    flex: none;\n}\n\n.prism-list-row__badge:empty,\n.prism-list-row__meta:empty,\n.prism-list-row__description:empty {\n    display: none;\n}\n\n.prism-list-row__text {\n    display: flex;\n    flex: 1 1 0;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n}\n\n.prism-list-row__title {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: 12.5px;\n    font-weight: 500;\n    color: var(--prism-text);\n    white-space: nowrap;\n}\n\n.prism-list-row__description {\n    font-size: 11.5px;\n    color: var(--prism-text-muted);\n}\n\n.prism-list-row__meta {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    font-variant-numeric: tabular-nums;\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n}\n"] }]
+    }], null, { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismListRowComponent, { className: "PrismListRowComponent", filePath: "app/shared/prism-list-row.component.ts", lineNumber: 25 }); })();

package/dist/app/shared/prism-logo.component.d.ts

@@ -0,0 +1,24 @@
+import { type BrandMarkFacet } from './brand-mark.js';
+import * as i0 from "@angular/core";
+/**
+ * The ng-prism symbol, drawn inline.
+ *
+ * Inline rather than an `<img>` so it needs no asset path in a consuming app,
+ * and with its gradient ids prefixed per instance: SVG ids are document-global,
+ * and the header and the sidebar footer show the mark at the same time.
+ */
+export declare class PrismLogoComponent {
+    /** Rendered height in px; the width follows the mark's proportions. */
+    readonly size: import("@angular/core").InputSignal<number>;
+    /** Decorative by default; otherwise the mark is announced as "ng-prism". */
+    readonly decorative: import("@angular/core").InputSignal<boolean>;
+    protected readonly uid: string;
+    protected readonly viewBox = "4 31 2036 1561";
+    protected readonly gradients: readonly import("./brand-mark.js").BrandMarkGradient[];
+    protected readonly facets: readonly BrandMarkFacet[];
+    protected readonly width: import("@angular/core").Signal<number>;
+    protected fill(facet: BrandMarkFacet): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismLogoComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismLogoComponent, "prism-logo", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=prism-logo.component.d.ts.map

package/dist/app/shared/prism-logo.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism-logo.component.d.ts","sourceRoot":"","sources":["../../../src/app/shared/prism-logo.component.ts"],"names":[],"mappings":"AACA,OAAO,EAA+D,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;;AAMnH;;;;;;GAMG;AACH,qBAOa,kBAAkB;IAC3B,uEAAuE;IACvE,QAAQ,CAAC,IAAI,8CAAa;IAC1B,4EAA4E;IAC5E,QAAQ,CAAC,UAAU,+CAAe;IAElC,SAAS,CAAC,QAAQ,CAAC,GAAG,SAAiC;IACvD,SAAS,CAAC,QAAQ,CAAC,OAAO,oBAAsB;IAChD,SAAS,CAAC,QAAQ,CAAC,SAAS,yDAAwB;IACpD,SAAS,CAAC,QAAQ,CAAC,MAAM,4BAAqB;IAC9C,SAAS,CAAC,QAAQ,CAAC,KAAK,yCAAmD;IAE3E,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,cAAc,GAAG,MAAM;yCAZpC,kBAAkB;2CAAlB,kBAAkB;CAe9B"}

package/dist/app/shared/prism-logo.component.js

@@ -0,0 +1,77 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { BRAND_MARK_FACETS, BRAND_MARK_GRADIENTS, BRAND_MARK_VIEWBOX } from './brand-mark.js';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.id;
+function PrismLogoComponent_For_3_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵdomElement(0, "stop");
+} if (rf & 2) {
+    const stop_r1 = ctx.$implicit;
+    i0.ɵɵattribute("offset", stop_r1[0])("stop-color", stop_r1[1]);
+} }
+function PrismLogoComponent_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵdomElementStart(0, "linearGradient", 1);
+    i0.ɵɵrepeaterCreate(1, PrismLogoComponent_For_3_For_2_Template, 1, 2, ":svg:stop", null, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const g_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("id", ctx_r2.uid + g_r2.id)("x1", g_r2.x1)("y1", g_r2.y1)("x2", g_r2.x2)("y2", g_r2.y2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(g_r2.stops);
+} }
+function PrismLogoComponent_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵdomElement(0, "path");
+} if (rf & 2) {
+    const facet_r4 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("d", facet_r4.d)("fill", ctx_r2.fill(facet_r4));
+} }
+let nextInstance = 0;
+const [, , VIEW_W, VIEW_H] = BRAND_MARK_VIEWBOX.split(' ').map(Number);
+/**
+ * The ng-prism symbol, drawn inline.
+ *
+ * Inline rather than an `<img>` so it needs no asset path in a consuming app,
+ * and with its gradient ids prefixed per instance: SVG ids are document-global,
+ * and the header and the sidebar footer show the mark at the same time.
+ */
+export class PrismLogoComponent {
+    /** Rendered height in px; the width follows the mark's proportions. */
+    size = input(24, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Decorative by default; otherwise the mark is announced as "ng-prism". */
+    decorative = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []));
+    uid = `ngp-logo-${nextInstance++}-`;
+    viewBox = BRAND_MARK_VIEWBOX;
+    gradients = BRAND_MARK_GRADIENTS;
+    facets = BRAND_MARK_FACETS;
+    width = computed(() => (this.size() * VIEW_W) / VIEW_H, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    fill(facet) {
+        return facet.gradient ? `url(#${this.uid}${facet.gradient})` : (facet.colour ?? 'currentColor');
+    }
+    static ɵfac = function PrismLogoComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismLogoComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismLogoComponent, selectors: [["prism-logo"]], inputs: { size: [1, "size"], decorative: [1, "decorative"] }, decls: 6, vars: 6, consts: [["xmlns", "http://www.w3.org/2000/svg", "focusable", "false"], ["gradientUnits", "userSpaceOnUse"]], template: function PrismLogoComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵdomElementStart(0, "svg", 0)(1, "defs");
+            i0.ɵɵrepeaterCreate(2, PrismLogoComponent_For_3_Template, 3, 5, ":svg:linearGradient", 1, _forTrack0);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵrepeaterCreate(4, PrismLogoComponent_For_5_Template, 1, 2, ":svg:path", null, i0.ɵɵrepeaterTrackByIndex);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵattribute("viewBox", ctx.viewBox)("width", ctx.width())("height", ctx.size())("aria-hidden", ctx.decorative() ? "true" : null)("role", ctx.decorative() ? null : "img")("aria-label", ctx.decorative() ? null : "ng-prism");
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.gradients);
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.facets);
+        } }, styles: ["[_nghost-%COMP%] {\n    display: inline-flex;\n    flex: none;\n    line-height: 0;\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismLogoComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-logo', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    [attr.viewBox]=\"viewBox\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"size()\"\n    [attr.aria-hidden]=\"decorative() ? 'true' : null\"\n    [attr.role]=\"decorative() ? null : 'img'\"\n    [attr.aria-label]=\"decorative() ? null : 'ng-prism'\"\n    focusable=\"false\">\n    <defs>\n        @for (g of gradients; track g.id) {\n            <linearGradient\n                [attr.id]=\"uid + g.id\"\n                [attr.x1]=\"g.x1\"\n                [attr.y1]=\"g.y1\"\n                [attr.x2]=\"g.x2\"\n                [attr.y2]=\"g.y2\"\n                gradientUnits=\"userSpaceOnUse\">\n                @for (stop of g.stops; track $index) {\n                    <stop\n                        [attr.offset]=\"stop[0]\"\n                        [attr.stop-color]=\"stop[1]\" />\n                }\n            </linearGradient>\n        }\n    </defs>\n    @for (facet of facets; track $index) {\n        <path\n            [attr.d]=\"facet.d\"\n            [attr.fill]=\"fill(facet)\" />\n    }\n</svg>\n", styles: [":host {\n    display: inline-flex;\n    flex: none;\n    line-height: 0;\n}\n"] }]
+    }], null, { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismLogoComponent, { className: "PrismLogoComponent", filePath: "app/shared/prism-logo.component.ts", lineNumber: 22 }); })();

package/dist/app/shared/prism-metric-badge.component.d.ts

@@ -6,9 +6,9 @@ import * as i0 from "@angular/core";
  * (a11y in core, coverage and visual regression in their plugins) keeps its own
  * data logic while sharing one appearance.
  *
- * It shows an icon instead of a text label: the same glyph the source uses for
- * its navigation marks and panel tab, and narrow enough to fit three badges in
- * the 40px header. The icon is `aria-hidden`; the accessible name is built here
+ * It shows a short label ("Coverage 53%") when given one, and otherwise an icon:
+ * the same glyph the source uses for its navigation marks and panel tab. The
+ * icon is `aria-hidden`; the accessible name is built here
  * as "label: value" (e.g. "Library coverage: 23%") so a consumer cannot drop
  * the figure. `title` is the consumer's full text for the hover tooltip.
  */
@@ -18,9 +18,14 @@ export declare class PrismMetricBadgeComponent {
     readonly label: import("@angular/core").InputSignal<string>;
     readonly title: import("@angular/core").InputSignal<string>;
     readonly variant: import("@angular/core").InputSignal<"ok" | "warn" | "danger">;
+    /**
+     * A short visible label ("Coverage", "VRT"). When set, it replaces the icon,
+     * so the figure reads as "Coverage 53%" without a glyph to decode.
+     */
+    readonly shortLabel: import("@angular/core").InputSignal<string | null>;
     /** "label: value" is the accessible name, so the figure is never dropped. */
     readonly accessibleName: import("@angular/core").Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismMetricBadgeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PrismMetricBadgeComponent, "prism-metric-badge", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismMetricBadgeComponent, "prism-metric-badge", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "shortLabel": { "alias": "shortLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 //# sourceMappingURL=prism-metric-badge.component.d.ts.map

package/dist/app/shared/prism-metric-badge.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-metric-badge.component.d.ts","sourceRoot":"","sources":["../../../src/app/shared/prism-metric-badge.component.ts"],"names":[],"mappings":";AAGA;;;;;;;;;;;;GAYG;AACH,qBAQa,yBAAyB;IAClC,QAAQ,CAAC,IAAI,8CAA4B;IACzC,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,QAAQ,CAAC,KAAK,8CAAqB;IACnC,QAAQ,CAAC,OAAO,gEAAyC;IAEzD,6EAA6E;IAC7E,QAAQ,CAAC,cAAc,yCAAsD;yCARpE,yBAAyB;2CAAzB,yBAAyB;CASrC"}
+{"version":3,"file":"prism-metric-badge.component.d.ts","sourceRoot":"","sources":["../../../src/app/shared/prism-metric-badge.component.ts"],"names":[],"mappings":";AAGA;;;;;;;;;;;;GAYG;AACH,qBAQa,yBAAyB;IAClC,QAAQ,CAAC,IAAI,8CAA4B;IACzC,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,QAAQ,CAAC,KAAK,8CAAqB;IACnC,QAAQ,CAAC,OAAO,gEAAyC;IACzD;;;OAGG;IACH,QAAQ,CAAC,UAAU,qDAA8B;IAEjD,6EAA6E;IAC7E,QAAQ,CAAC,cAAc,yCAAsD;yCAbpE,yBAAyB;2CAAzB,yBAAyB;CAcrC"}

package/dist/app/shared/prism-metric-badge.component.js

@@ -1,6 +1,21 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { PrismIconComponent } from '../icons/prism-icon.component.js';
 import * as i0 from "@angular/core";
+function PrismMetricBadgeComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 1);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.shortLabel());
+} }
+function PrismMetricBadgeComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-icon", 2);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("name", ctx_r0.icon())("size", 12);
+} }
 /**
  * Library-wide metric badge for the header.
  *
@@ -8,9 +23,9 @@ import * as i0 from "@angular/core";
  * (a11y in core, coverage and visual regression in their plugins) keeps its own
  * data logic while sharing one appearance.
  *
- * It shows an icon instead of a text label: the same glyph the source uses for
- * its navigation marks and panel tab, and narrow enough to fit three badges in
- * the 40px header. The icon is `aria-hidden`; the accessible name is built here
+ * It shows a short label ("Coverage 53%") when given one, and otherwise an icon:
+ * the same glyph the source uses for its navigation marks and panel tab. The
+ * icon is `aria-hidden`; the accessible name is built here
  * as "label: value" (e.g. "Library coverage: 23%") so a consumer cannot drop
  * the figure. `title` is the consumer's full text for the hover tooltip.
  */
@@ -25,27 +40,33 @@ export class PrismMetricBadgeComponent {
     ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     variant = input('ok', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /**
+     * A short visible label ("Coverage", "VRT"). When set, it replaces the icon,
+     * so the figure reads as "Coverage 53%" without a glyph to decode.
+     */
+    shortLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shortLabel" }] : /* istanbul ignore next */ []));
     /** "label: value" is the accessible name, so the figure is never dropped. */
     accessibleName = computed(() => `${this.label()}: ${this.value()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "accessibleName" }] : /* istanbul ignore next */ []));
     static ɵfac = function PrismMetricBadgeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismMetricBadgeComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismMetricBadgeComponent, selectors: [["prism-metric-badge"]], inputs: { icon: [1, "icon"], value: [1, "value"], label: [1, "label"], title: [1, "title"], variant: [1, "variant"] }, decls: 4, vars: 11, consts: [["role", "img", 1, "metric-badge"], ["aria-hidden", "true", 3, "name", "size"], [1, "metric-badge__value"]], template: function PrismMetricBadgeComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismMetricBadgeComponent, selectors: [["prism-metric-badge"]], inputs: { icon: [1, "icon"], value: [1, "value"], label: [1, "label"], title: [1, "title"], variant: [1, "variant"], shortLabel: [1, "shortLabel"] }, decls: 5, vars: 10, consts: [["role", "img", 1, "metric-badge"], ["aria-hidden", "true", 1, "metric-badge__label"], ["aria-hidden", "true", 3, "name", "size"], [1, "metric-badge__value"]], template: function PrismMetricBadgeComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "span", 0);
-            i0.ɵɵelement(1, "prism-icon", 1);
-            i0.ɵɵelementStart(2, "span", 2);
-            i0.ɵɵtext(3);
+            i0.ɵɵconditionalCreate(1, PrismMetricBadgeComponent_Conditional_1_Template, 2, 1, "span", 1)(2, PrismMetricBadgeComponent_Conditional_2_Template, 1, 2, "prism-icon", 2);
+            i0.ɵɵelementStart(3, "span", 3);
+            i0.ɵɵtext(4);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵclassProp("metric-badge--ok", ctx.variant() === "ok")("metric-badge--warn", ctx.variant() === "warn")("metric-badge--danger", ctx.variant() === "danger");
             i0.ɵɵattribute("title", ctx.title() || ctx.label())("aria-label", ctx.accessibleName());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("name", ctx.icon())("size", 12);
-            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.shortLabel() ? 1 : 2);
+            i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate(ctx.value());
-        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n}\n\n.metric-badge[_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) 0 var(--%NS%sp-2);\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    background: var(--%NS%prism-input-bg);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: var(--%NS%radius-sm);\n}\n\n.metric-badge__value[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--%NS%prism-text);\n}\n\n.metric-badge--ok[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-nominal);\n    background: color-mix(in srgb, var(--%NS%prism-mark-nominal) 10%, transparent);\n    border-color: color-mix(in srgb, var(--%NS%prism-mark-nominal) 35%, transparent);\n}\n\n.metric-badge--ok[_ngcontent-%COMP%]   .metric-badge__value[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-nominal);\n}\n\n.metric-badge--warn[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-attention);\n    background: color-mix(in srgb, var(--%NS%prism-mark-attention) 10%, transparent);\n    border-color: color-mix(in srgb, var(--%NS%prism-mark-attention) 35%, transparent);\n}\n\n.metric-badge--warn[_ngcontent-%COMP%]   .metric-badge__value[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-attention);\n}\n\n.metric-badge--danger[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-critical);\n    background: color-mix(in srgb, var(--%NS%prism-mark-critical) 10%, transparent);\n    border-color: color-mix(in srgb, var(--%NS%prism-mark-critical) 40%, transparent);\n}\n\n.metric-badge--danger[_ngcontent-%COMP%]   .metric-badge__value[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-critical);\n}"] });
+        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n}\n\n.metric-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    height: 22px;\n    padding: 0 8px;\n    font-family: var(--%NS%font-sans);\n    font-size: 11.5px;\n    font-weight: 500;\n    color: var(--%NS%prism-text-muted);\n    white-space: nowrap;\n    background: var(--%NS%prism-input-bg);\n    border-radius: 4px;\n}\n\n.metric-badge__value[_ngcontent-%COMP%] {\n    font-family: var(--%NS%font-mono);\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n}\n\n.metric-badge--ok[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-success);\n    background: var(--%NS%prism-success-bg);\n}\n\n.metric-badge--warn[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-warn);\n    background: var(--%NS%prism-warn-bg);\n}\n\n.metric-badge--danger[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-danger);\n    background: var(--%NS%prism-danger-bg);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismMetricBadgeComponent, [{
         type: Component,
-        args: [{ selector: 'prism-metric-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: "<span\n    class=\"metric-badge\"\n    role=\"img\"\n    [class.metric-badge--ok]=\"variant() === 'ok'\"\n    [class.metric-badge--warn]=\"variant() === 'warn'\"\n    [class.metric-badge--danger]=\"variant() === 'danger'\"\n    [attr.title]=\"title() || label()\"\n    [attr.aria-label]=\"accessibleName()\">\n    <prism-icon\n        [name]=\"icon()\"\n        [size]=\"12\"\n        aria-hidden=\"true\" />\n    <span class=\"metric-badge__value\">{{ value() }}</span>\n</span>\n", styles: [":host {\n    display: inline-flex;\n    align-items: center;\n}\n\n.metric-badge {\n    display: inline-flex;\n    gap: var(--sp-2);\n    align-items: center;\n    height: 20px;\n    padding: 0 var(--sp-3) 0 var(--sp-2);\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    background: var(--prism-input-bg);\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-sm);\n}\n\n.metric-badge__value {\n    font-weight: 600;\n    color: var(--prism-text);\n}\n\n.metric-badge--ok {\n    color: var(--prism-mark-nominal);\n    background: color-mix(in srgb, var(--prism-mark-nominal) 10%, transparent);\n    border-color: color-mix(in srgb, var(--prism-mark-nominal) 35%, transparent);\n}\n\n.metric-badge--ok .metric-badge__value {\n    color: var(--prism-mark-nominal);\n}\n\n.metric-badge--warn {\n    color: var(--prism-mark-attention);\n    background: color-mix(in srgb, var(--prism-mark-attention) 10%, transparent);\n    border-color: color-mix(in srgb, var(--prism-mark-attention) 35%, transparent);\n}\n\n.metric-badge--warn .metric-badge__value {\n    color: var(--prism-mark-attention);\n}\n\n.metric-badge--danger {\n    color: var(--prism-mark-critical);\n    background: color-mix(in srgb, var(--prism-mark-critical) 10%, transparent);\n    border-color: color-mix(in srgb, var(--prism-mark-critical) 40%, transparent);\n}\n\n.metric-badge--danger .metric-badge__value {\n    color: var(--prism-mark-critical);\n}\n"] }]
-    }], null, { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] }); })();
+        args: [{ selector: 'prism-metric-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: "<span\n    class=\"metric-badge\"\n    role=\"img\"\n    [class.metric-badge--ok]=\"variant() === 'ok'\"\n    [class.metric-badge--warn]=\"variant() === 'warn'\"\n    [class.metric-badge--danger]=\"variant() === 'danger'\"\n    [attr.title]=\"title() || label()\"\n    [attr.aria-label]=\"accessibleName()\">\n    @if (shortLabel()) {\n        <span\n            class=\"metric-badge__label\"\n            aria-hidden=\"true\"\n            >{{ shortLabel() }}</span\n        >\n    } @else {\n        <prism-icon\n            [name]=\"icon()\"\n            [size]=\"12\"\n            aria-hidden=\"true\" />\n    }\n    <span class=\"metric-badge__value\">{{ value() }}</span>\n</span>\n", styles: [":host {\n    display: inline-flex;\n    align-items: center;\n}\n\n.metric-badge {\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    height: 22px;\n    padding: 0 8px;\n    font-family: var(--font-sans);\n    font-size: 11.5px;\n    font-weight: 500;\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n    background: var(--prism-input-bg);\n    border-radius: 4px;\n}\n\n.metric-badge__value {\n    font-family: var(--font-mono);\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n}\n\n.metric-badge--ok {\n    color: var(--prism-success);\n    background: var(--prism-success-bg);\n}\n\n.metric-badge--warn {\n    color: var(--prism-warn);\n    background: var(--prism-warn-bg);\n}\n\n.metric-badge--danger {\n    color: var(--prism-danger);\n    background: var(--prism-danger-bg);\n}\n"] }]
+    }], null, { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], shortLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortLabel", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismMetricBadgeComponent, { className: "PrismMetricBadgeComponent", filePath: "app/shared/prism-metric-badge.component.ts", lineNumber: 25 }); })();

package/dist/app/shared/prism-metric-card.component.d.ts

@@ -0,0 +1,30 @@
+import type { BadgeTone } from './badge.types.js';
+import * as i0 from "@angular/core";
+/**
+ * A measured value in a panel: label, status badge, the figure and its unit,
+ * optionally a bar with a threshold tick, or a visual of the caller's own in
+ * `[metricVisual]` (a ring, a sparkline).
+ *
+ * No visible subtitle. Details such as bytes, the threshold or the source go in
+ * `title`, the card's tooltip. A rated value fills its bar in the status tone;
+ * a plain quantity (no `tone`) in the primary colour.
+ */
+export declare class PrismMetricCardComponent {
+    readonly label: import("@angular/core").InputSignal<string>;
+    readonly value: import("@angular/core").InputSignal<string>;
+    readonly unit: import("@angular/core").InputSignal<string | null>;
+    readonly tone: import("@angular/core").InputSignal<BadgeTone | null>;
+    readonly statusLabel: import("@angular/core").InputSignal<string | null>;
+    /** Bar fill, 0–1. No bar without it. */
+    readonly fraction: import("@angular/core").InputSignal<number | null>;
+    /** Threshold tick, 0–1. */
+    readonly threshold: import("@angular/core").InputSignal<number | null>;
+    readonly title: import("@angular/core").InputSignal<string | null>;
+    protected readonly bar: import("@angular/core").Signal<{
+        width: string;
+        tick: string | null;
+    } | null>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismMetricCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismMetricCardComponent, "prism-metric-card", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "statusLabel": { "alias": "statusLabel"; "required": false; "isSignal": true; }; "fraction": { "alias": "fraction"; "required": false; "isSignal": true; }; "threshold": { "alias": "threshold"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; }, {}, never, ["[metricVisual]"], true, never>;
+}
+//# sourceMappingURL=prism-metric-card.component.d.ts.map

package/dist/app/shared/prism-metric-card.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism-metric-card.component.d.ts","sourceRoot":"","sources":["../../../src/app/shared/prism-metric-card.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;;AAIlD;;;;;;;;GAQG;AACH,qBAYa,wBAAwB;IACjC,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,QAAQ,CAAC,IAAI,qDAA8B;IAC3C,QAAQ,CAAC,IAAI,wDAAiC;IAC9C,QAAQ,CAAC,WAAW,qDAA8B;IAClD,wCAAwC;IACxC,QAAQ,CAAC,QAAQ,qDAA8B;IAC/C,2BAA2B;IAC3B,QAAQ,CAAC,SAAS,qDAA8B;IAChD,QAAQ,CAAC,KAAK,qDAA8B;IAE5C,SAAS,CAAC,QAAQ,CAAC,GAAG;;;cAInB;yCAhBM,wBAAwB;2CAAxB,wBAAwB;CAiBpC"}

package/dist/app/shared/prism-metric-card.component.js

@@ -0,0 +1,111 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { barGeometry } from './metric-bar.js';
+import { PrismBadgeComponent } from './prism-badge.component.js';
+import * as i0 from "@angular/core";
+const _c0 = [[["", "metricVisual", ""]]];
+const _c1 = ["[metricVisual]"];
+function PrismMetricCardComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-badge", 2);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("tone", ctx_r0.tone())("label", ctx_r0.statusLabel());
+} }
+function PrismMetricCardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "small");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.unit());
+} }
+function PrismMetricCardComponent_Conditional_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "b");
+} if (rf & 2) {
+    const b_r2 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("left", b_r2.tick);
+} }
+function PrismMetricCardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵconditionalCreate(2, PrismMetricCardComponent_Conditional_9_Conditional_2_Template, 1, 2, "b", 6);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const b_r2 = ctx;
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("width", b_r2.width);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(b_r2.tick ? 2 : -1);
+} }
+/**
+ * A measured value in a panel: label, status badge, the figure and its unit,
+ * optionally a bar with a threshold tick, or a visual of the caller's own in
+ * `[metricVisual]` (a ring, a sparkline).
+ *
+ * No visible subtitle. Details such as bytes, the threshold or the source go in
+ * `title`, the card's tooltip. A rated value fills its bar in the status tone;
+ * a plain quantity (no `tone`) in the primary colour.
+ */
+export class PrismMetricCardComponent {
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    unit = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
+    tone = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    statusLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "statusLabel" }] : /* istanbul ignore next */ []));
+    /** Bar fill, 0–1. No bar without it. */
+    fraction = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fraction" }] : /* istanbul ignore next */ []));
+    /** Threshold tick, 0–1. */
+    threshold = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "threshold" }] : /* istanbul ignore next */ []));
+    title = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    bar = computed(() => {
+        const fraction = this.fraction();
+        return fraction === null ? null : barGeometry(fraction, this.threshold() ?? undefined);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bar" }] : /* istanbul ignore next */ []));
+    static ɵfac = function PrismMetricCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismMetricCardComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismMetricCardComponent, selectors: [["prism-metric-card"]], hostVars: 2, hostBindings: function PrismMetricCardComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("title", ctx.title())("data-tone", ctx.tone());
+        } }, inputs: { label: [1, "label"], value: [1, "value"], unit: [1, "unit"], tone: [1, "tone"], statusLabel: [1, "statusLabel"], fraction: [1, "fraction"], threshold: [1, "threshold"], title: [1, "title"] }, ngContentSelectors: _c1, decls: 10, vars: 5, consts: [[1, "prism-metric-card__head"], [1, "prism-metric-card__label"], ["size", "sm", 3, "tone", "label"], [1, "prism-metric-card__body"], [1, "prism-metric-card__value"], ["aria-hidden", "true", 1, "prism-metric-card__bar"], [3, "left"]], template: function PrismMetricCardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0);
+            i0.ɵɵelementStart(0, "div", 0)(1, "span", 1);
+            i0.ɵɵtext(2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(3, PrismMetricCardComponent_Conditional_3_Template, 1, 2, "prism-badge", 2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "div", 3);
+            i0.ɵɵprojection(5);
+            i0.ɵɵelementStart(6, "span", 4);
+            i0.ɵɵtext(7);
+            i0.ɵɵconditionalCreate(8, PrismMetricCardComponent_Conditional_8_Template, 2, 1, "small");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(9, PrismMetricCardComponent_Conditional_9_Template, 3, 3, "div", 5);
+        } if (rf & 2) {
+            let tmp_4_0;
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.label());
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.statusLabel() && ctx.tone() ? 3 : -1);
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate1("", ctx.value(), " ");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.unit() ? 8 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional((tmp_4_0 = ctx.bar()) ? 9 : -1, tmp_4_0);
+        } }, dependencies: [PrismBadgeComponent], styles: ["[_nghost-%COMP%] {\n    --%NS%prism-metric-tone: var(--%NS%prism-primary);\n\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    min-width: 0;\n    padding: 10px 12px;\n    background: var(--%NS%prism-bg-surface);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 6px;\n}\n\n[data-tone='success'][_nghost-%COMP%] {\n    --%NS%prism-metric-tone: var(--%NS%prism-success);\n}\n\n[data-tone='warn'][_nghost-%COMP%] {\n    --%NS%prism-metric-tone: var(--%NS%prism-warn);\n}\n\n[data-tone='danger'][_nghost-%COMP%] {\n    --%NS%prism-metric-tone: var(--%NS%prism-danger);\n}\n\n.prism-metric-card__head[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    justify-content: space-between;\n    min-height: 16px;\n}\n\n.prism-metric-card__label[_ngcontent-%COMP%] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--%NS%prism-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    white-space: nowrap;\n}\n\n.prism-metric-card__body[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n}\n\n.prism-metric-card__value[_ngcontent-%COMP%] {\n    font-family: var(--%NS%font-mono);\n    font-size: 22px;\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.1;\n    color: var(--%NS%prism-text);\n}\n\n.prism-metric-card__value[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n    margin-left: 2px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--%NS%prism-text-muted);\n}\n\n.prism-metric-card__bar[_ngcontent-%COMP%] {\n    position: relative;\n    height: 4px;\n    margin-top: 2px;\n    background: var(--%NS%prism-input-bg);\n    border-radius: 2px;\n}\n\n.prism-metric-card__bar[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    position: absolute;\n    inset: 0 auto 0 0;\n    background: var(--%NS%prism-metric-tone);\n    border-radius: 2px;\n}\n\n.prism-metric-card__bar[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] {\n    position: absolute;\n    top: -3px;\n    width: 1.5px;\n    height: 10px;\n    margin-left: -0.75px;\n    background: var(--%NS%prism-text-2);\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismMetricCardComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-metric-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismBadgeComponent], host: {
+                    '[attr.title]': 'title()',
+                    '[attr.data-tone]': 'tone()'
+                }, template: "<div class=\"prism-metric-card__head\">\n    <span class=\"prism-metric-card__label\">{{ label() }}</span>\n    @if (statusLabel() && tone()) {\n        <prism-badge\n            size=\"sm\"\n            [tone]=\"tone()!\"\n            [label]=\"statusLabel()\" />\n    }\n</div>\n<div class=\"prism-metric-card__body\">\n    <ng-content select=\"[metricVisual]\" />\n    <span class=\"prism-metric-card__value\"\n        >{{ value() }}\n        @if (unit()) {\n            <small>{{ unit() }}</small>\n        }\n    </span>\n</div>\n@if (bar(); as b) {\n    <div\n        class=\"prism-metric-card__bar\"\n        aria-hidden=\"true\">\n        <i [style.width]=\"b.width\"></i>\n        @if (b.tick) {\n            <b [style.left]=\"b.tick\"></b>\n        }\n    </div>\n}\n", styles: [":host {\n    --prism-metric-tone: var(--prism-primary);\n\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    min-width: 0;\n    padding: 10px 12px;\n    background: var(--prism-bg-surface);\n    border: 1px solid var(--prism-border);\n    border-radius: 6px;\n}\n\n:host([data-tone='success']) {\n    --prism-metric-tone: var(--prism-success);\n}\n\n:host([data-tone='warn']) {\n    --prism-metric-tone: var(--prism-warn);\n}\n\n:host([data-tone='danger']) {\n    --prism-metric-tone: var(--prism-danger);\n}\n\n.prism-metric-card__head {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    justify-content: space-between;\n    min-height: 16px;\n}\n\n.prism-metric-card__label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--prism-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    white-space: nowrap;\n}\n\n.prism-metric-card__body {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n}\n\n.prism-metric-card__value {\n    font-family: var(--font-mono);\n    font-size: 22px;\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.1;\n    color: var(--prism-text);\n}\n\n.prism-metric-card__value small {\n    margin-left: 2px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--prism-text-muted);\n}\n\n.prism-metric-card__bar {\n    position: relative;\n    height: 4px;\n    margin-top: 2px;\n    background: var(--prism-input-bg);\n    border-radius: 2px;\n}\n\n.prism-metric-card__bar i {\n    position: absolute;\n    inset: 0 auto 0 0;\n    background: var(--prism-metric-tone);\n    border-radius: 2px;\n}\n\n.prism-metric-card__bar b {\n    position: absolute;\n    top: -3px;\n    width: 1.5px;\n    height: 10px;\n    margin-left: -0.75px;\n    background: var(--prism-text-2);\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 }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], statusLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusLabel", required: false }] }], fraction: [{ type: i0.Input, args: [{ isSignal: true, alias: "fraction", required: false }] }], threshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "threshold", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismMetricCardComponent, { className: "PrismMetricCardComponent", filePath: "app/shared/prism-metric-card.component.ts", lineNumber: 27 }); })();

package/dist/app/shared/prism-panel-toolbar.component.d.ts

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+/**
+ * The toolbar row of an addon panel: sub-tabs on the left (`[toolbarStart]`),
+ * actions on the right (`[toolbarEnd]`, secondary before primary).
+ *
+ * No meta text: counts, timestamps, thresholds and sizes belong in tooltips. A
+ * panel renders this only when it has sub-tabs or actions.
+ */
+export declare class PrismPanelToolbarComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismPanelToolbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismPanelToolbarComponent, "prism-panel-toolbar", never, {}, {}, never, ["[toolbarStart]", "[toolbarEnd]"], true, never>;
+}
+//# sourceMappingURL=prism-panel-toolbar.component.d.ts.map

package/dist/app/shared/prism-panel-toolbar.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism-panel-toolbar.component.d.ts","sourceRoot":"","sources":["../../../src/app/shared/prism-panel-toolbar.component.ts"],"names":[],"mappings":";AAEA;;;;;;GAMG;AACH,qBAOa,0BAA0B;yCAA1B,0BAA0B;2CAA1B,0BAA0B;CAAG"}

package/dist/app/shared/prism-panel-toolbar.component.js

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i0 from "@angular/core";
+const _c0 = [[["", "toolbarStart", ""]], [["", "toolbarEnd", ""]]];
+const _c1 = ["[toolbarStart]", "[toolbarEnd]"];
+/**
+ * The toolbar row of an addon panel: sub-tabs on the left (`[toolbarStart]`),
+ * actions on the right (`[toolbarEnd]`, secondary before primary).
+ *
+ * No meta text: counts, timestamps, thresholds and sizes belong in tooltips. A
+ * panel renders this only when it has sub-tabs or actions.
+ */
+export class PrismPanelToolbarComponent {
+    static ɵfac = function PrismPanelToolbarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismPanelToolbarComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismPanelToolbarComponent, selectors: [["prism-panel-toolbar"]], ngContentSelectors: _c1, decls: 4, vars: 0, consts: [[1, "prism-panel-toolbar__start"], [1, "prism-panel-toolbar__end"]], template: function PrismPanelToolbarComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0);
+            i0.ɵɵdomElementStart(0, "div", 0);
+            i0.ɵɵprojection(1);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(2, "div", 1);
+            i0.ɵɵprojection(3, 1);
+            i0.ɵɵdomElementEnd();
+        } }, styles: ["[_nghost-%COMP%] {\n    position: sticky;\n    top: 0;\n    z-index: 2;\n    display: flex;\n    flex-shrink: 0;\n    gap: 12px;\n    align-items: stretch;\n    justify-content: space-between;\n    height: 36px;\n    padding: 0 18px;\n    background: var(--%NS%prism-bg-surface);\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.prism-panel-toolbar__start[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: stretch;\n    min-width: 0;\n    margin-left: -10px;\n}\n\n.prism-panel-toolbar__end[_ngcontent-%COMP%] {\n    display: flex;\n    flex: none;\n    gap: 8px;\n    align-items: center;\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismPanelToolbarComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-panel-toolbar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"prism-panel-toolbar__start\"><ng-content select=\"[toolbarStart]\" /></div>\n<div class=\"prism-panel-toolbar__end\"><ng-content select=\"[toolbarEnd]\" /></div>\n", styles: [":host {\n    position: sticky;\n    top: 0;\n    z-index: 2;\n    display: flex;\n    flex-shrink: 0;\n    gap: 12px;\n    align-items: stretch;\n    justify-content: space-between;\n    height: 36px;\n    padding: 0 18px;\n    background: var(--prism-bg-surface);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.prism-panel-toolbar__start {\n    display: flex;\n    align-items: stretch;\n    min-width: 0;\n    margin-left: -10px;\n}\n\n.prism-panel-toolbar__end {\n    display: flex;\n    flex: none;\n    gap: 8px;\n    align-items: center;\n}\n"] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPanelToolbarComponent, { className: "PrismPanelToolbarComponent", filePath: "app/shared/prism-panel-toolbar.component.ts", lineNumber: 17 }); })();

package/dist/app/shared/prism-segmented.component.d.ts

@@ -0,0 +1,25 @@
+import * as i0 from "@angular/core";
+export interface PrismSegmentOption<T extends string = string> {
+    value: T;
+    label: string;
+    title?: string;
+}
+/**
+ * A choice between a few values: the view switch (Playground / Overview / API),
+ * zoom levels, fit modes. A radio group with a roving tabindex; the active
+ * segment sits raised on the track with a line in the brand ink under it.
+ */
+export declare class PrismSegmentedComponent<T extends string = string> {
+    readonly options: import("@angular/core").InputSignal<readonly PrismSegmentOption<T>[]>;
+    readonly value: import("@angular/core").ModelSignal<T | null>;
+    readonly ariaLabel: import("@angular/core").InputSignal<string | null>;
+    readonly size: import("@angular/core").InputSignal<"md" | "sm">;
+    private readonly segments;
+    protected choose(option: PrismSegmentOption<T>): void;
+    protected onKey(event: KeyboardEvent): void;
+    /** The segment in the tab order: the chosen one, or the first when the value matches none. */
+    protected isFocusable(index: number): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismSegmentedComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismSegmentedComponent<any>, "prism-segmented", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=prism-segmented.component.d.ts.map

package/dist/app/shared/prism-segmented.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism-segmented.component.d.ts","sourceRoot":"","sources":["../../../src/app/shared/prism-segmented.component.ts"],"names":[],"mappings":";AAGA,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACzD,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;GAIG;AACH,qBAQa,uBAAuB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC1D,QAAQ,CAAC,OAAO,wEAAsD;IACtE,QAAQ,CAAC,KAAK,gDAAyB;IACvC,QAAQ,CAAC,SAAS,qDAA8B;IAChD,QAAQ,CAAC,IAAI,mDAA4B;IAEzC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA0D;IAEnF,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,IAAI;IAIrD,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAc3C,8FAA8F;IAC9F,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;yCA3BpC,uBAAuB;2CAAvB,uBAAuB;CAoCnC"}