@ng-prism/core 22.2.0-beta.4 → 22.2.0

package/dist/app/index.js

@@ -1,7 +1,7 @@
 // Tokens
 // PRISM_RENDERER_HOOKS + PrismRendererHooks are exported from the plugin entry point
 // (src/plugin/index.ts) since they belong to the plugin API surface.
-export { PRISM_MANIFEST, PRISM_CONFIG, } from './tokens/prism-tokens.js';
+export { PRISM_MANIFEST, PRISM_CONFIG } from './tokens/prism-tokens.js';
 // Theme
 export { PRISM_DEFAULT_THEME, PRISM_DARK_THEME, PRISM_LIGHT_THEME, PRISM_BASE_TOKENS, } from './theme/prism-default-theme.js';
 export { PrismThemeService } from './services/prism-theme.service.js';
@@ -23,3 +23,28 @@ export { PrismPageRendererComponent } from './page-renderer/prism-page-renderer.
 export { providePrism } from './provide-prism.js';
 // HMR helper
 export { enablePrismHmr } from './hmr.js';
+// Shared presentational components for plugin contributions. These live on
+// the main entry rather than `plugin/index.ts` because the builder evaluates
+// plugin config — and everything it imports — in Node.js, and that barrel
+// draws an explicit line at decorated declarations.
+//
+// This barrel draws no such line, and the badges do cross into Node. The
+// `loadComponent` indirection keeps plugin *panels* out of the builder's
+// module graph, but `@ng-prism/plugin-coverage` and
+// `@ng-prism/plugin-visual-regression` also re-export their header badge
+// components *statically* from their Node entry (`exports["."].import`), and
+// those components import `PrismMetricBadgeComponent` from here. So loading a
+// plugin config in `builder/config-loader` pulls this whole file — shell
+// component included — into Node. It evaluates cleanly only because the
+// config loader imports `@angular/compiler` before anything else.
+//
+// Moving those two re-exports to the packages' `.browser.ts` entries does not
+// fix it: `package.json` maps "types" to the single `index.d.ts` generated
+// from the Node entry under every condition, so a symbol dropped from that
+// entry disappears from the public type surface while still shipping in the
+// browser bundle — the mismatch `plugin-visual-regression`'s
+// `entry-parity.spec.ts` exists to forbid. Making the badges Node-safe means
+// giving them an import that is not this barrel, which is a public API
+// decision, not a cleanup.
+export { PrismMetricBadgeComponent } from './shared/prism-metric-badge.component.js';
+export { PrismIconComponent } from './icons/prism-icon.component.js';

package/dist/app/layout-menu/prism-layout-menu.component.js

@@ -32,7 +32,7 @@ function PrismLayoutMenuComponent_Conditional_6_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵdomElementEnd()();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵdomElementStart(17, "span", 12);
-    i0.ɵɵtext(18, "Show toolbar");
+    i0.ɵɵtext(18, "Show variant rail");
     i0.ɵɵdomElementEnd();
     i0.ɵɵdomElementStart(19, "span", 13)(20, "kbd");
     i0.ɵɵtext(21, "\u2325");
@@ -102,7 +102,7 @@ export class PrismLayoutMenuComponent {
             i0.ɵɵclassProp("layout-menu__trigger--active", ctx.open());
             i0.ɵɵadvance(5);
             i0.ɵɵconditional(ctx.open() ? 6 : -1);
-        } }, styles: [".layout-menu[_ngcontent-%COMP%] { position: relative; }\n\n    .layout-menu__trigger[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 30px;\n      height: 30px;\n      border: 1px solid var(--prism-border);\n      border-radius: var(--prism-radius-sm);\n      background: transparent;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      transition: border-color 0.15s, color 0.15s, background 0.15s;\n    }\n    .layout-menu__trigger[_ngcontent-%COMP%]:hover, \n   .layout-menu__trigger--active[_ngcontent-%COMP%] {\n      border-color: var(--prism-border-strong);\n      color: var(--prism-text);\n      background: var(--prism-bg-surface);\n    }\n\n    .layout-menu__backdrop[_ngcontent-%COMP%] {\n      position: fixed;\n      inset: 0;\n      z-index: 40;\n    }\n\n    .layout-menu__dropdown[_ngcontent-%COMP%] {\n      position: absolute;\n      top: calc(100% + 6px);\n      right: 0;\n      z-index: 50;\n      min-width: 240px;\n      background: var(--prism-bg-elevated);\n      border: 1px solid var(--prism-border-strong);\n      border-radius: var(--prism-radius);\n      box-shadow: 0 8px 32px rgba(0,0,0,0.4);\n      padding: 4px;\n    }\n\n    .layout-menu__item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      width: 100%;\n      padding: 7px 10px;\n      border: none;\n      background: none;\n      color: var(--prism-text);\n      font-family: var(--prism-font-sans);\n      font-size: 13px;\n      cursor: pointer;\n      border-radius: var(--prism-radius-sm);\n      text-align: left;\n      transition: background 0.1s;\n    }\n    .layout-menu__item[_ngcontent-%COMP%]:hover { background: var(--prism-bg-surface); }\n\n    .layout-menu__check[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 16px;\n      height: 16px;\n      border: 1px solid var(--prism-border-strong);\n      border-radius: 3px;\n      flex-shrink: 0;\n      color: transparent;\n    }\n    .layout-menu__check--on[_ngcontent-%COMP%] {\n      background: var(--prism-primary);\n      border-color: var(--prism-primary);\n      color: white;\n    }\n\n    .layout-menu__icon[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 16px;\n      height: 16px;\n      color: var(--prism-text-muted);\n      flex-shrink: 0;\n    }\n\n    .layout-menu__label[_ngcontent-%COMP%] { flex: 1; }\n\n    .layout-menu__kbd[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 2px;\n      opacity: 0.6;\n    }\n    kbd[_ngcontent-%COMP%] {\n      font-family: var(--prism-font-sans);\n      font-size: 11px;\n      padding: 1px 4px;\n      border: 1px solid var(--prism-border-strong);\n      border-radius: 3px;\n      background: var(--prism-bg-surface);\n      color: var(--prism-text-muted);\n    }\n\n    .layout-menu__divider[_ngcontent-%COMP%] {\n      height: 1px;\n      background: var(--prism-border);\n      margin: 4px 0;\n    }"] });
+        } }, styles: [".layout-menu[_ngcontent-%COMP%] { position: relative; }\n\n    .layout-menu__trigger[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 30px;\n      height: 30px;\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: var(--%NS%prism-radius-sm);\n      background: transparent;\n      color: var(--%NS%prism-text-muted);\n      cursor: pointer;\n      transition: border-color 0.15s, color 0.15s, background 0.15s;\n    }\n    .layout-menu__trigger[_ngcontent-%COMP%]:hover, \n   .layout-menu__trigger--active[_ngcontent-%COMP%] {\n      border-color: var(--%NS%prism-border-strong);\n      color: var(--%NS%prism-text);\n      background: var(--%NS%prism-bg-surface);\n    }\n\n    .layout-menu__backdrop[_ngcontent-%COMP%] {\n      position: fixed;\n      inset: 0;\n      z-index: 40;\n    }\n\n    .layout-menu__dropdown[_ngcontent-%COMP%] {\n      position: absolute;\n      top: calc(100% + 6px);\n      right: 0;\n      z-index: 50;\n      min-width: 240px;\n      background: var(--%NS%prism-bg-elevated);\n      border: 1px solid var(--%NS%prism-border-strong);\n      border-radius: var(--%NS%prism-radius);\n      box-shadow: 0 8px 32px rgba(0,0,0,0.4);\n      padding: 4px;\n    }\n\n    .layout-menu__item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      width: 100%;\n      padding: 7px 10px;\n      border: none;\n      background: none;\n      color: var(--%NS%prism-text);\n      font-family: var(--%NS%prism-font-sans);\n      font-size: 13px;\n      cursor: pointer;\n      border-radius: var(--%NS%prism-radius-sm);\n      text-align: left;\n      transition: background 0.1s;\n    }\n    .layout-menu__item[_ngcontent-%COMP%]:hover { background: var(--%NS%prism-bg-surface); }\n\n    .layout-menu__check[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 16px;\n      height: 16px;\n      border: 1px solid var(--%NS%prism-border-strong);\n      border-radius: 3px;\n      flex-shrink: 0;\n      color: transparent;\n    }\n    .layout-menu__check--on[_ngcontent-%COMP%] {\n      background: var(--%NS%prism-primary);\n      border-color: var(--%NS%prism-primary);\n      color: white;\n    }\n\n    .layout-menu__icon[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 16px;\n      height: 16px;\n      color: var(--%NS%prism-text-muted);\n      flex-shrink: 0;\n    }\n\n    .layout-menu__label[_ngcontent-%COMP%] { flex: 1; }\n\n    .layout-menu__kbd[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 2px;\n      opacity: 0.6;\n    }\n    kbd[_ngcontent-%COMP%] {\n      font-family: var(--%NS%prism-font-sans);\n      font-size: 11px;\n      padding: 1px 4px;\n      border: 1px solid var(--%NS%prism-border-strong);\n      border-radius: 3px;\n      background: var(--%NS%prism-bg-surface);\n      color: var(--%NS%prism-text-muted);\n    }\n\n    .layout-menu__divider[_ngcontent-%COMP%] {\n      height: 1px;\n      background: var(--%NS%prism-border);\n      margin: 4px 0;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismLayoutMenuComponent, [{
         type: Component,
@@ -156,7 +156,7 @@ export class PrismLayoutMenuComponent {
               />
             </svg>
           </span>
-          <span class="layout-menu__label">Show toolbar</span>
+          <span class="layout-menu__label">Show variant rail</span>
           <span class="layout-menu__kbd"><kbd>⌥</kbd><kbd>T</kbd></span>
         </button>
         <button class="layout-menu__item" (click)="toggle('addons')">

package/dist/app/overview/overview-panel.d.ts

@@ -0,0 +1,3 @@
+import type { PanelDefinition } from '../../plugin/plugin.types.js';
+export declare const OVERVIEW_PANEL: PanelDefinition;
+//# sourceMappingURL=overview-panel.d.ts.map

package/dist/app/overview/overview-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overview-panel.d.ts","sourceRoot":"","sources":["../../../src/app/overview/overview-panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAIpE,eAAO,MAAM,cAAc,EAAE,eAM5B,CAAC"}

package/dist/app/overview/overview-panel.js

@@ -0,0 +1,9 @@
+import { showsOverview } from './overview-visibility.js';
+import { PrismOverviewComponent } from './prism-overview.component.js';
+export const OVERVIEW_PANEL = {
+    id: 'overview',
+    label: 'Overview',
+    placement: 'view',
+    component: PrismOverviewComponent,
+    isVisible: showsOverview,
+};

package/dist/app/overview/overview-visibility.d.ts

@@ -0,0 +1,15 @@
+import type { RuntimeComponent } from '../../plugin/plugin.types.js';
+/**
+ * Whether the Overview tab is offered for this component.
+ *
+ * Two conditions, and the second is a correctness argument rather than taste.
+ * A `renderPage` component does not render itself — it renders a registered
+ * `ComponentPage`, and that page reads its values from the *global*
+ * `PrismRendererService`. n cells side by side would all show the same state,
+ * so an Overview there would be demonstrably wrong, not merely unhelpful.
+ *
+ * A single variant needs no contact sheet: the grid would be one cell, and the
+ * Playground says the same thing better.
+ */
+export declare function showsOverview(component: RuntimeComponent): boolean;
+//# sourceMappingURL=overview-visibility.d.ts.map

package/dist/app/overview/overview-visibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overview-visibility.d.ts","sourceRoot":"","sources":["../../../src/app/overview/overview-visibility.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAErE;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,SAAS,EAAE,gBAAgB,GAAG,OAAO,CAIlE"}

package/dist/app/overview/overview-visibility.js

@@ -0,0 +1,18 @@
+/**
+ * Whether the Overview tab is offered for this component.
+ *
+ * Two conditions, and the second is a correctness argument rather than taste.
+ * A `renderPage` component does not render itself — it renders a registered
+ * `ComponentPage`, and that page reads its values from the *global*
+ * `PrismRendererService`. n cells side by side would all show the same state,
+ * so an Overview there would be demonstrably wrong, not merely unhelpful.
+ *
+ * A single variant needs no contact sheet: the grid would be one cell, and the
+ * Playground says the same thing better.
+ */
+export function showsOverview(component) {
+    const config = component.meta.showcaseConfig;
+    if (config.renderPage)
+        return false;
+    return (config.variants?.length ?? 0) >= 2;
+}

package/dist/app/overview/prism-overview-cell.component.d.ts

@@ -0,0 +1,29 @@
+import type { RuntimeComponent } from '../../plugin/plugin.types.js';
+import * as i0 from "@angular/core";
+/**
+ * One frame of the contact sheet: a stage painting the variant's declared
+ * background, with the variant's own instance on it and a caption beneath.
+ *
+ * It deliberately shares none of the Playground's bookkeeping. Output
+ * subscriptions, `renderedElement`, the `prism:render:*` marks, the renderer
+ * hooks and `data-prism-rendered` all describe *one* rendered thing; n cells
+ * writing to any of them would corrupt what they mean. `data-prism-rendered`
+ * matters most — it is the selector external screenshot runners key on (see
+ * `docs/guide/external-tooling.md`), and this component never emits it.
+ */
+export declare class PrismOverviewCellComponent {
+    readonly component: import("@angular/core").InputSignal<RuntimeComponent>;
+    readonly index: import("@angular/core").InputSignal<number>;
+    private readonly injector;
+    private readonly destroyRef;
+    private readonly outlet;
+    /** Never null: `resolveVariantBg` falls back to `DEFAULT_VARIANT_BG`. */
+    protected readonly bg: import("@angular/core").Signal<import("../services/prism-canvas.service.js").CanvasBg>;
+    protected readonly caption: import("@angular/core").Signal<string>;
+    protected readonly isWide: import("@angular/core").Signal<boolean>;
+    constructor();
+    private mount;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismOverviewCellComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismOverviewCellComponent, "prism-overview-cell", never, { "component": { "alias": "component"; "required": true; "isSignal": true; }; "index": { "alias": "index"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=prism-overview-cell.component.d.ts.map

package/dist/app/overview/prism-overview-cell.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism-overview-cell.component.d.ts","sourceRoot":"","sources":["../../../src/app/overview/prism-overview-cell.component.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;;AAOrE;;;;;;;;;;GAUG;AACH,qBAmEa,0BAA0B;IACrC,QAAQ,CAAC,SAAS,wDAAsC;IACxD,QAAQ,CAAC,KAAK,8CAA4B;IAE1C,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IAEH,yEAAyE;IACzE,SAAS,CAAC,QAAQ,CAAC,EAAE,yFAEnB;IAEF,SAAS,CAAC,QAAQ,CAAC,OAAO,yCAUvB;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,0CAMtB;;IAmBH,OAAO,CAAC,KAAK;yCApDF,0BAA0B;2CAA1B,0BAA0B;CAgGtC"}

package/dist/app/overview/prism-overview-cell.component.js

@@ -0,0 +1,136 @@
+import { ChangeDetectionStrategy, Component, computed, DestroyRef, effect, inject, Injector, input, untracked, viewChild, ViewContainerRef, } from '@angular/core';
+import { resolveVariantBg } from '../../shared/variant-bg.js';
+import { CANVAS_BG_STYLES } from '../canvas/canvas-bg.styles.js';
+import { buildKnownInputs } from '../renderer/known-inputs.js';
+import { parseContentToNodes } from '../renderer/projectable-content.js';
+import { computeVariantState } from '../services/prism-renderer.service.js';
+import * as i0 from "@angular/core";
+const _c0 = ["outlet"];
+/**
+ * One frame of the contact sheet: a stage painting the variant's declared
+ * background, with the variant's own instance on it and a caption beneath.
+ *
+ * It deliberately shares none of the Playground's bookkeeping. Output
+ * subscriptions, `renderedElement`, the `prism:render:*` marks, the renderer
+ * hooks and `data-prism-rendered` all describe *one* rendered thing; n cells
+ * writing to any of them would corrupt what they mean. `data-prism-rendered`
+ * matters most — it is the selector external screenshot runners key on (see
+ * `docs/guide/external-tooling.md`), and this component never emits it.
+ */
+export class PrismOverviewCellComponent {
+    component = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "component" }] : /* istanbul ignore next */ []));
+    index = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    outlet = viewChild.required('outlet', { ...(ngDevMode ? { debugName: "outlet" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+    /** Never null: `resolveVariantBg` falls back to `DEFAULT_VARIANT_BG`. */
+    bg = computed(() => resolveVariantBg(this.component().meta.showcaseConfig, this.index()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bg" }] : /* istanbul ignore next */ []));
+    caption = computed(() => {
+        const variant = this.component().meta.showcaseConfig.variants?.[this.index()];
+        const number = String(this.index() + 1).padStart(2, '0');
+        // Defensive, not reachable today: `Variant.name` is required
+        // (decorator/showcase.types.ts) and `prism-overview` only ever creates a
+        // cell for an index it just read out of that same `variants` array. A
+        // bare `07` would only appear if those two facts stopped lining up — the
+        // grid indexing past the array it iterates, or `name` becoming optional.
+        return variant ? `${number} ${variant.name}` : number;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
+    isWide = computed(() => {
+        const config = this.component().meta.showcaseConfig;
+        const variant = config.variants?.[this.index()];
+        return ((variant?.canvasLayout ?? config.canvasLayout ?? 'fit') === 'stretch');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isWide" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const component = this.component();
+            const index = this.index();
+            untracked(() => this.mount(component, index));
+        });
+        this.destroyRef.onDestroy(() => this.outlet().clear());
+    }
+    // The Playground lets a variant that throws on construction propagate: one
+    // broken instance, and the user navigates away from it. The Overview
+    // fans instantiation out from one instance to n, all mounted in the same
+    // change-detection pass — an uncaught throw here would abort the refresh of
+    // every cell after it, so one bad variant would take down the whole sheet
+    // instead of just its own cell. That asymmetry is deliberate: contain here,
+    // propagate there.
+    mount(component, index) {
+        try {
+            this.outlet().clear();
+            // No `onUnknownInput` callback: the Playground already warns once per
+            // component, and repeating that warning per cell would say the same thing
+            // n times.
+            const { values, activeContent } = computeVariantState(component, index);
+            const injector = Injector.create({
+                providers: component.meta.showcaseConfig.providers ?? [],
+                parent: this.injector,
+            });
+            const projectableNodes = activeContent
+                ? parseContentToNodes(activeContent)
+                : undefined;
+            const ref = this.outlet().createComponent(component.type, {
+                injector,
+                projectableNodes,
+            });
+            const knownInputs = buildKnownInputs(component);
+            for (const [key, value] of Object.entries(values)) {
+                if (!knownInputs.has(key))
+                    continue;
+                ref.setInput(key, value);
+            }
+            ref.changeDetectorRef.detectChanges();
+        }
+        catch (error) {
+            // `createComponent` attaches the host element and its structural DOM
+            // synchronously; a throw almost always comes from `detectChanges` right
+            // above, i.e. from a template expression or a lifecycle hook running
+            // *after* that attach. So there is usually a half-built subtree sitting
+            // in the outlet by the time we get here, and clearing it is what makes
+            // a caught cell actually show an empty stage with its caption still in
+            // place — an honest picture of "this variant failed", rather than a
+            // broken grid with no indication of which cell caused it.
+            this.outlet().clear();
+            console.error(`[ng-prism] Variant ${index} of ${component.meta.className} failed to render:`, error);
+        }
+    }
+    static ɵfac = function PrismOverviewCellComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismOverviewCellComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismOverviewCellComponent, selectors: [["prism-overview-cell"]], viewQuery: function PrismOverviewCellComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuerySignal(ctx.outlet, _c0, 5, ViewContainerRef);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance();
+        } }, hostAttrs: ["role", "listitem"], hostVars: 1, hostBindings: function PrismOverviewCellComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-wide", ctx.isWide() ? "" : null);
+        } }, inputs: { component: [1, "component"], index: [1, "index"] }, decls: 6, vars: 2, consts: [["outlet", ""], [1, "cell__stage"], [1, "cell__mount"], [1, "cell__caption"]], template: function PrismOverviewCellComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 1)(1, "div", 2);
+            i0.ɵɵdomElementContainer(2, null, 0);
+            i0.ɵɵdomElementEnd()();
+            i0.ɵɵdomElementStart(4, "span", 3);
+            i0.ɵɵtext(5);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵattribute("data-bg", ctx.bg());
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate(ctx.caption());
+        } }, styles: ["[_nghost-%COMP%] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--%NS%sp-2);\n        min-width: 0;\n      }\n      \n\n      [data-wide][_nghost-%COMP%] {\n        grid-column: 1 / -1;\n      }\n\n      .cell__stage[_ngcontent-%COMP%] {\n        flex: 1;\n        min-height: 120px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: var(--%NS%sp-5);\n        border-radius: var(--%NS%radius-sm);\n        background-color: var(--%NS%prism-stage);\n        outline: 1px solid var(--%NS%prism-stage-edge);\n        outline-offset: -1px;\n        overflow: hidden;\n      }\n\n      .cell__mount[_ngcontent-%COMP%] {\n        display: inline-block;\n        max-width: 100%;\n      }\n      [data-wide][_nghost-%COMP%]   .cell__mount[_ngcontent-%COMP%] {\n        display: block;\n        width: 100%;\n      }\n\n      \n\n\n\n      .cell__caption[_ngcontent-%COMP%] {\n        font-family: var(--%NS%prism-font-mono);\n        font-size: var(--%NS%fs-xs);\n        color: var(--%NS%prism-text-muted);\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }", "[data-bg=\"dots\"][_ngcontent-%COMP%] {\n    background-image: radial-gradient(circle, var(--%NS%prism-dot) 1px, transparent 1px);\n    background-size: 20px 20px;\n  }\n\n  [data-bg=\"plain\"][_ngcontent-%COMP%] {\n    background-image: none;\n  }\n\n  \n\n\n\n\n  [data-bg=\"light\"][_ngcontent-%COMP%] {\n    background-color: var(--%NS%prism-void-light, #f7f5fc);\n    background-image: none;\n  }\n  [data-bg=\"dark\"][_ngcontent-%COMP%] {\n    background-color: var(--%NS%prism-void-dark, #07050f);\n    background-image: none;\n  }\n\n  \n\n\n\n\n\n  [data-bg=\"checker\"][_ngcontent-%COMP%], \n   [data-bg=\"transparent\"][_ngcontent-%COMP%] {\n    background-image:\n      linear-gradient(45deg, var(--%NS%prism-border) 25%, transparent 25%),\n      linear-gradient(-45deg, var(--%NS%prism-border) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, var(--%NS%prism-border) 75%),\n      linear-gradient(-45deg, transparent 75%, var(--%NS%prism-border) 75%);\n    background-size: 16px 16px;\n    background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n  }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismOverviewCellComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-overview-cell', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                    role: 'listitem',
+                    '[attr.data-wide]': "isWide() ? '' : null",
+                }, template: `
+    <div class="cell__stage" [attr.data-bg]="bg()">
+      <div class="cell__mount"><ng-container #outlet /></div>
+    </div>
+    <span class="cell__caption">{{ caption() }}</span>
+  `, styles: ["\n      :host {\n        display: flex;\n        flex-direction: column;\n        gap: var(--sp-2);\n        min-width: 0;\n      }\n      /* A stretch variant has no intrinsic width to compare against its\n         neighbours, so it takes the row rather than a column. */\n      :host([data-wide]) {\n        grid-column: 1 / -1;\n      }\n\n      .cell__stage {\n        flex: 1;\n        min-height: 120px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: var(--sp-5);\n        border-radius: var(--radius-sm);\n        background-color: var(--prism-stage);\n        outline: 1px solid var(--prism-stage-edge);\n        outline-offset: -1px;\n        overflow: hidden;\n      }\n\n      .cell__mount {\n        display: inline-block;\n        max-width: 100%;\n      }\n      :host([data-wide]) .cell__mount {\n        display: block;\n        width: 100%;\n      }\n\n      /* The caption sits below the frame, not on it. Inside, it would have to\n         invert against every background the cell can paint \u2014 and gaining a new\n         contrast rule per CanvasBg value is exactly the cost the sheet exists\n         to avoid. */\n      .cell__caption {\n        font-family: var(--prism-font-mono);\n        font-size: var(--fs-xs);\n        color: var(--prism-text-muted);\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    ", "\n  [data-bg=\"dots\"] {\n    background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n    background-size: 20px 20px;\n  }\n\n  [data-bg=\"plain\"] {\n    background-image: none;\n  }\n\n  /* Flat, not dotted. \"light\" and \"dark\" name a surface a component was\n     designed against \u2014 and they are the two backgrounds whose colour is\n     absolute rather than a theme token, which is what makes them the values\n     to declare for a screenshot baseline. \"dots\" already exists for anyone\n     who wants the grid. */\n  [data-bg=\"light\"] {\n    background-color: var(--prism-void-light, #f7f5fc);\n    background-image: none;\n  }\n  [data-bg=\"dark\"] {\n    background-color: var(--prism-void-dark, #07050f);\n    background-image: none;\n  }\n\n  /* \"transparent\" shares the checkerboard on purpose. The two say the same\n     thing in the two media the canvas has: while browsing, the checkerboard\n     is already the UI's word for \"no surface here\"; in a capture it becomes\n     literal transparency. A stage that were really see-through in the app\n     would just show the shell through the canvas, which means nothing. The\n     split between the two lives entirely in CAPTURE_STYLES. */\n  [data-bg=\"checker\"],\n  [data-bg=\"transparent\"] {\n    background-image:\n      linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n      linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n      linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n    background-size: 16px 16px;\n    background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n  }\n"] }]
+    }], () => [], { component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], outlet: [{ type: i0.ViewChild, args: ['outlet', { ...{
+                        read: ViewContainerRef,
+                    }, isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismOverviewCellComponent, { className: "PrismOverviewCellComponent", filePath: "app/overview/prism-overview-cell.component.ts", lineNumber: 99 }); })();

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

@@ -0,0 +1,17 @@
+import type { RuntimeComponent } from '../../plugin/plugin.types.js';
+import * as i0 from "@angular/core";
+/**
+ * All variants of one component at once — a contact sheet rather than a
+ * viewfinder.
+ *
+ * Deliberately without controls of any kind: columns follow the window, and
+ * everything else a cell shows is what the variant itself declared.
+ */
+export declare class PrismOverviewComponent {
+    /** Input name fixed by `prism-view-panel-host`, which feeds every view panel. */
+    readonly activeComponent: import("@angular/core").InputSignal<RuntimeComponent | null>;
+    protected readonly variants: import("@angular/core").Signal<import("../../index.js").Variant<unknown>[]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismOverviewComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismOverviewComponent, "prism-overview", never, { "activeComponent": { "alias": "activeComponent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=prism-overview.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prism-overview.component.d.ts","sourceRoot":"","sources":["../../../src/app/overview/prism-overview.component.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;;AAGrE;;;;;;GAMG;AACH,qBA0Ba,sBAAsB;IACjC,iFAAiF;IACjF,QAAQ,CAAC,eAAe,+DAAwC;IAEhE,SAAS,CAAC,QAAQ,CAAC,QAAQ,8EAEzB;yCANS,sBAAsB;2CAAtB,sBAAsB;CAOlC"}

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

@@ -0,0 +1,53 @@
+import { ChangeDetectionStrategy, Component, computed, input, } from '@angular/core';
+import { PrismOverviewCellComponent } from './prism-overview-cell.component.js';
+import * as i0 from "@angular/core";
+function PrismOverviewComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-overview-cell", 1);
+} if (rf & 2) {
+    const $index_r1 = ctx.$index;
+    const component_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("component", component_r2)("index", $index_r1);
+} }
+function PrismOverviewComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 0);
+    i0.ɵɵrepeaterCreate(1, PrismOverviewComponent_Conditional_0_For_2_Template, 1, 2, "prism-overview-cell", 1, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.variants());
+} }
+/**
+ * All variants of one component at once — a contact sheet rather than a
+ * viewfinder.
+ *
+ * Deliberately without controls of any kind: columns follow the window, and
+ * everything else a cell shows is what the variant itself declared.
+ */
+export class PrismOverviewComponent {
+    /** Input name fixed by `prism-view-panel-host`, which feeds every view panel. */
+    activeComponent = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeComponent" }] : /* istanbul ignore next */ []));
+    variants = computed(() => this.activeComponent()?.meta.showcaseConfig.variants ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variants" }] : /* istanbul ignore next */ []));
+    static ɵfac = function PrismOverviewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismOverviewComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismOverviewComponent, selectors: [["prism-overview"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 1, vars: 1, consts: [["role", "list", 1, "prism-overview"], [3, "component", "index"]], template: function PrismOverviewComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, PrismOverviewComponent_Conditional_0_Template, 3, 0, "div", 0);
+        } if (rf & 2) {
+            let tmp_0_0;
+            i0.ɵɵconditional((tmp_0_0 = ctx.activeComponent()) ? 0 : -1, tmp_0_0);
+        } }, dependencies: [PrismOverviewCellComponent], styles: ["[_nghost-%COMP%] { display: block; }\n\n    .prism-overview[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n      gap: var(--%NS%sp-4);\n      padding: var(--%NS%sp-6);\n      align-content: start;\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismOverviewComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-overview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismOverviewCellComponent], template: `
+    @if (activeComponent(); as component) {
+    <div class="prism-overview" role="list">
+      @for (_ of variants(); track $index) {
+      <prism-overview-cell [component]="component" [index]="$index" />
+      }
+    </div>
+    }
+  `, styles: ["\n    :host { display: block; }\n\n    .prism-overview {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n      gap: var(--sp-4);\n      padding: var(--sp-6);\n      align-content: start;\n    }\n  "] }]
+    }], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismOverviewComponent, { className: "PrismOverviewComponent", filePath: "app/overview/prism-overview.component.ts", lineNumber: 43 }); })();

package/dist/app/page-renderer/prism-page-renderer.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-page-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/page-renderer/prism-page-renderer.component.ts"],"names":[],"mappings":";AAIA,qBA8Ca,0BAA0B;IACrC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmC;IACxD,SAAS,CAAC,QAAQ,CAAC,IAAI,iFAAuB;;yCAHnC,0BAA0B;2CAA1B,0BAA0B;CAWtC"}
+{"version":3,"file":"prism-page-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/page-renderer/prism-page-renderer.component.ts"],"names":[],"mappings":";AAIA,qBAiFa,0BAA0B;IACrC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmC;IACxD,SAAS,CAAC,QAAQ,CAAC,IAAI,iFAAuB;;yCAHnC,0BAA0B;2CAA1B,0BAA0B;CAWtC"}

package/dist/app/page-renderer/prism-page-renderer.component.js

@@ -54,7 +54,7 @@ export class PrismPageRendererComponent {
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.page()) ? 0 : -1, tmp_0_0);
-        } }, dependencies: [NgComponentOutlet, JsonPipe], styles: ["[_nghost-%COMP%] { display: block; flex: 1; overflow-y: auto; }\n    .prism-page-renderer__title[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: 16px 20px;\n      font-size: 18px;\n      font-weight: 600;\n      letter-spacing: -0.01em;\n      color: var(--prism-text);\n      font-family: var(--prism-font-sans);\n      border-bottom: 1px solid var(--prism-border);\n      border-left: 3px solid;\n      border-image: linear-gradient(180deg, var(--prism-primary-from), var(--prism-primary-to)) 1;\n      background: var(--prism-bg-surface);\n    }\n    .prism-page-renderer__component[_ngcontent-%COMP%] {\n      padding: 16px 20px;\n    }\n    .prism-page-renderer__json[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: 24px;\n      font-size: 12px;\n      font-family: monospace;\n      color: var(--prism-text-muted);\n      white-space: pre-wrap;\n    }"] });
+        } }, dependencies: [NgComponentOutlet, JsonPipe], styles: ["[_nghost-%COMP%] { display: block; flex: 1; overflow-y: auto; }\n    .prism-page-renderer__title[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: 16px 20px;\n      font-size: 18px;\n      font-weight: 600;\n      letter-spacing: -0.01em;\n      color: var(--%NS%prism-text);\n      font-family: var(--%NS%prism-font-sans);\n      border-bottom: 1px solid var(--%NS%prism-border);\n      border-left: 3px solid;\n      border-image: linear-gradient(180deg, var(--%NS%prism-primary-from), var(--%NS%prism-primary-to)) 1;\n      background: var(--%NS%prism-bg-surface);\n    }\n    .prism-page-renderer__component[_ngcontent-%COMP%] {\n      padding: var(--%NS%sp-5) var(--%NS%sp-6);\n      color: var(--%NS%prism-text-2);\n      font-family: var(--%NS%prism-font-sans);\n      font-size: var(--%NS%fs-lg);\n      line-height: 1.6;\n    }\n\n    \n\n\n\n\n\n    .prism-page-renderer__component[_ngcontent-%COMP%]   :is(h1[_ngcontent-%COMP%], h2[_ngcontent-%COMP%], h3[_ngcontent-%COMP%], h4[_ngcontent-%COMP%], h5[_ngcontent-%COMP%], h6[_ngcontent-%COMP%]) {\n      color: var(--%NS%prism-text);\n      font-family: var(--%NS%prism-font-sans);\n      font-weight: 600;\n      letter-spacing: -0.01em;\n      line-height: 1.25;\n      margin: var(--%NS%sp-6) 0 var(--%NS%sp-3);\n    }\n    .prism-page-renderer__component[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:is(h1, h2, h3, h4, h5, h6):first-child {\n      margin-top: 0;\n    }\n    .prism-page-renderer__component[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] { font-size: 24px; }\n    .prism-page-renderer__component[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] { font-size: 20px; }\n    .prism-page-renderer__component[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] { font-size: 17px; }\n    .prism-page-renderer__component[_ngcontent-%COMP%]   :is(h4[_ngcontent-%COMP%], h5[_ngcontent-%COMP%], h6[_ngcontent-%COMP%]) { font-size: var(--%NS%fs-xl); }\n\n    .prism-page-renderer__component[_ngcontent-%COMP%]   :is(p[_ngcontent-%COMP%], ul[_ngcontent-%COMP%], ol[_ngcontent-%COMP%]) { margin: 0 0 var(--%NS%sp-4); }\n    .prism-page-renderer__component[_ngcontent-%COMP%]   :is(strong[_ngcontent-%COMP%], b[_ngcontent-%COMP%]) { color: var(--%NS%prism-text); }\n    .prism-page-renderer__component[_ngcontent-%COMP%]   a[_ngcontent-%COMP%] { color: var(--%NS%prism-primary); }\n    .prism-page-renderer__component[_ngcontent-%COMP%]   :is(code[_ngcontent-%COMP%], pre[_ngcontent-%COMP%]) {\n      font-family: var(--%NS%prism-font-mono);\n      font-size: var(--%NS%fs-md);\n      color: var(--%NS%prism-text);\n    }\n    .prism-page-renderer__json[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: 24px;\n      font-size: 12px;\n      font-family: monospace;\n      color: var(--%NS%prism-text-muted);\n      white-space: pre-wrap;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismPageRendererComponent, [{
         type: Component,
@@ -71,6 +71,6 @@ export class PrismPageRendererComponent {
       } }
     </div>
     }
-  `, styles: ["\n    :host { display: block; flex: 1; overflow-y: auto; }\n    .prism-page-renderer__title {\n      margin: 0;\n      padding: 16px 20px;\n      font-size: 18px;\n      font-weight: 600;\n      letter-spacing: -0.01em;\n      color: var(--prism-text);\n      font-family: var(--prism-font-sans);\n      border-bottom: 1px solid var(--prism-border);\n      border-left: 3px solid;\n      border-image: linear-gradient(180deg, var(--prism-primary-from), var(--prism-primary-to)) 1;\n      background: var(--prism-bg-surface);\n    }\n    .prism-page-renderer__component {\n      padding: 16px 20px;\n    }\n    .prism-page-renderer__json {\n      margin: 0;\n      padding: 24px;\n      font-size: 12px;\n      font-family: monospace;\n      color: var(--prism-text-muted);\n      white-space: pre-wrap;\n    }\n  "] }]
+  `, styles: ["\n    :host { display: block; flex: 1; overflow-y: auto; }\n    .prism-page-renderer__title {\n      margin: 0;\n      padding: 16px 20px;\n      font-size: 18px;\n      font-weight: 600;\n      letter-spacing: -0.01em;\n      color: var(--prism-text);\n      font-family: var(--prism-font-sans);\n      border-bottom: 1px solid var(--prism-border);\n      border-left: 3px solid;\n      border-image: linear-gradient(180deg, var(--prism-primary-from), var(--prism-primary-to)) 1;\n      background: var(--prism-bg-surface);\n    }\n    .prism-page-renderer__component {\n      padding: var(--sp-5) var(--sp-6);\n      color: var(--prism-text-2);\n      font-family: var(--prism-font-sans);\n      font-size: var(--fs-lg);\n      line-height: 1.6;\n    }\n\n    /* Projected page content arrives through ngComponentOutlet and carries no\n       theme of its own. Without this scope a consuming app's plain <h2> renders\n       in the browser default colour on the styleguide's dark shell \u2014 measured at\n       rgb(26,26,46) on a dark ground, which is darker than the body text beneath\n       it and inverts the hierarchy. These are deliberately element selectors:\n       the content is authored by the consumer and carries no classes we know. */\n    .prism-page-renderer__component :is(h1, h2, h3, h4, h5, h6) {\n      color: var(--prism-text);\n      font-family: var(--prism-font-sans);\n      font-weight: 600;\n      letter-spacing: -0.01em;\n      line-height: 1.25;\n      margin: var(--sp-6) 0 var(--sp-3);\n    }\n    .prism-page-renderer__component :is(h1, h2, h3, h4, h5, h6):first-child {\n      margin-top: 0;\n    }\n    .prism-page-renderer__component h1 { font-size: 24px; }\n    .prism-page-renderer__component h2 { font-size: 20px; }\n    .prism-page-renderer__component h3 { font-size: 17px; }\n    .prism-page-renderer__component :is(h4, h5, h6) { font-size: var(--fs-xl); }\n\n    .prism-page-renderer__component :is(p, ul, ol) { margin: 0 0 var(--sp-4); }\n    .prism-page-renderer__component :is(strong, b) { color: var(--prism-text); }\n    .prism-page-renderer__component a { color: var(--prism-primary); }\n    .prism-page-renderer__component :is(code, pre) {\n      font-family: var(--prism-font-mono);\n      font-size: var(--fs-md);\n      color: var(--prism-text);\n    }\n    .prism-page-renderer__json {\n      margin: 0;\n      padding: 24px;\n      font-size: 12px;\n      font-family: monospace;\n      color: var(--prism-text-muted);\n      white-space: pre-wrap;\n    }\n  "] }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPageRendererComponent, { className: "PrismPageRendererComponent", filePath: "app/page-renderer/prism-page-renderer.component.ts", lineNumber: 51 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPageRendererComponent, { className: "PrismPageRendererComponent", filePath: "app/page-renderer/prism-page-renderer.component.ts", lineNumber: 86 }); })();

package/dist/app/panels/a11y/a11y-audit.service.d.ts

@@ -14,6 +14,6 @@ export declare class A11yAuditService {
     scheduleAudit(element: Element, config?: A11yCoreConfig, debounceMs?: number): void;
     clear(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<A11yAuditService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<A11yAuditService>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
 //# sourceMappingURL=a11y-audit.service.d.ts.map

package/dist/app/panels/a11y/a11y-audit.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y-audit.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-audit.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,UAAU,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;;AAEvE,wBAAgB,cAAc,CAAC,OAAO,EAAE,UAAU,GAAG,eAAe,CAkBnE;AAED,wBAAsB,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,cAAc,GAAG,OAAO,CAAC,UAAU,CAAC,CAYjG;AAED,qBACa,gBAAgB;IAC3B,QAAQ,CAAC,OAAO,4DAAmC;IACnD,QAAQ,CAAC,OAAO,kDAAiB;IACjC,QAAQ,CAAC,KAAK,wDAA+B;IAE7C,QAAQ,CAAC,WAAW,yDAGjB;IAEH,OAAO,CAAC,KAAK,CAA8C;IAC3D,OAAO,CAAC,SAAS,CAAS;;IAS1B,aAAa,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,cAAc,EAAE,UAAU,SAAM,GAAG,IAAI;IAsBhF,KAAK,IAAI,IAAI;yCA1CF,gBAAgB;6CAAhB,gBAAgB;CAmD5B"}
+{"version":3,"file":"a11y-audit.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-audit.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,UAAU,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;;AAEvE,wBAAgB,cAAc,CAAC,OAAO,EAAE,UAAU,GAAG,eAAe,CAkBnE;AAED,wBAAsB,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,cAAc,GAAG,OAAO,CAAC,UAAU,CAAC,CAYjG;AAED,qBACa,gBAAgB;IAC3B,QAAQ,CAAC,OAAO,4DAAmC;IACnD,QAAQ,CAAC,OAAO,kDAAiB;IACjC,QAAQ,CAAC,KAAK,wDAA+B;IAE7C,QAAQ,CAAC,WAAW,yDAGjB;IAEH,OAAO,CAAC,KAAK,CAA8C;IAC3D,OAAO,CAAC,SAAS,CAAS;;IAS1B,aAAa,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,cAAc,EAAE,UAAU,SAAM,GAAG,IAAI;IAsBhF,KAAK,IAAI,IAAI;yCA1CF,gBAAgB;;CAmD5B"}

package/dist/app/panels/a11y/a11y-header-badge.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y-header-badge.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-header-badge.component.ts"],"names":[],"mappings":";AAcA,KAAK,OAAO,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAC;AAExC,qBAqFa,wBAAwB;IACnC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2C;IACpE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAE9D,SAAS,CAAC,QAAQ,CAAC,IAAI;;;;cAoBpB;IAEH,OAAO,CAAC,cAAc;yCA1BX,wBAAwB;2CAAxB,wBAAwB;CAsCpC"}
+{"version":3,"file":"a11y-header-badge.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-header-badge.component.ts"],"names":[],"mappings":";AAeA,KAAK,OAAO,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAC;AAExC,qBAiBa,wBAAwB;IACnC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2C;IACpE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAE9D,SAAS,CAAC,QAAQ,CAAC,IAAI;;;;cAoBpB;IAEH,OAAO,CAAC,cAAc;yCA1BX,wBAAwB;2CAAxB,wBAAwB;CAsCpC"}

package/dist/app/panels/a11y/a11y-header-badge.component.js

@@ -1,24 +1,13 @@
 import { ChangeDetectionStrategy, Component, computed, inject, } from '@angular/core';
 import { PRISM_CONFIG, PRISM_MANIFEST } from '../../tokens/prism-tokens.js';
+import { PrismMetricBadgeComponent } from '../../shared/prism-metric-badge.component.js';
 import { resolveA11yThresholds } from './a11y-thresholds.js';
 import * as i0 from "@angular/core";
 function A11yHeaderBadgeComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "span", 1);
-    i0.ɵɵdomElement(1, "span", 2);
-    i0.ɵɵdomElementStart(2, "span", 3);
-    i0.ɵɵtext(3, "A11y");
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(4, "span", 4);
-    i0.ɵɵtext(5);
-    i0.ɵɵdomElementStart(6, "small");
-    i0.ɵɵtext(7, "%");
-    i0.ɵɵdomElementEnd()()();
+    i0.ɵɵelement(0, "prism-metric-badge", 0);
 } if (rf & 2) {
     const d_r1 = ctx;
-    i0.ɵɵclassProp("a11y-pill--ok", d_r1.variant === "ok")("a11y-pill--warn", d_r1.variant === "warn")("a11y-pill--danger", d_r1.variant === "danger");
-    i0.ɵɵdomProperty("title", d_r1.title);
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(d_r1.score);
+    i0.ɵɵproperty("value", d_r1.score + "%")("variant", d_r1.variant)("title", d_r1.title);
 } }
 export class A11yHeaderBadgeComponent {
     manifest = inject(PRISM_MANIFEST);
@@ -57,29 +46,31 @@ export class A11yHeaderBadgeComponent {
         return 'ok';
     }
     static ɵfac = function A11yHeaderBadgeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11yHeaderBadgeComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yHeaderBadgeComponent, selectors: [["prism-a11y-header-badge"]], decls: 1, vars: 1, consts: [[1, "a11y-pill", 3, "a11y-pill--ok", "a11y-pill--warn", "a11y-pill--danger", "title"], [1, "a11y-pill", 3, "title"], [1, "a11y-pill__dot"], [1, "a11y-pill__label"], [1, "a11y-pill__value"]], template: function A11yHeaderBadgeComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, A11yHeaderBadgeComponent_Conditional_0_Template, 8, 8, "span", 0);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yHeaderBadgeComponent, selectors: [["prism-a11y-header-badge"]], decls: 1, vars: 1, consts: [["icon", "accessibility", "label", "Library accessibility score", 3, "value", "variant", "title"]], template: function A11yHeaderBadgeComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, A11yHeaderBadgeComponent_Conditional_0_Template, 1, 3, "prism-metric-badge", 0);
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.data()) ? 0 : -1, tmp_0_0);
-        } }, styles: ["[_nghost-%COMP%] { display: inline-flex; align-items: center; }\n\n    .a11y-pill[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      padding: 2px 10px;\n      border-radius: 9999px;\n      line-height: 1.4;\n      border: 1px solid var(--prism-border);\n      background: var(--prism-input-bg);\n      color: var(--prism-text-muted);\n      white-space: nowrap;\n    }\n\n    .a11y-pill__dot[_ngcontent-%COMP%] {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: currentColor;\n    }\n\n    .a11y-pill__label[_ngcontent-%COMP%] {\n      color: var(--prism-text-ghost);\n      letter-spacing: 0.02em;\n    }\n\n    .a11y-pill__value[_ngcontent-%COMP%] {\n      color: var(--prism-text);\n      font-weight: 600;\n    }\n    .a11y-pill__value[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n      font-size: 9px;\n      margin-left: 1px;\n      color: var(--prism-text-muted);\n      font-weight: 500;\n    }\n\n    .a11y-pill--ok[_ngcontent-%COMP%] {\n      color: var(--prism-success);\n      border-color: color-mix(in srgb, var(--prism-success) 35%, transparent);\n      background: color-mix(in srgb, var(--prism-success) 12%, transparent);\n    }\n    .a11y-pill--ok[_ngcontent-%COMP%]   .a11y-pill__label[_ngcontent-%COMP%], \n   .a11y-pill--ok[_ngcontent-%COMP%]   .a11y-pill__value[_ngcontent-%COMP%] { color: var(--prism-success); }\n\n    .a11y-pill--warn[_ngcontent-%COMP%] {\n      color: var(--prism-warn);\n      border-color: color-mix(in srgb, var(--prism-warn) 35%, transparent);\n      background: color-mix(in srgb, var(--prism-warn) 12%, transparent);\n    }\n    .a11y-pill--warn[_ngcontent-%COMP%]   .a11y-pill__label[_ngcontent-%COMP%], \n   .a11y-pill--warn[_ngcontent-%COMP%]   .a11y-pill__value[_ngcontent-%COMP%] { color: var(--prism-warn); }\n\n    .a11y-pill--danger[_ngcontent-%COMP%] {\n      color: var(--prism-danger);\n      border-color: color-mix(in srgb, var(--prism-danger) 35%, transparent);\n      background: color-mix(in srgb, var(--prism-danger) 12%, transparent);\n    }\n    .a11y-pill--danger[_ngcontent-%COMP%]   .a11y-pill__label[_ngcontent-%COMP%], \n   .a11y-pill--danger[_ngcontent-%COMP%]   .a11y-pill__value[_ngcontent-%COMP%] { color: var(--prism-danger); }"] });
+        } }, dependencies: [PrismMetricBadgeComponent], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yHeaderBadgeComponent, [{
         type: Component,
-        args: [{ selector: 'prism-a11y-header-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+        args: [{
+                selector: 'prism-a11y-header-badge',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                imports: [PrismMetricBadgeComponent],
+                template: `
     @if (data(); as d) {
-    <span
-      class="a11y-pill"
-      [class.a11y-pill--ok]="d.variant === 'ok'"
-      [class.a11y-pill--warn]="d.variant === 'warn'"
-      [class.a11y-pill--danger]="d.variant === 'danger'"
+    <prism-metric-badge
+      icon="accessibility"
+      label="Library accessibility score"
+      [value]="d.score + '%'"
+      [variant]="d.variant"
       [title]="d.title"
-    >
-      <span class="a11y-pill__dot"></span>
-      <span class="a11y-pill__label">A11y</span>
-      <span class="a11y-pill__value">{{ d.score }}<small>%</small></span>
-    </span>
+    />
     }
-  `, styles: ["\n    :host { display: inline-flex; align-items: center; }\n\n    .a11y-pill {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      padding: 2px 10px;\n      border-radius: 9999px;\n      line-height: 1.4;\n      border: 1px solid var(--prism-border);\n      background: var(--prism-input-bg);\n      color: var(--prism-text-muted);\n      white-space: nowrap;\n    }\n\n    .a11y-pill__dot {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: currentColor;\n    }\n\n    .a11y-pill__label {\n      color: var(--prism-text-ghost);\n      letter-spacing: 0.02em;\n    }\n\n    .a11y-pill__value {\n      color: var(--prism-text);\n      font-weight: 600;\n    }\n    .a11y-pill__value small {\n      font-size: 9px;\n      margin-left: 1px;\n      color: var(--prism-text-muted);\n      font-weight: 500;\n    }\n\n    .a11y-pill--ok {\n      color: var(--prism-success);\n      border-color: color-mix(in srgb, var(--prism-success) 35%, transparent);\n      background: color-mix(in srgb, var(--prism-success) 12%, transparent);\n    }\n    .a11y-pill--ok .a11y-pill__label,\n    .a11y-pill--ok .a11y-pill__value { color: var(--prism-success); }\n\n    .a11y-pill--warn {\n      color: var(--prism-warn);\n      border-color: color-mix(in srgb, var(--prism-warn) 35%, transparent);\n      background: color-mix(in srgb, var(--prism-warn) 12%, transparent);\n    }\n    .a11y-pill--warn .a11y-pill__label,\n    .a11y-pill--warn .a11y-pill__value { color: var(--prism-warn); }\n\n    .a11y-pill--danger {\n      color: var(--prism-danger);\n      border-color: color-mix(in srgb, var(--prism-danger) 35%, transparent);\n      background: color-mix(in srgb, var(--prism-danger) 12%, transparent);\n    }\n    .a11y-pill--danger .a11y-pill__label,\n    .a11y-pill--danger .a11y-pill__value { color: var(--prism-danger); }\n  "] }]
+  `,
+            }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yHeaderBadgeComponent, { className: "A11yHeaderBadgeComponent", filePath: "app/panels/a11y/a11y-header-badge.component.ts", lineNumber: 102 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yHeaderBadgeComponent, { className: "A11yHeaderBadgeComponent", filePath: "app/panels/a11y/a11y-header-badge.component.ts", lineNumber: 35 }); })();

package/dist/app/panels/a11y/a11y-keyboard-overlay.component.js

@@ -78,7 +78,7 @@ export class A11yKeyboardOverlayComponent {
             i0.ɵɵconditionalCreate(0, A11yKeyboardOverlayComponent_Conditional_0_Template, 2, 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.panelState.activeTab() === "keyboard" ? 0 : -1);
-        } }, styles: ["[_nghost-%COMP%] {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      z-index: 100;\n      overflow: hidden;\n    }\n\n    .prism-a11y-kbd-ov__highlight[_ngcontent-%COMP%] {\n      position: absolute;\n      border: 2px solid rgba(129, 140, 248, 0.5);\n      border-radius: 4px;\n      background: rgba(129, 140, 248, 0.06);\n      box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.08);\n      pointer-events: none;\n    }\n\n    .prism-a11y-kbd-ov__badge[_ngcontent-%COMP%] {\n      position: absolute;\n      width: 20px;\n      height: 20px;\n      background: var(--prism-primary);\n      color: white;\n      border-radius: 50%;\n      font-size: 10px;\n      font-weight: 700;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0 0 0 2px white, 0 2px 6px rgba(0, 0, 0, 0.3);\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n      pointer-events: auto;\n      cursor: default;\n    }"] });
+        } }, styles: ["[_nghost-%COMP%] {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      z-index: 100;\n      overflow: hidden;\n    }\n\n    .prism-a11y-kbd-ov__highlight[_ngcontent-%COMP%] {\n      position: absolute;\n      border: 2px solid rgba(129, 140, 248, 0.5);\n      border-radius: 4px;\n      background: rgba(129, 140, 248, 0.06);\n      box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.08);\n      pointer-events: none;\n    }\n\n    .prism-a11y-kbd-ov__badge[_ngcontent-%COMP%] {\n      position: absolute;\n      width: 20px;\n      height: 20px;\n      background: var(--%NS%prism-primary);\n      color: white;\n      border-radius: 50%;\n      font-size: 10px;\n      font-weight: 700;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0 0 0 2px white, 0 2px 6px rgba(0, 0, 0, 0.3);\n      font-family: var(--%NS%prism-font-sans, system-ui, sans-serif);\n      pointer-events: auto;\n      cursor: default;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yKeyboardOverlayComponent, [{
         type: Component,

package/dist/app/panels/a11y/a11y-keyboard.component.js

@@ -71,7 +71,7 @@ export class A11yKeyboardComponent {
             i0.ɵɵconditionalCreate(0, A11yKeyboardComponent_Conditional_0_Template, 2, 0, "div", 0)(1, A11yKeyboardComponent_Conditional_1_Template, 2, 0, "div", 0)(2, A11yKeyboardComponent_Conditional_2_Template, 3, 0, "div", 1);
         } if (rf & 2) {
             i0.ɵɵconditional(!ctx.rendererService.renderedElement() ? 0 : !ctx.items().length ? 1 : 2);
-        } }, styles: ["[_nghost-%COMP%] { display: block; height: 100%; overflow: auto; }\n\n    .kb-empty[_ngcontent-%COMP%] {\n      display: flex; align-items: center; justify-content: center;\n      min-height: 100px; color: var(--prism-text-muted); font-size: 13px;\n    }\n\n    .kb-body[_ngcontent-%COMP%] {\n      padding: 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .kb-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 110px 1fr auto;\n      align-items: center;\n      gap: 12px;\n      padding: 9px 14px;\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-radius: 8px;\n    }\n\n    .kb-keys[_ngcontent-%COMP%] { display: flex; gap: 4px; }\n    .kb-keys[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 10.5px;\n      padding: 1px 5px;\n      border-radius: 4px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n    }\n\n    .kb-desc[_ngcontent-%COMP%] {\n      font-size: 12.5px;\n      color: var(--prism-text-2);\n    }\n\n    .kb-tgt[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 11px;\n      color: var(--prism-primary);\n      padding: 2px 7px;\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      border-radius: var(--radius-xs);\n    }"] });
+        } }, styles: ["[_nghost-%COMP%] { display: block; height: 100%; overflow: auto; }\n\n    .kb-empty[_ngcontent-%COMP%] {\n      display: flex; align-items: center; justify-content: center;\n      min-height: 100px; color: var(--%NS%prism-text-muted); font-size: 13px;\n    }\n\n    .kb-body[_ngcontent-%COMP%] {\n      padding: 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .kb-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 110px 1fr auto;\n      align-items: center;\n      gap: 12px;\n      padding: 9px 14px;\n      background: var(--%NS%prism-bg-surface);\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: 8px;\n    }\n\n    .kb-keys[_ngcontent-%COMP%] { display: flex; gap: 4px; }\n    .kb-keys[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: 10.5px;\n      padding: 1px 5px;\n      border-radius: 4px;\n      background: var(--%NS%prism-input-bg);\n      border: 1px solid var(--%NS%prism-border);\n      color: var(--%NS%prism-text-muted);\n    }\n\n    .kb-desc[_ngcontent-%COMP%] {\n      font-size: 12.5px;\n      color: var(--%NS%prism-text-2);\n    }\n\n    .kb-tgt[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: 11px;\n      color: var(--%NS%prism-primary);\n      padding: 2px 7px;\n      background: color-mix(in srgb, var(--%NS%prism-primary) 10%, transparent);\n      border-radius: var(--%NS%radius-xs);\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yKeyboardComponent, [{
         type: Component,

package/dist/app/panels/a11y/a11y-keyboard.service.d.ts

@@ -3,6 +3,6 @@ import * as i0 from "@angular/core";
 export declare class A11yKeyboardService {
     extractTabOrder(root: Element, getById?: (id: string) => Element | null): FocusableElement[];
     static ɵfac: i0.ɵɵFactoryDeclaration<A11yKeyboardService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<A11yKeyboardService>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
 //# sourceMappingURL=a11y-keyboard.service.d.ts.map

package/dist/app/panels/a11y/a11y-keyboard.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y-keyboard.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-keyboard.service.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;;AA2BxD,qBACa,mBAAmB;IAC9B,eAAe,CACb,IAAI,EAAE,OAAO,EACb,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,GACvC,gBAAgB,EAAE;yCAJV,mBAAmB;6CAAnB,mBAAmB;CAyB/B"}
+{"version":3,"file":"a11y-keyboard.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-keyboard.service.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;;AA2BxD,qBACa,mBAAmB;IAC9B,eAAe,CACb,IAAI,EAAE,OAAO,EACb,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,GACvC,gBAAgB,EAAE;yCAJV,mBAAmB;;CAyB/B"}

package/dist/app/panels/a11y/a11y-overlay-host.component.js

@@ -104,7 +104,7 @@ export class A11yOverlayHostComponent {
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.bounds()) ? 0 : -1, tmp_0_0);
-        } }, styles: ["[_nghost-%COMP%] { display: contents; }\n    .a11y-mark[_ngcontent-%COMP%] {\n      position: absolute;\n      pointer-events: none;\n      z-index: 1;\n    }\n    .outline[_ngcontent-%COMP%] {\n      border: 2px solid rgba(59, 130, 246, 0.95);\n      border-radius: 4px;\n      background: rgba(59, 130, 246, 0.08);\n    }\n    .tag[_ngcontent-%COMP%] {\n      display: inline-block;\n      padding: 2px 6px;\n      border-radius: 4px;\n      background: rgba(17, 24, 39, 0.92);\n      color: var(--prism-text-light, #fff);\n      font: 11px/1.4 var(--font-mono);\n      white-space: nowrap;\n      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);\n    }\n    .kb[_ngcontent-%COMP%]   .tag[_ngcontent-%COMP%] { background: rgba(5, 150, 105, 0.95); }"] });
+        } }, styles: ["[_nghost-%COMP%] { display: contents; }\n    .a11y-mark[_ngcontent-%COMP%] {\n      position: absolute;\n      pointer-events: none;\n      z-index: 1;\n    }\n    .outline[_ngcontent-%COMP%] {\n      border: 2px solid rgba(59, 130, 246, 0.95);\n      border-radius: 4px;\n      background: rgba(59, 130, 246, 0.08);\n    }\n    .tag[_ngcontent-%COMP%] {\n      display: inline-block;\n      padding: 2px 6px;\n      border-radius: 4px;\n      background: rgba(17, 24, 39, 0.92);\n      color: var(--%NS%prism-text-light, #fff);\n      font: 11px/1.4 var(--%NS%font-mono);\n      white-space: nowrap;\n      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);\n    }\n    .kb[_ngcontent-%COMP%]   .tag[_ngcontent-%COMP%] { background: rgba(5, 150, 105, 0.95); }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yOverlayHostComponent, [{
         type: Component,