@ng-prism/core 22.2.0 → 22.3.0

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

@@ -1,8 +1,8 @@
-import { Component, inject, computed, ChangeDetectionStrategy, } from '@angular/core';
-import { PrismNavigationService } from '../services/prism-navigation.service.js';
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { A11yAuditService } from '../panels/a11y/a11y-audit.service.js';
-import { PrismHeadInfoComponent } from './prism-head-info.component.js';
+import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import { PrismHeadGaugeComponent } from './prism-head-gauge.component.js';
+import { PrismHeadInfoComponent } from './prism-head-info.component.js';
 import * as i0 from "@angular/core";
 const _c0 = [[["", "headEnd", ""]]];
 const _c1 = ["[headEnd]"];
@@ -51,20 +51,20 @@ function PrismComponentHeadComponent_Conditional_0_Template(rf, ctx) { if (rf &
 const STATUS_BADGES = {
     stable: {
         label: 'Stable',
-        tooltip: 'Migrated and production-ready',
+        tooltip: 'Migrated and production-ready'
     },
     beta: {
         label: 'Beta',
-        tooltip: 'Beta — API may change',
+        tooltip: 'Beta — API may change'
     },
     wip: {
         label: 'Work in progress',
-        tooltip: 'Migration in progress',
+        tooltip: 'Migration in progress'
     },
     deprecated: {
         label: 'Deprecated',
-        tooltip: 'Deprecated / Legacy — do not use in new code',
-    },
+        tooltip: 'Deprecated / Legacy — do not use in new code'
+    }
 };
 export class PrismComponentHeadComponent {
     navigationService = inject(PrismNavigationService);
@@ -128,9 +128,7 @@ export class PrismComponentHeadComponent {
         if (!vrt?.found || !vrt.summary)
             return null;
         const { value, variant } = vrt.summary;
-        return variant === 'ok' || variant === 'warn' || variant === 'danger'
-            ? { value, variant }
-            : null;
+        return variant === 'ok' || variant === 'warn' || variant === 'danger' ? { value, variant } : null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "vrtStat" }] : /* istanbul ignore next */ []));
     /**
@@ -149,29 +147,27 @@ export class PrismComponentHeadComponent {
                 id: 'coverage',
                 label: 'Coverage',
                 value: coverage === null ? '—' : `${coverage}%`,
-                variant: coverage === null ? 'none' : coverage >= 90 ? 'ok' : 'warn',
+                variant: coverage === null ? 'none' : coverage >= 90 ? 'ok' : 'warn'
             },
             {
                 id: 'a11y',
                 label: 'A11y score',
                 value: a11y === null ? '—' : String(a11y),
-                variant: a11y === null ? 'none' : a11y >= 90 ? 'ok' : 'warn',
+                variant: a11y === null ? 'none' : a11y >= 90 ? 'ok' : 'warn'
             },
             {
                 id: 'vrt',
                 label: 'VRT diff',
                 value: vrt === null ? '—' : vrt.value,
-                variant: vrt === null ? 'none' : vrt.variant,
-            },
+                variant: vrt === null ? 'none' : vrt.variant
+            }
         ];
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "metrics" }] : /* istanbul ignore next */ []));
     componentMeta = computed(() => {
         const c = this.comp();
         const meta = c?.meta.showcaseConfig.meta;
-        return meta && typeof meta === 'object'
-            ? meta
-            : null;
+        return meta && typeof meta === 'object' ? meta : null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "componentMeta" }] : /* istanbul ignore next */ []));
     static ɵfac = function PrismComponentHeadComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismComponentHeadComponent)(); };
@@ -181,39 +177,10 @@ export class PrismComponentHeadComponent {
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.comp()) ? 0 : -1, tmp_0_0);
-        } }, dependencies: [PrismHeadInfoComponent, PrismHeadGaugeComponent], styles: ["[_nghost-%COMP%] { display: block; flex-shrink: 0; }\n\n    .comp-head[_ngcontent-%COMP%] {\n      height: var(--%NS%band-head);\n      display: flex;\n      align-items: center;\n      gap: var(--%NS%sp-3);\n      padding: 0 var(--%NS%sp-5);\n      background: var(--%NS%prism-bg);\n      border-bottom: 1px solid var(--%NS%prism-border);\n    }\n\n    \n\n\n\n\n\n\n    .comp-crumb[_ngcontent-%COMP%] {\n      flex: 0 8 auto;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      font-size: var(--%NS%fs-xs);\n      color: var(--%NS%prism-text-ghost);\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n      white-space: nowrap;\n    }\n    .comp-crumb[_ngcontent-%COMP%]::after { content: ' /'; }\n\n    .comp-title[_ngcontent-%COMP%] {\n      flex: 0 1 auto;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      margin: 0;\n      font-size: var(--%NS%fs-xl);\n      font-weight: 600;\n      letter-spacing: -0.015em;\n      color: var(--%NS%prism-text);\n      white-space: nowrap;\n    }\n\n    .comp-spacer[_ngcontent-%COMP%] { flex: 1; }\n\n    .comp-status[_ngcontent-%COMP%], \n   prism-head-info[_ngcontent-%COMP%], \n   prism-head-gauge[_ngcontent-%COMP%], \n   .comp-head-end[_ngcontent-%COMP%] { flex: none; }\n\n    \n\n\n    .comp-head-end[_ngcontent-%COMP%] { display: inline-flex; align-items: center; }\n    .comp-head-end[_ngcontent-%COMP%]:empty { display: none; }\n\n    \n\n\n\n    .comp-status[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--%NS%sp-2);\n      height: 18px;\n      padding: 0 var(--%NS%sp-3) 0 var(--%NS%sp-2);\n      border-radius: var(--%NS%radius-xs);\n      border: 1px solid currentColor;\n      font-size: var(--%NS%fs-xs);\n      font-weight: 600;\n      letter-spacing: 0.03em;\n      white-space: nowrap;\n      color: var(--%NS%prism-text-muted);\n    }\n    .comp-status-mark[_ngcontent-%COMP%] {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: currentColor;\n    }\n    .comp-status--stable[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-mark-nominal);\n      background: color-mix(in srgb, var(--%NS%prism-mark-nominal) 10%, transparent);\n    }\n    .comp-status--beta[_ngcontent-%COMP%], \n   .comp-status--wip[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-mark-attention);\n      background: color-mix(in srgb, var(--%NS%prism-mark-attention) 10%, transparent);\n    }\n    .comp-status--wip[_ngcontent-%COMP%]   .comp-status-mark[_ngcontent-%COMP%] {\n      background: transparent;\n      border: 1.5px solid currentColor;\n      box-sizing: border-box;\n      width: 7px;\n      height: 7px;\n    }\n    .comp-status--deprecated[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-mark-critical);\n      background: color-mix(in srgb, var(--%NS%prism-mark-critical) 12%, transparent);\n      border-color: color-mix(in srgb, var(--%NS%prism-mark-critical) 55%, transparent);\n    }"] });
+        } }, dependencies: [PrismHeadInfoComponent, PrismHeadGaugeComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n    flex-shrink: 0;\n}\n\n.comp-head[_ngcontent-%COMP%] {\n    display: flex;\n    gap: var(--%NS%sp-3);\n    align-items: center;\n    height: var(--%NS%band-head);\n    padding: 0 var(--%NS%sp-5);\n    background: var(--%NS%prism-bg);\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n\n\n\n\n\n\n\n.comp-crumb[_ngcontent-%COMP%] {\n    flex: 0 8 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    white-space: nowrap;\n}\n\n.comp-crumb[_ngcontent-%COMP%]::after {\n    content: ' /';\n}\n\n.comp-title[_ngcontent-%COMP%] {\n    flex: 0 1 auto;\n    min-width: 0;\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--%NS%fs-xl);\n    font-weight: 600;\n    color: var(--%NS%prism-text);\n    letter-spacing: -0.015em;\n    white-space: nowrap;\n}\n\n.comp-spacer[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.comp-status[_ngcontent-%COMP%], \nprism-head-info[_ngcontent-%COMP%], \nprism-head-gauge[_ngcontent-%COMP%], \n.comp-head-end[_ngcontent-%COMP%] {\n    flex: none;\n}\n\n\n\n\n.comp-head-end[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n}\n\n.comp-head-end[_ngcontent-%COMP%]:empty {\n    display: none;\n}\n\n\n\n\n\n.comp-status[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: var(--%NS%sp-2);\n    align-items: center;\n    height: 18px;\n    padding: 0 var(--%NS%sp-3) 0 var(--%NS%sp-2);\n    font-size: var(--%NS%fs-xs);\n    font-weight: 600;\n    color: var(--%NS%prism-text-muted);\n    letter-spacing: 0.03em;\n    white-space: nowrap;\n    border: 1px solid currentcolor;\n    border-radius: var(--%NS%radius-xs);\n}\n\n.comp-status-mark[_ngcontent-%COMP%] {\n    width: 6px;\n    height: 6px;\n    background: currentcolor;\n    border-radius: 50%;\n}\n\n.comp-status--stable[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-nominal);\n    background: color-mix(in srgb, var(--%NS%prism-mark-nominal) 10%, transparent);\n}\n\n.comp-status--beta[_ngcontent-%COMP%], \n.comp-status--wip[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-attention);\n    background: color-mix(in srgb, var(--%NS%prism-mark-attention) 10%, transparent);\n}\n\n.comp-status--wip[_ngcontent-%COMP%]   .comp-status-mark[_ngcontent-%COMP%] {\n    box-sizing: border-box;\n    width: 7px;\n    height: 7px;\n    background: transparent;\n    border: 1.5px solid currentcolor;\n}\n\n.comp-status--deprecated[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-critical);\n    background: color-mix(in srgb, var(--%NS%prism-mark-critical) 12%, transparent);\n    border-color: color-mix(in srgb, var(--%NS%prism-mark-critical) 55%, transparent);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismComponentHeadComponent, [{
         type: Component,
-        args: [{ selector: 'prism-component-head', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismHeadInfoComponent, PrismHeadGaugeComponent], template: `
-    @if (comp(); as c) {
-    <section class="comp-head">
-      <span class="comp-crumb">{{ category() }}</span>
-      <h1 class="comp-title">{{ c.meta.showcaseConfig.title }}</h1>
-
-      <prism-head-info
-        [selector]="c.meta.componentMeta.selector"
-        [description]="c.meta.showcaseConfig.description"
-        [tags]="c.meta.showcaseConfig.tags ?? []"
-        [variantCount]="variantCount()"
-      />
-
-      @if (statusBadge(); as badge) {
-      <span
-        class="comp-status comp-status--{{ status() }}"
-        [attr.title]="badge.tooltip"
-      >
-        <span class="comp-status-mark" aria-hidden="true"></span>
-        {{ badge.label }}
-      </span>
-      }
-
-      <span class="comp-spacer"></span>
-
-      <prism-head-gauge [metrics]="metrics()" />
-      <span class="comp-head-end"><ng-content select="[headEnd]" /></span>
-    </section>
-    }
-  `, styles: ["\n    :host { display: block; flex-shrink: 0; }\n\n    .comp-head {\n      height: var(--band-head);\n      display: flex;\n      align-items: center;\n      gap: var(--sp-3);\n      padding: 0 var(--sp-5);\n      background: var(--prism-bg);\n      border-bottom: 1px solid var(--prism-border);\n    }\n\n    /* The text yields, the controls never do. A long category and a long title\n       would otherwise push the gauge out of a fixed-height row whose ancestors\n       clip \u2014 making the measurement unreachable in exactly the case where you\n       most want to read it, and costing the gauge the fixed position it was\n       designed around. The trade is deliberate: a title truncated with an\n       ellipsis, so the chip stays put at the right edge. The crumb gives way\n       first, being the least important text in the row. */\n    .comp-crumb {\n      flex: 0 8 auto;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      font-size: var(--fs-xs);\n      color: var(--prism-text-ghost);\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n      white-space: nowrap;\n    }\n    .comp-crumb::after { content: ' /'; }\n\n    .comp-title {\n      flex: 0 1 auto;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      margin: 0;\n      font-size: var(--fs-xl);\n      font-weight: 600;\n      letter-spacing: -0.015em;\n      color: var(--prism-text);\n      white-space: nowrap;\n    }\n\n    .comp-spacer { flex: 1; }\n\n    .comp-status,\n    prism-head-info,\n    prism-head-gauge,\n    .comp-head-end { flex: none; }\n\n    /* Wraps the slot rather than styling the projected element, which this\n       stylesheet cannot reach. :empty keeps the row's trailing gap from\n       appearing when nothing is projected \u2014 comment anchors do not count. */\n    .comp-head-end { display: inline-flex; align-items: center; }\n    .comp-head-end:empty { display: none; }\n\n    /* Always an outline, never a filled surface \u2014 deprecated separates itself\n       by hue, not by weight. A filled alarm-coloured chip in a permanently\n       visible band is exactly the \"red as background texture\" problem this\n       redesign exists to fix. */\n    .comp-status {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--sp-2);\n      height: 18px;\n      padding: 0 var(--sp-3) 0 var(--sp-2);\n      border-radius: var(--radius-xs);\n      border: 1px solid currentColor;\n      font-size: var(--fs-xs);\n      font-weight: 600;\n      letter-spacing: 0.03em;\n      white-space: nowrap;\n      color: var(--prism-text-muted);\n    }\n    .comp-status-mark {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: currentColor;\n    }\n    .comp-status--stable {\n      color: var(--prism-mark-nominal);\n      background: color-mix(in srgb, var(--prism-mark-nominal) 10%, transparent);\n    }\n    .comp-status--beta,\n    .comp-status--wip {\n      color: var(--prism-mark-attention);\n      background: color-mix(in srgb, var(--prism-mark-attention) 10%, transparent);\n    }\n    .comp-status--wip .comp-status-mark {\n      background: transparent;\n      border: 1.5px solid currentColor;\n      box-sizing: border-box;\n      width: 7px;\n      height: 7px;\n    }\n    .comp-status--deprecated {\n      color: var(--prism-mark-critical);\n      background: color-mix(in srgb, var(--prism-mark-critical) 12%, transparent);\n      border-color: color-mix(in srgb, var(--prism-mark-critical) 55%, transparent);\n    }\n  "] }]
+        args: [{ selector: 'prism-component-head', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismHeadInfoComponent, PrismHeadGaugeComponent], template: "@if (comp(); as c) {\n    <section class=\"comp-head\">\n        <span class=\"comp-crumb\">{{ category() }}</span>\n        <h1 class=\"comp-title\">{{ c.meta.showcaseConfig.title }}</h1>\n\n        <prism-head-info\n            [selector]=\"c.meta.componentMeta.selector\"\n            [description]=\"c.meta.showcaseConfig.description\"\n            [tags]=\"c.meta.showcaseConfig.tags ?? []\"\n            [variantCount]=\"variantCount()\" />\n\n        @if (statusBadge(); as badge) {\n            <span\n                class=\"comp-status comp-status--{{ status() }}\"\n                [attr.title]=\"badge.tooltip\">\n                <span\n                    class=\"comp-status-mark\"\n                    aria-hidden=\"true\"></span>\n                {{ badge.label }}\n            </span>\n        }\n\n        <span class=\"comp-spacer\"></span>\n\n        <prism-head-gauge [metrics]=\"metrics()\" />\n        <span class=\"comp-head-end\"><ng-content select=\"[headEnd]\" /></span>\n    </section>\n}\n", styles: [":host {\n    display: block;\n    flex-shrink: 0;\n}\n\n.comp-head {\n    display: flex;\n    gap: var(--sp-3);\n    align-items: center;\n    height: var(--band-head);\n    padding: 0 var(--sp-5);\n    background: var(--prism-bg);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n/* The text yields, the controls never do. A long category and a long title\n   would otherwise push the gauge out of a fixed-height row whose ancestors\n   clip \u2014 making the measurement unreachable in exactly the case where you\n   most want to read it, and costing the gauge the fixed position it was\n   designed around. The trade is deliberate: a title truncated with an\n   ellipsis, so the chip stays put at the right edge. The crumb gives way\n   first, being the least important text in the row. */\n.comp-crumb {\n    flex: 0 8 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--fs-xs);\n    color: var(--prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    white-space: nowrap;\n}\n\n.comp-crumb::after {\n    content: ' /';\n}\n\n.comp-title {\n    flex: 0 1 auto;\n    min-width: 0;\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--fs-xl);\n    font-weight: 600;\n    color: var(--prism-text);\n    letter-spacing: -0.015em;\n    white-space: nowrap;\n}\n\n.comp-spacer {\n    flex: 1;\n}\n\n.comp-status,\nprism-head-info,\nprism-head-gauge,\n.comp-head-end {\n    flex: none;\n}\n\n/* Wraps the slot rather than styling the projected element, which this\n   stylesheet cannot reach. :empty keeps the row's trailing gap from\n   appearing when nothing is projected \u2014 comment anchors do not count. */\n.comp-head-end {\n    display: inline-flex;\n    align-items: center;\n}\n\n.comp-head-end:empty {\n    display: none;\n}\n\n/* Always an outline, never a filled surface \u2014 deprecated separates itself\n   by hue, not by weight. A filled alarm-coloured chip in a permanently\n   visible band is exactly the \"red as background texture\" problem this\n   redesign exists to fix. */\n.comp-status {\n    display: inline-flex;\n    gap: var(--sp-2);\n    align-items: center;\n    height: 18px;\n    padding: 0 var(--sp-3) 0 var(--sp-2);\n    font-size: var(--fs-xs);\n    font-weight: 600;\n    color: var(--prism-text-muted);\n    letter-spacing: 0.03em;\n    white-space: nowrap;\n    border: 1px solid currentcolor;\n    border-radius: var(--radius-xs);\n}\n\n.comp-status-mark {\n    width: 6px;\n    height: 6px;\n    background: currentcolor;\n    border-radius: 50%;\n}\n\n.comp-status--stable {\n    color: var(--prism-mark-nominal);\n    background: color-mix(in srgb, var(--prism-mark-nominal) 10%, transparent);\n}\n\n.comp-status--beta,\n.comp-status--wip {\n    color: var(--prism-mark-attention);\n    background: color-mix(in srgb, var(--prism-mark-attention) 10%, transparent);\n}\n\n.comp-status--wip .comp-status-mark {\n    box-sizing: border-box;\n    width: 7px;\n    height: 7px;\n    background: transparent;\n    border: 1.5px solid currentcolor;\n}\n\n.comp-status--deprecated {\n    color: var(--prism-mark-critical);\n    background: color-mix(in srgb, var(--prism-mark-critical) 12%, transparent);\n    border-color: color-mix(in srgb, var(--prism-mark-critical) 55%, transparent);\n}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismComponentHeadComponent, { className: "PrismComponentHeadComponent", filePath: "app/component-head/prism-component-head.component.ts", lineNumber: 179 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismComponentHeadComponent, { className: "PrismComponentHeadComponent", filePath: "app/component-head/prism-component-head.component.ts", lineNumber: 41 }); })();

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

@@ -1 +1 @@
-{"version":3,"file":"prism-head-gauge.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-head-gauge.component.ts"],"names":[],"mappings":"AAMA,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;;AAGtE;;;;;;;;;;;;GAYG;AACH,qBAmHa,uBAAuB;IAClC,QAAQ,CAAC,OAAO,6DAA2C;IAC3D,SAAS,CAAC,QAAQ,CAAC,OAAO,2EAAoD;IAC9E,SAAS,CAAC,QAAQ,CAAC,SAAS,yCAOzB;yCAVQ,uBAAuB;2CAAvB,uBAAuB;CAWnC"}
+{"version":3,"file":"prism-head-gauge.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-head-gauge.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,UAAU,EAAoB,MAAM,mBAAmB,CAAC;;AAGtE;;;;;;;;;;;;GAYG;AACH,qBAQa,uBAAuB;IAChC,QAAQ,CAAC,OAAO,6DAA2C;IAC3D,SAAS,CAAC,QAAQ,CAAC,OAAO,2EAAoD;IAC9E,SAAS,CAAC,QAAQ,CAAC,SAAS,yCAMzB;yCATM,uBAAuB;2CAAvB,uBAAuB;CAUnC"}

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, input, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { summarizeMetrics } from './head-metrics.js';
 import { PrismStatComponent } from './prism-stat.component.js';
 import * as i0 from "@angular/core";
@@ -82,42 +82,10 @@ export class PrismHeadGaugeComponent {
             i0.ɵɵconditional((tmp_5_0 = ctx.summary().worst) ? 2 : 3, tmp_5_0);
             i0.ɵɵadvance(3);
             i0.ɵɵrepeater(ctx.metrics());
-        } }, dependencies: [PrismStatComponent], styles: ["[_nghost-%COMP%] { display: inline-flex; }\n\n    .gauge[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--%NS%sp-2);\n      height: 20px;\n      padding: 0 var(--%NS%sp-3);\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: var(--%NS%radius-xs);\n      background: transparent;\n      color: var(--%NS%prism-text-muted);\n      font-family: var(--%NS%font-mono);\n      font-size: var(--%NS%fs-xs);\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n      cursor: pointer;\n      anchor-name: --prism-head-gauge;\n    }\n    .gauge[_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--%NS%prism-primary);\n      outline-offset: 1px;\n    }\n    .gauge__dot[_ngcontent-%COMP%] {\n      width: 5px;\n      height: 5px;\n      border-radius: 50%;\n      background: currentColor;\n      opacity: 0.5;\n    }\n    .gauge__more[_ngcontent-%COMP%] { opacity: 0.6; }\n\n    \n\n\n    .gauge--ok[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-mark-nominal);\n      border-color: color-mix(in srgb, var(--%NS%prism-mark-nominal) 40%, transparent);\n    }\n    .gauge--warn[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-mark-attention);\n      border-color: color-mix(in srgb, var(--%NS%prism-mark-attention) 40%, transparent);\n    }\n    .gauge--danger[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-mark-critical);\n      border-color: color-mix(in srgb, var(--%NS%prism-mark-critical) 45%, transparent);\n    }\n    .gauge--ok[_ngcontent-%COMP%]   .gauge__dot[_ngcontent-%COMP%], \n   .gauge--warn[_ngcontent-%COMP%]   .gauge__dot[_ngcontent-%COMP%], \n   .gauge--danger[_ngcontent-%COMP%]   .gauge__dot[_ngcontent-%COMP%] { opacity: 1; }\n\n    .gauge-card[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: var(--%NS%sp-2);\n      min-width: 200px;\n      border: 1px solid var(--%NS%prism-border-strong);\n      border-radius: var(--%NS%radius-md);\n      background: var(--%NS%prism-bg-elevated);\n      box-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.45);\n      gap: 1px;\n      position-anchor: --prism-head-gauge;\n      position-area: block-end span-inline-start;\n      position-try-fallbacks: flip-block, flip-inline;\n      inset: auto;\n    }\n\n    \n\n\n\n    .gauge-card[_ngcontent-%COMP%]:popover-open {\n      display: flex;\n      flex-direction: column;\n    }"] });
+        } }, dependencies: [PrismStatComponent], styles: ["[_nghost-%COMP%] {\n    display: inline-flex;\n}\n\n.gauge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: var(--%NS%sp-2);\n    align-items: center;\n    height: 20px;\n    padding: 0 var(--%NS%sp-3);\n    anchor-name: --prism-head-gauge;\n    font-family: var(--%NS%font-mono);\n    font-size: var(--%NS%fs-xs);\n    font-variant-numeric: tabular-nums;\n    color: var(--%NS%prism-text-muted);\n    white-space: nowrap;\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: var(--%NS%radius-xs);\n}\n\n.gauge[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 1px;\n}\n\n.gauge__dot[_ngcontent-%COMP%] {\n    width: 5px;\n    height: 5px;\n    background: currentcolor;\n    border-radius: 50%;\n    opacity: 0.5;\n}\n\n.gauge__more[_ngcontent-%COMP%] {\n    opacity: 0.6;\n}\n\n\n\n\n.gauge--ok[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-nominal);\n    border-color: color-mix(in srgb, var(--%NS%prism-mark-nominal) 40%, transparent);\n}\n\n.gauge--warn[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-attention);\n    border-color: color-mix(in srgb, var(--%NS%prism-mark-attention) 40%, transparent);\n}\n\n.gauge--danger[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-critical);\n    border-color: color-mix(in srgb, var(--%NS%prism-mark-critical) 45%, transparent);\n}\n\n.gauge--ok[_ngcontent-%COMP%]   .gauge__dot[_ngcontent-%COMP%], \n.gauge--warn[_ngcontent-%COMP%]   .gauge__dot[_ngcontent-%COMP%], \n.gauge--danger[_ngcontent-%COMP%]   .gauge__dot[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.gauge-card[_ngcontent-%COMP%] {\n    inset: auto;\n    gap: 1px;\n    min-width: 200px;\n    padding: var(--%NS%sp-2);\n    margin: 0;\n    position-area: block-end span-inline-start;\n    position-anchor: --prism-head-gauge;\n    position-try-fallbacks: flip-block, flip-inline;\n    background: var(--%NS%prism-bg-elevated);\n    border: 1px solid var(--%NS%prism-border-strong);\n    border-radius: var(--%NS%radius-md);\n    box-shadow: 0 8px 28px -10px rgb(0 0 0 / 45%);\n}\n\n\n\n\n\n.gauge-card[_ngcontent-%COMP%]:popover-open {\n    display: flex;\n    flex-direction: column;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismHeadGaugeComponent, [{
         type: Component,
-        args: [{ selector: 'prism-head-gauge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismStatComponent], template: `
-    <button
-      class="gauge"
-      type="button"
-      [class.gauge--ok]="summary().variant === 'ok'"
-      [class.gauge--warn]="summary().variant === 'warn'"
-      [class.gauge--danger]="summary().variant === 'danger'"
-      popovertarget="prism-head-gauge"
-      [attr.aria-label]="ariaLabel()"
-      [attr.title]="ariaLabel()"
-    >
-      <span class="gauge__dot" aria-hidden="true"></span>
-      @if (summary().worst; as worst) {
-      <span class="gauge__text">{{ worst.label }} {{ worst.value }}</span>
-      @if (summary().others > 0) {
-      <span class="gauge__more">+{{ summary().others }}</span>
-      } } @else {
-      <span class="gauge__text">{{ summary().measured }}</span>
-      }
-    </button>
-
-    <div
-      popover
-      id="prism-head-gauge"
-      class="gauge-card"
-      role="dialog"
-      aria-label="Component metrics"
-    >
-      @for (m of metrics(); track m.id) {
-      <prism-stat [label]="m.label" [value]="m.value" [variant]="m.variant" />
-      }
-    </div>
-  `, styles: ["\n    :host { display: inline-flex; }\n\n    .gauge {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--sp-2);\n      height: 20px;\n      padding: 0 var(--sp-3);\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-xs);\n      background: transparent;\n      color: var(--prism-text-muted);\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n      cursor: pointer;\n      anchor-name: --prism-head-gauge;\n    }\n    .gauge:focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 1px;\n    }\n    .gauge__dot {\n      width: 5px;\n      height: 5px;\n      border-radius: 50%;\n      background: currentColor;\n      opacity: 0.5;\n    }\n    .gauge__more { opacity: 0.6; }\n\n    /* The quiet state is green now, not grey: the gauge says \"these values\n       were measured and all of them are fine\", which is a result, not an\n       absence. A metric with no data at all stays grey in the readout rows. */\n    .gauge--ok {\n      color: var(--prism-mark-nominal);\n      border-color: color-mix(in srgb, var(--prism-mark-nominal) 40%, transparent);\n    }\n    .gauge--warn {\n      color: var(--prism-mark-attention);\n      border-color: color-mix(in srgb, var(--prism-mark-attention) 40%, transparent);\n    }\n    .gauge--danger {\n      color: var(--prism-mark-critical);\n      border-color: color-mix(in srgb, var(--prism-mark-critical) 45%, transparent);\n    }\n    .gauge--ok .gauge__dot,\n    .gauge--warn .gauge__dot,\n    .gauge--danger .gauge__dot { opacity: 1; }\n\n    .gauge-card {\n      margin: 0;\n      padding: var(--sp-2);\n      min-width: 200px;\n      border: 1px solid var(--prism-border-strong);\n      border-radius: var(--radius-md);\n      background: var(--prism-bg-elevated);\n      box-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.45);\n      gap: 1px;\n      position-anchor: --prism-head-gauge;\n      position-area: block-end span-inline-start;\n      position-try-fallbacks: flip-block, flip-inline;\n      inset: auto;\n    }\n\n    /* display belongs on :popover-open and nowhere else \u2014 see the note in\n       prism-template-popover.component.ts. An author display on the base\n       rule outranks the UA's [popover]:not(:popover-open) { display: none }\n       and pins the readout open. */\n    .gauge-card:popover-open {\n      display: flex;\n      flex-direction: column;\n    }\n  "] }]
+        args: [{ selector: 'prism-head-gauge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismStatComponent], template: "<button\n    class=\"gauge\"\n    type=\"button\"\n    [class.gauge--ok]=\"summary().variant === 'ok'\"\n    [class.gauge--warn]=\"summary().variant === 'warn'\"\n    [class.gauge--danger]=\"summary().variant === 'danger'\"\n    popovertarget=\"prism-head-gauge\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.title]=\"ariaLabel()\">\n    <span\n        class=\"gauge__dot\"\n        aria-hidden=\"true\"></span>\n    @if (summary().worst; as worst) {\n        <span class=\"gauge__text\">{{ worst.label }} {{ worst.value }}</span>\n        @if (summary().others > 0) {\n            <span class=\"gauge__more\">+{{ summary().others }}</span>\n        }\n    } @else {\n        <span class=\"gauge__text\">{{ summary().measured }}</span>\n    }\n</button>\n\n<div\n    popover\n    id=\"prism-head-gauge\"\n    class=\"gauge-card\"\n    role=\"dialog\"\n    aria-label=\"Component metrics\">\n    @for (m of metrics(); track m.id) {\n        <prism-stat\n            [label]=\"m.label\"\n            [value]=\"m.value\"\n            [variant]=\"m.variant\" />\n    }\n</div>\n", styles: [":host {\n    display: inline-flex;\n}\n\n.gauge {\n    display: inline-flex;\n    gap: var(--sp-2);\n    align-items: center;\n    height: 20px;\n    padding: 0 var(--sp-3);\n    anchor-name: --prism-head-gauge;\n    font-family: var(--font-mono);\n    font-size: var(--fs-xs);\n    font-variant-numeric: tabular-nums;\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-xs);\n}\n\n.gauge:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 1px;\n}\n\n.gauge__dot {\n    width: 5px;\n    height: 5px;\n    background: currentcolor;\n    border-radius: 50%;\n    opacity: 0.5;\n}\n\n.gauge__more {\n    opacity: 0.6;\n}\n\n/* The quiet state is green now, not grey: the gauge says \"these values\n   were measured and all of them are fine\", which is a result, not an\n   absence. A metric with no data at all stays grey in the readout rows. */\n.gauge--ok {\n    color: var(--prism-mark-nominal);\n    border-color: color-mix(in srgb, var(--prism-mark-nominal) 40%, transparent);\n}\n\n.gauge--warn {\n    color: var(--prism-mark-attention);\n    border-color: color-mix(in srgb, var(--prism-mark-attention) 40%, transparent);\n}\n\n.gauge--danger {\n    color: var(--prism-mark-critical);\n    border-color: color-mix(in srgb, var(--prism-mark-critical) 45%, transparent);\n}\n\n.gauge--ok .gauge__dot,\n.gauge--warn .gauge__dot,\n.gauge--danger .gauge__dot {\n    opacity: 1;\n}\n\n.gauge-card {\n    inset: auto;\n    gap: 1px;\n    min-width: 200px;\n    padding: var(--sp-2);\n    margin: 0;\n    position-area: block-end span-inline-start;\n    position-anchor: --prism-head-gauge;\n    position-try-fallbacks: flip-block, flip-inline;\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border-strong);\n    border-radius: var(--radius-md);\n    box-shadow: 0 8px 28px -10px rgb(0 0 0 / 45%);\n}\n\n/* display belongs on :popover-open and nowhere else \u2014 see the note in\n   prism-template-popover.component.ts. An author display on the base\n   rule outranks the UA's [popover]:not(:popover-open) { display: none }\n   and pins the readout open. */\n.gauge-card:popover-open {\n    display: flex;\n    flex-direction: column;\n}\n"] }]
     }], null, { metrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "metrics", required: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismHeadGaugeComponent, { className: "PrismHeadGaugeComponent", filePath: "app/component-head/prism-head-gauge.component.ts", lineNumber: 138 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismHeadGaugeComponent, { className: "PrismHeadGaugeComponent", filePath: "app/component-head/prism-head-gauge.component.ts", lineNumber: 26 }); })();

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

@@ -1 +1 @@
-{"version":3,"file":"prism-head-info.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-head-info.component.ts"],"names":[],"mappings":";AAGA;;;;;;;;;;;;GAYG;AACH,qBAgHa,sBAAsB;IACjC,QAAQ,CAAC,QAAQ,8CAA4B;IAC7C,QAAQ,CAAC,WAAW,0DAAwC;IAC5D,QAAQ,CAAC,IAAI,yDAAgC;IAC7C,QAAQ,CAAC,YAAY,8CAAoB;yCAJ9B,sBAAsB;2CAAtB,sBAAsB;CAKlC"}
+{"version":3,"file":"prism-head-info.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-head-info.component.ts"],"names":[],"mappings":";AAGA;;;;;;;;;;;;GAYG;AACH,qBAQa,sBAAsB;IAC/B,QAAQ,CAAC,QAAQ,8CAA4B;IAC7C,QAAQ,CAAC,WAAW,0DAAwC;IAC5D,QAAQ,CAAC,IAAI,yDAAgC;IAC7C,QAAQ,CAAC,YAAY,8CAAoB;yCAJhC,sBAAsB;2CAAtB,sBAAsB;CAKlC"}

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

@@ -82,43 +82,10 @@ export class PrismHeadInfoComponent {
             i0.ɵɵconditional(ctx.variantCount() > 0 ? 6 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.tags().length ? 7 : -1);
-        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] { display: inline-flex; }\n\n    .info-btn[_ngcontent-%COMP%] {\n      display: grid;\n      place-items: center;\n      width: 20px;\n      height: 20px;\n      padding: 0;\n      border: 0;\n      border-radius: var(--%NS%radius-xs);\n      background: transparent;\n      color: var(--%NS%prism-text-ghost);\n      cursor: pointer;\n      anchor-name: --prism-head-info;\n    }\n    .info-btn[_ngcontent-%COMP%]:hover { color: var(--%NS%prism-text-2); }\n    .info-btn[_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--%NS%prism-primary);\n      outline-offset: 1px;\n    }\n\n    .info-card[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: var(--%NS%sp-4);\n      width: 320px;\n      max-width: calc(100vw - var(--%NS%sp-6));\n      border: 1px solid var(--%NS%prism-border-strong);\n      border-radius: var(--%NS%radius-md);\n      background: var(--%NS%prism-bg-elevated);\n      color: var(--%NS%prism-text-2);\n      box-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.45);\n      position-anchor: --prism-head-info;\n      position-area: block-end span-inline-end;\n      position-try-fallbacks: flip-block, flip-inline;\n      inset: auto;\n    }\n\n    .info-card__selector[_ngcontent-%COMP%] {\n      display: block;\n      font-family: var(--%NS%font-mono);\n      font-size: var(--%NS%fs-md);\n      color: var(--%NS%prism-primary);\n      user-select: all;\n    }\n    .info-card__desc[_ngcontent-%COMP%] {\n      margin: var(--%NS%sp-3) 0 0;\n      font-size: var(--%NS%fs-lg);\n      line-height: 1.55;\n    }\n    \n\n\n    .info-card__meta[_ngcontent-%COMP%] {\n      margin: var(--%NS%sp-3) 0 0;\n      font-size: var(--%NS%fs-md);\n      color: var(--%NS%prism-text-muted);\n    }\n    .info-card__tags[_ngcontent-%COMP%] {\n      margin-top: var(--%NS%sp-4);\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--%NS%sp-2);\n    }\n    .info-card__tag[_ngcontent-%COMP%] {\n      padding: 1px var(--%NS%sp-3);\n      font-size: var(--%NS%fs-xs);\n      border-radius: var(--%NS%radius-xs);\n      border: 1px solid var(--%NS%prism-border);\n      color: var(--%NS%prism-text-muted);\n    }"] });
+        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] {\n    display: inline-flex;\n}\n\n.info-btn[_ngcontent-%COMP%] {\n    display: grid;\n    place-items: center;\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    anchor-name: --prism-head-info;\n    color: var(--%NS%prism-text-ghost);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--%NS%radius-xs);\n}\n\n.info-btn[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text-2);\n}\n\n.info-btn[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 1px;\n}\n\n.info-card[_ngcontent-%COMP%] {\n    inset: auto;\n    width: 320px;\n    max-width: calc(100vw - var(--%NS%sp-6));\n    padding: var(--%NS%sp-4);\n    margin: 0;\n    position-area: block-end span-inline-end;\n    position-anchor: --prism-head-info;\n    position-try-fallbacks: flip-block, flip-inline;\n    color: var(--%NS%prism-text-2);\n    background: var(--%NS%prism-bg-elevated);\n    border: 1px solid var(--%NS%prism-border-strong);\n    border-radius: var(--%NS%radius-md);\n    box-shadow: 0 8px 28px -10px rgb(0 0 0 / 45%);\n}\n\n.info-card__selector[_ngcontent-%COMP%] {\n    display: block;\n    font-family: var(--%NS%font-mono);\n    font-size: var(--%NS%fs-md);\n    color: var(--%NS%prism-primary);\n    user-select: all;\n}\n\n.info-card__desc[_ngcontent-%COMP%] {\n    margin: var(--%NS%sp-3) 0 0;\n    font-size: var(--%NS%fs-lg);\n    line-height: 1.55;\n}\n\n\n\n\n.info-card__meta[_ngcontent-%COMP%] {\n    margin: var(--%NS%sp-3) 0 0;\n    font-size: var(--%NS%fs-md);\n    color: var(--%NS%prism-text-muted);\n}\n\n.info-card__tags[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--%NS%sp-2);\n    margin-top: var(--%NS%sp-4);\n}\n\n.info-card__tag[_ngcontent-%COMP%] {\n    padding: 1px var(--%NS%sp-3);\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-muted);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: var(--%NS%radius-xs);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismHeadInfoComponent, [{
         type: Component,
-        args: [{ selector: 'prism-head-info', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: `
-    <button
-      class="info-btn"
-      type="button"
-      popovertarget="prism-head-info"
-      title="Component details"
-      aria-label="Component details"
-    >
-      <prism-icon name="info" [size]="13" />
-    </button>
-
-    <div
-      popover
-      id="prism-head-info"
-      class="info-card"
-      role="dialog"
-      aria-label="Component details"
-    >
-      <code class="info-card__selector">&lt;{{ selector() }}&gt;</code>
-      @if (description()) {
-      <p class="info-card__desc">{{ description() }}</p>
-      } @if (variantCount() > 0) {
-      <p class="info-card__meta">
-        {{ variantCount() }} {{ variantCount() === 1 ? 'variant' : 'variants' }}
-      </p>
-      } @if (tags().length) {
-      <div class="info-card__tags">
-        @for (tag of tags(); track tag) {
-        <span class="info-card__tag">{{ tag }}</span>
-        }
-      </div>
-      }
-    </div>
-  `, styles: ["\n    :host { display: inline-flex; }\n\n    .info-btn {\n      display: grid;\n      place-items: center;\n      width: 20px;\n      height: 20px;\n      padding: 0;\n      border: 0;\n      border-radius: var(--radius-xs);\n      background: transparent;\n      color: var(--prism-text-ghost);\n      cursor: pointer;\n      anchor-name: --prism-head-info;\n    }\n    .info-btn:hover { color: var(--prism-text-2); }\n    .info-btn:focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 1px;\n    }\n\n    .info-card {\n      margin: 0;\n      padding: var(--sp-4);\n      width: 320px;\n      max-width: calc(100vw - var(--sp-6));\n      border: 1px solid var(--prism-border-strong);\n      border-radius: var(--radius-md);\n      background: var(--prism-bg-elevated);\n      color: var(--prism-text-2);\n      box-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.45);\n      position-anchor: --prism-head-info;\n      position-area: block-end span-inline-end;\n      position-try-fallbacks: flip-block, flip-inline;\n      inset: auto;\n    }\n\n    .info-card__selector {\n      display: block;\n      font-family: var(--font-mono);\n      font-size: var(--fs-md);\n      color: var(--prism-primary);\n      user-select: all;\n    }\n    .info-card__desc {\n      margin: var(--sp-3) 0 0;\n      font-size: var(--fs-lg);\n      line-height: 1.55;\n    }\n    /* A plain fact about the component, not a measurement \u2014 it sits here with\n       the selector and the tags rather than in the gauge, whose numbers all\n       answer \"did this pass its threshold\". A count cannot. */\n    .info-card__meta {\n      margin: var(--sp-3) 0 0;\n      font-size: var(--fs-md);\n      color: var(--prism-text-muted);\n    }\n    .info-card__tags {\n      margin-top: var(--sp-4);\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--sp-2);\n    }\n    .info-card__tag {\n      padding: 1px var(--sp-3);\n      font-size: var(--fs-xs);\n      border-radius: var(--radius-xs);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n    }\n  "] }]
+        args: [{ selector: 'prism-head-info', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: "<button\n    class=\"info-btn\"\n    type=\"button\"\n    popovertarget=\"prism-head-info\"\n    title=\"Component details\"\n    aria-label=\"Component details\">\n    <prism-icon\n        name=\"info\"\n        [size]=\"13\" />\n</button>\n\n<div\n    popover\n    id=\"prism-head-info\"\n    class=\"info-card\"\n    role=\"dialog\"\n    aria-label=\"Component details\">\n    <code class=\"info-card__selector\">&lt;{{ selector() }}&gt;</code>\n    @if (description()) {\n        <p class=\"info-card__desc\">{{ description() }}</p>\n    }\n    @if (variantCount() > 0) {\n        <p class=\"info-card__meta\"> {{ variantCount() }} {{ variantCount() === 1 ? 'variant' : 'variants' }} </p>\n    }\n    @if (tags().length) {\n        <div class=\"info-card__tags\">\n            @for (tag of tags(); track tag) {\n                <span class=\"info-card__tag\">{{ tag }}</span>\n            }\n        </div>\n    }\n</div>\n", styles: [":host {\n    display: inline-flex;\n}\n\n.info-btn {\n    display: grid;\n    place-items: center;\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    anchor-name: --prism-head-info;\n    color: var(--prism-text-ghost);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--radius-xs);\n}\n\n.info-btn:hover {\n    color: var(--prism-text-2);\n}\n\n.info-btn:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 1px;\n}\n\n.info-card {\n    inset: auto;\n    width: 320px;\n    max-width: calc(100vw - var(--sp-6));\n    padding: var(--sp-4);\n    margin: 0;\n    position-area: block-end span-inline-end;\n    position-anchor: --prism-head-info;\n    position-try-fallbacks: flip-block, flip-inline;\n    color: var(--prism-text-2);\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border-strong);\n    border-radius: var(--radius-md);\n    box-shadow: 0 8px 28px -10px rgb(0 0 0 / 45%);\n}\n\n.info-card__selector {\n    display: block;\n    font-family: var(--font-mono);\n    font-size: var(--fs-md);\n    color: var(--prism-primary);\n    user-select: all;\n}\n\n.info-card__desc {\n    margin: var(--sp-3) 0 0;\n    font-size: var(--fs-lg);\n    line-height: 1.55;\n}\n\n/* A plain fact about the component, not a measurement \u2014 it sits here with\n   the selector and the tags rather than in the gauge, whose numbers all\n   answer \"did this pass its threshold\". A count cannot. */\n.info-card__meta {\n    margin: var(--sp-3) 0 0;\n    font-size: var(--fs-md);\n    color: var(--prism-text-muted);\n}\n\n.info-card__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--sp-2);\n    margin-top: var(--sp-4);\n}\n\n.info-card__tag {\n    padding: 1px var(--sp-3);\n    font-size: var(--fs-xs);\n    color: var(--prism-text-muted);\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-xs);\n}\n"] }]
     }], null, { selector: [{ type: i0.Input, args: [{ isSignal: true, alias: "selector", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }], variantCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "variantCount", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismHeadInfoComponent, { className: "PrismHeadInfoComponent", filePath: "app/component-head/prism-head-info.component.ts", lineNumber: 129 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismHeadInfoComponent, { className: "PrismHeadInfoComponent", filePath: "app/component-head/prism-head-info.component.ts", lineNumber: 25 }); })();

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

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

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

@@ -29,21 +29,10 @@ export class PrismStatComponent {
             i0.ɵɵtextInterpolate(ctx.label());
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(ctx.value());
-        } }, styles: [".stat[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: var(--%NS%sp-3);\n      padding: var(--%NS%sp-2) var(--%NS%sp-3);\n      border-radius: var(--%NS%radius-xs);\n      font-size: var(--%NS%fs-md);\n      color: var(--%NS%prism-text-2);\n    }\n    .stat__dot[_ngcontent-%COMP%] {\n      width: 5px;\n      height: 5px;\n      border-radius: 50%;\n      background: transparent;\n      flex: none;\n    }\n    .stat__lbl[_ngcontent-%COMP%] { white-space: nowrap; }\n    .stat__val[_ngcontent-%COMP%] {\n      margin-left: auto;\n      font-family: var(--%NS%font-mono);\n      font-variant-numeric: tabular-nums;\n      color: var(--%NS%prism-text);\n    }\n    \n\n\n\n    .stat--ok[_ngcontent-%COMP%]   .stat__dot[_ngcontent-%COMP%] { background: var(--%NS%prism-mark-nominal); }\n    .stat--ok[_ngcontent-%COMP%]   .stat__val[_ngcontent-%COMP%] { color: var(--%NS%prism-mark-nominal); }\n    .stat--warn[_ngcontent-%COMP%]   .stat__dot[_ngcontent-%COMP%] { background: var(--%NS%prism-mark-attention); }\n    .stat--warn[_ngcontent-%COMP%]   .stat__val[_ngcontent-%COMP%] { color: var(--%NS%prism-mark-attention); }\n    .stat--danger[_ngcontent-%COMP%]   .stat__dot[_ngcontent-%COMP%] { background: var(--%NS%prism-mark-critical); }\n    .stat--danger[_ngcontent-%COMP%]   .stat__val[_ngcontent-%COMP%] { color: var(--%NS%prism-mark-critical); }"] });
+        } }, styles: [".stat[_ngcontent-%COMP%] {\n    display: flex;\n    gap: var(--%NS%sp-3);\n    align-items: center;\n    padding: var(--%NS%sp-2) var(--%NS%sp-3);\n    font-size: var(--%NS%fs-md);\n    color: var(--%NS%prism-text-2);\n    border-radius: var(--%NS%radius-xs);\n}\n\n.stat__dot[_ngcontent-%COMP%] {\n    flex: none;\n    width: 5px;\n    height: 5px;\n    background: transparent;\n    border-radius: 50%;\n}\n\n.stat__lbl[_ngcontent-%COMP%] {\n    white-space: nowrap;\n}\n\n.stat__val[_ngcontent-%COMP%] {\n    margin-left: auto;\n    font-family: var(--%NS%font-mono);\n    font-variant-numeric: tabular-nums;\n    color: var(--%NS%prism-text);\n}\n\n\n\n\n\n.stat--ok[_ngcontent-%COMP%]   .stat__dot[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-mark-nominal);\n}\n\n.stat--ok[_ngcontent-%COMP%]   .stat__val[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-nominal);\n}\n\n.stat--warn[_ngcontent-%COMP%]   .stat__dot[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-mark-attention);\n}\n\n.stat--warn[_ngcontent-%COMP%]   .stat__val[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-attention);\n}\n\n.stat--danger[_ngcontent-%COMP%]   .stat__dot[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-mark-critical);\n}\n\n.stat--danger[_ngcontent-%COMP%]   .stat__val[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-critical);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismStatComponent, [{
         type: Component,
-        args: [{ selector: 'prism-stat', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div
-      class="stat"
-      [class.stat--ok]="variant() === 'ok'"
-      [class.stat--warn]="variant() === 'warn'"
-      [class.stat--danger]="variant() === 'danger'"
-    >
-      <span class="stat__dot" aria-hidden="true"></span>
-      <span class="stat__lbl">{{ label() }}</span>
-      <span class="stat__val">{{ value() }}</span>
-    </div>
-  `, styles: ["\n    .stat {\n      display: flex;\n      align-items: center;\n      gap: var(--sp-3);\n      padding: var(--sp-2) var(--sp-3);\n      border-radius: var(--radius-xs);\n      font-size: var(--fs-md);\n      color: var(--prism-text-2);\n    }\n    .stat__dot {\n      width: 5px;\n      height: 5px;\n      border-radius: 50%;\n      background: transparent;\n      flex: none;\n    }\n    .stat__lbl { white-space: nowrap; }\n    .stat__val {\n      margin-left: auto;\n      font-family: var(--font-mono);\n      font-variant-numeric: tabular-nums;\n      color: var(--prism-text);\n    }\n    /* Four states, four treatments. \"ok\" earns the nominal green, and \"none\"\n       deliberately does not: a metric with no data has nothing to report, and\n       colouring it green would claim a clean result the tool never measured.\n       That is the one distinction worth keeping grey. */\n    .stat--ok .stat__dot { background: var(--prism-mark-nominal); }\n    .stat--ok .stat__val { color: var(--prism-mark-nominal); }\n    .stat--warn .stat__dot { background: var(--prism-mark-attention); }\n    .stat--warn .stat__val { color: var(--prism-mark-attention); }\n    .stat--danger .stat__dot { background: var(--prism-mark-critical); }\n    .stat--danger .stat__val { color: var(--prism-mark-critical); }\n  "] }]
+        args: [{ selector: 'prism-stat', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"stat\"\n    [class.stat--ok]=\"variant() === 'ok'\"\n    [class.stat--warn]=\"variant() === 'warn'\"\n    [class.stat--danger]=\"variant() === 'danger'\">\n    <span\n        class=\"stat__dot\"\n        aria-hidden=\"true\"></span>\n    <span class=\"stat__lbl\">{{ label() }}</span>\n    <span class=\"stat__val\">{{ value() }}</span>\n</div>\n", styles: [".stat {\n    display: flex;\n    gap: var(--sp-3);\n    align-items: center;\n    padding: var(--sp-2) var(--sp-3);\n    font-size: var(--fs-md);\n    color: var(--prism-text-2);\n    border-radius: var(--radius-xs);\n}\n\n.stat__dot {\n    flex: none;\n    width: 5px;\n    height: 5px;\n    background: transparent;\n    border-radius: 50%;\n}\n\n.stat__lbl {\n    white-space: nowrap;\n}\n\n.stat__val {\n    margin-left: auto;\n    font-family: var(--font-mono);\n    font-variant-numeric: tabular-nums;\n    color: var(--prism-text);\n}\n\n/* Four states, four treatments. \"ok\" earns the nominal green, and \"none\"\n   deliberately does not: a metric with no data has nothing to report, and\n   colouring it green would claim a clean result the tool never measured.\n   That is the one distinction worth keeping grey. */\n.stat--ok .stat__dot {\n    background: var(--prism-mark-nominal);\n}\n\n.stat--ok .stat__val {\n    color: var(--prism-mark-nominal);\n}\n\n.stat--warn .stat__dot {\n    background: var(--prism-mark-attention);\n}\n\n.stat--warn .stat__val {\n    color: var(--prism-mark-attention);\n}\n\n.stat--danger .stat__dot {\n    background: var(--prism-mark-critical);\n}\n\n.stat--danger .stat__val {\n    color: var(--prism-mark-critical);\n}\n"] }]
     }], null, { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismStatComponent, { className: "PrismStatComponent", filePath: "app/component-head/prism-stat.component.ts", lineNumber: 62 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismStatComponent, { className: "PrismStatComponent", filePath: "app/component-head/prism-stat.component.ts", lineNumber: 17 }); })();

package/dist/app/controls/boolean-control.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"boolean-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/boolean-control.component.ts"],"names":[],"mappings":";AAOA,qBA+Ca,uBAAuB;IAClC,QAAQ,CAAC,KAAK,+CAAgB;IAC9B,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,WAAW,oDAAqB;yCAJ9B,uBAAuB;2CAAvB,uBAAuB;CAKnC"}
+{"version":3,"file":"boolean-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/boolean-control.component.ts"],"names":[],"mappings":";AAEA,qBAOa,uBAAuB;IAChC,QAAQ,CAAC,KAAK,+CAAgB;IAC9B,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,WAAW,oDAAqB;yCAJhC,uBAAuB;2CAAvB,uBAAuB;CAKnC"}

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

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, input, output, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
 import * as i0 from "@angular/core";
 export class BooleanControlComponent {
     value = input(false, /* @ts-ignore */
@@ -16,18 +16,10 @@ export class BooleanControlComponent {
         } if (rf & 2) {
             i0.ɵɵclassProp("on", ctx.value());
             i0.ɵɵattribute("aria-checked", ctx.value());
-        } }, styles: [".ctl-toggle[_ngcontent-%COMP%] {\n      position: relative;\n      width: 34px;\n      height: 18px;\n      border-radius: 9px;\n      background: var(--%NS%prism-input-bg);\n      border: 1px solid var(--%NS%prism-border);\n      transition: all var(--%NS%dur-fast);\n      cursor: pointer;\n      flex-shrink: 0;\n      padding: 0;\n    }\n    .ctl-toggle[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      left: 2px;\n      top: 2px;\n      width: 12px;\n      height: 12px;\n      border-radius: 50%;\n      background: var(--%NS%prism-text-muted);\n      transition: transform var(--%NS%dur-fast), background var(--%NS%dur-fast);\n    }\n    .ctl-toggle.on[_ngcontent-%COMP%] {\n      background: var(--%NS%prism-primary);\n      border-color: var(--%NS%prism-primary);\n    }\n    .ctl-toggle.on[_ngcontent-%COMP%]::after {\n      transform: translateX(16px);\n      background: white;\n    }"] });
+        } }, styles: [".ctl-toggle[_ngcontent-%COMP%] {\n    position: relative;\n    flex-shrink: 0;\n    width: 34px;\n    height: 18px;\n    padding: 0;\n    cursor: pointer;\n    background: var(--%NS%prism-input-bg);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 9px;\n    transition: all var(--%NS%dur-fast);\n}\n\n.ctl-toggle[_ngcontent-%COMP%]::after {\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 12px;\n    height: 12px;\n    content: '';\n    background: var(--%NS%prism-text-muted);\n    border-radius: 50%;\n    transition:\n        transform var(--%NS%dur-fast),\n        background var(--%NS%dur-fast);\n}\n\n.ctl-toggle.on[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-primary);\n    border-color: var(--%NS%prism-primary);\n}\n\n.ctl-toggle.on[_ngcontent-%COMP%]::after {\n    background: white;\n    transform: translateX(16px);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BooleanControlComponent, [{
         type: Component,
-        args: [{ selector: 'prism-boolean-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <button
-      class="ctl-toggle"
-      [class.on]="value()"
-      (click)="valueChange.emit(!value())"
-      role="switch"
-      [attr.aria-checked]="value()"
-    ></button>
-  `, styles: ["\n    .ctl-toggle {\n      position: relative;\n      width: 34px;\n      height: 18px;\n      border-radius: 9px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      transition: all var(--dur-fast);\n      cursor: pointer;\n      flex-shrink: 0;\n      padding: 0;\n    }\n    .ctl-toggle::after {\n      content: '';\n      position: absolute;\n      left: 2px;\n      top: 2px;\n      width: 12px;\n      height: 12px;\n      border-radius: 50%;\n      background: var(--prism-text-muted);\n      transition: transform var(--dur-fast), background var(--dur-fast);\n    }\n    .ctl-toggle.on {\n      background: var(--prism-primary);\n      border-color: var(--prism-primary);\n    }\n    .ctl-toggle.on::after {\n      transform: translateX(16px);\n      background: white;\n    }\n  "] }]
+        args: [{ selector: 'prism-boolean-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    class=\"ctl-toggle\"\n    [class.on]=\"value()\"\n    (click)=\"valueChange.emit(!value())\"\n    role=\"switch\"\n    [attr.aria-checked]=\"value()\"></button>\n", styles: [".ctl-toggle {\n    position: relative;\n    flex-shrink: 0;\n    width: 34px;\n    height: 18px;\n    padding: 0;\n    cursor: pointer;\n    background: var(--prism-input-bg);\n    border: 1px solid var(--prism-border);\n    border-radius: 9px;\n    transition: all var(--dur-fast);\n}\n\n.ctl-toggle::after {\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 12px;\n    height: 12px;\n    content: '';\n    background: var(--prism-text-muted);\n    border-radius: 50%;\n    transition:\n        transform var(--dur-fast),\n        background var(--dur-fast);\n}\n\n.ctl-toggle.on {\n    background: var(--prism-primary);\n    border-color: var(--prism-primary);\n}\n\n.ctl-toggle.on::after {\n    background: white;\n    transform: translateX(16px);\n}\n"] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], typeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeName", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BooleanControlComponent, { className: "BooleanControlComponent", filePath: "app/controls/boolean-control.component.ts", lineNumber: 55 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BooleanControlComponent, { className: "BooleanControlComponent", filePath: "app/controls/boolean-control.component.ts", lineNumber: 10 }); })();

package/dist/app/controls/json-control.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"json-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/json-control.component.ts"],"names":[],"mappings":";AAWA,wBAAgB,aAAa,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,CAanD;AAED,wBAAgB,uBAAuB,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM,CAU5D;AAED,qBAuFa,oBAAoB;IAC/B,QAAQ,CAAC,KAAK,+CAAwB;IACtC,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,WAAW,oDAAqB;IAEzC,QAAQ,CAAC,UAAU,kDAAiB;IACpC,QAAQ,CAAC,SAAS,wDAA+B;IAEjD,OAAO,CAAC,QAAQ,CAAC,UAAU,CACgC;IAC3D,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAkD;IAExE,QAAQ,CAAC,WAAW,yCAIjB;IAEH,QAAQ,CAAC,eAAe,yCAAqD;IAE7E,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAW1B,UAAU,IAAI,IAAI;yCAhCP,oBAAoB;2CAApB,oBAAoB;CAwChC"}
+{"version":3,"file":"json-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/json-control.component.ts"],"names":[],"mappings":";AAEA,wBAAgB,aAAa,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,CAanD;AAED,wBAAgB,uBAAuB,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM,CAW5D;AAED,qBAOa,oBAAoB;IAC7B,QAAQ,CAAC,KAAK,+CAAwB;IACtC,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,WAAW,oDAAqB;IAEzC,QAAQ,CAAC,UAAU,kDAAiB;IACpC,QAAQ,CAAC,SAAS,wDAA+B;IAEjD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA4D;IACvF,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAkD;IAExE,QAAQ,CAAC,WAAW,yCAKjB;IAEH,QAAQ,CAAC,eAAe,yCAAqD;IAE7E,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAY1B,UAAU,IAAI,IAAI;yCAjCT,oBAAoB;2CAApB,oBAAoB;CA0ChC"}

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

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

package/dist/app/controls/number-control.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/number-control.component.ts"],"names":[],"mappings":";AAOA,qBAiCa,sBAAsB;IACjC,QAAQ,CAAC,KAAK,8CAAY;IAC1B,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,WAAW,mDAAoB;yCAJ7B,sBAAsB;2CAAtB,sBAAsB;CAKlC"}
+{"version":3,"file":"number-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/number-control.component.ts"],"names":[],"mappings":";AAEA,qBAOa,sBAAsB;IAC/B,QAAQ,CAAC,KAAK,8CAAY;IAC1B,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,WAAW,mDAAoB;yCAJ/B,sBAAsB;2CAAtB,sBAAsB;CAKlC"}

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

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, input, output, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
 import * as i0 from "@angular/core";
 export class NumberControlComponent {
     value = input(0, /* @ts-ignore */
@@ -15,17 +15,10 @@ export class NumberControlComponent {
             i0.ɵɵdomElementEnd();
         } if (rf & 2) {
             i0.ɵɵdomProperty("value", ctx.value());
-        } }, styles: [".ctl-number[_ngcontent-%COMP%] {\n      height: 30px;\n      padding: 0 10px;\n      background: var(--%NS%prism-input-bg);\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: var(--%NS%radius-sm);\n      color: var(--%NS%prism-text);\n      font-size: 13px;\n      font-family: var(--%NS%font-sans);\n      flex: 1;\n      min-width: 0;\n      outline: none;\n      transition: border-color var(--%NS%dur-fast), box-shadow var(--%NS%dur-fast);\n    }\n    .ctl-number[_ngcontent-%COMP%]:focus {\n      border-color: var(--%NS%prism-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--%NS%prism-primary) 30%, transparent);\n    }"] });
+        } }, styles: [".ctl-number[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    height: 30px;\n    padding: 0 10px;\n    font-family: var(--%NS%font-sans);\n    font-size: 13px;\n    color: var(--%NS%prism-text);\n    outline: none;\n    background: var(--%NS%prism-input-bg);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: var(--%NS%radius-sm);\n    transition:\n        border-color var(--%NS%dur-fast),\n        box-shadow var(--%NS%dur-fast);\n}\n\n.ctl-number[_ngcontent-%COMP%]:focus {\n    border-color: var(--%NS%prism-primary);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--%NS%prism-primary) 30%, transparent);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NumberControlComponent, [{
         type: Component,
-        args: [{ selector: 'prism-number-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <input
-      type="number"
-      class="ctl-number"
-      [value]="value()"
-      (input)="valueChange.emit($any($event.target).valueAsNumber || 0)"
-    />
-  `, styles: ["\n    .ctl-number {\n      height: 30px;\n      padding: 0 10px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-sm);\n      color: var(--prism-text);\n      font-size: 13px;\n      font-family: var(--font-sans);\n      flex: 1;\n      min-width: 0;\n      outline: none;\n      transition: border-color var(--dur-fast), box-shadow var(--dur-fast);\n    }\n    .ctl-number:focus {\n      border-color: var(--prism-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n    }\n  "] }]
+        args: [{ selector: 'prism-number-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n    type=\"number\"\n    class=\"ctl-number\"\n    [value]=\"value()\"\n    (input)=\"valueChange.emit($any($event.target).valueAsNumber || 0)\" />\n", styles: [".ctl-number {\n    flex: 1;\n    min-width: 0;\n    height: 30px;\n    padding: 0 10px;\n    font-family: var(--font-sans);\n    font-size: 13px;\n    color: var(--prism-text);\n    outline: none;\n    background: var(--prism-input-bg);\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-sm);\n    transition:\n        border-color var(--dur-fast),\n        box-shadow var(--dur-fast);\n}\n\n.ctl-number:focus {\n    border-color: var(--prism-primary);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n}\n"] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], typeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeName", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NumberControlComponent, { className: "NumberControlComponent", filePath: "app/controls/number-control.component.ts", lineNumber: 41 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NumberControlComponent, { className: "NumberControlComponent", filePath: "app/controls/number-control.component.ts", lineNumber: 10 }); })();

package/dist/app/controls/string-control.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"string-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/string-control.component.ts"],"names":[],"mappings":";AAOA,qBAiCa,sBAAsB;IACjC,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,WAAW,mDAAoB;yCAJ7B,sBAAsB;2CAAtB,sBAAsB;CAKlC"}
+{"version":3,"file":"string-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/string-control.component.ts"],"names":[],"mappings":";AAEA,qBAOa,sBAAsB;IAC/B,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,WAAW,mDAAoB;yCAJ/B,sBAAsB;2CAAtB,sBAAsB;CAKlC"}

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

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, input, output, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
 import * as i0 from "@angular/core";
 export class StringControlComponent {
     value = input('', /* @ts-ignore */
@@ -15,17 +15,10 @@ export class StringControlComponent {
             i0.ɵɵdomElementEnd();
         } if (rf & 2) {
             i0.ɵɵdomProperty("value", ctx.value());
-        } }, styles: [".ctl-text[_ngcontent-%COMP%] {\n      height: 30px;\n      padding: 0 10px;\n      background: var(--%NS%prism-input-bg);\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: var(--%NS%radius-sm);\n      color: var(--%NS%prism-text);\n      font-size: 13px;\n      font-family: var(--%NS%font-sans);\n      flex: 1;\n      min-width: 0;\n      outline: none;\n      transition: border-color var(--%NS%dur-fast), box-shadow var(--%NS%dur-fast);\n    }\n    .ctl-text[_ngcontent-%COMP%]:focus {\n      border-color: var(--%NS%prism-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--%NS%prism-primary) 30%, transparent);\n    }"] });
+        } }, styles: [".ctl-text[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    height: 30px;\n    padding: 0 10px;\n    font-family: var(--%NS%font-sans);\n    font-size: 13px;\n    color: var(--%NS%prism-text);\n    outline: none;\n    background: var(--%NS%prism-input-bg);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: var(--%NS%radius-sm);\n    transition:\n        border-color var(--%NS%dur-fast),\n        box-shadow var(--%NS%dur-fast);\n}\n\n.ctl-text[_ngcontent-%COMP%]:focus {\n    border-color: var(--%NS%prism-primary);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--%NS%prism-primary) 30%, transparent);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StringControlComponent, [{
         type: Component,
-        args: [{ selector: 'prism-string-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <input
-      type="text"
-      class="ctl-text"
-      [value]="value()"
-      (input)="valueChange.emit($any($event.target).value)"
-    />
-  `, styles: ["\n    .ctl-text {\n      height: 30px;\n      padding: 0 10px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-sm);\n      color: var(--prism-text);\n      font-size: 13px;\n      font-family: var(--font-sans);\n      flex: 1;\n      min-width: 0;\n      outline: none;\n      transition: border-color var(--dur-fast), box-shadow var(--dur-fast);\n    }\n    .ctl-text:focus {\n      border-color: var(--prism-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n    }\n  "] }]
+        args: [{ selector: 'prism-string-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n    type=\"text\"\n    class=\"ctl-text\"\n    [value]=\"value()\"\n    (input)=\"valueChange.emit($any($event.target).value)\" />\n", styles: [".ctl-text {\n    flex: 1;\n    min-width: 0;\n    height: 30px;\n    padding: 0 10px;\n    font-family: var(--font-sans);\n    font-size: 13px;\n    color: var(--prism-text);\n    outline: none;\n    background: var(--prism-input-bg);\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-sm);\n    transition:\n        border-color var(--dur-fast),\n        box-shadow var(--dur-fast);\n}\n\n.ctl-text:focus {\n    border-color: var(--prism-primary);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n}\n"] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], typeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeName", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(StringControlComponent, { className: "StringControlComponent", filePath: "app/controls/string-control.component.ts", lineNumber: 41 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(StringControlComponent, { className: "StringControlComponent", filePath: "app/controls/string-control.component.ts", lineNumber: 10 }); })();

package/dist/app/controls/union-control.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"union-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/union-control.component.ts"],"names":[],"mappings":";AAOA,qBAgDa,qBAAqB;IAChC,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,OAAO,gDAAuB;IACvC,QAAQ,CAAC,WAAW,mDAAoB;yCAL7B,qBAAqB;2CAArB,qBAAqB;CAMjC"}
+{"version":3,"file":"union-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/union-control.component.ts"],"names":[],"mappings":";AAEA,qBAOa,qBAAqB;IAC9B,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,OAAO,gDAAuB;IACvC,QAAQ,CAAC,WAAW,mDAAoB;yCAL/B,qBAAqB;2CAArB,qBAAqB;CAMjC"}