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

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"}

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

@@ -0,0 +1,77 @@
+import { ChangeDetectionStrategy, Component, input, model, viewChildren } from '@angular/core';
+import { nextRovingIndex, rovingTabStop } from './roving-focus.js';
+import * as i0 from "@angular/core";
+const _c0 = ["segment"];
+const _forTrack0 = ($index, $item) => $item.value;
+function PrismSegmentedComponent_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 3, 0);
+    i0.ɵɵdomListener("click", function PrismSegmentedComponent_For_2_Template_button_click_0_listener() { const option_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.choose(option_r2)); });
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const option_r2 = ctx.$implicit;
+    const ɵ$index_3_r4 = ctx.$index;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("prism-segment--on", option_r2.value === ctx_r2.value());
+    i0.ɵɵattribute("aria-checked", option_r2.value === ctx_r2.value())("tabindex", ctx_r2.isFocusable(ɵ$index_3_r4) ? 0 : -1)("title", option_r2.title ?? null);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", option_r2.label, " ");
+} }
+/**
+ * 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 class PrismSegmentedComponent {
+    options = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    segments = viewChildren('segment', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []));
+    choose(option) {
+        this.value.set(option.value);
+    }
+    onKey(event) {
+        const options = this.options();
+        const current = Math.max(0, this.segments().findIndex((s) => s.nativeElement === event.target));
+        const next = nextRovingIndex(current, event.key, options.length);
+        if (next === null)
+            return;
+        event.preventDefault();
+        this.value.set(options[next].value);
+        this.segments()[next]?.nativeElement.focus();
+    }
+    /** The segment in the tab order: the chosen one, or the first when the value matches none. */
+    isFocusable(index) {
+        return (index ===
+            rovingTabStop(this.options().map((option) => option.value), this.value()));
+    }
+    static ɵfac = function PrismSegmentedComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismSegmentedComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismSegmentedComponent, selectors: [["prism-segmented"]], viewQuery: function PrismSegmentedComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuerySignal(ctx.segments, _c0, 5);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance();
+        } }, hostVars: 2, hostBindings: function PrismSegmentedComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵclassProp("prism-segmented--sm", ctx.size() === "sm");
+        } }, inputs: { options: [1, "options"], value: [1, "value"], ariaLabel: [1, "ariaLabel"], size: [1, "size"] }, outputs: { value: "valueChange" }, decls: 3, vars: 1, consts: [["segment", ""], ["role", "radiogroup", 1, "prism-segmented", 3, "keydown"], ["type", "button", "role", "radio", 1, "prism-segment", 3, "prism-segment--on"], ["type", "button", "role", "radio", 1, "prism-segment", 3, "click"]], template: function PrismSegmentedComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 1);
+            i0.ɵɵdomListener("keydown", function PrismSegmentedComponent_Template_div_keydown_0_listener($event) { return ctx.onKey($event); });
+            i0.ɵɵrepeaterCreate(1, PrismSegmentedComponent_For_2_Template, 3, 6, "button", 2, _forTrack0);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵattribute("aria-label", ctx.ariaLabel());
+            i0.ɵɵadvance();
+            i0.ɵɵrepeater(ctx.options());
+        } }, styles: ["[_nghost-%COMP%] {\n    display: inline-flex;\n}\n\n.prism-segmented[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: 2px;\n    padding: 2px;\n    background: var(--%NS%prism-input-bg);\n    border-radius: 6px;\n    box-shadow: inset 0 0 0 1px var(--%NS%prism-border);\n}\n\n.prism-segment[_ngcontent-%COMP%] {\n    position: relative;\n    padding: 2px 12px;\n    font-family: var(--%NS%font-sans);\n    font-size: var(--%NS%fs-md);\n    font-weight: 500;\n    color: var(--%NS%prism-text-muted);\n    white-space: nowrap;\n    cursor: pointer;\n    background: none;\n    border: 0;\n    border-radius: 4px;\n    transition: color var(--%NS%dur-fast) var(--%NS%ease-default);\n}\n\n.prism-segment[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text-2);\n}\n\n.prism-segment--on[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text);\n    background: var(--%NS%prism-bg-elevated);\n    box-shadow: var(--%NS%prism-shadow-sm);\n}\n\n.prism-segment--%NS%on[_ngcontent-%COMP%]::after {\n    position: absolute;\n    right: 10px;\n    bottom: 1px;\n    left: 10px;\n    height: 1.5px;\n    content: '';\n    background: var(--%NS%prism-brand-ink);\n    border-radius: 2px;\n}\n\n.prism-segment[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 1px;\n}\n\n.prism-segmented--sm[_nghost-%COMP%]   .prism-segment[_ngcontent-%COMP%] {\n    padding: 1px 9px;\n    font-family: var(--%NS%font-mono);\n    font-size: var(--%NS%fs-sm);\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismSegmentedComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-segmented', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.prism-segmented--sm]': "size() === 'sm'" }, template: "<div\n    class=\"prism-segmented\"\n    role=\"radiogroup\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (keydown)=\"onKey($event)\">\n    @for (option of options(); track option.value; let i = $index) {\n        <button\n            #segment\n            type=\"button\"\n            role=\"radio\"\n            class=\"prism-segment\"\n            [class.prism-segment--on]=\"option.value === value()\"\n            [attr.aria-checked]=\"option.value === value()\"\n            [attr.tabindex]=\"isFocusable(i) ? 0 : -1\"\n            [attr.title]=\"option.title ?? null\"\n            (click)=\"choose(option)\">\n            {{ option.label }}\n        </button>\n    }\n</div>\n", styles: [":host {\n    display: inline-flex;\n}\n\n.prism-segmented {\n    display: inline-flex;\n    gap: 2px;\n    padding: 2px;\n    background: var(--prism-input-bg);\n    border-radius: 6px;\n    box-shadow: inset 0 0 0 1px var(--prism-border);\n}\n\n.prism-segment {\n    position: relative;\n    padding: 2px 12px;\n    font-family: var(--font-sans);\n    font-size: var(--fs-md);\n    font-weight: 500;\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n    cursor: pointer;\n    background: none;\n    border: 0;\n    border-radius: 4px;\n    transition: color var(--dur-fast) var(--ease-default);\n}\n\n.prism-segment:hover {\n    color: var(--prism-text-2);\n}\n\n.prism-segment--on {\n    color: var(--prism-text);\n    background: var(--prism-bg-elevated);\n    box-shadow: var(--prism-shadow-sm);\n}\n\n.prism-segment--on::after {\n    position: absolute;\n    right: 10px;\n    bottom: 1px;\n    left: 10px;\n    height: 1.5px;\n    content: '';\n    background: var(--prism-brand-ink);\n    border-radius: 2px;\n}\n\n.prism-segment:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 1px;\n}\n\n:host(.prism-segmented--sm) .prism-segment {\n    padding: 1px 9px;\n    font-family: var(--font-mono);\n    font-size: var(--fs-sm);\n}\n"] }]
+    }], null, { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], segments: [{ type: i0.ViewChildren, args: ['segment', { isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismSegmentedComponent, { className: "PrismSegmentedComponent", filePath: "app/shared/prism-segmented.component.ts", lineNumber: 23 }); })();

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

@@ -0,0 +1,44 @@
+import type { BadgeTone } from './badge.types.js';
+import * as i0 from "@angular/core";
+/** A tab's badge: `count` is a plain quantity, `issues` a number of open findings. */
+export interface PrismTabBadge {
+    kind: 'count' | 'issues';
+    text: string;
+    tone?: BadgeTone;
+    /** Read after the tab's label by assistive technology, e.g. "A11y, 1 violation". Same name as on `PanelBadge`. */
+    label: string;
+}
+export interface PrismTabItem {
+    id: string;
+    label: string;
+    icon?: string;
+    badge?: PrismTabBadge | null;
+    title?: string;
+}
+/**
+ * The one tab bar of the chrome: variant ribbon and panel tabs (`md`), sub-tabs
+ * inside panels (`sm`).
+ *
+ * One indicator per size: `md` underlines the active tab in the brand ink, `sm`
+ * in the primary colour. Full tab semantics with a roving tabindex: arrow keys,
+ * Home and End move between tabs and select them.
+ */
+export declare class PrismTabsComponent {
+    readonly items: import("@angular/core").InputSignal<readonly PrismTabItem[]>;
+    readonly active: import("@angular/core").ModelSignal<string | null>;
+    readonly size: import("@angular/core").InputSignal<"md" | "sm">;
+    readonly ariaLabel: import("@angular/core").InputSignal<string | null>;
+    /** When set, each tab points at `<prefix><id>` through `aria-controls`. */
+    readonly panelIdPrefix: import("@angular/core").InputSignal<string | null>;
+    private readonly tabs;
+    /** The tab in the tab order: the active one, or the first when the active id matches none. */
+    protected readonly tabStop: import("@angular/core").Signal<number>;
+    constructor();
+    protected select(item: PrismTabItem): void;
+    protected onKey(event: KeyboardEvent): void;
+    protected panelId(item: PrismTabItem): string | null;
+    protected accessibleName(item: PrismTabItem): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismTabsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismTabsComponent, "prism-tabs", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "panelIdPrefix": { "alias": "panelIdPrefix"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=prism-tabs.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prism-tabs.component.d.ts","sourceRoot":"","sources":["../../../src/app/shared/prism-tabs.component.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;;AAGlD,sFAAsF;AACtF,MAAM,WAAW,aAAa;IAC1B,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kHAAkH;IAClH,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,YAAY;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;GAOG;AACH,qBASa,kBAAkB;IAC3B,QAAQ,CAAC,KAAK,+DAA6C;IAC3D,QAAQ,CAAC,MAAM,qDAA8B;IAC7C,QAAQ,CAAC,IAAI,mDAA4B;IACzC,QAAQ,CAAC,SAAS,qDAA8B;IAChD,2EAA2E;IAC3E,QAAQ,CAAC,aAAa,qDAA8B;IAEpD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAsD;IAE3E,8FAA8F;IAC9F,SAAS,CAAC,QAAQ,CAAC,OAAO,yCAKxB;;IAUF,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI;IAI1C,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAc3C,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,YAAY,GAAG,MAAM,GAAG,IAAI;IAMpD,SAAS,CAAC,cAAc,CAAC,IAAI,EAAE,YAAY,GAAG,MAAM;yCAlD3C,kBAAkB;2CAAlB,kBAAkB;CAqD9B"}