@ng-prism/core 22.4.1 → 22.6.0

package/dist/app/pseudo/pseudo-targets.js

@@ -0,0 +1,46 @@
+import { PSEUDO_STATES } from '../../shared/pseudo-state.type.js';
+/** True when `states` forces at least one state on at least one target. */
+export function forcesAnyState(states) {
+    return !!states && PSEUDO_STATES.some((state) => hasTarget(states[state]));
+}
+/** True when `target` names something: `true`, or a selector that is not blank. */
+export function hasTarget(target) {
+    if (target === true)
+        return true;
+    if (typeof target === 'string')
+        return target.trim() !== '';
+    return Array.isArray(target) && target.some((selector) => typeof selector === 'string' && selector.trim() !== '');
+}
+const warnedSelectors = new Set();
+/**
+ * The elements under `root` a target names. `root` counts: a selector can name
+ * the component's host, and `true` includes it.
+ */
+export function resolveTargets(root, target) {
+    const targets = new Set();
+    if (target === undefined)
+        return targets;
+    if (target === true) {
+        targets.add(root);
+        for (const el of Array.from(root.querySelectorAll('*')))
+            targets.add(el);
+        return targets;
+    }
+    for (const selector of typeof target === 'string' ? [target] : target) {
+        if (typeof selector !== 'string' || selector.trim() === '')
+            continue;
+        try {
+            if (root.matches(selector))
+                targets.add(root);
+            for (const el of Array.from(root.querySelectorAll(selector)))
+                targets.add(el);
+        }
+        catch {
+            if (!warnedSelectors.has(selector)) {
+                warnedSelectors.add(selector);
+                console.warn(`[ng-prism] "${selector}" in forced pseudo states is not a valid selector, skipping it.`);
+            }
+        }
+    }
+    return targets;
+}

package/dist/app/pseudo/state-fit.d.ts

@@ -0,0 +1,28 @@
+import { type ForcedPseudoStates, type PseudoState, type PseudoTarget } from '../../shared/pseudo-state.type.js';
+/** Whether a state can be forced on a rendered component, and if not, why. */
+export type StateFit = {
+    fits: true;
+} | {
+    fits: false;
+    reason: string;
+};
+/** `true` is the whole component, a selector list reads as its selectors joined with `, `. */
+export declare function describeTarget(target: PseudoTarget): string;
+/**
+ * The subset of `elements` the browser could put into `state`: what a user
+ * could focus, or hover, or press. Forcing a state on anything else would show
+ * something the component can never be in.
+ *
+ * `focus-within` is not filtered. Whether some descendant takes focus cannot be
+ * told without a browser API for focusability.
+ */
+export declare function reachableTargets(root: Element, state: PseudoState, elements: Iterable<Element>): Element[];
+/**
+ * Fits when every pseudo-class of `pseudo` has at least one reachable target
+ * under `root`. The reason names the first pseudo-class, in
+ * {@link PSEUDO_STATES} order, that does not. Focus on the whole component is
+ * decided on what could take focus ({@link fitCandidates}); which elements get
+ * the class is not affected.
+ */
+export declare function evaluateStateFit(root: Element, pseudo: ForcedPseudoStates): StateFit;
+//# sourceMappingURL=state-fit.d.ts.map

package/dist/app/pseudo/state-fit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state-fit.d.ts","sourceRoot":"","sources":["../../../src/app/pseudo/state-fit.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,kBAAkB,EAAiB,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAGhI,8EAA8E;AAC9E,MAAM,MAAM,QAAQ,GAAG;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAExE,8FAA8F;AAC9F,wBAAgB,cAAc,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAG3D;AA4BD;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,GAAG,OAAO,EAAE,CAc1G;AAyBD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,kBAAkB,GAAG,QAAQ,CAkBpF"}

package/dist/app/pseudo/state-fit.js

@@ -0,0 +1,97 @@
+import { PSEUDO_STATES } from '../../shared/pseudo-state.type.js';
+import { forcesAnyState, resolveTargets } from './pseudo-targets.js';
+/** `true` is the whole component, a selector list reads as its selectors joined with `, `. */
+export function describeTarget(target) {
+    if (target === true)
+        return 'the component';
+    return typeof target === 'string' ? target : target.join(', ');
+}
+function isDisabled(el) {
+    return el.matches(':disabled');
+}
+/** Under `[inert]` within the component: an `inert` outside `root` is not the component's doing. */
+function isInert(root, el) {
+    const inert = el.closest('[inert]');
+    return inert !== null && root.contains(inert);
+}
+/**
+ * Whether `el` or something inside it receives the pointer. `pointer-events`
+ * inherits, so a subtree of `none` is unreachable unless a descendant sets it
+ * back, and then the browser hands that descendant the hover.
+ */
+function takesPointer(el, known) {
+    let reachable = known.get(el);
+    if (reachable === undefined) {
+        reachable = getComputedStyle(el).pointerEvents !== 'none' || Array.from(el.children).some((child) => takesPointer(child, known));
+        known.set(el, reachable);
+    }
+    return reachable;
+}
+/**
+ * The subset of `elements` the browser could put into `state`: what a user
+ * could focus, or hover, or press. Forcing a state on anything else would show
+ * something the component can never be in.
+ *
+ * `focus-within` is not filtered. Whether some descendant takes focus cannot be
+ * told without a browser API for focusability.
+ */
+export function reachableTargets(root, state, elements) {
+    switch (state) {
+        case 'focus':
+        case 'focus-visible':
+            return Array.from(elements).filter((el) => !isDisabled(el) && !isInert(root, el));
+        case 'hover':
+        case 'active': {
+            const known = new Map();
+            return Array.from(elements).filter((el) => takesPointer(el, known));
+        }
+        case 'focus-within':
+            return Array.from(elements);
+    }
+}
+/** What can take focus at all, whether or not it is disabled or inert now. */
+const FOCUSABLE = 'button, input, select, textarea, a[href], area[href], summary, iframe, [tabindex], [contenteditable]:not([contenteditable="false"])';
+/**
+ * The targets the fit of `state` is decided on. For focus on the whole
+ * component (`true`) that is what could take focus at all: the host is never
+ * `:disabled`, so a component whose only focusable element is disabled would
+ * otherwise fit, and show the plain default under a focus label. A component
+ * with nothing focusable in it keeps every element, as before.
+ */
+function fitCandidates(state, target, targets) {
+    if (target !== true || (state !== 'focus' && state !== 'focus-visible'))
+        return targets;
+    const focusable = Array.from(targets).filter((el) => el.matches(FOCUSABLE));
+    return focusable.length > 0 ? new Set(focusable) : targets;
+}
+/** Why `elements`, all of them unreachable for `state`, are: the first applicable of disabled, inert and pointer-events. */
+function unreachableReason(state, elements) {
+    if (state === 'hover' || state === 'active')
+        return 'has pointer-events: none';
+    return Array.from(elements).some(isDisabled) ? 'is disabled' : 'is inert';
+}
+/**
+ * Fits when every pseudo-class of `pseudo` has at least one reachable target
+ * under `root`. The reason names the first pseudo-class, in
+ * {@link PSEUDO_STATES} order, that does not. Focus on the whole component is
+ * decided on what could take focus ({@link fitCandidates}); which elements get
+ * the class is not affected.
+ */
+export function evaluateStateFit(root, pseudo) {
+    if (!forcesAnyState(pseudo))
+        return { fits: false, reason: 'forces no state' };
+    for (const state of PSEUDO_STATES) {
+        const target = pseudo[state];
+        // Like the marker, which gives an empty selector no element to mark.
+        if (target === undefined || !forcesAnyState({ [state]: target }))
+            continue;
+        const targets = resolveTargets(root, target);
+        const label = describeTarget(target);
+        if (targets.size === 0)
+            return { fits: false, reason: `${label} matches nothing` };
+        const candidates = fitCandidates(state, target, targets);
+        if (reachableTargets(root, state, candidates).length === 0)
+            return { fits: false, reason: `${label} ${unreachableReason(state, candidates)}` };
+    }
+    return { fits: true };
+}

package/dist/app/renderer/input-bindings.d.ts

@@ -0,0 +1,16 @@
+import type { RuntimeComponent } from '../../plugin/plugin.types.js';
+/** Synthetic input the manifest generator emits on directive wrapper classes
+ * to project per-variant `content` text into the host element. The directive
+ * itself doesn't declare it, so it isn't in `meta.inputs`, and code that
+ * validates / filters inputs against that list must allow this key through.
+ */
+export declare const PRISM_CONTENT_INPUT = "__prismContent__";
+/**
+ * The inputs a variant may set, by class member name, each mapped to the name
+ * `ComponentRef.setInput` takes. Angular resolves that by the public name, so a
+ * component's aliased input maps to its alias. A directive renders inside the
+ * generated `__PrismHost` wrapper, which declares the inputs under their member
+ * names and binds the aliases itself.
+ */
+export declare function buildInputBindings(comp: RuntimeComponent): Map<string, string>;
+//# sourceMappingURL=input-bindings.d.ts.map

package/dist/app/renderer/input-bindings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-bindings.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/input-bindings.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAErE;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AAEtD;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,gBAAgB,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAQ9E"}

package/dist/app/renderer/input-bindings.js

@@ -0,0 +1,21 @@
+/** Synthetic input the manifest generator emits on directive wrapper classes
+ * to project per-variant `content` text into the host element. The directive
+ * itself doesn't declare it, so it isn't in `meta.inputs`, and code that
+ * validates / filters inputs against that list must allow this key through.
+ */
+export const PRISM_CONTENT_INPUT = '__prismContent__';
+/**
+ * The inputs a variant may set, by class member name, each mapped to the name
+ * `ComponentRef.setInput` takes. Angular resolves that by the public name, so a
+ * component's aliased input maps to its alias. A directive renders inside the
+ * generated `__PrismHost` wrapper, which declares the inputs under their member
+ * names and binds the aliases itself.
+ */
+export function buildInputBindings(comp) {
+    const isDirective = comp.meta.componentMeta.isDirective;
+    const bindings = new Map(comp.meta.inputs.map((i) => [i.name, isDirective ? i.name : (i.alias ?? i.name)]));
+    if (isDirective) {
+        bindings.set(PRISM_CONTENT_INPUT, PRISM_CONTENT_INPUT);
+    }
+    return bindings;
+}

package/dist/app/renderer/known-inputs.d.ts

@@ -5,5 +5,12 @@ import type { RuntimeComponent } from '../../plugin/plugin.types.js';
  * validates / filters inputs against that list must allow this key through.
  */
 export declare const PRISM_CONTENT_INPUT = "__prismContent__";
-export declare function buildKnownInputs(comp: RuntimeComponent): Set<string>;
+/**
+ * The inputs a variant may set, by class member name, each mapped to the name
+ * `ComponentRef.setInput` takes. Angular resolves that by the public name, so a
+ * component's aliased input maps to its alias. A directive renders inside the
+ * generated `__PrismHost` wrapper, which declares the inputs under their member
+ * names and binds the aliases itself.
+ */
+export declare function buildInputBindings(comp: RuntimeComponent): Map<string, string>;
 //# sourceMappingURL=known-inputs.d.ts.map

package/dist/app/renderer/known-inputs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"known-inputs.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/known-inputs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAErE;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AAEtD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,gBAAgB,GAAG,GAAG,CAAC,MAAM,CAAC,CAOpE"}
+{"version":3,"file":"known-inputs.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/known-inputs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAErE;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AAEtD;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,gBAAgB,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAQ9E"}

package/dist/app/renderer/known-inputs.js

@@ -4,10 +4,18 @@
  * validates / filters inputs against that list must allow this key through.
  */
 export const PRISM_CONTENT_INPUT = '__prismContent__';
-export function buildKnownInputs(comp) {
-    const known = new Set(comp.meta.inputs.map((i) => i.name));
-    if (comp.meta.componentMeta.isDirective) {
-        known.add(PRISM_CONTENT_INPUT);
+/**
+ * The inputs a variant may set, by class member name, each mapped to the name
+ * `ComponentRef.setInput` takes. Angular resolves that by the public name, so a
+ * component's aliased input maps to its alias. A directive renders inside the
+ * generated `__PrismHost` wrapper, which declares the inputs under their member
+ * names and binds the aliases itself.
+ */
+export function buildInputBindings(comp) {
+    const isDirective = comp.meta.componentMeta.isDirective;
+    const bindings = new Map(comp.meta.inputs.map((i) => [i.name, isDirective ? i.name : (i.alias ?? i.name)]));
+    if (isDirective) {
+        bindings.set(PRISM_CONTENT_INPUT, PRISM_CONTENT_INPUT);
     }
-    return known;
+    return bindings;
 }

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

@@ -11,6 +11,7 @@ export declare class PrismRendererComponent {
     protected readonly canvasService: PrismCanvasService;
     protected readonly capture: PrismCaptureService;
     protected readonly variantBg: PrismVariantBgService;
+    private readonly pseudoState;
     /**
      * The width the canvas is actually constrained to, `null` for unconstrained.
      *
@@ -44,6 +45,7 @@ export declare class PrismRendererComponent {
     private readonly rendererHooks;
     private readonly panelService;
     private readonly pluginService;
+    private readonly pseudoMarker;
     private readonly outlet;
     private componentRef;
     private outputSubscriptions;
@@ -51,8 +53,23 @@ export declare class PrismRendererComponent {
     private isRenderPage;
     private readonly overlayCache;
     readonly activeOverlay: import("@angular/core").WritableSignal<Type<unknown> | null>;
-    /** Identifier of the currently rendered component/variant (for audit tooling / e2e). */
+    /**
+     * Identifier of the currently rendered component/variant, and of the active state.
+     * Held back until the forced pseudo states and the state are in place, see {@link resolveRenderedKey}.
+     */
     protected readonly renderedKey: import("@angular/core").Signal<string | null>;
+    /**
+     * Why the active state is not part of what the canvas shows, `null` when it is
+     * or none is active. A runner reads it next to `data-prism-rendered` and
+     * reports the cell as excluded rather than taking a picture of it.
+     */
+    protected readonly excludedReason: import("@angular/core").Signal<string | null>;
+    /**
+     * The states forced on the canvas, space-separated, `null` for none. Capture
+     * mode keys the room it leaves for focus rings on it. The active state's
+     * pseudo-classes count only while it fits.
+     */
+    protected readonly forcedStates: import("@angular/core").Signal<string | null>;
     /** Resolved canvas layout for the active variant. Variant overrides component config; defaults to 'fit'. */
     protected readonly canvasLayout: import("@angular/core").Signal<import("../../shared/canvas-layout.type.js").CanvasLayout>;
     protected readonly overlayInputs: {

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":"AACA,OAAO,EASH,QAAQ,EAER,KAAK,IAAI,EAIZ,MAAM,eAAe,CAAC;AAWvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAG3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAGjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAMhF,qBASa,sBAAsB;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;IAE7D;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa,gDAAuF;IAEvH,SAAS,CAAC,QAAQ,CAAC,YAAY,OAAgB;IAC/C,SAAS,CAAC,QAAQ,CAAC,YAAY,QAAgB;IAE/C;;;;;;;OAOG;IACH,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI/C,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,CAA0D;IACtF,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,4GAA4G;IAC5G,SAAS,CAAC,QAAQ,CAAC,YAAY,4FAO5B;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAC7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAI/B;;IAgFH,OAAO,CAAC,eAAe;IA8EvB,OAAO,CAAC,OAAO;yCAjPN,sBAAsB;2CAAtB,sBAAsB;CAgQlC"}
+{"version":3,"file":"prism-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/prism-renderer.component.ts"],"names":[],"mappings":"AACA,OAAO,EASH,QAAQ,EAGR,KAAK,IAAI,EAIZ,MAAM,eAAe,CAAC;AAYvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAG3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAIjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAOhF,qBASa,sBAAsB;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,WAAW,CAAmC;IAE/D;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa,gDAAuF;IAEvH,SAAS,CAAC,QAAQ,CAAC,YAAY,OAAgB;IAC/C,SAAS,CAAC,QAAQ,CAAC,YAAY,QAAgB;IAE/C;;;;;;;OAOG;IACH,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI/C,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;IAC5D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAmC;IAEhE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IACH,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,mBAAmB,CAAsC;IACjE,OAAO,CAAC,oBAAoB,CAA0D;IACtF,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoC;IACjE,QAAQ,CAAC,aAAa,+DAAsC;IAC5D;;;OAGG;IACH,SAAS,CAAC,QAAQ,CAAC,WAAW,gDAY3B;IACH;;;;OAIG;IACH,SAAS,CAAC,QAAQ,CAAC,cAAc,gDAE/B;IACF;;;;OAIG;IACH,SAAS,CAAC,QAAQ,CAAC,YAAY,gDAI5B;IACH,4GAA4G;IAC5G,SAAS,CAAC,QAAQ,CAAC,YAAY,4FAO5B;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAC7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAI/B;;IAmGH,OAAO,CAAC,eAAe;IAoFvB,OAAO,CAAC,OAAO;yCArSN,sBAAsB;2CAAtB,sBAAsB;CAoTlC"}

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

@@ -1,5 +1,5 @@
 import { NgComponentOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, computed, DestroyRef, effect, ElementRef, inject, Injector, signal, untracked, viewChild, ViewContainerRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, DestroyRef, effect, ElementRef, inject, Injector, reflectComponentType, signal, untracked, viewChild, ViewContainerRef } from '@angular/core';
 import { VIEWPORT_MAX, VIEWPORT_MIN } from '../../shared/viewport.type.js';
 import { CANVAS_BG_STYLES } from '../canvas/canvas-bg.styles.js';
 import { PrismCanvasBgPillComponent } from '../canvas/prism-canvas-bg-pill.component.js';
@@ -8,6 +8,7 @@ import { PrismCanvasRulersComponent } from '../canvas/prism-canvas-rulers.compon
 import { snapViewportWidth } from '../canvas/viewport-snap.js';
 import { PrismResizerDirective } from '../directives/prism-resizer.directive.js';
 import { BUILTIN_PANELS } from '../panels/builtin-panels.js';
+import { appliedStateNames } from '../pseudo/pseudo-state-marker.js';
 import { PrismCanvasService } from '../services/prism-canvas.service.js';
 import { PrismCaptureService } from '../services/prism-capture.service.js';
 import { PrismEventLogService } from '../services/prism-event-log.service.js';
@@ -15,12 +16,14 @@ import { PrismManifestService } from '../services/prism-manifest.service.js';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import { PrismPanelService } from '../services/prism-panel.service.js';
 import { PrismPluginService } from '../services/prism-plugin.service.js';
+import { PrismPseudoStateService } from '../services/prism-pseudo-state.service.js';
 import { PrismRendererService } from '../services/prism-renderer.service.js';
 import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
 import { PRISM_RENDERER_HOOKS } from '../tokens/prism-tokens.js';
-import { buildKnownInputs } from './known-inputs.js';
+import { buildInputBindings } from './input-bindings.js';
 import { resolveOverlay } from './overlay-resolver.js';
 import { parseContentToNodes } from './projectable-content.js';
+import { resolveExcludedReason, resolveRenderedKey } from './rendered-key.js';
 import * as i0 from "@angular/core";
 const _c0 = ["outlet"];
 function PrismRendererComponent_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
@@ -82,6 +85,7 @@ export class PrismRendererComponent {
     canvasService = inject(PrismCanvasService);
     capture = inject(PrismCaptureService);
     variantBg = inject(PrismVariantBgService);
+    pseudoState = inject(PrismPseudoStateService);
     /**
      * The width the canvas is actually constrained to, `null` for unconstrained.
      *
@@ -120,6 +124,7 @@ export class PrismRendererComponent {
     });
     panelService = inject(PrismPanelService);
     pluginService = inject(PrismPluginService);
+    pseudoMarker = this.pseudoState.createMarker();
     outlet = viewChild.required('outlet', { ...(ngDevMode ? { debugName: "outlet" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
     componentRef = null;
     outputSubscriptions = [];
@@ -128,17 +133,40 @@ export class PrismRendererComponent {
     overlayCache = new Map();
     activeOverlay = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeOverlay" }] : /* istanbul ignore next */ []));
-    /** Identifier of the currently rendered component/variant (for audit tooling / e2e). */
+    /**
+     * Identifier of the currently rendered component/variant, and of the active state.
+     * Held back until the forced pseudo states and the state are in place, see {@link resolveRenderedKey}.
+     */
     renderedKey = computed(() => {
-        const el = this.rendererService.renderedElement();
-        if (!el)
-            return null;
-        const comp = this.navigationService.activeComponent();
-        if (!comp)
-            return null;
-        return `${comp.meta.className}:${this.rendererService.activeVariantIndex()}`;
+        const { base, state } = this.pseudoState.layers();
+        return resolveRenderedKey({
+            component: this.navigationService.activeComponent(),
+            variantIndex: this.rendererService.activeVariantIndex(),
+            stateIndex: this.rendererService.activeStateIndex(),
+            element: this.rendererService.renderedElement(),
+            pseudo: base,
+            state,
+            pseudoApplied: this.pseudoMarker.applied()
+        });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "renderedKey" }] : /* istanbul ignore next */ []));
+    /**
+     * Why the active state is not part of what the canvas shows, `null` when it is
+     * or none is active. A runner reads it next to `data-prism-rendered` and
+     * reports the cell as excluded rather than taking a picture of it.
+     */
+    excludedReason = computed(() => resolveExcludedReason(this.rendererService.activeStateIndex(), this.pseudoState.stateExclusion(), this.pseudoMarker.applied()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "excludedReason" }] : /* istanbul ignore next */ []));
+    /**
+     * The states forced on the canvas, space-separated, `null` for none. Capture
+     * mode keys the room it leaves for focus rings on it. The active state's
+     * pseudo-classes count only while it fits.
+     */
+    forcedStates = computed(() => {
+        const names = appliedStateNames(this.pseudoMarker.applied());
+        return names.length > 0 ? names.join(' ') : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "forcedStates" }] : /* istanbul ignore next */ []));
     /** Resolved canvas layout for the active variant. Variant overrides component config; defaults to 'fit'. */
     canvasLayout = computed(() => {
         const comp = this.navigationService.activeComponent();
@@ -183,13 +211,14 @@ export class PrismRendererComponent {
                 return;
             }
             performance.mark('prism:rerender:start');
-            const knownInputs = buildKnownInputs(comp);
+            const inputBindings = buildInputBindings(comp);
             for (const [key, value] of Object.entries(inputs)) {
-                if (!knownInputs.has(key)) {
+                const binding = inputBindings.get(key);
+                if (binding === undefined) {
                     console.warn(`[ng-prism] Unknown input "${key}" on <${comp.meta.componentMeta.selector}>, skipping. Remove it from @Showcase variants.`);
                     continue;
                 }
-                ref.setInput(key, value);
+                ref.setInput(binding, value);
             }
             ref.changeDetectorRef.detectChanges();
             performance.mark('prism:rerender:end');
@@ -218,7 +247,21 @@ export class PrismRendererComponent {
                 }
             });
         });
-        this.destroyRef.onDestroy(() => this.cleanup());
+        // `renderedKey` waits for what this applies.
+        effect(() => {
+            const element = this.rendererService.renderedElement();
+            const { base, state } = this.pseudoState.layers();
+            untracked(() => this.pseudoMarker.apply(element, base, state));
+        });
+        // What the layers and the toggles of the tools menu depend on. Written from the marker alone and never
+        // read back here: `null` whenever no state layer is applied, so the fit of the previous state cannot linger.
+        effect(() => {
+            this.pseudoState.canvasFit.set(this.pseudoMarker.applied()?.fit ?? null);
+        });
+        this.destroyRef.onDestroy(() => {
+            this.cleanup();
+            this.pseudoMarker.clear();
+        });
     }
     createComponent(comp) {
         this.cleanup();
@@ -250,7 +293,9 @@ export class PrismRendererComponent {
         });
         const content = this.rendererService.activeContent();
         this.lastProjectedContent = content;
-        const projectableNodes = content ? parseContentToNodes(content) : undefined;
+        const projectableNodes = content
+            ? parseContentToNodes(content, reflectComponentType(comp.type)?.ngContentSelectors ?? [], (key) => console.warn(`[ng-prism] Variant content "${key}" matches no <ng-content> of ${comp.meta.className}, skipping it.`))
+            : undefined;
         this.componentRef = this.outlet().createComponent(comp.type, {
             injector,
             projectableNodes
@@ -262,13 +307,14 @@ export class PrismRendererComponent {
                 this.outputSubscriptions.push(sub);
             }
         }
-        const knownInputs = buildKnownInputs(comp);
+        const inputBindings = buildInputBindings(comp);
         for (const [key, value] of Object.entries(this.rendererService.inputValues())) {
-            if (!knownInputs.has(key)) {
+            const binding = inputBindings.get(key);
+            if (binding === undefined) {
                 console.warn(`[ng-prism] Unknown input "${key}" on <${selector}>, skipping. Remove it from @Showcase variants.`);
                 continue;
             }
-            this.componentRef.setInput(key, value);
+            this.componentRef.setInput(binding, value);
         }
         this.componentRef.changeDetectorRef.detectChanges();
         performance.mark('prism:render:end', detail);
@@ -295,7 +341,7 @@ export class PrismRendererComponent {
             i0.ɵɵviewQuerySignal(ctx.outlet, _c0, 5, ViewContainerRef);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, decls: 6, vars: 14, consts: [["outlet", ""], [1, "prism-canvas-stage"], [1, "demo-wrap"], [1, "stage-crosshair"], [1, "vp-dim"], [1, "vp-dim__rule"], [1, "vp-dim__v"], ["prismResizer", "", "axis", "x", "aria-label", "Viewport width, left edge", 1, "vp-grip", 3, "valueChange", "scale", "min", "max", "value"], [1, "vp-grip__bar"], ["prismResizer", "", "axis", "x", "aria-label", "Viewport width, right edge", 1, "vp-grip", "vp-grip--end", 3, "valueChange", "scale", "min", "max", "value"], [4, "ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector"]], template: function PrismRendererComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, decls: 6, vars: 16, consts: [["outlet", ""], [1, "prism-canvas-stage"], [1, "demo-wrap"], [1, "stage-crosshair"], [1, "vp-dim"], [1, "vp-dim__rule"], [1, "vp-dim__v"], ["prismResizer", "", "axis", "x", "aria-label", "Viewport width, left edge", 1, "vp-grip", 3, "valueChange", "scale", "min", "max", "value"], [1, "vp-grip__bar"], ["prismResizer", "", "axis", "x", "aria-label", "Viewport width, right edge", 1, "vp-grip", "vp-grip--end", 3, "valueChange", "scale", "min", "max", "value"], [4, "ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector"]], template: function PrismRendererComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1);
             i0.ɵɵconditionalCreate(1, PrismRendererComponent_Conditional_1_Template, 5, 4);
             i0.ɵɵelementStart(2, "div", 2);
@@ -309,15 +355,15 @@ export class PrismRendererComponent {
             i0.ɵɵconditional(!ctx.capture.active() ? 1 : -1);
             i0.ɵɵadvance();
             i0.ɵɵstyleProp("--%NS%zoom", ctx.canvasService.zoom());
-            i0.ɵɵattribute("data-prism-rendered", ctx.renderedKey())("data-canvas-layout", ctx.canvasLayout())("data-viewport", ctx.viewportWidth() !== null ? "" : null);
+            i0.ɵɵattribute("data-prism-rendered", ctx.renderedKey())("data-prism-excluded", ctx.excludedReason())("data-canvas-layout", ctx.canvasLayout())("data-viewport", ctx.viewportWidth() !== null ? "" : null)("data-pseudo", ctx.forcedStates());
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.activeOverlay() ? 5 : -1);
         } }, dependencies: [PrismCanvasRulersComponent, PrismCanvasBgPillComponent, PrismCanvasMeasureComponent, NgComponentOutlet, PrismResizerDirective], styles: ["[_nghost-%COMP%] {\n    display: block;\n    flex: 1;\n    min-height: 0;\n}\n\n.prism-canvas-stage[_ngcontent-%COMP%] {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    min-height: 200px;\n    padding: 32px;\n    overflow: auto;\n\n    \n\n\n\n\n\n\n\n\n\n\n    outline: 1px solid var(--%NS%prism-stage-edge);\n    outline-offset: -1px;\n    background-color: var(--%NS%prism-stage);\n    box-shadow:\n        0 1px 3px rgb(0 0 0 / 10%),\n        0 8px 24px -12px rgb(0 0 0 / 18%);\n    transition: filter var(--%NS%dur-base);\n\n    --%NS%prism-canvas-overlay-top: 12px;\n    --%NS%prism-canvas-overlay-inline: 20px;\n}\n\n.prism-canvas-stage[data-rulers][_ngcontent-%COMP%] {\n    --%NS%prism-canvas-overlay-top: 28px;\n    --%NS%prism-canvas-overlay-inline: 28px;\n}\n\n.stage-crosshair[_ngcontent-%COMP%] {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity var(--%NS%dur-base);\n}\n\n.stage-crosshair.visible[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.stage-crosshair[_ngcontent-%COMP%]::before, \n.stage-crosshair[_ngcontent-%COMP%]::after {\n    position: absolute;\n    content: '';\n    background: color-mix(in srgb, var(--%NS%prism-primary) 20%, transparent);\n}\n\n.stage-crosshair[_ngcontent-%COMP%]::before {\n    top: 50%;\n    right: 0;\n    left: 0;\n    height: 1px;\n}\n\n.stage-crosshair[_ngcontent-%COMP%]::after {\n    top: 0;\n    bottom: 0;\n    left: 50%;\n    width: 1px;\n}\n\n.demo-wrap[_ngcontent-%COMP%] {\n    position: relative;\n    display: inline-block;\n    transform: scale(var(--%NS%zoom, 1));\n    transition: transform 0.18s;\n}\n\n.demo-wrap[data-canvas-layout='stretch'][_ngcontent-%COMP%] {\n    display: block;\n    width: 100%;\n    max-width: 800px;\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\n\n\n\n\n\n.demo-wrap[data-viewport][_ngcontent-%COMP%] {\n    display: grid;\n\n    \n\n\n\n\n\n\n\n\n    flex: none;\n\n    \n\n\n\n\n\n\n    justify-items: safe center;\n    width: var(--%NS%prism-vp-w);\n    max-width: none;\n    container-type: inline-size;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.vp-grip[_ngcontent-%COMP%] {\n    position: absolute;\n    top: var(--%NS%prism-canvas-overlay-top, 12px);\n    bottom: 0;\n    left: calc(50% - var(--%NS%prism-vp-w) * var(--%NS%zoom, 1) / 2 - 4.5px);\n    z-index: 4;\n    display: grid;\n    width: 9px;\n\n    \n\n\n\n\n\n    pointer-events: none;\n    background: transparent;\n}\n\n.vp-grip--end[_ngcontent-%COMP%] {\n    right: calc(50% - var(--%NS%prism-vp-w) * var(--%NS%zoom, 1) / 2 - 4.5px);\n    left: auto;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n.vp-grip__bar[_ngcontent-%COMP%] {\n    z-index: 1;\n    box-sizing: content-box;\n    grid-area: 1 / 1;\n    place-self: center center;\n    width: 3px;\n    height: 34px;\n    padding: 5px 3px;\n    pointer-events: auto;\n    background: color-mix(in srgb, var(--%NS%prism-measure) 80%, transparent);\n    background-clip: content-box;\n    border-radius: 2px;\n    transition: background var(--%NS%dur-fast);\n}\n\n\n\n\n\n\n.vp-grip[_ngcontent-%COMP%]::after {\n    grid-area: 1 / 1;\n    place-self: stretch center;\n    width: 1px;\n    content: '';\n    background: color-mix(in srgb, var(--%NS%prism-measure) 75%, transparent);\n    transition: background var(--%NS%dur-fast);\n}\n\n.vp-grip[_ngcontent-%COMP%]:hover::after, \n.vp-grip.active[_ngcontent-%COMP%]::after, \n.vp-grip[_ngcontent-%COMP%]:focus-visible::after {\n    background: color-mix(in srgb, var(--%NS%prism-measure) 55%, transparent);\n}\n\n.vp-grip[_ngcontent-%COMP%]:hover   .vp-grip__bar[_ngcontent-%COMP%], \n.vp-grip.active[_ngcontent-%COMP%]   .vp-grip__bar[_ngcontent-%COMP%], \n.vp-grip[_ngcontent-%COMP%]:focus-visible   .vp-grip__bar[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-measure);\n    background-clip: content-box;\n}\n\n\n\n\n.vp-grip[_ngcontent-%COMP%]:focus-visible {\n    outline: none;\n}\n\n.vp-grip[_ngcontent-%COMP%]:focus-visible   .vp-grip__bar[_ngcontent-%COMP%] {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 1px;\n}\n\n\n\n\n\n\n\n\n\n\n.vp-dim[_ngcontent-%COMP%] {\n    position: absolute;\n    top: var(--%NS%prism-canvas-overlay-top, 12px);\n    left: 50%;\n    z-index: 4;\n    display: flex;\n    gap: var(--%NS%sp-3);\n    align-items: center;\n    width: calc(var(--%NS%prism-vp-w) * var(--%NS%zoom, 1));\n    pointer-events: none;\n    transform: translateX(-50%);\n}\n\n\n\n\n.vp-dim__rule[_ngcontent-%COMP%] {\n    position: relative;\n    flex: 1;\n    height: 1px;\n    background: color-mix(in srgb, var(--%NS%prism-measure) 70%, transparent);\n}\n\n\n\n\n.vp-dim__rule[_ngcontent-%COMP%]::before {\n    position: absolute;\n    top: -3px;\n    width: 1px;\n    height: 7px;\n    content: '';\n    background: color-mix(in srgb, var(--%NS%prism-measure) 90%, transparent);\n}\n\n.vp-dim__rule[_ngcontent-%COMP%]:first-child::before {\n    left: 0;\n}\n\n.vp-dim__rule[_ngcontent-%COMP%]:last-child::before {\n    right: 0;\n}\n\n.vp-dim__v[_ngcontent-%COMP%] {\n    flex: none;\n    font-family: var(--%NS%font-mono);\n    font-size: 9px;\n    color: var(--%NS%prism-measure);\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(PrismRendererComponent, [{
         type: Component,
-        args: [{ selector: 'prism-renderer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismCanvasRulersComponent, PrismCanvasBgPillComponent, PrismCanvasMeasureComponent, NgComponentOutlet, PrismResizerDirective], template: "<div\n    class=\"prism-canvas-stage\"\n    [attr.data-bg]=\"variantBg.effective()\"\n    [attr.data-rulers]=\"canvasService.rulers() ? '' : null\"\n    [attr.data-viewport]=\"viewportWidth() !== null ? '' : null\"\n    [style.--prism-vp-w.px]=\"viewportWidth()\"\n    [style.--zoom]=\"canvasService.zoom()\">\n    @if (!capture.active()) {\n        <div\n            class=\"stage-crosshair\"\n            [class.visible]=\"canvasService.guides()\"></div>\n        <prism-canvas-rulers />\n        @if (canvasService.measure()) {\n            <prism-canvas-measure />\n        }\n        <prism-canvas-bg-pill />\n        @if (viewportWidth() !== null) {\n            <!-- Grips and the dimension line are siblings of .demo-wrap, never\n       children of it: .demo-wrap is what plugin-visual-regression\n       screenshots, and anything inside it composites into every baseline.\n       They sit inside the capture guard for the same reason the rulers and\n       the pill do. -->\n            <span class=\"vp-dim\">\n                <span class=\"vp-dim__rule\"></span>\n                <span class=\"vp-dim__v\">{{ viewportWidth() }} px</span>\n                <span class=\"vp-dim__rule\"></span>\n            </span>\n            <div\n                class=\"vp-grip\"\n                prismResizer\n                axis=\"x\"\n                [scale]=\"-2 / (canvasService.zoom() || 1)\"\n                [min]=\"VIEWPORT_MIN\"\n                [max]=\"VIEWPORT_MAX\"\n                [value]=\"viewportWidth()!\"\n                (valueChange)=\"onViewportResize($event)\"\n                aria-label=\"Viewport width, left edge\"\n                [attr.aria-valuenow]=\"viewportWidth()\"\n                [attr.aria-valuemin]=\"VIEWPORT_MIN\"\n                [attr.aria-valuemax]=\"VIEWPORT_MAX\">\n                <span class=\"vp-grip__bar\"></span>\n            </div>\n            <div\n                class=\"vp-grip vp-grip--end\"\n                prismResizer\n                axis=\"x\"\n                [scale]=\"2 / (canvasService.zoom() || 1)\"\n                [min]=\"VIEWPORT_MIN\"\n                [max]=\"VIEWPORT_MAX\"\n                [value]=\"viewportWidth()!\"\n                (valueChange)=\"onViewportResize($event)\"\n                aria-label=\"Viewport width, right edge\"\n                [attr.aria-valuenow]=\"viewportWidth()\"\n                [attr.aria-valuemin]=\"VIEWPORT_MIN\"\n                [attr.aria-valuemax]=\"VIEWPORT_MAX\">\n                <span class=\"vp-grip__bar\"></span>\n            </div>\n        }\n    }\n\n    <div\n        class=\"demo-wrap\"\n        [style.--zoom]=\"canvasService.zoom()\"\n        [attr.data-prism-rendered]=\"renderedKey()\"\n        [attr.data-canvas-layout]=\"canvasLayout()\"\n        [attr.data-viewport]=\"viewportWidth() !== null ? '' : null\">\n        <ng-container #outlet />\n        @if (activeOverlay()) {\n            <ng-container *ngComponentOutlet=\"activeOverlay()!; inputs: overlayInputs; injector: overlayInjector()\" />\n        }\n    </div>\n</div>\n", styles: [":host {\n    display: block;\n    flex: 1;\n    min-height: 0;\n}\n\n.prism-canvas-stage {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    min-height: 200px;\n    padding: 32px;\n    overflow: auto;\n\n    /* The edge is outline + shadow, never border and never extra padding.\n   plugin-visual-regression screenshots .demo-wrap, which is centred in\n   this element; a border would shrink the content box by 2px and move\n   that centre, shifting all 15 baselines in test-workspace/vrt/baseline\n   without a single component having changed. Capture mode resets this\n   element's padding but not its border, and this repo has no VRT runner\n   to catch the drift. outline and box-shadow do not participate in\n   layout, so the box is provably unchanged. Keep it that way.\n   They do still paint, and outline-offset is negative, so the line lands\n   inside the box: CAPTURE_STYLES in prism-capture.service.ts sets both\n   to none, which is only safe because neither affects layout here. */\n    outline: 1px solid var(--prism-stage-edge);\n    outline-offset: -1px;\n    background-color: var(--prism-stage);\n    box-shadow:\n        0 1px 3px rgb(0 0 0 / 10%),\n        0 8px 24px -12px rgb(0 0 0 / 18%);\n    transition: filter var(--dur-base);\n\n    --prism-canvas-overlay-top: 12px;\n    --prism-canvas-overlay-inline: 20px;\n}\n\n.prism-canvas-stage[data-rulers] {\n    --prism-canvas-overlay-top: 28px;\n    --prism-canvas-overlay-inline: 28px;\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\n.stage-crosshair.visible {\n    opacity: 1;\n}\n\n.stage-crosshair::before,\n.stage-crosshair::after {\n    position: absolute;\n    content: '';\n    background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n}\n\n.stage-crosshair::before {\n    top: 50%;\n    right: 0;\n    left: 0;\n    height: 1px;\n}\n\n.stage-crosshair::after {\n    top: 0;\n    bottom: 0;\n    left: 50%;\n    width: 1px;\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\n.demo-wrap[data-canvas-layout='stretch'] {\n    display: block;\n    width: 100%;\n    max-width: 800px;\n}\n\n/* max-width: none rather than min(800px, var(--prism-vp-w)): an explicitly\n   requested width beats a layout default, and min() would silently cap a\n   1024 viewport at 800 on any component declaring canvasLayout:\n   'stretch'.\n\n   container-type must stay confined to this rule. It implies contain: inline-size, which on the width:auto\n   inline-block .demo-wrap is at rest would decouple its width from its\n   contents, collapsing the box and shifting every baseline in\n   test-workspace/vrt/baseline without a component having changed. Here\n   the width is explicit, so containment costs nothing and is what makes\n   a component's own @container rules respond. Media queries do not and\n   cannot: they read the real browser viewport.\n\n   grid + justify-items: center, and not text-align: center, which is the\n   obvious way to centre an inline-level child and the wrong one. The\n   showcase component is created through ViewContainerRef, so its host\n   element carries none of this component's _ngcontent attribute and no\n   scoped rule here can reach it to undo an inherited value. text-align\n   would therefore leak all the way into the specimen and silently\n   re-align its own text the moment the viewport is switched on. That is a\n   canvas that lies about what it is showing. Centring at the container\n   instead touches nothing inside.\n\n   Shrinking is not a side effect of that choice, it is the resting\n   behaviour preserved: at rest .demo-wrap is an inline-block that\n   already shrink-wraps its child, so a block-level specimen sizes to its\n   content here the same as with the constraint off. The implicit\n   auto column still fills the declared width, so a component that asks\n   for width: 100% (the canvasLayout: 'stretch' case) keeps getting the\n   whole viewport. */\n.demo-wrap[data-viewport] {\n    display: grid;\n\n    /* flex: none is required. The stage is a flex container\n     and this is its only item, so the default flex-shrink: 1 lets the\n     box render narrower than the width just asked for whenever the\n     canvas is the smaller of the two, and container-type below drops\n     the automatic minimum size to zero, so nothing stops the shrink.\n     The result is the one failure this whole feature cannot afford:\n     the dimension line states 1024 while every @container rule in the\n     specimen answers whatever the canvas happened to allow. The stage\n     is overflow: auto, so refusing to shrink scrolls instead. */\n    flex: none;\n\n    /* safe center, not bare center. Centring is right while the specimen\n     fits and wrong the moment it does not: bare centring spills an\n     over-wide specimen equally past both edges, where a real viewport of\n     that width clips at zero and scrolls in one direction. The safe\n     keyword falls back to start only when the item overflows, which\n     is the browser making a case distinction CSS cannot otherwise\n     express. */\n    justify-items: safe center;\n    width: var(--prism-vp-w);\n    max-width: none;\n    container-type: inline-size;\n}\n\n/* Both grips derive their position arithmetically, because .demo-wrap is\n   centred by the stage's own flexbox and then scaled in place by\n   transform: scale(var(--zoom)): the transform preserves that centre, so\n   each edge sits half the *painted* width (--prism-vp-w times --zoom) away\n   from the middle. No measurement, no ResizeObserver, and nothing to\n   fall out of step when either the width or the zoom changes.\n\n   The grip's own [scale] input (in the template) undoes the same factor\n   in the other direction: a pointer that has moved dx across the painted\n   box must change --prism-vp-w by dx / zoom for the grip to stay under the\n   cursor, so the directive multiplier is 2 / zoom on the right grip and\n   -2 / zoom on the left, not the flat \u00B12 a permanent zoom of 1 would\n   need. */\n.vp-grip {\n    position: absolute;\n    top: var(--prism-canvas-overlay-top, 12px);\n    bottom: 0;\n    left: calc(50% - var(--prism-vp-w) * var(--zoom, 1) / 2 - 4.5px);\n    z-index: 4;\n    display: grid;\n    width: 9px;\n\n    /* The element is the guide line's full-height track and must not be\n     clickable. It runs from the overlay band to the\n     bottom of the stage at z-index 4, straight over prism-canvas-bg-pill\n     at z-index 2, so leaving it hit-testable made part of the pill's\n     Reset button unreachable whenever a viewport was on. Only the bar\n     below takes pointer events back. */\n    pointer-events: none;\n    background: transparent;\n}\n\n.vp-grip--end {\n    right: calc(50% - var(--prism-vp-w) * var(--zoom, 1) / 2 - 4.5px);\n    left: auto;\n}\n\n/* The part you grab, and the only part of the grip that takes pointer\n   events back. It shares the guide line's grid cell (hence the matching\n   grid-area) and is raised above it so the 1px rule does not paint a\n   seam down the middle of the 3px bar.\n\n   The padding is the hit box and the background is the bar: content-box\n   sizing plus background-clip: content-box paints 3x34 while leaving\n   9x44 clickable, so the target is comfortable without the mark growing\n   to match. It is still narrow for WCAG 2.5.8, which the Width chooser\n   in the tools menu answers: the same widths are reachable there, and\n   both grips take Home/End and the arrow keys. */\n.vp-grip__bar {\n    z-index: 1;\n    box-sizing: content-box;\n    grid-area: 1 / 1;\n    place-self: center center;\n    width: 3px;\n    height: 34px;\n    padding: 5px 3px;\n    pointer-events: auto;\n    background: color-mix(in srgb, var(--prism-measure) 80%, transparent);\n    background-clip: content-box;\n    border-radius: 2px;\n    transition: background var(--dur-fast);\n}\n\n/* The edge itself, carried the whole height of the stage. Without it a\n   grip is a floating nub that says where you may pull but not what it is\n   pulling: the line is what makes the constrained region legible as a\n   region rather than as two loose handles. Kept faint because it crosses\n   the specimen, so it has to stay readable as chrome. */\n.vp-grip::after {\n    grid-area: 1 / 1;\n    place-self: stretch center;\n    width: 1px;\n    content: '';\n    background: color-mix(in srgb, var(--prism-measure) 75%, transparent);\n    transition: background var(--dur-fast);\n}\n\n.vp-grip:hover::after,\n.vp-grip.active::after,\n.vp-grip:focus-visible::after {\n    background: color-mix(in srgb, var(--prism-measure) 55%, transparent);\n}\n\n.vp-grip:hover .vp-grip__bar,\n.vp-grip.active .vp-grip__bar,\n.vp-grip:focus-visible .vp-grip__bar {\n    background: var(--prism-measure);\n    background-clip: content-box;\n}\n\n/* The ring goes on the bar, not on the host: the host is the full-height\n   track, and outlining that would draw a rule the length of the stage\n   for a control 34px tall. */\n.vp-grip:focus-visible {\n    outline: none;\n}\n\n.vp-grip:focus-visible .vp-grip__bar {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 1px;\n}\n\n/* The third resident of the overlay band: pill left, dimension centre,\n   rail right. It reads the same --prism-canvas-overlay-top the other two\n   do, so switching rulers on moves all three together.\n\n   Spans the painted width rather than sitting in the middle of it as a\n   badge, and carries the same --prism-vp-w * --zoom the grips do so the\n   three stay locked together. A badge states a number; a dimension line\n   states which distance the number measures, and that is the whole\n   claim this overlay makes. */\n.vp-dim {\n    position: absolute;\n    top: var(--prism-canvas-overlay-top, 12px);\n    left: 50%;\n    z-index: 4;\n    display: flex;\n    gap: var(--sp-3);\n    align-items: center;\n    width: calc(var(--prism-vp-w) * var(--zoom, 1));\n    pointer-events: none;\n    transform: translateX(-50%);\n}\n\n/* Two halves with the value in the gap, rather than one rule behind it:\n   a line running under the digits would need a background plate to stay\n   readable, and the plate is the badge this replaced. */\n.vp-dim__rule {\n    position: relative;\n    flex: 1;\n    height: 1px;\n    background: color-mix(in srgb, var(--prism-measure) 70%, transparent);\n}\n\n/* The end ticks. They are what make the rule read as a measurement of\n   the span between them instead of as a divider laid across the canvas,\n   and they mark the two edges the grips can be dragged to. */\n.vp-dim__rule::before {\n    position: absolute;\n    top: -3px;\n    width: 1px;\n    height: 7px;\n    content: '';\n    background: color-mix(in srgb, var(--prism-measure) 90%, transparent);\n}\n\n.vp-dim__rule:first-child::before {\n    left: 0;\n}\n\n.vp-dim__rule:last-child::before {\n    right: 0;\n}\n\n.vp-dim__v {\n    flex: none;\n    font-family: var(--font-mono);\n    font-size: 9px;\n    color: var(--prism-measure);\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"] }]
+        args: [{ selector: 'prism-renderer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismCanvasRulersComponent, PrismCanvasBgPillComponent, PrismCanvasMeasureComponent, NgComponentOutlet, PrismResizerDirective], template: "<div\n    class=\"prism-canvas-stage\"\n    [attr.data-bg]=\"variantBg.effective()\"\n    [attr.data-rulers]=\"canvasService.rulers() ? '' : null\"\n    [attr.data-viewport]=\"viewportWidth() !== null ? '' : null\"\n    [style.--prism-vp-w.px]=\"viewportWidth()\"\n    [style.--zoom]=\"canvasService.zoom()\">\n    @if (!capture.active()) {\n        <div\n            class=\"stage-crosshair\"\n            [class.visible]=\"canvasService.guides()\"></div>\n        <prism-canvas-rulers />\n        @if (canvasService.measure()) {\n            <prism-canvas-measure />\n        }\n        <prism-canvas-bg-pill />\n        @if (viewportWidth() !== null) {\n            <!-- Grips and the dimension line are siblings of .demo-wrap, never\n       children of it: .demo-wrap is what plugin-visual-regression\n       screenshots, and anything inside it composites into every baseline.\n       They sit inside the capture guard for the same reason the rulers and\n       the pill do. -->\n            <span class=\"vp-dim\">\n                <span class=\"vp-dim__rule\"></span>\n                <span class=\"vp-dim__v\">{{ viewportWidth() }} px</span>\n                <span class=\"vp-dim__rule\"></span>\n            </span>\n            <div\n                class=\"vp-grip\"\n                prismResizer\n                axis=\"x\"\n                [scale]=\"-2 / (canvasService.zoom() || 1)\"\n                [min]=\"VIEWPORT_MIN\"\n                [max]=\"VIEWPORT_MAX\"\n                [value]=\"viewportWidth()!\"\n                (valueChange)=\"onViewportResize($event)\"\n                aria-label=\"Viewport width, left edge\"\n                [attr.aria-valuenow]=\"viewportWidth()\"\n                [attr.aria-valuemin]=\"VIEWPORT_MIN\"\n                [attr.aria-valuemax]=\"VIEWPORT_MAX\">\n                <span class=\"vp-grip__bar\"></span>\n            </div>\n            <div\n                class=\"vp-grip vp-grip--end\"\n                prismResizer\n                axis=\"x\"\n                [scale]=\"2 / (canvasService.zoom() || 1)\"\n                [min]=\"VIEWPORT_MIN\"\n                [max]=\"VIEWPORT_MAX\"\n                [value]=\"viewportWidth()!\"\n                (valueChange)=\"onViewportResize($event)\"\n                aria-label=\"Viewport width, right edge\"\n                [attr.aria-valuenow]=\"viewportWidth()\"\n                [attr.aria-valuemin]=\"VIEWPORT_MIN\"\n                [attr.aria-valuemax]=\"VIEWPORT_MAX\">\n                <span class=\"vp-grip__bar\"></span>\n            </div>\n        }\n    }\n\n    <div\n        class=\"demo-wrap\"\n        [style.--zoom]=\"canvasService.zoom()\"\n        [attr.data-prism-rendered]=\"renderedKey()\"\n        [attr.data-prism-excluded]=\"excludedReason()\"\n        [attr.data-canvas-layout]=\"canvasLayout()\"\n        [attr.data-viewport]=\"viewportWidth() !== null ? '' : null\"\n        [attr.data-pseudo]=\"forcedStates()\">\n        <ng-container #outlet />\n        @if (activeOverlay()) {\n            <ng-container *ngComponentOutlet=\"activeOverlay()!; inputs: overlayInputs; injector: overlayInjector()\" />\n        }\n    </div>\n</div>\n", styles: [":host {\n    display: block;\n    flex: 1;\n    min-height: 0;\n}\n\n.prism-canvas-stage {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    min-height: 200px;\n    padding: 32px;\n    overflow: auto;\n\n    /* The edge is outline + shadow, never border and never extra padding.\n   plugin-visual-regression screenshots .demo-wrap, which is centred in\n   this element; a border would shrink the content box by 2px and move\n   that centre, shifting all 15 baselines in test-workspace/vrt/baseline\n   without a single component having changed. Capture mode resets this\n   element's padding but not its border, and this repo has no VRT runner\n   to catch the drift. outline and box-shadow do not participate in\n   layout, so the box is provably unchanged. Keep it that way.\n   They do still paint, and outline-offset is negative, so the line lands\n   inside the box: CAPTURE_STYLES in prism-capture.service.ts sets both\n   to none, which is only safe because neither affects layout here. */\n    outline: 1px solid var(--prism-stage-edge);\n    outline-offset: -1px;\n    background-color: var(--prism-stage);\n    box-shadow:\n        0 1px 3px rgb(0 0 0 / 10%),\n        0 8px 24px -12px rgb(0 0 0 / 18%);\n    transition: filter var(--dur-base);\n\n    --prism-canvas-overlay-top: 12px;\n    --prism-canvas-overlay-inline: 20px;\n}\n\n.prism-canvas-stage[data-rulers] {\n    --prism-canvas-overlay-top: 28px;\n    --prism-canvas-overlay-inline: 28px;\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\n.stage-crosshair.visible {\n    opacity: 1;\n}\n\n.stage-crosshair::before,\n.stage-crosshair::after {\n    position: absolute;\n    content: '';\n    background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n}\n\n.stage-crosshair::before {\n    top: 50%;\n    right: 0;\n    left: 0;\n    height: 1px;\n}\n\n.stage-crosshair::after {\n    top: 0;\n    bottom: 0;\n    left: 50%;\n    width: 1px;\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\n.demo-wrap[data-canvas-layout='stretch'] {\n    display: block;\n    width: 100%;\n    max-width: 800px;\n}\n\n/* max-width: none rather than min(800px, var(--prism-vp-w)): an explicitly\n   requested width beats a layout default, and min() would silently cap a\n   1024 viewport at 800 on any component declaring canvasLayout:\n   'stretch'.\n\n   container-type must stay confined to this rule. It implies contain: inline-size, which on the width:auto\n   inline-block .demo-wrap is at rest would decouple its width from its\n   contents, collapsing the box and shifting every baseline in\n   test-workspace/vrt/baseline without a component having changed. Here\n   the width is explicit, so containment costs nothing and is what makes\n   a component's own @container rules respond. Media queries do not and\n   cannot: they read the real browser viewport.\n\n   grid + justify-items: center, and not text-align: center, which is the\n   obvious way to centre an inline-level child and the wrong one. The\n   showcase component is created through ViewContainerRef, so its host\n   element carries none of this component's _ngcontent attribute and no\n   scoped rule here can reach it to undo an inherited value. text-align\n   would therefore leak all the way into the specimen and silently\n   re-align its own text the moment the viewport is switched on. That is a\n   canvas that lies about what it is showing. Centring at the container\n   instead touches nothing inside.\n\n   Shrinking is not a side effect of that choice, it is the resting\n   behaviour preserved: at rest .demo-wrap is an inline-block that\n   already shrink-wraps its child, so a block-level specimen sizes to its\n   content here the same as with the constraint off. The implicit\n   auto column still fills the declared width, so a component that asks\n   for width: 100% (the canvasLayout: 'stretch' case) keeps getting the\n   whole viewport. */\n.demo-wrap[data-viewport] {\n    display: grid;\n\n    /* flex: none is required. The stage is a flex container\n     and this is its only item, so the default flex-shrink: 1 lets the\n     box render narrower than the width just asked for whenever the\n     canvas is the smaller of the two, and container-type below drops\n     the automatic minimum size to zero, so nothing stops the shrink.\n     The result is the one failure this whole feature cannot afford:\n     the dimension line states 1024 while every @container rule in the\n     specimen answers whatever the canvas happened to allow. The stage\n     is overflow: auto, so refusing to shrink scrolls instead. */\n    flex: none;\n\n    /* safe center, not bare center. Centring is right while the specimen\n     fits and wrong the moment it does not: bare centring spills an\n     over-wide specimen equally past both edges, where a real viewport of\n     that width clips at zero and scrolls in one direction. The safe\n     keyword falls back to start only when the item overflows, which\n     is the browser making a case distinction CSS cannot otherwise\n     express. */\n    justify-items: safe center;\n    width: var(--prism-vp-w);\n    max-width: none;\n    container-type: inline-size;\n}\n\n/* Both grips derive their position arithmetically, because .demo-wrap is\n   centred by the stage's own flexbox and then scaled in place by\n   transform: scale(var(--zoom)): the transform preserves that centre, so\n   each edge sits half the *painted* width (--prism-vp-w times --zoom) away\n   from the middle. No measurement, no ResizeObserver, and nothing to\n   fall out of step when either the width or the zoom changes.\n\n   The grip's own [scale] input (in the template) undoes the same factor\n   in the other direction: a pointer that has moved dx across the painted\n   box must change --prism-vp-w by dx / zoom for the grip to stay under the\n   cursor, so the directive multiplier is 2 / zoom on the right grip and\n   -2 / zoom on the left, not the flat \u00B12 a permanent zoom of 1 would\n   need. */\n.vp-grip {\n    position: absolute;\n    top: var(--prism-canvas-overlay-top, 12px);\n    bottom: 0;\n    left: calc(50% - var(--prism-vp-w) * var(--zoom, 1) / 2 - 4.5px);\n    z-index: 4;\n    display: grid;\n    width: 9px;\n\n    /* The element is the guide line's full-height track and must not be\n     clickable. It runs from the overlay band to the\n     bottom of the stage at z-index 4, straight over prism-canvas-bg-pill\n     at z-index 2, so leaving it hit-testable made part of the pill's\n     Reset button unreachable whenever a viewport was on. Only the bar\n     below takes pointer events back. */\n    pointer-events: none;\n    background: transparent;\n}\n\n.vp-grip--end {\n    right: calc(50% - var(--prism-vp-w) * var(--zoom, 1) / 2 - 4.5px);\n    left: auto;\n}\n\n/* The part you grab, and the only part of the grip that takes pointer\n   events back. It shares the guide line's grid cell (hence the matching\n   grid-area) and is raised above it so the 1px rule does not paint a\n   seam down the middle of the 3px bar.\n\n   The padding is the hit box and the background is the bar: content-box\n   sizing plus background-clip: content-box paints 3x34 while leaving\n   9x44 clickable, so the target is comfortable without the mark growing\n   to match. It is still narrow for WCAG 2.5.8, which the Width chooser\n   in the tools menu answers: the same widths are reachable there, and\n   both grips take Home/End and the arrow keys. */\n.vp-grip__bar {\n    z-index: 1;\n    box-sizing: content-box;\n    grid-area: 1 / 1;\n    place-self: center center;\n    width: 3px;\n    height: 34px;\n    padding: 5px 3px;\n    pointer-events: auto;\n    background: color-mix(in srgb, var(--prism-measure) 80%, transparent);\n    background-clip: content-box;\n    border-radius: 2px;\n    transition: background var(--dur-fast);\n}\n\n/* The edge itself, carried the whole height of the stage. Without it a\n   grip is a floating nub that says where you may pull but not what it is\n   pulling: the line is what makes the constrained region legible as a\n   region rather than as two loose handles. Kept faint because it crosses\n   the specimen, so it has to stay readable as chrome. */\n.vp-grip::after {\n    grid-area: 1 / 1;\n    place-self: stretch center;\n    width: 1px;\n    content: '';\n    background: color-mix(in srgb, var(--prism-measure) 75%, transparent);\n    transition: background var(--dur-fast);\n}\n\n.vp-grip:hover::after,\n.vp-grip.active::after,\n.vp-grip:focus-visible::after {\n    background: color-mix(in srgb, var(--prism-measure) 55%, transparent);\n}\n\n.vp-grip:hover .vp-grip__bar,\n.vp-grip.active .vp-grip__bar,\n.vp-grip:focus-visible .vp-grip__bar {\n    background: var(--prism-measure);\n    background-clip: content-box;\n}\n\n/* The ring goes on the bar, not on the host: the host is the full-height\n   track, and outlining that would draw a rule the length of the stage\n   for a control 34px tall. */\n.vp-grip:focus-visible {\n    outline: none;\n}\n\n.vp-grip:focus-visible .vp-grip__bar {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 1px;\n}\n\n/* The third resident of the overlay band: pill left, dimension centre,\n   rail right. It reads the same --prism-canvas-overlay-top the other two\n   do, so switching rulers on moves all three together.\n\n   Spans the painted width rather than sitting in the middle of it as a\n   badge, and carries the same --prism-vp-w * --zoom the grips do so the\n   three stay locked together. A badge states a number; a dimension line\n   states which distance the number measures, and that is the whole\n   claim this overlay makes. */\n.vp-dim {\n    position: absolute;\n    top: var(--prism-canvas-overlay-top, 12px);\n    left: 50%;\n    z-index: 4;\n    display: flex;\n    gap: var(--sp-3);\n    align-items: center;\n    width: calc(var(--prism-vp-w) * var(--zoom, 1));\n    pointer-events: none;\n    transform: translateX(-50%);\n}\n\n/* Two halves with the value in the gap, rather than one rule behind it:\n   a line running under the digits would need a background plate to stay\n   readable, and the plate is the badge this replaced. */\n.vp-dim__rule {\n    position: relative;\n    flex: 1;\n    height: 1px;\n    background: color-mix(in srgb, var(--prism-measure) 70%, transparent);\n}\n\n/* The end ticks. They are what make the rule read as a measurement of\n   the span between them instead of as a divider laid across the canvas,\n   and they mark the two edges the grips can be dragged to. */\n.vp-dim__rule::before {\n    position: absolute;\n    top: -3px;\n    width: 1px;\n    height: 7px;\n    content: '';\n    background: color-mix(in srgb, var(--prism-measure) 90%, transparent);\n}\n\n.vp-dim__rule:first-child::before {\n    left: 0;\n}\n\n.vp-dim__rule:last-child::before {\n    right: 0;\n}\n\n.vp-dim__v {\n    flex: none;\n    font-family: var(--font-mono);\n    font-size: 9px;\n    color: var(--prism-measure);\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"] }]
     }], () => [], { 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: 51 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismRendererComponent, { className: "PrismRendererComponent", filePath: "app/renderer/prism-renderer.component.ts", lineNumber: 55 }); })();

package/dist/app/renderer/projectable-content.d.ts

@@ -5,6 +5,13 @@
  * Shared by the Playground stage and the Overview cells: both project the same
  * developer-authored content, and the slot-selector handling is the one piece
  * of that neither wants to own twice.
+ *
+ * `createComponent` hands `projectableNodes[i]` to the i-th `<ng-content>` of
+ * the template and never looks at selectors, so the lists are ordered by the
+ * component's `ngContentSelectors` (`reflectComponentType`): `default` (or a
+ * plain string) goes to the `*` slot, every other key to the slot whose
+ * `select` it names. A key no slot takes is dropped and reported to
+ * `onUnmatchedKey`.
  */
-export declare function parseContentToNodes(content: string | Record<string, string>): Node[][];
+export declare function parseContentToNodes(content: string | Record<string, string>, ngContentSelectors: readonly string[], onUnmatchedKey?: (key: string) => void): Node[][];
 //# sourceMappingURL=projectable-content.d.ts.map