@ng-prism/core 21.10.3 → 21.11.0

package/dist/app/canvas/prism-canvas-bg-pill.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-canvas-bg-pill.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-bg-pill.component.ts"],"names":[],"mappings":";AAGA,qBAkEa,0BAA0B;IACrC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAiC;IAE3D,SAAS,CAAC,QAAQ,CAAC,WAAW,gGAA8B;IAC5D,SAAS,CAAC,QAAQ,CAAC,OAAO,0CAA8B;IAExD,SAAS,CAAC,KAAK,IAAI,IAAI;yCANZ,0BAA0B;2CAA1B,0BAA0B;CAStC"}
+{"version":3,"file":"prism-canvas-bg-pill.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-bg-pill.component.ts"],"names":[],"mappings":";AAGA,qBAmEa,0BAA0B;IACrC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAiC;IAE3D,SAAS,CAAC,QAAQ,CAAC,WAAW,gGAA8B;IAC5D,SAAS,CAAC,QAAQ,CAAC,OAAO,0CAA8B;IAExD,SAAS,CAAC,KAAK,IAAI,IAAI;yCANZ,0BAA0B;2CAA1B,0BAA0B;CAStC"}

package/dist/app/canvas/prism-canvas-bg-pill.component.js

@@ -27,7 +27,7 @@ export class PrismCanvasBgPillComponent {
             i0.ɵɵconditionalCreate(0, PrismCanvasBgPillComponent_Conditional_0_Template, 5, 1, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.visible() ? 0 : -1);
-        } }, styles: ["[_nghost-%COMP%] {\n      position: absolute;\n      top: 12px;\n      right: 20px;\n      pointer-events: none;\n      z-index: 2;\n    }\n    .prism-bg-pill[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 4px 4px 4px 10px;\n      border-radius: 999px;\n      font-size: var(--fs-xs);\n      font-family: var(--font-sans);\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n      pointer-events: auto;\n      animation: _ngcontent-%COMP%_fadeIn var(--dur-base) ease-out;\n    }\n    .label[_ngcontent-%COMP%] { letter-spacing: 0.02em; }\n    .reset[_ngcontent-%COMP%] {\n      height: 22px;\n      padding: 0 10px;\n      border-radius: 999px;\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      color: var(--prism-text);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 25%, transparent);\n      font-family: inherit;\n      font-size: inherit;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background var(--dur-fast);\n    }\n    .reset[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    @keyframes _ngcontent-%COMP%_fadeIn {\n      from { opacity: 0; transform: translateY(-4px); }\n      to { opacity: 1; transform: translateY(0); }\n    }"], changeDetection: 0 });
+        } }, styles: ["[_nghost-%COMP%] {\n      position: absolute;\n      top: var(--prism-canvas-overlay-top, 12px);\n      right: var(--prism-canvas-overlay-inline, 20px);\n      pointer-events: none;\n      z-index: 2;\n      transition: top var(--dur-base), right var(--dur-base);\n    }\n    .prism-bg-pill[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 4px 4px 4px 10px;\n      border-radius: 999px;\n      font-size: var(--fs-xs);\n      font-family: var(--font-sans);\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n      pointer-events: auto;\n      animation: _ngcontent-%COMP%_fadeIn var(--dur-base) ease-out;\n    }\n    .label[_ngcontent-%COMP%] { letter-spacing: 0.02em; }\n    .reset[_ngcontent-%COMP%] {\n      height: 22px;\n      padding: 0 10px;\n      border-radius: 999px;\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      color: var(--prism-text);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 25%, transparent);\n      font-family: inherit;\n      font-size: inherit;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background var(--dur-fast);\n    }\n    .reset[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    @keyframes _ngcontent-%COMP%_fadeIn {\n      from { opacity: 0; transform: translateY(-4px); }\n      to { opacity: 1; transform: translateY(0); }\n    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismCanvasBgPillComponent, [{
         type: Component,
@@ -46,6 +46,6 @@ export class PrismCanvasBgPillComponent {
       </button>
     </div>
     }
-  `, styles: ["\n    :host {\n      position: absolute;\n      top: 12px;\n      right: 20px;\n      pointer-events: none;\n      z-index: 2;\n    }\n    .prism-bg-pill {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 4px 4px 4px 10px;\n      border-radius: 999px;\n      font-size: var(--fs-xs);\n      font-family: var(--font-sans);\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n      pointer-events: auto;\n      animation: fadeIn var(--dur-base) ease-out;\n    }\n    .label { letter-spacing: 0.02em; }\n    .reset {\n      height: 22px;\n      padding: 0 10px;\n      border-radius: 999px;\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      color: var(--prism-text);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 25%, transparent);\n      font-family: inherit;\n      font-size: inherit;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background var(--dur-fast);\n    }\n    .reset:hover {\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    @keyframes fadeIn {\n      from { opacity: 0; transform: translateY(-4px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n  "] }]
+  `, styles: ["\n    :host {\n      position: absolute;\n      top: var(--prism-canvas-overlay-top, 12px);\n      right: var(--prism-canvas-overlay-inline, 20px);\n      pointer-events: none;\n      z-index: 2;\n      transition: top var(--dur-base), right var(--dur-base);\n    }\n    .prism-bg-pill {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 4px 4px 4px 10px;\n      border-radius: 999px;\n      font-size: var(--fs-xs);\n      font-family: var(--font-sans);\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n      pointer-events: auto;\n      animation: fadeIn var(--dur-base) ease-out;\n    }\n    .label { letter-spacing: 0.02em; }\n    .reset {\n      height: 22px;\n      padding: 0 10px;\n      border-radius: 999px;\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      color: var(--prism-text);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 25%, transparent);\n      font-family: inherit;\n      font-size: inherit;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background var(--dur-fast);\n    }\n    .reset:hover {\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    @keyframes fadeIn {\n      from { opacity: 0; transform: translateY(-4px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n  "] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasBgPillComponent, { className: "PrismCanvasBgPillComponent", filePath: "app/canvas/prism-canvas-bg-pill.component.ts", lineNumber: 70 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasBgPillComponent, { className: "PrismCanvasBgPillComponent", filePath: "app/canvas/prism-canvas-bg-pill.component.ts", lineNumber: 71 }); })();

package/dist/app/canvas/prism-canvas-rulers.component.d.ts

@@ -2,6 +2,7 @@ import { PrismCanvasService } from '../services/prism-canvas.service.js';
 import * as i0 from "@angular/core";
 export declare class PrismCanvasRulersComponent {
     protected readonly canvas: PrismCanvasService;
+    private readonly themeService;
     private readonly rulerTop;
     private readonly rulerLeft;
     private ro;

package/dist/app/canvas/prism-canvas-rulers.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-canvas-rulers.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-rulers.component.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAIzE,qBAkDa,0BAA0B;IACrC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IAEvD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAC8B;IACvD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAC8B;IAExD,OAAO,CAAC,EAAE,CAA+B;;IAoBzC,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,MAAM;IA4Dd,OAAO,CAAC,MAAM;yCArGH,0BAA0B;2CAA1B,0BAA0B;CAoKtC"}
+{"version":3,"file":"prism-canvas-rulers.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-rulers.component.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAKzE,qBAkDa,0BAA0B;IACrC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAE1D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAC8B;IACvD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAC8B;IAExD,OAAO,CAAC,EAAE,CAA+B;;IAqBzC,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,MAAM;IA4Dd,OAAO,CAAC,MAAM;yCAvGH,0BAA0B;2CAA1B,0BAA0B;CAsKtC"}

package/dist/app/canvas/prism-canvas-rulers.component.js

@@ -1,5 +1,6 @@
 import { Component, ChangeDetectionStrategy, effect, inject, viewChild, } from '@angular/core';
 import { PrismCanvasService } from '../services/prism-canvas.service.js';
+import { PrismThemeService } from '../services/prism-theme.service.js';
 import * as i0 from "@angular/core";
 const _c0 = ["rulerTop"];
 const _c1 = ["rulerLeft"];
@@ -11,6 +12,7 @@ function PrismCanvasRulersComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
 const R = 20;
 export class PrismCanvasRulersComponent {
     canvas = inject(PrismCanvasService);
+    themeService = inject(PrismThemeService);
     rulerTop = viewChild('rulerTop', ...(ngDevMode ? [{ debugName: "rulerTop" }] : []));
     rulerLeft = viewChild('rulerLeft', ...(ngDevMode ? [{ debugName: "rulerLeft" }] : []));
     ro = null;
@@ -18,6 +20,7 @@ export class PrismCanvasRulersComponent {
         effect(() => {
             const show = this.canvas.rulers();
             const zoom = this.canvas.zoom();
+            this.themeService.theme();
             if (!show) {
                 this.ro?.disconnect();
                 this.ro = null;
@@ -167,7 +170,7 @@ export class PrismCanvasRulersComponent {
     }
   `, styles: ["\n    :host { display: contents; }\n\n    .ruler-wrap {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      z-index: 4;\n      overflow: hidden;\n    }\n\n    .ruler { position: absolute; }\n    .ruler--top {\n      top: 0;\n      left: 20px;\n      right: 0;\n      height: 20px;\n    }\n    .ruler--left {\n      top: 20px;\n      left: 0;\n      bottom: 0;\n      width: 20px;\n    }\n    .ruler-corner {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 20px;\n      height: 20px;\n      background: var(--prism-bg);\n      border-right: 1px solid var(--prism-border);\n      border-bottom: 1px solid var(--prism-border);\n      z-index: 1;\n    }\n  "] }]
     }], () => [], { rulerTop: [{ type: i0.ViewChild, args: ['rulerTop', { isSignal: true }] }], rulerLeft: [{ type: i0.ViewChild, args: ['rulerLeft', { isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasRulersComponent, { className: "PrismCanvasRulersComponent", filePath: "app/canvas/prism-canvas-rulers.component.ts", lineNumber: 63 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasRulersComponent, { className: "PrismCanvasRulersComponent", filePath: "app/canvas/prism-canvas-rulers.component.ts", lineNumber: 64 }); })();
 function stepFor(zoom) {
     if (zoom >= 2)
         return 10;

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

@@ -1,10 +1,17 @@
+import type { ComponentStatus } from '../../decorator/showcase.types.js';
 import * as i0 from "@angular/core";
+interface StatusBadge {
+    label: string;
+    tooltip: string;
+}
 export declare class PrismComponentHeadComponent {
     private readonly navigationService;
     private readonly auditService;
     protected readonly comp: import("@angular/core").Signal<import("../../index.js").RuntimeComponent | null>;
     protected readonly category: import("@angular/core").Signal<string>;
     protected readonly variantCount: import("@angular/core").Signal<number>;
+    protected readonly status: import("@angular/core").Signal<ComponentStatus | undefined>;
+    protected readonly statusBadge: import("@angular/core").Signal<StatusBadge | null>;
     protected readonly coveragePercent: import("@angular/core").Signal<number | null>;
     protected readonly bundleSize: import("@angular/core").Signal<string | null>;
     protected readonly a11yScore: import("@angular/core").Signal<number | null>;
@@ -12,4 +19,5 @@ export declare class PrismComponentHeadComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismComponentHeadComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PrismComponentHeadComponent, "prism-component-head", never, {}, {}, never, never, true, never>;
 }
+export {};
 //# sourceMappingURL=prism-component-head.component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"prism-component-head.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-component-head.component.ts"],"names":[],"mappings":";AAWA,qBAoJa,2BAA2B;IACtC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IAEzD,SAAS,CAAC,QAAQ,CAAC,IAAI,mFAErB;IAEF,SAAS,CAAC,QAAQ,CAAC,QAAQ,yCAGxB;IAEH,SAAS,CAAC,QAAQ,CAAC,YAAY,yCAG5B;IAEH,SAAS,CAAC,QAAQ,CAAC,eAAe,gDAM/B;IAEH,SAAS,CAAC,QAAQ,CAAC,UAAU,gDAS1B;IAEH,SAAS,CAAC,QAAQ,CAAC,SAAS,gDAEzB;IAEH,OAAO,CAAC,QAAQ,CAAC,aAAa,CAM3B;yCA/CQ,2BAA2B;2CAA3B,2BAA2B;CAgDvC"}
+{"version":3,"file":"prism-component-head.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-component-head.component.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;;AAEzE,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAqBD,qBAsNa,2BAA2B;IACtC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IAEzD,SAAS,CAAC,QAAQ,CAAC,IAAI,mFAErB;IAEF,SAAS,CAAC,QAAQ,CAAC,QAAQ,yCAGxB;IAEH,SAAS,CAAC,QAAQ,CAAC,YAAY,yCAG5B;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,8DAEvB;IAEF,SAAS,CAAC,QAAQ,CAAC,WAAW,qDAG3B;IAEH,SAAS,CAAC,QAAQ,CAAC,eAAe,gDAM/B;IAEH,SAAS,CAAC,QAAQ,CAAC,UAAU,gDAS1B;IAEH,SAAS,CAAC,QAAQ,CAAC,SAAS,gDAEzB;IAEH,OAAO,CAAC,QAAQ,CAAC,aAAa,CAM3B;yCAxDQ,2BAA2B;2CAA3B,2BAA2B;CAyDvC"}

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

@@ -4,56 +4,83 @@ import { PrismNavigationService } from '../services/prism-navigation.service.js'
 import { A11yAuditService } from '../panels/a11y/a11y-audit.service.js';
 import { PrismStatComponent } from './prism-stat.component.js';
 import * as i0 from "@angular/core";
+function PrismComponentHeadComponent_Conditional_0_Conditional_13_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-icon", 14);
+} if (rf & 2) {
+    i0.ɵɵproperty("size", 13);
+} }
+function PrismComponentHeadComponent_Conditional_0_Conditional_13_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 15);
+} }
+function PrismComponentHeadComponent_Conditional_0_Conditional_13_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 16);
+} }
 function PrismComponentHeadComponent_Conditional_0_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 6);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵconditionalCreate(1, PrismComponentHeadComponent_Conditional_0_Conditional_13_Conditional_1_Template, 1, 1, "prism-icon", 14)(2, PrismComponentHeadComponent_Conditional_0_Conditional_13_Conditional_2_Template, 1, 0, "span", 15)(3, PrismComponentHeadComponent_Conditional_0_Conditional_13_Conditional_3_Template, 1, 0, "span", 16);
+    i0.ɵɵelementStart(4, "span", 17);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const c_r1 = i0.ɵɵnextContext();
+    const s_r1 = ctx;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMap(i0.ɵɵinterpolate1("comp-status comp-status--", s_r1));
+    i0.ɵɵattribute("title", ctx_r1.statusBadge().tooltip);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(c_r1.meta.showcaseConfig.description);
+    i0.ɵɵconditional(s_r1 === "stable" ? 1 : s_r1 === "wip" ? 2 : 3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.statusBadge().label);
 } }
-function PrismComponentHeadComponent_Conditional_0_Conditional_14_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 13);
+function PrismComponentHeadComponent_Conditional_0_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 7);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const tag_r2 = ctx.$implicit;
+    const c_r3 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(tag_r2);
+    i0.ɵɵtextInterpolate(c_r3.meta.showcaseConfig.description);
 } }
-function PrismComponentHeadComponent_Conditional_0_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 7);
-    i0.ɵɵrepeaterCreate(1, PrismComponentHeadComponent_Conditional_0_Conditional_14_For_2_Template, 2, 1, "span", 13, i0.ɵɵrepeaterTrackByIdentity);
+function PrismComponentHeadComponent_Conditional_0_Conditional_15_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 18);
+    i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const c_r1 = i0.ɵɵnextContext();
+    const tag_r4 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(c_r1.meta.showcaseConfig.tags);
+    i0.ɵɵtextInterpolate(tag_r4);
 } }
-function PrismComponentHeadComponent_Conditional_0_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-stat", 9);
+function PrismComponentHeadComponent_Conditional_0_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵrepeaterCreate(1, PrismComponentHeadComponent_Conditional_0_Conditional_15_For_2_Template, 2, 1, "span", 18, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r2.variantCount());
+    const c_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(c_r3.meta.showcaseConfig.tags);
 } }
 function PrismComponentHeadComponent_Conditional_0_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "prism-stat", 10);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r2.coveragePercent() + "%")("pill", ctx_r2.coveragePercent() >= 90 ? "OK" : "WARN")("pillVariant", ctx_r2.coveragePercent() >= 90 ? "ok" : "warn");
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("value", ctx_r1.variantCount());
 } }
 function PrismComponentHeadComponent_Conditional_0_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "prism-stat", 11);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r2.bundleSize());
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("value", ctx_r1.coveragePercent() + "%")("pill", ctx_r1.coveragePercent() >= 90 ? "OK" : "WARN")("pillVariant", ctx_r1.coveragePercent() >= 90 ? "ok" : "warn");
 } }
 function PrismComponentHeadComponent_Conditional_0_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "prism-stat", 12);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r2.a11yScore())("pillVariant", ctx_r2.a11yScore() >= 90 ? "ok" : "warn");
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("value", ctx_r1.bundleSize());
+} }
+function PrismComponentHeadComponent_Conditional_0_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-stat", 13);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("value", ctx_r1.a11yScore())("pillVariant", ctx_r1.a11yScore() >= 90 ? "ok" : "warn");
 } }
 function PrismComponentHeadComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "section", 0)(1, "div", 1)(2, "div")(3, "div", 2)(4, "span");
@@ -67,42 +94,65 @@ function PrismComponentHeadComponent_Conditional_0_Template(rf, ctx) { if (rf &
     i0.ɵɵtext(10);
     i0.ɵɵelementStart(11, "span", 5);
     i0.ɵɵtext(12);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(13, PrismComponentHeadComponent_Conditional_0_Conditional_13_Template, 2, 1, "p", 6);
-    i0.ɵɵconditionalCreate(14, PrismComponentHeadComponent_Conditional_0_Conditional_14_Template, 3, 0, "div", 7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "div", 8);
-    i0.ɵɵconditionalCreate(16, PrismComponentHeadComponent_Conditional_0_Conditional_16_Template, 1, 1, "prism-stat", 9);
-    i0.ɵɵconditionalCreate(17, PrismComponentHeadComponent_Conditional_0_Conditional_17_Template, 1, 3, "prism-stat", 10);
-    i0.ɵɵconditionalCreate(18, PrismComponentHeadComponent_Conditional_0_Conditional_18_Template, 1, 1, "prism-stat", 11);
-    i0.ɵɵconditionalCreate(19, PrismComponentHeadComponent_Conditional_0_Conditional_19_Template, 1, 2, "prism-stat", 12);
+    i0.ɵɵconditionalCreate(13, PrismComponentHeadComponent_Conditional_0_Conditional_13_Template, 6, 6, "span", 6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(14, PrismComponentHeadComponent_Conditional_0_Conditional_14_Template, 2, 1, "p", 7);
+    i0.ɵɵconditionalCreate(15, PrismComponentHeadComponent_Conditional_0_Conditional_15_Template, 3, 0, "div", 8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "div", 9);
+    i0.ɵɵconditionalCreate(17, PrismComponentHeadComponent_Conditional_0_Conditional_17_Template, 1, 1, "prism-stat", 10);
+    i0.ɵɵconditionalCreate(18, PrismComponentHeadComponent_Conditional_0_Conditional_18_Template, 1, 3, "prism-stat", 11);
+    i0.ɵɵconditionalCreate(19, PrismComponentHeadComponent_Conditional_0_Conditional_19_Template, 1, 1, "prism-stat", 12);
+    i0.ɵɵconditionalCreate(20, PrismComponentHeadComponent_Conditional_0_Conditional_20_Template, 1, 2, "prism-stat", 13);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const c_r1 = ctx;
-    const ctx_r2 = i0.ɵɵnextContext();
+    let tmp_7_0;
+    const c_r3 = ctx;
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r2.category());
+    i0.ɵɵtextInterpolate(ctx_r1.category());
     i0.ɵɵadvance();
     i0.ɵɵproperty("size", 10);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(c_r1.meta.showcaseConfig.title);
+    i0.ɵɵtextInterpolate(c_r3.meta.showcaseConfig.title);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", c_r1.meta.showcaseConfig.title, " ");
+    i0.ɵɵtextInterpolate1(" ", c_r3.meta.showcaseConfig.title, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("<", c_r1.meta.componentMeta.selector, ">");
+    i0.ɵɵtextInterpolate1("<", c_r3.meta.componentMeta.selector, ">");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_7_0 = ctx_r1.status()) ? 13 : -1, tmp_7_0);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(c_r1.meta.showcaseConfig.description ? 13 : -1);
+    i0.ɵɵconditional(c_r3.meta.showcaseConfig.description ? 14 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((c_r1.meta.showcaseConfig.tags == null ? null : c_r1.meta.showcaseConfig.tags.length) ? 14 : -1);
+    i0.ɵɵconditional((c_r3.meta.showcaseConfig.tags == null ? null : c_r3.meta.showcaseConfig.tags.length) ? 15 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.variantCount() > 0 ? 16 : -1);
+    i0.ɵɵconditional(ctx_r1.variantCount() > 0 ? 17 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.coveragePercent() !== null ? 17 : -1);
+    i0.ɵɵconditional(ctx_r1.coveragePercent() !== null ? 18 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.bundleSize() !== null ? 18 : -1);
+    i0.ɵɵconditional(ctx_r1.bundleSize() !== null ? 19 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.a11yScore() !== null ? 19 : -1);
+    i0.ɵɵconditional(ctx_r1.a11yScore() !== null ? 20 : -1);
 } }
+const STATUS_BADGES = {
+    stable: {
+        label: 'Stable',
+        tooltip: 'Migrated and production-ready',
+    },
+    beta: {
+        label: 'Beta',
+        tooltip: 'Beta — API may change',
+    },
+    wip: {
+        label: 'Work in progress',
+        tooltip: 'Migration in progress',
+    },
+    deprecated: {
+        label: 'Deprecated',
+        tooltip: 'Deprecated / Legacy — do not use in new code',
+    },
+};
 export class PrismComponentHeadComponent {
     navigationService = inject(PrismNavigationService);
     auditService = inject(A11yAuditService);
@@ -115,6 +165,11 @@ export class PrismComponentHeadComponent {
         const c = this.comp();
         return c?.meta.showcaseConfig.variants?.length ?? 0;
     }, ...(ngDevMode ? [{ debugName: "variantCount" }] : []));
+    status = computed(() => this.comp()?.meta.showcaseConfig.status, ...(ngDevMode ? [{ debugName: "status" }] : []));
+    statusBadge = computed(() => {
+        const s = this.status();
+        return s ? STATUS_BADGES[s] : null;
+    }, ...(ngDevMode ? [{ debugName: "statusBadge" }] : []));
     coveragePercent = computed(() => {
         const meta = this.componentMeta();
         const coverage = meta?.['coverage'];
@@ -143,12 +198,12 @@ export class PrismComponentHeadComponent {
             : null;
     }, ...(ngDevMode ? [{ debugName: "componentMeta" }] : []));
     static ɵfac = function PrismComponentHeadComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismComponentHeadComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismComponentHeadComponent, selectors: [["prism-component-head"]], decls: 1, vars: 1, consts: [[1, "comp-head"], [1, "comp-head-top"], [1, "comp-crumb"], ["name", "chevron-right", 3, "size"], [1, "comp-title"], [1, "comp-selector"], [1, "comp-desc"], [1, "comp-tags"], [1, "comp-head-stats"], ["label", "Variants", 3, "value"], ["label", "Coverage", 3, "value", "pill", "pillVariant"], ["label", "Bundle", 3, "value"], ["label", "Score", "pill", "A11y", 3, "value", "pillVariant"], [1, "comp-tag"]], template: function PrismComponentHeadComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, PrismComponentHeadComponent_Conditional_0_Template, 20, 11, "section", 0);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismComponentHeadComponent, selectors: [["prism-component-head"]], decls: 1, vars: 1, consts: [[1, "comp-head"], [1, "comp-head-top"], [1, "comp-crumb"], ["name", "chevron-right", 3, "size"], [1, "comp-title"], [1, "comp-selector"], [3, "class"], [1, "comp-desc"], [1, "comp-tags"], [1, "comp-head-stats"], ["label", "Variants", 3, "value"], ["label", "Coverage", 3, "value", "pill", "pillVariant"], ["label", "Bundle", 3, "value"], ["label", "Score", "pill", "A11y", 3, "value", "pillVariant"], ["name", "check", 3, "size"], ["aria-hidden", "true", 1, "comp-status-ring"], ["aria-hidden", "true", 1, "comp-status-dot"], [1, "comp-status-label"], [1, "comp-tag"]], template: function PrismComponentHeadComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, PrismComponentHeadComponent_Conditional_0_Template, 21, 12, "section", 0);
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.comp()) ? 0 : -1, tmp_0_0);
-        } }, dependencies: [PrismIconComponent, PrismStatComponent], styles: ["[_nghost-%COMP%] { display: block; flex-shrink: 0; }\n\n    .comp-head[_ngcontent-%COMP%] {\n      padding: 12px 28px;\n      background: var(--prism-bg);\n      border-bottom: 1px solid var(--prism-border);\n      position: relative;\n    }\n    .comp-head[_ngcontent-%COMP%]::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      width: 6px;\n      background: linear-gradient(180deg, var(--prism-primary-from) 0%, var(--prism-accent) 50%, var(--prism-primary-to) 100%);\n    }\n\n    .comp-head-top[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 16px;\n    }\n\n    .comp-crumb[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: var(--fs-sm);\n      color: var(--prism-text-ghost);\n      margin-bottom: 6px;\n      font-weight: 500;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n    }\n    .comp-crumb[_ngcontent-%COMP%]   prism-icon[_ngcontent-%COMP%] { opacity: 0.6; }\n\n    .comp-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: var(--fs-2xl);\n      font-weight: 700;\n      letter-spacing: -0.02em;\n      color: var(--prism-text);\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n\n    .comp-selector[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 12px;\n      color: var(--prism-primary);\n      padding: 3px 8px;\n      border-radius: var(--radius-sm);\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n      font-weight: 500;\n    }\n\n    .comp-desc[_ngcontent-%COMP%] {\n      margin: 6px 0 0;\n      font-size: var(--fs-lg);\n      color: var(--prism-text-2);\n      max-width: 72ch;\n      line-height: 1.55;\n    }\n\n    .comp-tags[_ngcontent-%COMP%] {\n      margin-top: 10px;\n      display: flex;\n      gap: 6px;\n      flex-wrap: wrap;\n    }\n    .comp-tag[_ngcontent-%COMP%] {\n      padding: 2px 8px;\n      font-size: 11px;\n      font-weight: 500;\n      border-radius: var(--radius-xs);\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      color: var(--prism-primary);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n\n    .comp-head-stats[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 18px;\n      flex-shrink: 0;\n    }"], changeDetection: 0 });
+        } }, dependencies: [PrismIconComponent, PrismStatComponent], styles: ["[_nghost-%COMP%] { display: block; flex-shrink: 0; }\n\n    .comp-head[_ngcontent-%COMP%] {\n      padding: 12px 28px;\n      background: var(--prism-bg);\n      border-bottom: 1px solid var(--prism-border);\n      position: relative;\n    }\n    .comp-head[_ngcontent-%COMP%]::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      width: 6px;\n      background: linear-gradient(180deg, var(--prism-primary-from) 0%, var(--prism-accent) 50%, var(--prism-primary-to) 100%);\n    }\n\n    .comp-head-top[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 16px;\n    }\n\n    .comp-crumb[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: var(--fs-sm);\n      color: var(--prism-text-ghost);\n      margin-bottom: 6px;\n      font-weight: 500;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n    }\n    .comp-crumb[_ngcontent-%COMP%]   prism-icon[_ngcontent-%COMP%] { opacity: 0.6; }\n\n    .comp-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: var(--fs-2xl);\n      font-weight: 700;\n      letter-spacing: -0.02em;\n      color: var(--prism-text);\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n\n    .comp-selector[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 12px;\n      color: var(--prism-primary);\n      padding: 3px 8px;\n      border-radius: var(--radius-sm);\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n      font-weight: 500;\n    }\n\n    .comp-status[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      height: 24px;\n      padding: 0 10px 0 8px;\n      border-radius: 5px;\n      font-size: 11.5px;\n      font-weight: 600;\n      letter-spacing: 0.02em;\n      border: 1px solid;\n      background: transparent;\n    }\n    .comp-status-label[_ngcontent-%COMP%] { line-height: 1; }\n    .comp-status-dot[_ngcontent-%COMP%] {\n      width: 7px;\n      height: 7px;\n      border-radius: 50%;\n      background: currentColor;\n    }\n    .comp-status-ring[_ngcontent-%COMP%] {\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      border: 1.5px solid currentColor;\n      background: transparent;\n      box-sizing: border-box;\n    }\n    .comp-status[_ngcontent-%COMP%]   prism-icon[_ngcontent-%COMP%] { display: inline-flex; }\n\n    .comp-status--stable[_ngcontent-%COMP%] {\n      color: var(--prism-success);\n      background: color-mix(in srgb, var(--prism-success) 10%, transparent);\n      border-color: color-mix(in srgb, var(--prism-success) 35%, transparent);\n    }\n    .comp-status--beta[_ngcontent-%COMP%] {\n      color: #60a5fa;\n      background: color-mix(in srgb, #60a5fa 10%, transparent);\n      border-color: color-mix(in srgb, #60a5fa 35%, transparent);\n    }\n    .comp-status--wip[_ngcontent-%COMP%] {\n      color: var(--prism-warn);\n      background: color-mix(in srgb, var(--prism-warn) 10%, transparent);\n      border-color: color-mix(in srgb, var(--prism-warn) 35%, transparent);\n    }\n    .comp-status--deprecated[_ngcontent-%COMP%] {\n      color: var(--prism-text-muted);\n      background: var(--prism-input-bg);\n      border-color: var(--prism-border-strong);\n    }\n\n    .comp-desc[_ngcontent-%COMP%] {\n      margin: 6px 0 0;\n      font-size: var(--fs-lg);\n      color: var(--prism-text-2);\n      max-width: 72ch;\n      line-height: 1.55;\n    }\n\n    .comp-tags[_ngcontent-%COMP%] {\n      margin-top: 10px;\n      display: flex;\n      gap: 6px;\n      flex-wrap: wrap;\n    }\n    .comp-tag[_ngcontent-%COMP%] {\n      padding: 2px 8px;\n      font-size: 11px;\n      font-weight: 500;\n      border-radius: var(--radius-xs);\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      color: var(--prism-primary);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n\n    .comp-head-stats[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 18px;\n      flex-shrink: 0;\n    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismComponentHeadComponent, [{
         type: Component,
@@ -167,6 +222,21 @@ export class PrismComponentHeadComponent {
             <span class="comp-selector"
               >&lt;{{ c.meta.componentMeta.selector }}&gt;</span
             >
+            @if (status(); as s) {
+            <span
+              class="comp-status comp-status--{{ s }}"
+              [attr.title]="statusBadge()!.tooltip"
+            >
+              @if (s === 'stable') {
+              <prism-icon name="check" [size]="13" />
+              } @else if (s === 'wip') {
+              <span class="comp-status-ring" aria-hidden="true"></span>
+              } @else {
+              <span class="comp-status-dot" aria-hidden="true"></span>
+              }
+              <span class="comp-status-label">{{ statusBadge()!.label }}</span>
+            </span>
+            }
           </h1>
           @if (c.meta.showcaseConfig.description) {
           <p class="comp-desc">{{ c.meta.showcaseConfig.description }}</p>
@@ -202,6 +272,6 @@ export class PrismComponentHeadComponent {
       </div>
     </section>
     }
-  `, styles: ["\n    :host { display: block; flex-shrink: 0; }\n\n    .comp-head {\n      padding: 12px 28px;\n      background: var(--prism-bg);\n      border-bottom: 1px solid var(--prism-border);\n      position: relative;\n    }\n    .comp-head::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      width: 6px;\n      background: linear-gradient(180deg, var(--prism-primary-from) 0%, var(--prism-accent) 50%, var(--prism-primary-to) 100%);\n    }\n\n    .comp-head-top {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 16px;\n    }\n\n    .comp-crumb {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: var(--fs-sm);\n      color: var(--prism-text-ghost);\n      margin-bottom: 6px;\n      font-weight: 500;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n    }\n    .comp-crumb prism-icon { opacity: 0.6; }\n\n    .comp-title {\n      margin: 0;\n      font-size: var(--fs-2xl);\n      font-weight: 700;\n      letter-spacing: -0.02em;\n      color: var(--prism-text);\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n\n    .comp-selector {\n      font-family: var(--font-mono);\n      font-size: 12px;\n      color: var(--prism-primary);\n      padding: 3px 8px;\n      border-radius: var(--radius-sm);\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n      font-weight: 500;\n    }\n\n    .comp-desc {\n      margin: 6px 0 0;\n      font-size: var(--fs-lg);\n      color: var(--prism-text-2);\n      max-width: 72ch;\n      line-height: 1.55;\n    }\n\n    .comp-tags {\n      margin-top: 10px;\n      display: flex;\n      gap: 6px;\n      flex-wrap: wrap;\n    }\n    .comp-tag {\n      padding: 2px 8px;\n      font-size: 11px;\n      font-weight: 500;\n      border-radius: var(--radius-xs);\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      color: var(--prism-primary);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n\n    .comp-head-stats {\n      display: flex;\n      gap: 18px;\n      flex-shrink: 0;\n    }\n  "] }]
+  `, styles: ["\n    :host { display: block; flex-shrink: 0; }\n\n    .comp-head {\n      padding: 12px 28px;\n      background: var(--prism-bg);\n      border-bottom: 1px solid var(--prism-border);\n      position: relative;\n    }\n    .comp-head::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      width: 6px;\n      background: linear-gradient(180deg, var(--prism-primary-from) 0%, var(--prism-accent) 50%, var(--prism-primary-to) 100%);\n    }\n\n    .comp-head-top {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 16px;\n    }\n\n    .comp-crumb {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: var(--fs-sm);\n      color: var(--prism-text-ghost);\n      margin-bottom: 6px;\n      font-weight: 500;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n    }\n    .comp-crumb prism-icon { opacity: 0.6; }\n\n    .comp-title {\n      margin: 0;\n      font-size: var(--fs-2xl);\n      font-weight: 700;\n      letter-spacing: -0.02em;\n      color: var(--prism-text);\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n\n    .comp-selector {\n      font-family: var(--font-mono);\n      font-size: 12px;\n      color: var(--prism-primary);\n      padding: 3px 8px;\n      border-radius: var(--radius-sm);\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n      font-weight: 500;\n    }\n\n    .comp-status {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      height: 24px;\n      padding: 0 10px 0 8px;\n      border-radius: 5px;\n      font-size: 11.5px;\n      font-weight: 600;\n      letter-spacing: 0.02em;\n      border: 1px solid;\n      background: transparent;\n    }\n    .comp-status-label { line-height: 1; }\n    .comp-status-dot {\n      width: 7px;\n      height: 7px;\n      border-radius: 50%;\n      background: currentColor;\n    }\n    .comp-status-ring {\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      border: 1.5px solid currentColor;\n      background: transparent;\n      box-sizing: border-box;\n    }\n    .comp-status prism-icon { display: inline-flex; }\n\n    .comp-status--stable {\n      color: var(--prism-success);\n      background: color-mix(in srgb, var(--prism-success) 10%, transparent);\n      border-color: color-mix(in srgb, var(--prism-success) 35%, transparent);\n    }\n    .comp-status--beta {\n      color: #60a5fa;\n      background: color-mix(in srgb, #60a5fa 10%, transparent);\n      border-color: color-mix(in srgb, #60a5fa 35%, transparent);\n    }\n    .comp-status--wip {\n      color: var(--prism-warn);\n      background: color-mix(in srgb, var(--prism-warn) 10%, transparent);\n      border-color: color-mix(in srgb, var(--prism-warn) 35%, transparent);\n    }\n    .comp-status--deprecated {\n      color: var(--prism-text-muted);\n      background: var(--prism-input-bg);\n      border-color: var(--prism-border-strong);\n    }\n\n    .comp-desc {\n      margin: 6px 0 0;\n      font-size: var(--fs-lg);\n      color: var(--prism-text-2);\n      max-width: 72ch;\n      line-height: 1.55;\n    }\n\n    .comp-tags {\n      margin-top: 10px;\n      display: flex;\n      gap: 6px;\n      flex-wrap: wrap;\n    }\n    .comp-tag {\n      padding: 2px 8px;\n      font-size: 11px;\n      font-weight: 500;\n      border-radius: var(--radius-xs);\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      color: var(--prism-primary);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n\n    .comp-head-stats {\n      display: flex;\n      gap: 18px;\n      flex-shrink: 0;\n    }\n  "] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismComponentHeadComponent, { className: "PrismComponentHeadComponent", filePath: "app/component-head/prism-component-head.component.ts", lineNumber: 160 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismComponentHeadComponent, { className: "PrismComponentHeadComponent", filePath: "app/component-head/prism-component-head.component.ts", lineNumber: 251 }); })();

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

@@ -1 +1 @@
-{"version":3,"file":"prism-icon.component.d.ts","sourceRoot":"","sources":["../../../src/app/icons/prism-icon.component.ts"],"names":[],"mappings":";AAkDA,qBAOa,kBAAkB;IAC7B,QAAQ,CAAC,IAAI,8CAA4B;IACzC,QAAQ,CAAC,IAAI,8CAAa;IAE1B,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAmC;;yCAJ3C,kBAAkB;2CAAlB,kBAAkB;CAkC9B"}
+{"version":3,"file":"prism-icon.component.d.ts","sourceRoot":"","sources":["../../../src/app/icons/prism-icon.component.ts"],"names":[],"mappings":";AAmDA,qBAOa,kBAAkB;IAC7B,QAAQ,CAAC,IAAI,8CAA4B;IACzC,QAAQ,CAAC,IAAI,8CAAa;IAE1B,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAmC;;yCAJ3C,kBAAkB;2CAAlB,kBAAkB;CAkC9B"}

package/dist/app/icons/prism-icon.component.js

@@ -26,6 +26,7 @@ const ICONS = {
     eye: '<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>',
     code: '<path d="m18 16 4-4-4-4M6 8l-4 4 4 4m8.5-12-5 16"/>',
     x: '<path d="M18 6 6 18M6 6l12 12"/>',
+    check: '<path d="M20 6 9 17l-5-5"/>',
 };
 const SVG_NS = 'http://www.w3.org/2000/svg';
 export class PrismIconComponent {
@@ -63,4 +64,4 @@ export class PrismIconComponent {
         type: Component,
         args: [{ selector: 'prism-icon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: ``, styles: [":host { display: inline-flex; align-items: center; justify-content: center; }"] }]
     }], () => [], { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismIconComponent, { className: "PrismIconComponent", filePath: "app/icons/prism-icon.component.ts", lineNumber: 58 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismIconComponent, { className: "PrismIconComponent", filePath: "app/icons/prism-icon.component.ts", lineNumber: 59 }); })();

package/dist/app/panels/controls/prism-controls-panel.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-controls-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/controls/prism-controls-panel.component.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACV,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EACjB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAEpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAEhF,qBA2Ha,2BAA2B;IACtC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,QAAQ,CAAC,eAAe,+DAAwC;IAEhE,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,SAAS,GAAG,iBAAiB,GAAG,IAAI;IAOtE,SAAS,CAAC,SAAS,CAAC,GAAG,EAAE,OAAO,GAAG,OAAO;IAI1C,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM;IAIxC,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM;yCAtB7B,2BAA2B;2CAA3B,2BAA2B;CAyBvC"}
+{"version":3,"file":"prism-controls-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/controls/prism-controls-panel.component.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACV,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EACjB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAEpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAEhF,qBA+La,2BAA2B;IACtC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,QAAQ,CAAC,eAAe,+DAAwC;IAEhE,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,SAAS,GAAG,iBAAiB,GAAG,IAAI;IAOtE,SAAS,CAAC,SAAS,CAAC,GAAG,EAAE,OAAO,GAAG,OAAO;IAI1C,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM;IAIxC,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM;yCAtB7B,2BAA2B;2CAA3B,2BAA2B;CAyBvC"}