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

package/dist/app/shared/brand-mark.js

@@ -0,0 +1,52 @@
+export const BRAND_MARK_GRADIENTS = [
+    {
+        id: 'face',
+        x1: -70.82,
+        y1: 873,
+        x2: 1100.42,
+        y2: 749.3,
+        stops: [
+            ['40.42%', '#009ffc'],
+            ['67.49%', '#00c6fb'],
+            ['82.34%', '#49f6f8']
+        ]
+    }
+];
+export const BRAND_MARK_FACETS = [
+    {
+        colour: '#3106f6',
+        d: 'M1053.51 31.812c9.37 10.809 19.49 20.61 29.96 30.32 35.87 37.122 73.82 73.917 110.43 110.453l215.58 214.468 169.94 168.283c23.07 22.717 47.38 47.997 70.8 69.826 4.17 13.173 11.29 29.35 16.69 42.449a3701 3701 0 0 1 25.26 62.599 26975 26975 0 0 0 115.93 287.11l146.16 359.23 66.97 167.96c6.07 15.1 11.88 32.2 18.1 46.88l-7.24-5.64c-7.7-5.08-24.72-19.84-32.41-26.22l-60.41-50.27c-135.74-113.75-256.61-234.53-380.45-360.84-11.75-13.02-28.21-28.74-40.81-41.42l-79.66-79.49-151.14-151.378c-32.93-32.934-68.42-67.049-100.47-100.626a28039 28039 0 0 0-133.23-743.694'
+    },
+    {
+        colour: '#f700f9',
+        d: 'M1448.35 674.906c51.55-11.708 102.85-25.917 154.41-37.781 15.64-3.6 32.09-7.446 47.46-11.963 4.17 13.173 11.29 29.35 16.69 42.449a3701 3701 0 0 1 25.26 62.599 26975 26975 0 0 0 115.93 287.11l146.16 359.23 66.97 167.96c6.07 15.1 11.88 32.2 18.1 46.88l-7.24-5.64c-7.7-5.08-24.72-19.84-32.41-26.22l-60.41-50.27c-135.74-113.75-256.61-234.53-380.45-360.84 30.58-42.53 60.14-89.62 91.03-131.24-7.28-10.63-16.61-27.397-23.53-39.006l-46.65-78.695a18161 18161 0 0 1-131.32-224.573'
+    },
+    {
+        colour: '#c100fa',
+        d: 'M1649.85 1017.18q41.28 69.57 83.73 138.42c55.8 91.85 111.63 181.63 174.17 269.17 14.42 20.5 29.31 40.67 44.64 60.5 8.77 11.26 77.67 94.5 79.7 100.48-7.7-5.08-24.72-19.84-32.41-26.22l-60.41-50.27c-135.74-113.75-256.61-234.53-380.45-360.84 30.58-42.53 60.14-89.62 91.03-131.24'
+    },
+    {
+        colour: '#003eef',
+        d: 'M1053.51 31.812c9.37 10.809 19.49 20.61 29.96 30.32-.28 3.047-.1 5.061 1.59 7.675 9.7 14.996 20.76 29.977 31 44.562 15.36 22.225 30.21 44.8 44.54 67.708 42.63 68.046 86.18 145.279 126.4 215.155l81.63 139.638 49.34 85.769c9.07 15.787 19.51 35.08 29.25 50.197a21969 21969 0 0 0-260.48 102.67 28039 28039 0 0 0-133.23-743.694m-29.8 819.248.97-.413c12.65 13.985 28.6 29.213 42.02 43.082l99.79 103.909a14350 14350 0 0 1 279.56 310.012l84.53 96.72c21.16 24.19 42.87 48.42 62.92 73.53l-.49 1.05c-70.75 2.03-145.11.93-216.13.95l-356.6.24-357.765.38c-67.064.11-139.804 1.48-206.636-.25l-.594.17-.77-.55c14.229-20.57 45.62-54.64 62.926-74.58l113.796-130.37c104.279-117.57 201.671-227.47 311.138-340.567a4601 4601 0 0 1 81.335-83.313'
+    },
+    {
+        gradient: 'face',
+        d: 'M1023.71 851.06c.91 11.38.49 26.534.49 38.254l-.01 62.574v180.942c0 31.11-.9 68.03.34 98.8L615.124 1410.9l-108.499 47.09c-9.121 3.92-44.322 18.33-50.746 22.28l-.594.17-.77-.55c14.229-20.57 45.62-54.64 62.926-74.58l113.796-130.37c104.279-117.57 201.671-227.47 311.138-340.567a4601 4601 0 0 1 81.335-83.313M399.122 627.639c5.671 4.62 49.844 17.931 59.109 20.982l93.111 30.634 53.266 17.387c5.398 1.736 19.646 6.733 24.703 7.751 39.309 14.47 87.882 28.542 128.189 41.65 29.211 9.5 74.168 25.382 103.252 32.989-8.936 11.333-37.673 36.649-49.413 48.193a14201 14201 0 0 1-131.93 128.405 20351 20351 0 0 1-524.563 496.86l-91.483 84.66c-7.802 7.3-40.624 38.88-47.162 42.82-.98 1.56-9.543 9.26-11.222 10.78 7.876-18.63 15.647-40.79 23.25-60.01l57.855-144.6a40219 40219 0 0 1 214.547-523.048l71.549-171.414a2143 2143 0 0 0 16.549-39.962c2.47-6.084 7.243-18.875 10.393-24.077m311.872-311.39c5.424-6.894 16.027-16.241 22.627-22.653a2689 2689 0 0 0 37.456-37.23 11776 11776 0 0 1 143.325-142.395l51.588-50.559c10.371-10.047 23.121-21.418 32.698-31.861-7.62 53.57-20.233 114.027-30.241 167.77l-49.438 268.318-42.68 227.449c-4.477 22.83-8.414 45.795-12.696 68.664-.785 4.19-1.543 9.196-2.637 13.253l-.244 2.027c-29.084-7.607-74.041-23.489-103.252-32.989-40.307-13.108-88.88-27.18-128.189-41.65-5.057-1.018-19.305-6.015-24.703-7.751l-53.266-17.387-93.111-30.634c-9.265-3.051-53.438-16.362-59.109-20.982a24629 24629 0 0 1 247.986-248.387c21.129-21.121 43.28-41.718 63.886-63.003m0 0c5.424-6.894 16.027-16.241 22.627-22.653a2689 2689 0 0 0 37.456-37.23 11776 11776 0 0 1 143.325-142.395l51.588-50.559c10.371-10.047 23.121-21.418 32.698-31.861-7.62 53.57-20.233 114.027-30.241 167.77l-49.438 268.318-42.68 227.449c-4.477 22.83-8.414 45.795-12.696 68.664-.785 4.19-1.543 9.196-2.637 13.253-5.02-6.684-29.896-87.135-34.15-100.108a19789 19789 0 0 1-115.852-360.648'
+    },
+    {
+        colour: '#3a50fc',
+        d: 'm1023.71 851.06.97-.413c12.65 13.985 28.6 29.213 42.02 43.082l99.79 103.909a14350 14350 0 0 1 279.56 310.012l84.53 96.72c21.16 24.19 42.87 48.42 62.92 73.53-12.08.2-514.71-222.99-568.97-246.27-1.24-30.77-.34-67.69-.34-98.8V951.888l.01-62.574c0-11.72.42-26.874-.49-38.254M629.311 704.393c39.309 14.47 87.882 28.542 128.189 41.65 29.211 9.5 74.168 25.382 103.252 32.989-8.936 11.333-37.673 36.649-49.413 48.193a14201 14201 0 0 1-131.93 128.405 20351 20351 0 0 1-524.563 496.86l-91.483 84.66c-7.802 7.3-40.624 38.88-47.162 42.82 3.036-5.46 16.048-21.18 20.233-26.32a3448 3448 0 0 0 37.57-46.45 4793 4793 0 0 0 111.042-147.66 15900 15900 0 0 0 281.423-409.101l101.828-152.475c19.515-29.383 42.978-63.442 61.014-93.571'
+    }
+];
+/** The mark's bounding box on the kit canvas, trimmed to the facets. */
+export const BRAND_MARK_VIEWBOX = '4 31 2036 1561';
+/** The same box padded to a square, for icons the browser would otherwise letterbox. */
+export const BRAND_MARK_SQUARE_VIEWBOX = '4 -206.5 2036 2036';
+/** The mark as a standalone SVG document, with every gradient id prefixed. */
+export function brandMarkSvg(idPrefix, viewBox) {
+    const gradients = BRAND_MARK_GRADIENTS.map((g) => `<linearGradient id="${idPrefix}${g.id}" x1="${g.x1}" y1="${g.y1}" x2="${g.x2}" y2="${g.y2}" gradientUnits="userSpaceOnUse">` +
+        g.stops.map(([offset, colour]) => `<stop offset="${offset}" stop-color="${colour}"/>`).join('') +
+        '</linearGradient>').join('');
+    const facets = BRAND_MARK_FACETS.map((f) => `<path fill="${f.gradient ? `url(#${idPrefix}${f.gradient})` : f.colour}" d="${f.d}"/>`).join('');
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}"><defs>${gradients}</defs>${facets}</svg>`;
+}

package/dist/app/shared/metric-bar.d.ts

@@ -0,0 +1,6 @@
+/** Fill width and threshold tick of a metric card's bar, both clamped to the track. */
+export declare function barGeometry(fraction: number, threshold?: number): {
+    width: string;
+    tick: string | null;
+};
+//# sourceMappingURL=metric-bar.d.ts.map

package/dist/app/shared/metric-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metric-bar.d.ts","sourceRoot":"","sources":["../../../src/app/shared/metric-bar.ts"],"names":[],"mappings":"AAKA,uFAAuF;AACvF,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAExG"}

package/dist/app/shared/metric-bar.js

@@ -0,0 +1,7 @@
+const clamp = (n) => Math.min(1, Math.max(0, n));
+/** `0.4736` → `'47.36%'`, without float noise. */
+const percent = (fraction) => `${Math.round(clamp(fraction) * 10000) / 100}%`;
+/** Fill width and threshold tick of a metric card's bar, both clamped to the track. */
+export function barGeometry(fraction, threshold) {
+    return { width: percent(fraction), tick: threshold === undefined ? null : percent(threshold) };
+}

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

@@ -0,0 +1,21 @@
+import type { BadgeTone } from './badge.types.js';
+import * as i0 from "@angular/core";
+/**
+ * The one badge of the styleguide chrome.
+ *
+ * Words are set in the sans face and never in capitals; only `value` is mono,
+ * with tabular figures, so numbers line up. `soft` fills with the tone's `-bg`
+ * tint, `outline` draws its contour instead; both keep 4.5:1 for the text.
+ */
+export declare class PrismBadgeComponent {
+    readonly tone: import("@angular/core").InputSignal<BadgeTone>;
+    readonly variant: import("@angular/core").InputSignal<"soft" | "outline">;
+    readonly size: import("@angular/core").InputSignal<"md" | "sm">;
+    /** A leading dot in the tone's colour. */
+    readonly dot: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly label: import("@angular/core").InputSignal<string | null>;
+    readonly value: import("@angular/core").InputSignal<string | null>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismBadgeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismBadgeComponent, "prism-badge", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=prism-badge.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prism-badge.component.d.ts","sourceRoot":"","sources":["../../../src/app/shared/prism-badge.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;;AAElD;;;;;;GAMG;AACH,qBAUa,mBAAmB;IAC5B,QAAQ,CAAC,IAAI,iDAA+B;IAC5C,QAAQ,CAAC,OAAO,0DAAqC;IACrD,QAAQ,CAAC,IAAI,mDAA4B;IACzC,0CAA0C;IAC1C,QAAQ,CAAC,GAAG,qEAAiD;IAC7D,QAAQ,CAAC,KAAK,qDAA8B;IAC5C,QAAQ,CAAC,KAAK,qDAA8B;yCAPnC,mBAAmB;2CAAnB,mBAAmB;CAQ/B"}

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

@@ -0,0 +1,68 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+function PrismBadgeComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElement(0, "span", 0);
+} }
+function PrismBadgeComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 1);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.label());
+} }
+function PrismBadgeComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 2);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.value());
+} }
+/**
+ * The one badge of the styleguide chrome.
+ *
+ * Words are set in the sans face and never in capitals; only `value` is mono,
+ * with tabular figures, so numbers line up. `soft` fills with the tone's `-bg`
+ * tint, `outline` draws its contour instead; both keep 4.5:1 for the text.
+ */
+export class PrismBadgeComponent {
+    tone = input('neutral', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    variant = input('soft', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** A leading dot in the tone's colour. */
+    dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    label = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    value = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    static ɵfac = function PrismBadgeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismBadgeComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismBadgeComponent, selectors: [["prism-badge"]], hostVars: 2, hostBindings: function PrismBadgeComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵclassMap("prism-badge prism-badge--" + ctx.tone() + " prism-badge--" + ctx.variant() + " prism-badge--" + ctx.size());
+        } }, inputs: { tone: [1, "tone"], variant: [1, "variant"], size: [1, "size"], dot: [1, "dot"], label: [1, "label"], value: [1, "value"] }, ngContentSelectors: _c0, decls: 4, vars: 3, consts: [["aria-hidden", "true", 1, "prism-badge__dot"], [1, "prism-badge__label"], [1, "prism-badge__value"]], template: function PrismBadgeComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵconditionalCreate(0, PrismBadgeComponent_Conditional_0_Template, 1, 0, "span", 0);
+            i0.ɵɵconditionalCreate(1, PrismBadgeComponent_Conditional_1_Template, 2, 1, "span", 1);
+            i0.ɵɵconditionalCreate(2, PrismBadgeComponent_Conditional_2_Template, 2, 1, "span", 2);
+            i0.ɵɵprojection(3);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.dot() ? 0 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.label() ? 1 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.value() ? 2 : -1);
+        } }, styles: ["[_nghost-%COMP%] {\n    --%NS%prism-badge-fg: var(--%NS%prism-text-muted);\n    --%NS%prism-badge-bg: var(--%NS%prism-input-bg);\n\n    display: inline-flex;\n    flex: none;\n    gap: 5px;\n    align-items: center;\n    height: 20px;\n    padding: 0 7px;\n    font-family: var(--%NS%font-sans);\n    font-size: 11px;\n    font-weight: 500;\n    line-height: 1;\n    color: var(--%NS%prism-badge-fg);\n    white-space: nowrap;\n    background: var(--%NS%prism-badge-bg);\n    border-radius: 4px;\n}\n\n.prism-badge--sm[_nghost-%COMP%] {\n    gap: 4px;\n    height: 16px;\n    padding: 0 5px;\n    font-size: 10px;\n}\n\n.prism-badge--primary[_nghost-%COMP%] {\n    --%NS%prism-badge-fg: var(--%NS%prism-primary);\n    --%NS%prism-badge-bg: var(--%NS%prism-primary-bg);\n}\n\n.prism-badge--success[_nghost-%COMP%] {\n    --%NS%prism-badge-fg: var(--%NS%prism-success);\n    --%NS%prism-badge-bg: var(--%NS%prism-success-bg);\n}\n\n.prism-badge--warn[_nghost-%COMP%] {\n    --%NS%prism-badge-fg: var(--%NS%prism-warn);\n    --%NS%prism-badge-bg: var(--%NS%prism-warn-bg);\n}\n\n.prism-badge--danger[_nghost-%COMP%] {\n    --%NS%prism-badge-fg: var(--%NS%prism-danger);\n    --%NS%prism-badge-bg: var(--%NS%prism-danger-bg);\n}\n\n.prism-badge--outline[_nghost-%COMP%] {\n    background: transparent;\n    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--%NS%prism-badge-fg) 65%, transparent);\n}\n\n.prism-badge--neutral.prism-badge--outline[_nghost-%COMP%] {\n    box-shadow: inset 0 0 0 1px var(--%NS%prism-border-strong);\n}\n\n.prism-badge__dot[_ngcontent-%COMP%] {\n    box-sizing: border-box;\n    flex: none;\n    width: 6px;\n    height: 6px;\n    background: var(--%NS%prism-badge-dot-fill, currentcolor);\n    border-radius: 50%;\n    box-shadow: inset 0 0 0 1.5px currentcolor;\n}\n\n.prism-badge--sm[_nghost-%COMP%]   .prism-badge__dot[_ngcontent-%COMP%] {\n    width: 5px;\n    height: 5px;\n}\n\n.prism-badge__value[_ngcontent-%COMP%] {\n    font-family: var(--%NS%font-mono);\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismBadgeComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                    '[class]': "'prism-badge prism-badge--' + tone() + ' prism-badge--' + variant() + ' prism-badge--' + size()"
+                }, template: "@if (dot()) {\n    <span\n        class=\"prism-badge__dot\"\n        aria-hidden=\"true\"></span>\n}\n@if (label()) {\n    <span class=\"prism-badge__label\">{{ label() }}</span>\n}\n@if (value()) {\n    <span class=\"prism-badge__value\">{{ value() }}</span>\n}\n<ng-content />\n", styles: [":host {\n    --prism-badge-fg: var(--prism-text-muted);\n    --prism-badge-bg: var(--prism-input-bg);\n\n    display: inline-flex;\n    flex: none;\n    gap: 5px;\n    align-items: center;\n    height: 20px;\n    padding: 0 7px;\n    font-family: var(--font-sans);\n    font-size: 11px;\n    font-weight: 500;\n    line-height: 1;\n    color: var(--prism-badge-fg);\n    white-space: nowrap;\n    background: var(--prism-badge-bg);\n    border-radius: 4px;\n}\n\n:host(.prism-badge--sm) {\n    gap: 4px;\n    height: 16px;\n    padding: 0 5px;\n    font-size: 10px;\n}\n\n:host(.prism-badge--primary) {\n    --prism-badge-fg: var(--prism-primary);\n    --prism-badge-bg: var(--prism-primary-bg);\n}\n\n:host(.prism-badge--success) {\n    --prism-badge-fg: var(--prism-success);\n    --prism-badge-bg: var(--prism-success-bg);\n}\n\n:host(.prism-badge--warn) {\n    --prism-badge-fg: var(--prism-warn);\n    --prism-badge-bg: var(--prism-warn-bg);\n}\n\n:host(.prism-badge--danger) {\n    --prism-badge-fg: var(--prism-danger);\n    --prism-badge-bg: var(--prism-danger-bg);\n}\n\n:host(.prism-badge--outline) {\n    background: transparent;\n    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prism-badge-fg) 65%, transparent);\n}\n\n:host(.prism-badge--neutral.prism-badge--outline) {\n    box-shadow: inset 0 0 0 1px var(--prism-border-strong);\n}\n\n.prism-badge__dot {\n    box-sizing: border-box;\n    flex: none;\n    width: 6px;\n    height: 6px;\n    background: var(--prism-badge-dot-fill, currentcolor);\n    border-radius: 50%;\n    box-shadow: inset 0 0 0 1.5px currentcolor;\n}\n\n:host(.prism-badge--sm) .prism-badge__dot {\n    width: 5px;\n    height: 5px;\n}\n\n.prism-badge__value {\n    font-family: var(--font-mono);\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n}\n"] }]
+    }], null, { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismBadgeComponent, { className: "PrismBadgeComponent", filePath: "app/shared/prism-badge.component.ts", lineNumber: 21 }); })();

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

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+/**
+ * Text buttons for toolbar actions. `primary` fills with the brand blue,
+ * `secondary` draws a contour, `ghost` neither. Secondary goes before primary.
+ */
+export declare class PrismButtonComponent {
+    readonly variant: import("@angular/core").InputSignal<"primary" | "secondary" | "ghost">;
+    readonly size: import("@angular/core").InputSignal<"md" | "sm">;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismButtonComponent, "button[prismButton]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=prism-button.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prism-button.component.d.ts","sourceRoot":"","sources":["../../../src/app/shared/prism-button.component.ts"],"names":[],"mappings":";AAEA;;;GAGG;AACH,qBAWa,oBAAoB;IAC7B,QAAQ,CAAC,OAAO,yEAAyD;IACzE,QAAQ,CAAC,IAAI,mDAA4B;yCAFhC,oBAAoB;2CAApB,oBAAoB;CAGhC"}

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

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Text buttons for toolbar actions. `primary` fills with the brand blue,
+ * `secondary` draws a contour, `ghost` neither. Secondary goes before primary.
+ */
+export class PrismButtonComponent {
+    variant = input('secondary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('sm', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    static ɵfac = function PrismButtonComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismButtonComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismButtonComponent, selectors: [["button", "prismButton", ""]], hostAttrs: ["type", "button"], hostVars: 2, hostBindings: function PrismButtonComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵclassMap("prism-button prism-button--" + ctx.variant() + " prism-button--" + ctx.size());
+        } }, inputs: { variant: [1, "variant"], size: [1, "size"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function PrismButtonComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, styles: ["[_nghost-%COMP%] {\n    display: inline-flex;\n    flex: none;\n    gap: 6px;\n    align-items: center;\n    height: 26px;\n    padding: 0 11px;\n    font-family: var(--%NS%font-sans);\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--%NS%prism-text-2);\n    white-space: nowrap;\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--%NS%prism-border-strong);\n    border-radius: 5px;\n    transition:\n        color var(--%NS%dur-fast) var(--%NS%ease-default),\n        background var(--%NS%dur-fast) var(--%NS%ease-default);\n}\n\n.prism-button--md[_nghost-%COMP%] {\n    height: 30px;\n    padding: 0 14px;\n    font-size: 12.5px;\n}\n\n.prism-button--%NS%secondary[_nghost-%COMP%]:hover:not(:disabled) {\n    color: var(--%NS%prism-text);\n    background: var(--%NS%prism-input-bg);\n}\n\n.prism-button--primary[_nghost-%COMP%] {\n    color: var(--%NS%prism-on-primary);\n    background: var(--%NS%prism-primary-fill);\n    border-color: var(--%NS%prism-primary-fill);\n}\n\n.prism-button--%NS%primary[_nghost-%COMP%]:hover:not(:disabled) {\n    background: var(--%NS%prism-primary-fill-hover);\n    border-color: var(--%NS%prism-primary-fill-hover);\n}\n\n.prism-button--ghost[_nghost-%COMP%] {\n    border-color: transparent;\n}\n\n.prism-button--%NS%ghost[_nghost-%COMP%]:hover:not(:disabled) {\n    color: var(--%NS%prism-text);\n    background: var(--%NS%prism-input-bg);\n}\n\n[_nghost-%COMP%]:disabled {\n    color: var(--%NS%prism-text-muted);\n    cursor: default;\n    background: transparent;\n    border-color: var(--%NS%prism-border);\n}\n\n[_nghost-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 2px;\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismButtonComponent, [{
+        type: Component,
+        args: [{ selector: 'button[prismButton]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                    type: 'button',
+                    '[class]': "'prism-button prism-button--' + variant() + ' prism-button--' + size()"
+                }, template: "<ng-content />\n", styles: [":host {\n    display: inline-flex;\n    flex: none;\n    gap: 6px;\n    align-items: center;\n    height: 26px;\n    padding: 0 11px;\n    font-family: var(--font-sans);\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--prism-text-2);\n    white-space: nowrap;\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--prism-border-strong);\n    border-radius: 5px;\n    transition:\n        color var(--dur-fast) var(--ease-default),\n        background var(--dur-fast) var(--ease-default);\n}\n\n:host(.prism-button--md) {\n    height: 30px;\n    padding: 0 14px;\n    font-size: 12.5px;\n}\n\n:host(.prism-button--secondary:hover:not(:disabled)) {\n    color: var(--prism-text);\n    background: var(--prism-input-bg);\n}\n\n:host(.prism-button--primary) {\n    color: var(--prism-on-primary);\n    background: var(--prism-primary-fill);\n    border-color: var(--prism-primary-fill);\n}\n\n:host(.prism-button--primary:hover:not(:disabled)) {\n    background: var(--prism-primary-fill-hover);\n    border-color: var(--prism-primary-fill-hover);\n}\n\n:host(.prism-button--ghost) {\n    border-color: transparent;\n}\n\n:host(.prism-button--ghost:hover:not(:disabled)) {\n    color: var(--prism-text);\n    background: var(--prism-input-bg);\n}\n\n:host(:disabled) {\n    color: var(--prism-text-muted);\n    cursor: default;\n    background: transparent;\n    border-color: var(--prism-border);\n}\n\n:host(:focus-visible) {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 2px;\n}\n"] }]
+    }], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismButtonComponent, { className: "PrismButtonComponent", filePath: "app/shared/prism-button.component.ts", lineNumber: 18 }); })();

package/dist/app/shared/prism-icon-button.component.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+/**
+ * The ghost icon button of header, component head, toolbars and the tool rail.
+ *
+ * md 32 px (header), sm 28 px (component head), xs 26 px (toolbars, rail).
+ * `pressed` makes it a toggle (`aria-pressed`) with the active tint. Colours run
+ * through `--prism-icon-button-*`, so a surface such as the tool rail can bend
+ * them to its own tokens.
+ */
+export declare class PrismIconButtonComponent {
+    readonly size: import("@angular/core").InputSignal<"md" | "sm" | "xs">;
+    /** `null` for a plain button, a boolean for a toggle. */
+    readonly pressed: import("@angular/core").InputSignal<boolean | null>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismIconButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismIconButtonComponent, "button[prismIconButton]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "pressed": { "alias": "pressed"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=prism-icon-button.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prism-icon-button.component.d.ts","sourceRoot":"","sources":["../../../src/app/shared/prism-icon-button.component.ts"],"names":[],"mappings":";AAEA;;;;;;;GAOG;AACH,qBAaa,wBAAwB;IACjC,QAAQ,CAAC,IAAI,0DAAmC;IAChD,yDAAyD;IACzD,QAAQ,CAAC,OAAO,sDAA+B;yCAHtC,wBAAwB;2CAAxB,wBAAwB;CAIpC"}

package/dist/app/shared/prism-icon-button.component.js

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * The ghost icon button of header, component head, toolbars and the tool rail.
+ *
+ * md 32 px (header), sm 28 px (component head), xs 26 px (toolbars, rail).
+ * `pressed` makes it a toggle (`aria-pressed`) with the active tint. Colours run
+ * through `--prism-icon-button-*`, so a surface such as the tool rail can bend
+ * them to its own tokens.
+ */
+export class PrismIconButtonComponent {
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** `null` for a plain button, a boolean for a toggle. */
+    pressed = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []));
+    static ɵfac = function PrismIconButtonComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismIconButtonComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismIconButtonComponent, selectors: [["button", "prismIconButton", ""]], hostAttrs: ["type", "button"], hostVars: 5, hostBindings: function PrismIconButtonComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("aria-pressed", ctx.pressed());
+            i0.ɵɵclassMap("prism-icon-button prism-icon-button--" + ctx.size());
+            i0.ɵɵclassProp("prism-icon-button--pressed", ctx.pressed() === true);
+        } }, inputs: { size: [1, "size"], pressed: [1, "pressed"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function PrismIconButtonComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, styles: ["[_nghost-%COMP%] {\n    display: inline-grid;\n    flex: none;\n    place-items: center;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    color: var(--%NS%prism-icon-button-fg, var(--%NS%prism-text-muted));\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: 6px;\n    transition:\n        color var(--%NS%dur-fast) var(--%NS%ease-default),\n        background var(--%NS%dur-fast) var(--%NS%ease-default);\n}\n\n.prism-icon-button--sm[_nghost-%COMP%] {\n    width: 28px;\n    height: 28px;\n    border-radius: 5px;\n}\n\n.prism-icon-button--xs[_nghost-%COMP%] {\n    width: 26px;\n    height: 26px;\n    border-radius: 4px;\n}\n\n[_nghost-%COMP%]:hover:not(:disabled) {\n    color: var(--%NS%prism-icon-button-fg-hover, var(--%NS%prism-text));\n    background: var(--%NS%prism-icon-button-bg-hover, var(--%NS%prism-input-bg));\n}\n\n.prism-icon-button--pressed[_nghost-%COMP%] {\n    color: var(--%NS%prism-icon-button-active-fg, var(--%NS%prism-primary));\n    background: var(--%NS%prism-icon-button-active-bg, var(--%NS%prism-primary-bg));\n}\n\n\n[_nghost-%COMP%]:disabled {\n    color: var(--%NS%prism-border-strong);\n    cursor: default;\n}\n\n[_nghost-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-icon-button-focus, var(--%NS%prism-primary));\n    outline-offset: 1px;\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismIconButtonComponent, [{
+        type: Component,
+        args: [{ selector: 'button[prismIconButton]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                    type: 'button',
+                    '[class]': "'prism-icon-button prism-icon-button--' + size()",
+                    '[class.prism-icon-button--pressed]': 'pressed() === true',
+                    '[attr.aria-pressed]': 'pressed()'
+                }, template: "<ng-content />\n", styles: [":host {\n    display: inline-grid;\n    flex: none;\n    place-items: center;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    color: var(--prism-icon-button-fg, var(--prism-text-muted));\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: 6px;\n    transition:\n        color var(--dur-fast) var(--ease-default),\n        background var(--dur-fast) var(--ease-default);\n}\n\n:host(.prism-icon-button--sm) {\n    width: 28px;\n    height: 28px;\n    border-radius: 5px;\n}\n\n:host(.prism-icon-button--xs) {\n    width: 26px;\n    height: 26px;\n    border-radius: 4px;\n}\n\n:host(:hover:not(:disabled)) {\n    color: var(--prism-icon-button-fg-hover, var(--prism-text));\n    background: var(--prism-icon-button-bg-hover, var(--prism-input-bg));\n}\n\n:host(.prism-icon-button--pressed) {\n    color: var(--prism-icon-button-active-fg, var(--prism-primary));\n    background: var(--prism-icon-button-active-bg, var(--prism-primary-bg));\n}\n\n/* Disabled stays legible as a contour colour rather than fading text out. */\n:host(:disabled) {\n    color: var(--prism-border-strong);\n    cursor: default;\n}\n\n:host(:focus-visible) {\n    outline: 2px solid var(--prism-icon-button-focus, var(--prism-primary));\n    outline-offset: 1px;\n}\n"] }]
+    }], null, { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismIconButtonComponent, { className: "PrismIconButtonComponent", filePath: "app/shared/prism-icon-button.component.ts", lineNumber: 24 }); })();

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