@ng-prism/core 22.2.0-beta.0 → 22.2.0-beta.2

package/README.md

@@ -135,13 +135,14 @@ Link to a `@Showcase`-decorated component for combined API docs + custom renderi
 
 ## Official Plugins
 
-| Plugin    | Package                      | Description                                  |
-| --------- | ---------------------------- | -------------------------------------------- |
-| JSDoc     | `@ng-prism/plugin-jsdoc`     | API documentation from JSDoc comments        |
-| Figma     | `@ng-prism/plugin-figma`     | Figma design embed + visual diff             |
-| Box Model | `@ng-prism/plugin-box-model` | CSS box model inspector                      |
-| Perf      | `@ng-prism/plugin-perf`      | Render performance profiling                 |
-| Coverage  | `@ng-prism/plugin-coverage`  | Per-component test coverage from Istanbul/v8 |
+| Plugin    | Package                              | Description                                                   |
+| --------- | ------------------------------------ | ------------------------------------------------------------- |
+| JSDoc     | `@ng-prism/plugin-jsdoc`             | API documentation from JSDoc comments                         |
+| Figma     | `@ng-prism/plugin-figma`             | Figma design embed + visual diff                              |
+| Box Model | `@ng-prism/plugin-box-model`         | CSS box model inspector                                       |
+| Perf      | `@ng-prism/plugin-perf`              | Render performance profiling                                  |
+| Coverage  | `@ng-prism/plugin-coverage`          | Per-component test coverage from Istanbul/v8                  |
+| VRT       | `@ng-prism/plugin-visual-regression` | Per-variant visual regression report from a screenshot runner |
 
 > **Note:** Accessibility auditing (axe-core) is built into ng-prism core — no plugin needed.
 

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

@@ -7,6 +7,15 @@ export declare class PrismCanvasToolbarComponent {
     protected readonly variantBg: PrismVariantBgService;
     protected readonly layout: PrismLayoutService;
     protected setBg(bg: CanvasBg): void;
+    /**
+     * The backgrounds a user can cycle through — deliberately not every
+     * {@link CanvasBg}.
+     *
+     * `transparent` is missing on purpose. It renders as the checkerboard while
+     * browsing, so offering it next to `checker` would be two buttons that paint
+     * the same thing; the difference only exists in a capture, which is not a
+     * thing this toolbar can show. It stays a value a `@Showcase` declares.
+     */
     protected readonly bgs: CanvasBg[];
     protected readonly zooms: {
         value: number;

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

@@ -1 +1 @@
-{"version":3,"file":"prism-canvas-toolbar.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-toolbar.component.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,kBAAkB,EAClB,KAAK,QAAQ,EACd,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAEzE,qBA+Ka,2BAA2B;IACtC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAC7D,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IAEvD,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAQnC,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,QAAQ,EAAE,CAMhC;IACF,SAAS,CAAC,QAAQ,CAAC,KAAK;;;QAKtB;IAEF,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;yCA3B5B,2BAA2B;2CAA3B,2BAA2B;CA8BvC"}
+{"version":3,"file":"prism-canvas-toolbar.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-toolbar.component.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,kBAAkB,EAClB,KAAK,QAAQ,EACd,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAEzE,qBA+Ka,2BAA2B;IACtC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAC7D,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IAEvD,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAQnC;;;;;;;;OAQG;IACH,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,QAAQ,EAAE,CAMhC;IACF,SAAS,CAAC,QAAQ,CAAC,KAAK;;;QAKtB;IAEF,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;yCApC5B,2BAA2B;2CAA3B,2BAA2B;CAuCvC"}

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

@@ -53,6 +53,15 @@ export class PrismCanvasToolbarComponent {
             this.canvas.setBg(bg);
         }
     }
+    /**
+     * The backgrounds a user can cycle through — deliberately not every
+     * {@link CanvasBg}.
+     *
+     * `transparent` is missing on purpose. It renders as the checkerboard while
+     * browsing, so offering it next to `checker` would be two buttons that paint
+     * the same thing; the difference only exists in a capture, which is not a
+     * thing this toolbar can show. It stays a value a `@Showcase` declares.
+     */
     bgs = [
         'dots',
         'plain',

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

@@ -1 +1 @@
-{"version":3,"file":"prism-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/prism-renderer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,QAAQ,EAER,KAAK,IAAI,EAIV,MAAM,eAAe,CAAC;AAYvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAGjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAMhF,qBAqJa,sBAAsB;IACjC,SAAS,CAAC,QAAQ,CAAC,IAAI,OAAQ;IAC/B,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,SAAS,CAAC,QAAQ,CAAC,OAAO,sBAA+B;IACzD,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAC7D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmC;IACxD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAE3B;IAEH,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IACH,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,mBAAmB,CAAsC;IACjE,OAAO,CAAC,oBAAoB,CAChB;IACZ,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoC;IACjE,QAAQ,CAAC,aAAa,+DAAsC;IAC5D,wFAAwF;IACxF,SAAS,CAAC,QAAQ,CAAC,WAAW,gDAQ3B;IACH,6GAA6G;IAC7G,SAAS,CAAC,QAAQ,CAAC,YAAY,4FAU5B;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAC7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAG/B;;IAmFH,OAAO,CAAC,eAAe;IA6FvB,OAAO,CAAC,OAAO;yCAxOJ,sBAAsB;2CAAtB,sBAAsB;CAsPlC"}
+{"version":3,"file":"prism-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/prism-renderer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,QAAQ,EAER,KAAK,IAAI,EAIV,MAAM,eAAe,CAAC;AAYvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAGjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAMhF,qBA4Ja,sBAAsB;IACjC,SAAS,CAAC,QAAQ,CAAC,IAAI,OAAQ;IAC/B,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,SAAS,CAAC,QAAQ,CAAC,OAAO,sBAA+B;IACzD,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAC7D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmC;IACxD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAE3B;IAEH,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IACH,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,mBAAmB,CAAsC;IACjE,OAAO,CAAC,oBAAoB,CAChB;IACZ,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoC;IACjE,QAAQ,CAAC,aAAa,+DAAsC;IAC5D,wFAAwF;IACxF,SAAS,CAAC,QAAQ,CAAC,WAAW,gDAQ3B;IACH,6GAA6G;IAC7G,SAAS,CAAC,QAAQ,CAAC,YAAY,4FAU5B;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAC7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAG/B;;IAmFH,OAAO,CAAC,eAAe;IA6FvB,OAAO,CAAC,OAAO;yCAxOJ,sBAAsB;2CAAtB,sBAAsB;CAsPlC"}

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

@@ -255,7 +255,7 @@ export class PrismRendererComponent {
             i0.ɵɵconditional(ctx.activeOverlay() ? 5 : -1);
         } }, dependencies: [PrismCanvasRulersComponent,
             PrismCanvasBgPillComponent,
-            NgComponentOutlet], styles: ["[_nghost-%COMP%] { display: block; min-height: 0; flex: 1; }\n\n    .prism-canvas-stage[_ngcontent-%COMP%] {\n      position: relative;\n      overflow: auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      min-height: 200px;\n      height: 100%;\n      background-color: var(--prism-bg-surface);\n      background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n      background-size: 20px 20px;\n      transition: filter var(--dur-base);\n      --prism-canvas-overlay-top: 12px;\n      --prism-canvas-overlay-inline: 20px;\n    }\n    .prism-canvas-stage[data-rulers][_ngcontent-%COMP%] {\n      --prism-canvas-overlay-top: 28px;\n      --prism-canvas-overlay-inline: 28px;\n    }\n\n    .prism-canvas-stage[data-bg=\"plain\"][_ngcontent-%COMP%] {\n      background-image: none;\n    }\n    \n\n\n\n\n    .prism-canvas-stage[data-bg=\"light\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"dark\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"checker\"][_ngcontent-%COMP%] {\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\n    .stage-crosshair[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--dur-base);\n    }\n    .stage-crosshair.visible[_ngcontent-%COMP%] { opacity: 1; }\n    .stage-crosshair[_ngcontent-%COMP%]::before, \n   .stage-crosshair[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    .stage-crosshair[_ngcontent-%COMP%]::before { left: 0; right: 0; top: 50%; height: 1px; }\n    .stage-crosshair[_ngcontent-%COMP%]::after { top: 0; bottom: 0; left: 50%; width: 1px; }\n\n    .canvas-badges[_ngcontent-%COMP%] {\n      position: absolute;\n      top: var(--prism-canvas-overlay-top);\n      left: var(--prism-canvas-overlay-inline);\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\n      transition: top var(--dur-base), left var(--dur-base);\n    }\n    .c-badge[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      padding: 3px 7px;\n      border-radius: 4px;\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n    }\n\n    .demo-wrap[_ngcontent-%COMP%] {\n      position: relative;\n      display: inline-block;\n      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n    }\n    .demo-wrap[data-canvas-layout=\"stretch\"][_ngcontent-%COMP%] {\n      display: block;\n      width: 100%;\n      max-width: 800px;\n    }"] });
+            NgComponentOutlet], styles: ["[_nghost-%COMP%] { display: block; min-height: 0; flex: 1; }\n\n    .prism-canvas-stage[_ngcontent-%COMP%] {\n      position: relative;\n      overflow: auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      min-height: 200px;\n      height: 100%;\n      background-color: var(--prism-bg-surface);\n      background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n      background-size: 20px 20px;\n      transition: filter var(--dur-base);\n      --prism-canvas-overlay-top: 12px;\n      --prism-canvas-overlay-inline: 20px;\n    }\n    .prism-canvas-stage[data-rulers][_ngcontent-%COMP%] {\n      --prism-canvas-overlay-top: 28px;\n      --prism-canvas-overlay-inline: 28px;\n    }\n\n    .prism-canvas-stage[data-bg=\"plain\"][_ngcontent-%COMP%] {\n      background-image: none;\n    }\n    \n\n\n\n\n    .prism-canvas-stage[data-bg=\"light\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"dark\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: none;\n    }\n    \n\n\n\n\n\n    .prism-canvas-stage[data-bg=\"checker\"][_ngcontent-%COMP%], \n   .prism-canvas-stage[data-bg=\"transparent\"][_ngcontent-%COMP%] {\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\n    .stage-crosshair[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--dur-base);\n    }\n    .stage-crosshair.visible[_ngcontent-%COMP%] { opacity: 1; }\n    .stage-crosshair[_ngcontent-%COMP%]::before, \n   .stage-crosshair[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    .stage-crosshair[_ngcontent-%COMP%]::before { left: 0; right: 0; top: 50%; height: 1px; }\n    .stage-crosshair[_ngcontent-%COMP%]::after { top: 0; bottom: 0; left: 50%; width: 1px; }\n\n    .canvas-badges[_ngcontent-%COMP%] {\n      position: absolute;\n      top: var(--prism-canvas-overlay-top);\n      left: var(--prism-canvas-overlay-inline);\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\n      transition: top var(--dur-base), left var(--dur-base);\n    }\n    .c-badge[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      padding: 3px 7px;\n      border-radius: 4px;\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n    }\n\n    .demo-wrap[_ngcontent-%COMP%] {\n      position: relative;\n      display: inline-block;\n      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n    }\n    .demo-wrap[data-canvas-layout=\"stretch\"][_ngcontent-%COMP%] {\n      display: block;\n      width: 100%;\n      max-width: 800px;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismRendererComponent, [{
         type: Component,
@@ -301,11 +301,11 @@ export class PrismRendererComponent {
         }
       </div>
     </div>
-  `, styles: ["\n    :host { display: block; min-height: 0; flex: 1; }\n\n    .prism-canvas-stage {\n      position: relative;\n      overflow: auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      min-height: 200px;\n      height: 100%;\n      background-color: var(--prism-bg-surface);\n      background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n      background-size: 20px 20px;\n      transition: filter var(--dur-base);\n      --prism-canvas-overlay-top: 12px;\n      --prism-canvas-overlay-inline: 20px;\n    }\n    .prism-canvas-stage[data-rulers] {\n      --prism-canvas-overlay-top: 28px;\n      --prism-canvas-overlay-inline: 28px;\n    }\n\n    .prism-canvas-stage[data-bg=\"plain\"] {\n      background-image: none;\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    .prism-canvas-stage[data-bg=\"light\"] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"dark\"] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"checker\"] {\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\n    .stage-crosshair {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--dur-base);\n    }\n    .stage-crosshair.visible { opacity: 1; }\n    .stage-crosshair::before,\n    .stage-crosshair::after {\n      content: '';\n      position: absolute;\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    .stage-crosshair::before { left: 0; right: 0; top: 50%; height: 1px; }\n    .stage-crosshair::after { top: 0; bottom: 0; left: 50%; width: 1px; }\n\n    .canvas-badges {\n      position: absolute;\n      top: var(--prism-canvas-overlay-top);\n      left: var(--prism-canvas-overlay-inline);\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\n      transition: top var(--dur-base), left var(--dur-base);\n    }\n    .c-badge {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      padding: 3px 7px;\n      border-radius: 4px;\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n    }\n\n    .demo-wrap {\n      position: relative;\n      display: inline-block;\n      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n    }\n    .demo-wrap[data-canvas-layout=\"stretch\"] {\n      display: block;\n      width: 100%;\n      max-width: 800px;\n    }\n\n  "] }]
+  `, styles: ["\n    :host { display: block; min-height: 0; flex: 1; }\n\n    .prism-canvas-stage {\n      position: relative;\n      overflow: auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      min-height: 200px;\n      height: 100%;\n      background-color: var(--prism-bg-surface);\n      background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n      background-size: 20px 20px;\n      transition: filter var(--dur-base);\n      --prism-canvas-overlay-top: 12px;\n      --prism-canvas-overlay-inline: 20px;\n    }\n    .prism-canvas-stage[data-rulers] {\n      --prism-canvas-overlay-top: 28px;\n      --prism-canvas-overlay-inline: 28px;\n    }\n\n    .prism-canvas-stage[data-bg=\"plain\"] {\n      background-image: none;\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    .prism-canvas-stage[data-bg=\"light\"] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"dark\"] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: none;\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    .prism-canvas-stage[data-bg=\"checker\"],\n    .prism-canvas-stage[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\n    .stage-crosshair {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--dur-base);\n    }\n    .stage-crosshair.visible { opacity: 1; }\n    .stage-crosshair::before,\n    .stage-crosshair::after {\n      content: '';\n      position: absolute;\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    .stage-crosshair::before { left: 0; right: 0; top: 50%; height: 1px; }\n    .stage-crosshair::after { top: 0; bottom: 0; left: 50%; width: 1px; }\n\n    .canvas-badges {\n      position: absolute;\n      top: var(--prism-canvas-overlay-top);\n      left: var(--prism-canvas-overlay-inline);\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\n      transition: top var(--dur-base), left var(--dur-base);\n    }\n    .c-badge {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      padding: 3px 7px;\n      border-radius: 4px;\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n    }\n\n    .demo-wrap {\n      position: relative;\n      display: inline-block;\n      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n    }\n    .demo-wrap[data-canvas-layout=\"stretch\"] {\n      display: block;\n      width: 100%;\n      max-width: 800px;\n    }\n\n  "] }]
     }], () => [], { outlet: [{ type: i0.ViewChild, args: ['outlet', { ...{
                         read: ViewContainerRef,
                     }, isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismRendererComponent, { className: "PrismRendererComponent", filePath: "app/renderer/prism-renderer.component.ts", lineNumber: 189 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismRendererComponent, { className: "PrismRendererComponent", filePath: "app/renderer/prism-renderer.component.ts", lineNumber: 196 }); })();
 // SAFETY: `content` originates from `@Showcase({ variants: [{ content }] })`
 // in developer-authored source code. It is trusted by ng-prism's threat model
 // (see SECURITY.md). Sanitization would strip the Angular component/directive

package/dist/app/services/prism-capture.service.d.ts

@@ -3,13 +3,36 @@ import * as i0 from "@angular/core";
 export declare const CAPTURE_PARAM = "capture";
 /** Attribute set on `<html>` while capture mode is active. */
 export declare const CAPTURE_ATTRIBUTE = "data-prism-capture";
+/**
+ * Everything capture mode makes see-through for `bg: 'transparent'`.
+ *
+ * A screenshot tool clips the *composited* page, so a transparent stage alone
+ * buys nothing: the wrappers behind it keep painting and the PNG comes back
+ * opaque. The stage and every ancestor that paints have to go at once, which
+ * is why this is one selector rather than a rule per layer.
+ *
+ * `html` and `body` are insurance rather than observation — ng-prism paints
+ * neither, but a consuming app's global stylesheet can, and the guarantee this
+ * makes is "nothing opaque between the component and the document root".
+ * Above `html` the backdrop is the browser's own and no stylesheet reaches it;
+ * a runner has to clear that with `omitBackground: true`.
+ *
+ * Scoped by `:has()` to a *transparent* stage, so the other five backgrounds
+ * behave exactly as before. Exported so a test can assert the invariant
+ * against the real DOM rather than against this list — the list is the
+ * fragile part of the feature. A renamed wrapper or a newly introduced
+ * painting layer turns the capture opaque again, and an opaque capture still
+ * looks correct; it just silently stops testing transparency.
+ */
+export declare const CAPTURE_TRANSPARENT_SELECTOR: string;
 /**
  * Capture-isolation mode.
  *
  * Screenshot tools clip the composited page to the capture target's box, so
  * anything painted behind or inside `.demo-wrap` ends up in the image. Capture
- * mode strips the canvas background down to its opaque, patternless colour —
- * keeping whatever `@Showcase({ bg })` declared — suppresses every piece of
+ * mode strips the canvas background down to its patternless colour — keeping
+ * whatever `@Showcase({ bg })` declared, or clearing the whole paint chain to
+ * real transparency for `bg: 'transparent'` — suppresses every piece of
  * canvas chrome, locks zoom to 1 and freezes animation, so a variant renders
  * identically on every run.
  *

package/dist/app/services/prism-capture.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-capture.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-capture.service.ts"],"names":[],"mappings":";AAEA,sFAAsF;AACtF,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,8DAA8D;AAC9D,eAAO,MAAM,iBAAiB,uBAAuB,CAAC;AAqCtD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,mBAAmB;IAC9B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAItB;IAEF,kEAAkE;IAClE,QAAQ,CAAC,MAAM,0CAA6B;;IAM5C,OAAO,CAAC,eAAe;yCAdZ,mBAAmB;6CAAnB,mBAAmB;CAuB/B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAIzD"}
+{"version":3,"file":"prism-capture.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-capture.service.ts"],"names":[],"mappings":";AAEA,sFAAsF;AACtF,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,8DAA8D;AAC9D,eAAO,MAAM,iBAAiB,uBAAuB,CAAC;AAItD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,4BAA4B,QAEgG,CAAC;AA8C1I;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,mBAAmB;IAC9B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAItB;IAEF,kEAAkE;IAClE,QAAQ,CAAC,MAAM,0CAA6B;;IAM5C,OAAO,CAAC,eAAe;yCAdZ,mBAAmB;6CAAnB,mBAAmB;CAuB/B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAIzD"}

package/dist/app/services/prism-capture.service.js

@@ -5,6 +5,29 @@ export const CAPTURE_PARAM = 'capture';
 /** Attribute set on `<html>` while capture mode is active. */
 export const CAPTURE_ATTRIBUTE = 'data-prism-capture';
 const STYLE_ELEMENT_ID = 'ng-prism-capture-styles';
+/**
+ * Everything capture mode makes see-through for `bg: 'transparent'`.
+ *
+ * A screenshot tool clips the *composited* page, so a transparent stage alone
+ * buys nothing: the wrappers behind it keep painting and the PNG comes back
+ * opaque. The stage and every ancestor that paints have to go at once, which
+ * is why this is one selector rather than a rule per layer.
+ *
+ * `html` and `body` are insurance rather than observation — ng-prism paints
+ * neither, but a consuming app's global stylesheet can, and the guarantee this
+ * makes is "nothing opaque between the component and the document root".
+ * Above `html` the backdrop is the browser's own and no stylesheet reaches it;
+ * a runner has to clear that with `omitBackground: true`.
+ *
+ * Scoped by `:has()` to a *transparent* stage, so the other five backgrounds
+ * behave exactly as before. Exported so a test can assert the invariant
+ * against the real DOM rather than against this list — the list is the
+ * fragile part of the feature. A renamed wrapper or a newly introduced
+ * painting layer turns the capture opaque again, and an opaque capture still
+ * looks correct; it just silently stops testing transparency.
+ */
+export const CAPTURE_TRANSPARENT_SELECTOR = `[${CAPTURE_ATTRIBUTE}] .prism-canvas-stage[data-bg='transparent'],\n` +
+    `[${CAPTURE_ATTRIBUTE}] :is(html, body, .prism-shell, .prism-main, .prism-canvas-wrap):has(.prism-canvas-stage[data-bg='transparent'])`;
 /**
  * Global stylesheet applied in capture mode.
  *
@@ -22,6 +45,12 @@ const STYLE_ELEMENT_ID = 'ng-prism-capture-styles';
  * beneath it shifts whenever the component changes size and every pixel behind
  * it differs after an unrelated resize. `!important` is required: the stage's
  * own rules are component-scoped and therefore more specific than this one.
+ *
+ * `transparent` is the one value that drops the colour too, and it cannot do
+ * that on the stage alone — see {@link CAPTURE_TRANSPARENT_SELECTOR} for the
+ * layers involved. Alpha is not what the paragraph above rules out: a pattern
+ * has a phase that moves when the component resizes, an alpha channel is a
+ * per-pixel value that does not.
  */
 const CAPTURE_STYLES = `
 [${CAPTURE_ATTRIBUTE}] *,
@@ -36,14 +65,20 @@ const CAPTURE_STYLES = `
 [${CAPTURE_ATTRIBUTE}] .prism-canvas-stage {
   background-image: none !important;
 }
+
+${CAPTURE_TRANSPARENT_SELECTOR} {
+  background-color: transparent !important;
+  background-image: none !important;
+}
 `;
 /**
  * Capture-isolation mode.
  *
  * Screenshot tools clip the composited page to the capture target's box, so
  * anything painted behind or inside `.demo-wrap` ends up in the image. Capture
- * mode strips the canvas background down to its opaque, patternless colour —
- * keeping whatever `@Showcase({ bg })` declared — suppresses every piece of
+ * mode strips the canvas background down to its patternless colour — keeping
+ * whatever `@Showcase({ bg })` declared, or clearing the whole paint chain to
+ * real transparency for `bg: 'transparent'` — suppresses every piece of
  * canvas chrome, locks zoom to 1 and freezes animation, so a variant renders
  * identically on every run.
  *

package/dist/app/services/prism-variant-bg.service.d.ts

@@ -30,7 +30,10 @@ export declare class PrismVariantBgService {
      * on whichever theme the runner's browser started in — a baseline that
      * flips with a persisted UI preference. The fixed default is also exactly
      * what the discovery manifest reports for the variant, so what a tool is
-     * told and what it screenshots cannot drift apart.
+     * told and what it screenshots cannot drift apart. That default is
+     * `transparent`, which removes the theme dependency outright instead of
+     * pinning one theme's colour: an undeclared variant has no opinion about its
+     * surface, and no surface is the honest capture of that.
      *
      * Interactive mode keeps `canvas.bg()`: there the dot grid on the themed
      * surface is the point, and forcing `light` would break dark-theme browsing.

package/dist/app/services/prism-variant-bg.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-variant-bg.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-variant-bg.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;;AAU/D,qBACa,qBAAqB;IAChC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA8B;IACrD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAkC;IAC7D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAgC;IACzD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA+B;IAEvD,QAAQ,CAAC,WAAW,kDAOjB;IAEH,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAiC;IAC3D,QAAQ,CAAC,QAAQ,kDAA+B;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;OA0BG;IACH,QAAQ,CAAC,SAAS,2CAIhB;IAEF,gFAAgF;IAChF,QAAQ,CAAC,WAAW,0CAMjB;;IAUH,WAAW,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAI/B,aAAa,IAAI,IAAI;yCAxEV,qBAAqB;6CAArB,qBAAqB;CA2EjC"}
+{"version":3,"file":"prism-variant-bg.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-variant-bg.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;;AAU/D,qBACa,qBAAqB;IAChC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA8B;IACrD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAkC;IAC7D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAgC;IACzD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA+B;IAEvD,QAAQ,CAAC,WAAW,kDAOjB;IAEH,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAiC;IAC3D,QAAQ,CAAC,QAAQ,kDAA+B;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6BG;IACH,QAAQ,CAAC,SAAS,2CAIhB;IAEF,gFAAgF;IAChF,QAAQ,CAAC,WAAW,0CAMjB;;IAUH,WAAW,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAI/B,aAAa,IAAI,IAAI;yCA3EV,qBAAqB;6CAArB,qBAAqB;CA8EjC"}

package/dist/app/services/prism-variant-bg.service.js

@@ -42,7 +42,10 @@ export class PrismVariantBgService {
      * on whichever theme the runner's browser started in — a baseline that
      * flips with a persisted UI preference. The fixed default is also exactly
      * what the discovery manifest reports for the variant, so what a tool is
-     * told and what it screenshots cannot drift apart.
+     * told and what it screenshots cannot drift apart. That default is
+     * `transparent`, which removes the theme dependency outright instead of
+     * pinning one theme's colour: an undeclared variant has no opinion about its
+     * surface, and no surface is the honest capture of that.
      *
      * Interactive mode keeps `canvas.bg()`: there the dot grid on the themed
      * surface is the point, and forcing `light` would break dark-theme browsing.

package/dist/shared/canvas-bg.type.d.ts

@@ -1,3 +1,11 @@
-export type CanvasBg = 'dots' | 'plain' | 'light' | 'dark' | 'checker';
+export type CanvasBg = 'dots' | 'plain' | 'light' | 'dark' | 'checker' | 'transparent';
+/**
+ * Every value {@link CanvasBg} accepts.
+ *
+ * This is the type's value list, not the list a user can cycle through — the
+ * canvas toolbar keeps its own, deliberately shorter one. Persisted canvas
+ * state is validated against *this* list, so a value that only a decorator can
+ * declare still round-trips rather than being discarded as unknown.
+ */
 export declare const CANVAS_BGS: readonly CanvasBg[];
 //# sourceMappingURL=canvas-bg.type.d.ts.map

package/dist/shared/canvas-bg.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvas-bg.type.d.ts","sourceRoot":"","sources":["../../src/shared/canvas-bg.type.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAEvE,eAAO,MAAM,UAAU,EAAE,SAAS,QAAQ,EAMhC,CAAC"}
+{"version":3,"file":"canvas-bg.type.d.ts","sourceRoot":"","sources":["../../src/shared/canvas-bg.type.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAChB,MAAM,GACN,OAAO,GACP,OAAO,GACP,MAAM,GACN,SAAS,GACT,aAAa,CAAC;AAElB;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,EAAE,SAAS,QAAQ,EAOhC,CAAC"}

package/dist/shared/canvas-bg.type.js

@@ -1,7 +1,16 @@
+/**
+ * Every value {@link CanvasBg} accepts.
+ *
+ * This is the type's value list, not the list a user can cycle through — the
+ * canvas toolbar keeps its own, deliberately shorter one. Persisted canvas
+ * state is validated against *this* list, so a value that only a decorator can
+ * declare still round-trips rather than being discarded as unknown.
+ */
 export const CANVAS_BGS = [
     'dots',
     'plain',
     'light',
     'dark',
     'checker',
+    'transparent',
 ];

package/dist/shared/variant-bg.d.ts

@@ -2,18 +2,37 @@ import type { CanvasBg } from './canvas-bg.type.js';
 /**
  * The surface a variant is reported to render on when nothing declares one.
  *
- * `checker` is the "no opinion declared" answer: the checkerboard is the
- * universal signal for an undefined or transparent backdrop, it makes an
- * undeclared component visible as such while browsing, and it is exactly how
- * the visual-regression panel already frames a capture whose background it
- * cannot account for.
- *
- * Note what it does *not* buy. `checker` carries no colour of its own — it
- * patterns over `--prism-bg-surface`, a *theme* token — and capture mode
- * strips the pattern and keeps the colour. So the surface behind an undeclared
- * component in a screenshot still follows whichever theme the runner's browser
- * started in. A variant that is under visual regression should declare `light`
- * or `dark`, the two backgrounds whose colour is absolute.
+ * An undeclared variant is the "no opinion" case, and `transparent` is the
+ * honest capture of no opinion. The alternative, `checker`, patterns over
+ * `--prism-bg-surface` — a *theme* token — and capture mode strips the pattern
+ * and keeps the colour, so an undeclared variant used to be photographed on
+ * whichever theme the runner's browser happened to start in. That is not a
+ * neutral default; it is the runner's theme leaking into a baseline. Alpha
+ * carries no such dependency, and it is not the thing capture mode's
+ * determinism argument rules out: a pattern has a phase that shifts when a
+ * centred component resizes, an alpha channel is a per-pixel value that does
+ * not move.
+ *
+ * In the app both values look identical — `transparent` renders as the same
+ * checkerboard, which is the UI's way of saying "no surface here". The change
+ * is only visible in a capture.
+ *
+ * The cost is real and worth stating plainly: a runner that does not pass
+ * `omitBackground: true` gets an opaque capture over whatever the browser
+ * painted, because the page's own backdrop is below every stylesheet. See
+ * `docs/guide/visual-regression.md#capturing-transparency`.
+ *
+ * What to declare, now that the default no longer decides it for you:
+ *
+ * - `light` or `dark` when the component was designed against a surface.
+ *   Their colours are absolute rather than theme tokens, which is what makes
+ *   them stable across runners.
+ * - `transparent` when the component's own transparency is the thing under
+ *   test — an outlined button, an icon, a divider. Flattening one onto an
+ *   opaque colour makes a transparent fill and a painted fill produce the
+ *   same pixels.
+ * - `dots`, `plain` or `checker` for browsing. All three follow the active
+ *   theme, so a baseline recorded on one is only as stable as the theme.
  */
 export declare const DEFAULT_VARIANT_BG: CanvasBg;
 /**

package/dist/shared/variant-bg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variant-bg.d.ts","sourceRoot":"","sources":["../../src/shared/variant-bg.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEpD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,kBAAkB,EAAE,QAAoB,CAAC;AAEtD;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC9B,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS;QAAE,EAAE,CAAC,EAAE,QAAQ,CAAA;KAAE,EAAE,CAAC;CACzC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,eAAe,EACvB,YAAY,EAAE,MAAM,GACnB,QAAQ,GAAG,IAAI,CAEjB;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,eAAe,EACvB,YAAY,EAAE,MAAM,GACnB,QAAQ,CAEV"}
+{"version":3,"file":"variant-bg.d.ts","sourceRoot":"","sources":["../../src/shared/variant-bg.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,kBAAkB,EAAE,QAAwB,CAAC;AAE1D;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC9B,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS;QAAE,EAAE,CAAC,EAAE,QAAQ,CAAA;KAAE,EAAE,CAAC;CACzC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,eAAe,EACvB,YAAY,EAAE,MAAM,GACnB,QAAQ,GAAG,IAAI,CAEjB;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,eAAe,EACvB,YAAY,EAAE,MAAM,GACnB,QAAQ,CAEV"}

package/dist/shared/variant-bg.js

@@ -1,20 +1,39 @@
 /**
  * The surface a variant is reported to render on when nothing declares one.
  *
- * `checker` is the "no opinion declared" answer: the checkerboard is the
- * universal signal for an undefined or transparent backdrop, it makes an
- * undeclared component visible as such while browsing, and it is exactly how
- * the visual-regression panel already frames a capture whose background it
- * cannot account for.
- *
- * Note what it does *not* buy. `checker` carries no colour of its own — it
- * patterns over `--prism-bg-surface`, a *theme* token — and capture mode
- * strips the pattern and keeps the colour. So the surface behind an undeclared
- * component in a screenshot still follows whichever theme the runner's browser
- * started in. A variant that is under visual regression should declare `light`
- * or `dark`, the two backgrounds whose colour is absolute.
+ * An undeclared variant is the "no opinion" case, and `transparent` is the
+ * honest capture of no opinion. The alternative, `checker`, patterns over
+ * `--prism-bg-surface` — a *theme* token — and capture mode strips the pattern
+ * and keeps the colour, so an undeclared variant used to be photographed on
+ * whichever theme the runner's browser happened to start in. That is not a
+ * neutral default; it is the runner's theme leaking into a baseline. Alpha
+ * carries no such dependency, and it is not the thing capture mode's
+ * determinism argument rules out: a pattern has a phase that shifts when a
+ * centred component resizes, an alpha channel is a per-pixel value that does
+ * not move.
+ *
+ * In the app both values look identical — `transparent` renders as the same
+ * checkerboard, which is the UI's way of saying "no surface here". The change
+ * is only visible in a capture.
+ *
+ * The cost is real and worth stating plainly: a runner that does not pass
+ * `omitBackground: true` gets an opaque capture over whatever the browser
+ * painted, because the page's own backdrop is below every stylesheet. See
+ * `docs/guide/visual-regression.md#capturing-transparency`.
+ *
+ * What to declare, now that the default no longer decides it for you:
+ *
+ * - `light` or `dark` when the component was designed against a surface.
+ *   Their colours are absolute rather than theme tokens, which is what makes
+ *   them stable across runners.
+ * - `transparent` when the component's own transparency is the thing under
+ *   test — an outlined button, an icon, a divider. Flattening one onto an
+ *   opaque colour makes a transparent fill and a painted fill produce the
+ *   same pixels.
+ * - `dots`, `plain` or `checker` for browsing. All three follow the active
+ *   theme, so a baseline recorded on one is only as stable as the theme.
  */
-export const DEFAULT_VARIANT_BG = 'checker';
+export const DEFAULT_VARIANT_BG = 'transparent';
 /**
  * The background a variant *declares*, or `null` when it declares none.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-prism/core",
-  "version": "22.2.0-beta.0",
+  "version": "22.2.0-beta.2",
   "description": "ng-prism — the Angular-native Storybook alternative. Lightweight component showcase with @Showcase decorator, no story files needed.",
   "keywords": [
     "ng-prism",