@ng-prism/core 22.2.1 → 22.4.0

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, DestroyRef, effect, inject, Injector, input, untracked, viewChild, ViewContainerRef, } from '@angular/core';
+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';
@@ -10,11 +10,11 @@ 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
+ * It 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
+ * 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 {
@@ -34,7 +34,7 @@ export class PrismOverviewCellComponent {
         // 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
+        // bare `07` would only appear if those two facts stopped lining up, i.e. the
         // grid indexing past the array it iterates, or `name` becoming optional.
         return variant ? `${number} ${variant.name}` : number;
     }, /* @ts-ignore */
@@ -42,7 +42,7 @@ export class PrismOverviewCellComponent {
     isWide = computed(() => {
         const config = this.component().meta.showcaseConfig;
         const variant = config.variants?.[this.index()];
-        return ((variant?.canvasLayout ?? config.canvasLayout ?? 'fit') === 'stretch');
+        return (variant?.canvasLayout ?? config.canvasLayout ?? 'fit') === 'stretch';
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isWide" }] : /* istanbul ignore next */ []));
     constructor() {
@@ -56,10 +56,9 @@ export class PrismOverviewCellComponent {
     // 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
+    // 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.
+    // instead of just its own cell. Hence: contain here, propagate there.
     mount(component, index) {
         try {
             this.outlet().clear();
@@ -69,14 +68,12 @@ export class PrismOverviewCellComponent {
             const { values, activeContent } = computeVariantState(component, index);
             const injector = Injector.create({
                 providers: component.meta.showcaseConfig.providers ?? [],
-                parent: this.injector,
+                parent: this.injector
             });
-            const projectableNodes = activeContent
-                ? parseContentToNodes(activeContent)
-                : undefined;
+            const projectableNodes = activeContent ? parseContentToNodes(activeContent) : undefined;
             const ref = this.outlet().createComponent(component.type, {
                 injector,
-                projectableNodes,
+                projectableNodes
             });
             const knownInputs = buildKnownInputs(component);
             for (const [key, value] of Object.entries(values)) {
@@ -93,8 +90,8 @@ export class PrismOverviewCellComponent {
             // *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.
+            // place, which shows "this variant failed" instead of 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);
         }
@@ -117,20 +114,15 @@ export class PrismOverviewCellComponent {
             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  }"] });
+        } }, styles: ["[_nghost-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: var(--%NS%sp-2);\n    min-width: 0;\n}\n\n\n\n[data-wide][_nghost-%COMP%] {\n    grid-column: 1 / -1;\n}\n\n.cell__stage[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    padding: var(--%NS%sp-5);\n    overflow: hidden;\n    outline: 1px solid var(--%NS%prism-stage-edge);\n    outline-offset: -1px;\n    background-color: var(--%NS%prism-stage);\n    border-radius: var(--%NS%radius-sm);\n}\n\n.cell__mount[_ngcontent-%COMP%] {\n    display: inline-block;\n    max-width: 100%;\n}\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    overflow: hidden;\n    text-overflow: ellipsis;\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}", "[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\n\n\n\n\n\n\n\n\n\n\n\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    --%NS%prism-measure: #ca00c1;\n    --%NS%prism-measure-plate: var(--%NS%prism-void-light, #f7f5fc);\n  }\n  [data-bg=\"dark\"][_ngcontent-%COMP%] {\n    background-color: var(--%NS%prism-void-dark, #07050f);\n    background-image: none;\n    --%NS%prism-measure: #f632ff;\n    --%NS%prism-measure-plate: var(--%NS%prism-void-dark, #07050f);\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"] }]
+                    '[attr.data-wide]': "isWide() ? '' : null"
+                }, template: "<div\n    class=\"cell__stage\"\n    [attr.data-bg]=\"bg()\">\n    <div class=\"cell__mount\"><ng-container #outlet /></div>\n</div>\n<span class=\"cell__caption\">{{ caption() }}</span>\n", styles: [":host {\n    display: flex;\n    flex-direction: column;\n    gap: var(--sp-2);\n    min-width: 0;\n}\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    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    padding: var(--sp-5);\n    overflow: hidden;\n    outline: 1px solid var(--prism-stage-edge);\n    outline-offset: -1px;\n    background-color: var(--prism-stage);\n    border-radius: var(--radius-sm);\n}\n\n.cell__mount {\n    display: inline-block;\n    max-width: 100%;\n}\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, and gaining a new\n   contrast rule per CanvasBg value is the cost the sheet exists to\n   avoid. */\n.cell__caption {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--prism-font-mono);\n    font-size: var(--fs-xs);\n    color: var(--prism-text-muted);\n    white-space: nowrap;\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 the surface a component was\n     designed against, and their colour is absolute rather than a theme token,\n     which makes them the values to declare for a screenshot baseline. Use\n     \"dots\" for the grid. */\n  /* These two also re-point --prism-measure. Other overlays use theme colours\n     on theme surfaces, but these grounds ignore the theme: \"light\" stays\n     near-white in the dark theme and \"dark\" stays near-black in the light one.\n     The dark theme's magenta reaches only 2.85:1 on the light ground, under the\n     4.5:1 its 9px readout needs, so the measurement colour has to follow the\n     ground, not the theme.\n\n     --prism-measure-plate follows it for the same reason. It is the surface\n     the measuring tool's value label paints itself on, so the label reads as a\n     gap in the measurement line rather than a badge on top of it. At its\n     --prism-stage fallback it would be the theme's stage under a re-pointed\n     foreground: the light theme's magenta on the dark theme's stage reads\n     3.71:1, the dark theme's on white 3.08:1. Pinned to the ground the same way,\n     the pairs reach 4.54:1 and 6.57:1. A color-mix against the ground would\n     work too, but this file already states both grounds literally, and one\n     mechanism per decision is enough.\n\n     Literal values because this file is theme-independent, like the two\n     grounds below. Keep them in step with --prism-measure in\n     prism-default-theme.ts; semantic-colours.spec.ts fails if they drift. */\n  [data-bg=\"light\"] {\n    background-color: var(--prism-void-light, #f7f5fc);\n    background-image: none;\n    --prism-measure: #ca00c1;\n    --prism-measure-plate: var(--prism-void-light, #f7f5fc);\n  }\n  [data-bg=\"dark\"] {\n    background-color: var(--prism-void-dark, #07050f);\n    background-image: none;\n    --prism-measure: #f632ff;\n    --prism-measure-plate: var(--prism-void-dark, #07050f);\n  }\n\n  /* \"transparent\" shares the checkerboard. In the app the checkerboard is\n     already the UI's sign for \"no surface\", and a see-through stage would only\n     show the shell behind it. Only CAPTURE_STYLES tells the two apart. */\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,
+                        read: ViewContainerRef
                     }, isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismOverviewCellComponent, { className: "PrismOverviewCellComponent", filePath: "app/overview/prism-overview-cell.component.ts", lineNumber: 99 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismOverviewCellComponent, { className: "PrismOverviewCellComponent", filePath: "app/overview/prism-overview-cell.component.ts", lineNumber: 32 }); })();

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

@@ -1,10 +1,10 @@
 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
+ * 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
+ * No controls of any kind: columns follow the window, and
  * everything else a cell shows is what the variant itself declared.
  */
 export declare class PrismOverviewComponent {

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

@@ -1 +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"}
+{"version":3,"file":"prism-overview.component.d.ts","sourceRoot":"","sources":["../../../src/app/overview/prism-overview.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;;AAGrE;;;;;;GAMG;AACH,qBAQa,sBAAsB;IAC/B,iFAAiF;IACjF,QAAQ,CAAC,eAAe,+DAAwC;IAEhE,SAAS,CAAC,QAAQ,CAAC,QAAQ,8EAA8E;yCAJhG,sBAAsB;2CAAtB,sBAAsB;CAKlC"}

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, input, } from '@angular/core';
+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) {
@@ -18,10 +18,10 @@ function PrismOverviewComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵrepeater(ctx_r2.variants());
 } }
 /**
- * All variants of one component at once — a contact sheet rather than a
+ * 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
+ * No controls of any kind: columns follow the window, and
  * everything else a cell shows is what the variant itself declared.
  */
 export class PrismOverviewComponent {
@@ -36,18 +36,10 @@ export class PrismOverviewComponent {
         } 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    }"] });
+        } }, dependencies: [PrismOverviewCellComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n}\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    align-content: start;\n    padding: var(--%NS%sp-6);\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  "] }]
+        args: [{ selector: 'prism-overview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismOverviewCellComponent], template: "@if (activeComponent(); as component) {\n    <div\n        class=\"prism-overview\"\n        role=\"list\">\n        @for (_ of variants(); track $index) {\n            <prism-overview-cell\n                [component]=\"component\"\n                [index]=\"$index\" />\n        }\n    </div>\n}\n", styles: [":host {\n    display: block;\n}\n\n.prism-overview {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n    gap: var(--sp-4);\n    align-content: start;\n    padding: var(--sp-6);\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 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismOverviewComponent, { className: "PrismOverviewComponent", filePath: "app/overview/prism-overview.component.ts", lineNumber: 20 }); })();

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,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"}
+{"version":3,"file":"prism-page-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/page-renderer/prism-page-renderer.component.ts"],"names":[],"mappings":";AAIA,qBAOa,0BAA0B;IACnC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmC;IACxD,SAAS,CAAC,QAAQ,CAAC,IAAI,iFAAuB;;yCAHrC,0BAA0B;2CAA1B,0BAA0B;CAWtC"}

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

@@ -1,5 +1,5 @@
-import { Component, effect, ElementRef, inject } from '@angular/core';
 import { JsonPipe, NgComponentOutlet } from '@angular/common';
+import { Component, effect, ElementRef, inject } from '@angular/core';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import * as i0 from "@angular/core";
 function PrismPageRendererComponent_Conditional_0_Case_3_Template(rf, ctx) { if (rf & 1) {
@@ -54,23 +54,10 @@ 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(--%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    }"] });
+        } }, dependencies: [NgComponentOutlet, JsonPipe], styles: ["[_nghost-%COMP%] {\n    display: block;\n    flex: 1;\n    overflow-y: auto;\n}\n\n.prism-page-renderer__title[_ngcontent-%COMP%] {\n    padding: 16px 20px;\n    margin: 0;\n    font-family: var(--%NS%prism-font-sans);\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--%NS%prism-text);\n    letter-spacing: -0.01em;\n    background: var(--%NS%prism-bg-surface);\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}\n\n.prism-page-renderer__component[_ngcontent-%COMP%] {\n    padding: var(--%NS%sp-5) var(--%NS%sp-6);\n    font-family: var(--%NS%prism-font-sans);\n    font-size: var(--%NS%fs-lg);\n    line-height: 1.6;\n    color: var(--%NS%prism-text-2);\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    margin: var(--%NS%sp-6) 0 var(--%NS%sp-3);\n    font-family: var(--%NS%prism-font-sans);\n    font-weight: 600;\n    line-height: 1.25;\n    color: var(--%NS%prism-text);\n    letter-spacing: -0.01em;\n}\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\n.prism-page-renderer__component[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n    font-size: 24px;\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n    font-size: 20px;\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    font-size: 17px;\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%]   :is(h4[_ngcontent-%COMP%], h5[_ngcontent-%COMP%], h6[_ngcontent-%COMP%]) {\n    font-size: var(--%NS%fs-xl);\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%]   :is(p[_ngcontent-%COMP%], ul[_ngcontent-%COMP%], ol[_ngcontent-%COMP%]) {\n    margin: 0 0 var(--%NS%sp-4);\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%]   :is(strong[_ngcontent-%COMP%], b[_ngcontent-%COMP%]) {\n    color: var(--%NS%prism-text);\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%]   a[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-primary);\n}\n\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\n.prism-page-renderer__json[_ngcontent-%COMP%] {\n    padding: 24px;\n    margin: 0;\n    font-family: monospace;\n    font-size: 12px;\n    color: var(--%NS%prism-text-muted);\n    white-space: pre-wrap;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismPageRendererComponent, [{
         type: Component,
-        args: [{ selector: 'prism-page-renderer', standalone: true, imports: [JsonPipe, NgComponentOutlet], template: `
-    @if (page(); as p) {
-    <div class="prism-page-renderer">
-      <h2 class="prism-page-renderer__title">{{ p.title }}</h2>
-      @switch (p.type) { @case ('custom') {
-      <pre class="prism-page-renderer__json">{{ $any(p).data | json }}</pre>
-      } @case ('component') {
-      <div class="prism-page-renderer__component">
-        <ng-container *ngComponentOutlet="$any(p).component" />
-      </div>
-      } }
-    </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: 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  "] }]
+        args: [{ selector: 'prism-page-renderer', standalone: true, imports: [JsonPipe, NgComponentOutlet], template: "@if (page(); as p) {\n    <div class=\"prism-page-renderer\">\n        <h2 class=\"prism-page-renderer__title\">{{ p.title }}</h2>\n        @switch (p.type) {\n            @case ('custom') {\n                <pre class=\"prism-page-renderer__json\">{{ $any(p).data | json }}</pre>\n            }\n            @case ('component') {\n                <div class=\"prism-page-renderer__component\">\n                    <ng-container *ngComponentOutlet=\"$any(p).component\" />\n                </div>\n            }\n        }\n    </div>\n}\n", styles: [":host {\n    display: block;\n    flex: 1;\n    overflow-y: auto;\n}\n\n.prism-page-renderer__title {\n    padding: 16px 20px;\n    margin: 0;\n    font-family: var(--prism-font-sans);\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--prism-text);\n    letter-spacing: -0.01em;\n    background: var(--prism-bg-surface);\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}\n\n.prism-page-renderer__component {\n    padding: var(--sp-5) var(--sp-6);\n    font-family: var(--prism-font-sans);\n    font-size: var(--fs-lg);\n    line-height: 1.6;\n    color: var(--prism-text-2);\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 (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 element selectors because\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    margin: var(--sp-6) 0 var(--sp-3);\n    font-family: var(--prism-font-sans);\n    font-weight: 600;\n    line-height: 1.25;\n    color: var(--prism-text);\n    letter-spacing: -0.01em;\n}\n\n.prism-page-renderer__component :is(h1, h2, h3, h4, h5, h6):first-child {\n    margin-top: 0;\n}\n\n.prism-page-renderer__component h1 {\n    font-size: 24px;\n}\n\n.prism-page-renderer__component h2 {\n    font-size: 20px;\n}\n\n.prism-page-renderer__component h3 {\n    font-size: 17px;\n}\n\n.prism-page-renderer__component :is(h4, h5, h6) {\n    font-size: var(--fs-xl);\n}\n\n.prism-page-renderer__component :is(p, ul, ol) {\n    margin: 0 0 var(--sp-4);\n}\n\n.prism-page-renderer__component :is(strong, b) {\n    color: var(--prism-text);\n}\n\n.prism-page-renderer__component a {\n    color: var(--prism-primary);\n}\n\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\n.prism-page-renderer__json {\n    padding: 24px;\n    margin: 0;\n    font-family: monospace;\n    font-size: 12px;\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: 86 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPageRendererComponent, { className: "PrismPageRendererComponent", filePath: "app/page-renderer/prism-page-renderer.component.ts", lineNumber: 12 }); })();

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;;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;AAiBD,wBAAsB,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,cAAc,GAAG,OAAO,CAAC,UAAU,CAAC,CAcjG;AAED,qBACa,gBAAgB;IACzB,QAAQ,CAAC,OAAO,4DAAmC;IACnD,QAAQ,CAAC,OAAO,kDAAiB;IACjC,QAAQ,CAAC,KAAK,wDAA+B;IAE7C,QAAQ,CAAC,WAAW,yDAIjB;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;yCA3CJ,gBAAgB;;CAoD5B"}

package/dist/app/panels/a11y/a11y-audit.service.js

@@ -15,11 +15,23 @@ export function calculateScore(results) {
         moderate,
         minor,
         passes: results.passes.length,
-        incomplete: results.incomplete.length,
+        incomplete: results.incomplete.length
     };
 }
+/**
+ * axe-core is a dependency of `@ng-prism/core` and loaded lazily, so a failure
+ * here means the chunk could not be fetched, not that anything is missing.
+ */
+async function loadAxe() {
+    try {
+        return await import('axe-core');
+    }
+    catch (cause) {
+        throw new Error('Could not load axe-core, so the accessibility audit is unavailable. It ships with @ng-prism/core; check that the install is intact and the chunk is reachable.', { cause });
+    }
+}
 export async function runCoreAudit(element, config) {
-    const axe = await import('axe-core');
+    const axe = await loadAxe();
     const options = {};
     if (config?.rules) {
         const keys = Object.keys(config.rules);

package/dist/app/panels/a11y/a11y-core.plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y-core.plugin.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-core.plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAEvE,eAAO,MAAM,eAAe,EAAE,eAY7B,CAAC"}
+{"version":3,"file":"a11y-core.plugin.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-core.plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAEvE,eAAO,MAAM,eAAe,EAAE,eAQ7B,CAAC"}

package/dist/app/panels/a11y/a11y-core.plugin.js

@@ -5,5 +5,5 @@ export const A11Y_CORE_PANEL = {
     position: 'bottom',
     placement: 'addon',
     loadComponent: () => import('./a11y-panel.component.js').then((m) => m.A11yPanelComponent),
-    loadOverlayComponent: () => import('./a11y-overlay-host.component.js').then((m) => m.A11yOverlayHostComponent),
+    loadOverlayComponent: () => import('./a11y-overlay-host.component.js').then((m) => m.A11yOverlayHostComponent)
 };

package/dist/app/panels/a11y/a11y-dom-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y-dom-utils.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-dom-utils.ts"],"names":[],"mappings":"AAmDA,wBAAgB,eAAe,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAaxD;AAED,wBAAgB,OAAO,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAEhD;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,OAAO,EAChB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,GACvC,cAAc,CA8BhB;AAGD,wBAAgB,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,CAsChF;AAED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAIlD;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,MAAM,EAAE,CAQ/E"}
+{"version":3,"file":"a11y-dom-utils.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-dom-utils.ts"],"names":[],"mappings":"AAwDA,wBAAgB,eAAe,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAcxD;AAED,wBAAgB,OAAO,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAEhD;AAED,MAAM,WAAW,cAAc;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,GAAG,cAAc,CAmChH;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,CA4ChF;AAED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAIlD;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,MAAM,EAAE,CAS/E"}

package/dist/app/panels/a11y/a11y-dom-utils.js

@@ -30,7 +30,7 @@ const IMPLICIT_ROLES = {
     TBODY: 'rowgroup',
     DETAILS: 'group',
     ARTICLE: 'article',
-    SECTION: 'region',
+    SECTION: 'region'
 };
 const INPUT_TYPE_ROLES = {
     checkbox: 'checkbox',
@@ -41,10 +41,15 @@ const INPUT_TYPE_ROLES = {
     reset: 'button',
     button: 'button',
     image: 'button',
-    search: 'searchbox',
+    search: 'searchbox'
 };
 const HEADING_LEVELS = {
-    H1: 1, H2: 2, H3: 3, H4: 4, H5: 5, H6: 6,
+    H1: 1,
+    H2: 2,
+    H3: 3,
+    H4: 4,
+    H5: 5,
+    H6: 6
 };
 export function getImplicitRole(element) {
     const tag = element.tagName.toUpperCase();
@@ -64,9 +69,7 @@ export function computeAccessibleName(element, getById) {
     const labelledBy = element.getAttribute('aria-labelledby');
     if (labelledBy && getById) {
         const parts = labelledBy.trim().split(/\s+/);
-        const names = parts
-            .map((id) => getById(id)?.textContent?.trim() ?? '')
-            .filter(Boolean);
+        const names = parts.map((id) => getById(id)?.textContent?.trim() ?? '').filter(Boolean);
         if (names.length)
             return { name: names.join(' '), source: 'aria-labelledby' };
     }

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":";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"}
+{"version":3,"file":"a11y-header-badge.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-header-badge.component.ts"],"names":[],"mappings":";AAOA,KAAK,OAAO,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAC;AAExC,qBAOa,wBAAwB;IACjC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2C;IACpE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAE9D,SAAS,CAAC,QAAQ,CAAC,IAAI;;;;cAqBpB;IAEH,OAAO,CAAC,cAAc;yCA3Bb,wBAAwB;2CAAxB,wBAAwB;CAmCpC"}

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

@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component, computed, inject, } from '@angular/core';
-import { PRISM_CONFIG, PRISM_MANIFEST } from '../../tokens/prism-tokens.js';
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { PrismMetricBadgeComponent } from '../../shared/prism-metric-badge.component.js';
+import { PRISM_CONFIG, PRISM_MANIFEST } from '../../tokens/prism-tokens.js';
 import { resolveA11yThresholds } from './a11y-thresholds.js';
 import * as i0 from "@angular/core";
 function A11yHeaderBadgeComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
@@ -19,7 +19,7 @@ export class A11yHeaderBadgeComponent {
         const score = meta.total.score;
         const thresholds = resolveA11yThresholds({
             ...meta.thresholds,
-            ...this.config.a11y?.thresholds,
+            ...this.config.a11y?.thresholds
         });
         const variant = this.computeVariant(score, meta.total, thresholds);
         return {
@@ -28,7 +28,7 @@ export class A11yHeaderBadgeComponent {
             title: `Library A11y: ${score}% (target ${thresholds.score}%)\n` +
                 `${meta.total.auditedComponents} components · ${meta.total.auditedVariants} variants\n` +
                 `Violations: ${meta.total.critical} critical · ${meta.total.serious} serious · ` +
-                `${meta.total.moderate} moderate · ${meta.total.minor} minor`,
+                `${meta.total.moderate} moderate · ${meta.total.minor} minor`
         };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
@@ -55,22 +55,6 @@ export class A11yHeaderBadgeComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yHeaderBadgeComponent, [{
         type: Component,
-        args: [{
-                selector: 'prism-a11y-header-badge',
-                standalone: true,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                imports: [PrismMetricBadgeComponent],
-                template: `
-    @if (data(); as d) {
-    <prism-metric-badge
-      icon="accessibility"
-      label="Library accessibility score"
-      [value]="d.score + '%'"
-      [variant]="d.variant"
-      [title]="d.title"
-    />
-    }
-  `,
-            }]
+        args: [{ selector: 'prism-a11y-header-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismMetricBadgeComponent], template: "@if (data(); as d) {\n    <prism-metric-badge\n        icon=\"accessibility\"\n        label=\"Library accessibility score\"\n        [value]=\"d.score + '%'\"\n        [variant]=\"d.variant\"\n        [title]=\"d.title\" />\n}\n" }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yHeaderBadgeComponent, { className: "A11yHeaderBadgeComponent", filePath: "app/panels/a11y/a11y-header-badge.component.ts", lineNumber: 35 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yHeaderBadgeComponent, { className: "A11yHeaderBadgeComponent", filePath: "app/panels/a11y/a11y-header-badge.component.ts", lineNumber: 17 }); })();

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

@@ -1 +1 @@
-{"version":3,"file":"a11y-keyboard-overlay.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-keyboard-overlay.component.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;;AAGtE,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,qBA6Da,4BAA4B;IACvC,SAAS,CAAC,QAAQ,CAAC,UAAU,wBAAiC;IAC9D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA+B;IAC/D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAmC;IAE9D,SAAS,CAAC,QAAQ,CAAC,MAAM,0DAA+B;IAExD,OAAO,CAAC,KAAK,CAAuB;;IAsBpC,OAAO,CAAC,aAAa;yCA9BV,4BAA4B;2CAA5B,4BAA4B;CA6DxC"}
+{"version":3,"file":"a11y-keyboard-overlay.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-keyboard-overlay.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;;AAEtE,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,qBAOa,4BAA4B;IACrC,SAAS,CAAC,QAAQ,CAAC,UAAU,wBAAiC;IAC9D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA+B;IAC/D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAmC;IAE9D,SAAS,CAAC,QAAQ,CAAC,MAAM,0DAA+B;IAExD,OAAO,CAAC,KAAK,CAAuB;;IAuBpC,OAAO,CAAC,aAAa;yCA/BZ,4BAA4B;2CAA5B,4BAA4B;CA2DxC"}

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

@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, signal, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, signal } from '@angular/core';
+import { PrismRendererService } from '../../services/prism-renderer.service.js';
 import { A11yKeyboardService } from './a11y-keyboard.service.js';
 import { A11yPanelStateService } from './a11y-panel-state.service.js';
-import { PrismRendererService } from '../../services/prism-renderer.service.js';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.index;
 function A11yKeyboardOverlayComponent_Conditional_0_For_1_Template(rf, ctx) { if (rf & 1) {
@@ -68,7 +68,7 @@ export class A11yKeyboardOverlayComponent {
                 x: elRect.left - canvasRect.left + scrollLeft,
                 y: elRect.top - canvasRect.top + scrollTop,
                 width: elRect.width,
-                height: elRect.height,
+                height: elRect.height
             };
         });
         this.badges.set(positions);
@@ -78,29 +78,10 @@ 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(--%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    }"] });
+        } }, styles: ["[_nghost-%COMP%] {\n    position: absolute;\n    inset: 0;\n    z-index: 100;\n    overflow: hidden;\n    pointer-events: none;\n}\n\n.prism-a11y-kbd-ov__highlight[_ngcontent-%COMP%] {\n    position: absolute;\n    pointer-events: none;\n    background: rgb(129 140 248 / 6%);\n    border: 2px solid rgb(129 140 248 / 50%);\n    border-radius: 4px;\n    box-shadow: 0 0 0 4px rgb(129 140 248 / 8%);\n}\n\n.prism-a11y-kbd-ov__badge[_ngcontent-%COMP%] {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    font-family: var(--%NS%prism-font-sans, system-ui, sans-serif);\n    font-size: 10px;\n    font-weight: 700;\n    color: white;\n    pointer-events: auto;\n    cursor: default;\n    background: var(--%NS%prism-primary);\n    border-radius: 50%;\n    box-shadow:\n        0 0 0 2px white,\n        0 2px 6px rgb(0 0 0 / 30%);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yKeyboardOverlayComponent, [{
         type: Component,
-        args: [{ selector: 'prism-a11y-kbd-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @if (panelState.activeTab() === 'keyboard') { @for (badge of badges(); track
-    badge.index) {
-    <div
-      class="prism-a11y-kbd-ov__highlight"
-      [style.left.px]="badge.x"
-      [style.top.px]="badge.y"
-      [style.width.px]="badge.width"
-      [style.height.px]="badge.height"
-      [title]="badge.name || badge.role"
-    ></div>
-    <div
-      class="prism-a11y-kbd-ov__badge"
-      [style.left.px]="badge.x - 10"
-      [style.top.px]="badge.y - 10"
-    >
-      {{ badge.index }}
-    </div>
-    } }
-  `, styles: ["\n    :host {\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 {\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 {\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    }\n  "] }]
+        args: [{ selector: 'prism-a11y-kbd-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (panelState.activeTab() === 'keyboard') {\n    @for (badge of badges(); track badge.index) {\n        <div\n            class=\"prism-a11y-kbd-ov__highlight\"\n            [style.left.px]=\"badge.x\"\n            [style.top.px]=\"badge.y\"\n            [style.width.px]=\"badge.width\"\n            [style.height.px]=\"badge.height\"\n            [title]=\"badge.name || badge.role\"></div>\n        <div\n            class=\"prism-a11y-kbd-ov__badge\"\n            [style.left.px]=\"badge.x - 10\"\n            [style.top.px]=\"badge.y - 10\">\n            {{ badge.index }}\n        </div>\n    }\n}\n", styles: [":host {\n    position: absolute;\n    inset: 0;\n    z-index: 100;\n    overflow: hidden;\n    pointer-events: none;\n}\n\n.prism-a11y-kbd-ov__highlight {\n    position: absolute;\n    pointer-events: none;\n    background: rgb(129 140 248 / 6%);\n    border: 2px solid rgb(129 140 248 / 50%);\n    border-radius: 4px;\n    box-shadow: 0 0 0 4px rgb(129 140 248 / 8%);\n}\n\n.prism-a11y-kbd-ov__badge {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    font-family: var(--prism-font-sans, system-ui, sans-serif);\n    font-size: 10px;\n    font-weight: 700;\n    color: white;\n    pointer-events: auto;\n    cursor: default;\n    background: var(--prism-primary);\n    border-radius: 50%;\n    box-shadow:\n        0 0 0 2px white,\n        0 2px 6px rgb(0 0 0 / 30%);\n}\n"] }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yKeyboardOverlayComponent, { className: "A11yKeyboardOverlayComponent", filePath: "app/panels/a11y/a11y-keyboard-overlay.component.ts", lineNumber: 84 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yKeyboardOverlayComponent, { className: "A11yKeyboardOverlayComponent", filePath: "app/panels/a11y/a11y-keyboard-overlay.component.ts", lineNumber: 23 }); })();

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

@@ -1 +1 @@
-{"version":3,"file":"a11y-keyboard.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-keyboard.component.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAEhF,qBAwFa,qBAAqB;IAChC,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA+B;IAE/D,SAAS,CAAC,QAAQ,CAAC,KAAK,+EAQrB;IAEH,SAAS,CAAC,QAAQ,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM;yCAd5B,qBAAqB;2CAArB,qBAAqB;CAkBjC"}
+{"version":3,"file":"a11y-keyboard.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-keyboard.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAGhF,qBAOa,qBAAqB;IAC9B,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA+B;IAE/D,SAAS,CAAC,QAAQ,CAAC,KAAK,+EAOrB;IAEH,SAAS,CAAC,QAAQ,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM;yCAb9B,qBAAqB;2CAArB,qBAAqB;CAkBjC"}

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

@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component, computed, inject, } from '@angular/core';
-import { A11yKeyboardService } from './a11y-keyboard.service.js';
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { PrismRendererService } from '../../services/prism-renderer.service.js';
+import { A11yKeyboardService } from './a11y-keyboard.service.js';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.index;
 function A11yKeyboardComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
@@ -71,41 +71,10 @@ 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(--%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    }"] });
+        } }, styles: ["[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n    overflow: auto;\n}\n\n.kb-empty[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 100px;\n    font-size: 13px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.kb-body[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    padding: 16px 20px;\n}\n\n.kb-row[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 110px 1fr auto;\n    gap: 12px;\n    align-items: center;\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%] {\n    display: flex;\n    gap: 4px;\n}\n\n.kb-keys[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n    padding: 1px 5px;\n    font-family: var(--%NS%font-mono);\n    font-size: 10.5px;\n    color: var(--%NS%prism-text-muted);\n    background: var(--%NS%prism-input-bg);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 4px;\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    padding: 2px 7px;\n    font-family: var(--%NS%font-mono);\n    font-size: 11px;\n    color: var(--%NS%prism-primary);\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,
-        args: [{ selector: 'prism-a11y-keyboard', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @if (!rendererService.renderedElement()) {
-    <div class="kb-empty">
-      Select a component to inspect keyboard navigation.
-    </div>
-    } @else if (!items().length) {
-    <div class="kb-empty">No focusable elements found.</div>
-    } @else {
-    <div class="kb-body">
-      @for (item of items(); track item.index) {
-      <div class="kb-row">
-        <div class="kb-keys">
-          <kbd>Tab {{ item.index }}</kbd>
-        </div>
-        <div class="kb-desc">
-          {{
-            item.name
-              ? '"' + item.name + '"'
-              : item.element.tagName.toLowerCase() + typeAttr(item.element)
-          }}
-          @if (item.states.length) { · {{ item.states.join(', ') }}
-          }
-        </div>
-        <span class="kb-tgt"
-          >{{ item.element.tagName.toLowerCase()
-          }}{{ typeAttr(item.element) }}</span
-        >
-      </div>
-      }
-    </div>
-    }
-  `, styles: ["\n    :host { display: block; height: 100%; overflow: auto; }\n\n    .kb-empty {\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 {\n      padding: 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .kb-row {\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 { display: flex; gap: 4px; }\n    .kb-keys kbd {\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 {\n      font-size: 12.5px;\n      color: var(--prism-text-2);\n    }\n\n    .kb-tgt {\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    }\n  "] }]
+        args: [{ selector: 'prism-a11y-keyboard', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!rendererService.renderedElement()) {\n    <div class=\"kb-empty\"> Select a component to inspect keyboard navigation. </div>\n} @else if (!items().length) {\n    <div class=\"kb-empty\">No focusable elements found.</div>\n} @else {\n    <div class=\"kb-body\">\n        @for (item of items(); track item.index) {\n            <div class=\"kb-row\">\n                <div class=\"kb-keys\">\n                    <kbd>Tab {{ item.index }}</kbd>\n                </div>\n                <div class=\"kb-desc\">\n                    {{ item.name ? '\"' + item.name + '\"' : item.element.tagName.toLowerCase() + typeAttr(item.element) }}\n                    @if (item.states.length) {\n                        \u00B7 {{ item.states.join(', ') }}\n                    }\n                </div>\n                <span class=\"kb-tgt\">{{ item.element.tagName.toLowerCase() }}{{ typeAttr(item.element) }}</span>\n            </div>\n        }\n    </div>\n}\n", styles: [":host {\n    display: block;\n    height: 100%;\n    overflow: auto;\n}\n\n.kb-empty {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 100px;\n    font-size: 13px;\n    color: var(--prism-text-muted);\n}\n\n.kb-body {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    padding: 16px 20px;\n}\n\n.kb-row {\n    display: grid;\n    grid-template-columns: 110px 1fr auto;\n    gap: 12px;\n    align-items: center;\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 {\n    display: flex;\n    gap: 4px;\n}\n\n.kb-keys kbd {\n    padding: 1px 5px;\n    font-family: var(--font-mono);\n    font-size: 10.5px;\n    color: var(--prism-text-muted);\n    background: var(--prism-input-bg);\n    border: 1px solid var(--prism-border);\n    border-radius: 4px;\n}\n\n.kb-desc {\n    font-size: 12.5px;\n    color: var(--prism-text-2);\n}\n\n.kb-tgt {\n    padding: 2px 7px;\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--prism-primary);\n    background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n    border-radius: var(--radius-xs);\n}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yKeyboardComponent, { className: "A11yKeyboardComponent", filePath: "app/panels/a11y/a11y-keyboard.component.ts", lineNumber: 98 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yKeyboardComponent, { className: "A11yKeyboardComponent", filePath: "app/panels/a11y/a11y-keyboard.component.ts", lineNumber: 12 }); })();

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;;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;;AA4BxD,qBACa,mBAAmB;IAC5B,eAAe,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,GAAG,gBAAgB,EAAE;yCADnF,mBAAmB;;CAsB/B"}

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

@@ -8,7 +8,7 @@ const FOCUSABLE_SELECTOR = [
     'select:not([disabled])',
     'textarea:not([disabled])',
     '[tabindex]:not([tabindex="-1"])',
-    '[contenteditable="true"]',
+    '[contenteditable="true"]'
 ].join(', ');
 function getTabindex(element) {
     const attr = element.getAttribute('tabindex');
@@ -38,7 +38,7 @@ export class A11yKeyboardService {
                 name,
                 nameSource: source,
                 states,
-                tabindex: tabindex !== null ? parseInt(tabindex, 10) : null,
+                tabindex: tabindex !== null ? parseInt(tabindex, 10) : null
             };
         });
     }

package/dist/app/panels/a11y/a11y-overlay-host.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y-overlay-host.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-overlay-host.component.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAEhF,UAAU,MAAM;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,qBAyDa,wBAAwB;IACnC,QAAQ,CAAC,eAAe,4DAA0C;IAClE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA+B;IAC/D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAmC;IAE9D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAa;IAExC,SAAS,CAAC,QAAQ,CAAC,MAAM,gDActB;IAEH,SAAS,CAAC,QAAQ,CAAC,SAAS,gDAKzB;IAEH,SAAS,CAAC,QAAQ,CAAC,QAAQ,gDAUxB;;yCAxCQ,wBAAwB;2CAAxB,wBAAwB;CA2DpC"}
+{"version":3,"file":"a11y-overlay-host.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-overlay-host.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAGhF,UAAU,MAAM;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,qBAOa,wBAAwB;IACjC,QAAQ,CAAC,eAAe,4DAA0C;IAClE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA+B;IAC/D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAmC;IAE9D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAa;IAExC,SAAS,CAAC,QAAQ,CAAC,MAAM,gDAiBtB;IAEH,SAAS,CAAC,QAAQ,CAAC,SAAS,gDAOzB;IAEH,SAAS,CAAC,QAAQ,CAAC,QAAQ,gDASxB;;yCA5CM,wBAAwB;2CAAxB,wBAAwB;CAkEpC"}