@ng-prism/core 22.5.0 → 22.6.0

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

@@ -2,7 +2,6 @@ export const A11Y_CORE_PANEL = {
     id: 'a11y',
     label: 'A11y',
     icon: 'accessibility',
-    position: 'bottom',
     placement: 'addon',
     loadComponent: () => import('./a11y-panel.component.js').then((m) => m.A11yPanelComponent),
     loadOverlayComponent: () => import('./a11y-overlay-host.component.js').then((m) => m.A11yOverlayHostComponent)

package/dist/app/panels/controls/controls-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controls-plugin.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/controls/controls-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAGrE,eAAO,MAAM,eAAe,EAAE,aAW7B,CAAC"}
+{"version":3,"file":"controls-plugin.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/controls/controls-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAGrE,eAAO,MAAM,eAAe,EAAE,aAU7B,CAAC"}

package/dist/app/panels/controls/controls-plugin.js

@@ -6,8 +6,7 @@ export const CONTROLS_PLUGIN = {
             id: 'controls',
             label: 'Controls',
             icon: 'sliders-horizontal',
-            component: PrismControlsPanelComponent,
-            position: 'bottom'
+            component: PrismControlsPanelComponent
         }
     ]
 };

package/dist/app/panels/events/events-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"events-plugin.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/events/events-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAGrE,eAAO,MAAM,aAAa,EAAE,aAW3B,CAAC"}
+{"version":3,"file":"events-plugin.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/events/events-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAGrE,eAAO,MAAM,aAAa,EAAE,aAU3B,CAAC"}

package/dist/app/panels/events/events-plugin.js

@@ -6,8 +6,7 @@ export const EVENTS_PLUGIN = {
             id: 'events',
             label: 'Events',
             icon: 'zap',
-            component: PrismEventsPanelComponent,
-            position: 'bottom'
+            component: PrismEventsPanelComponent
         }
     ]
 };

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

@@ -1,12 +1,18 @@
-import { type ForcedPseudoStates } from '../../shared/pseudo-state.type.js';
+import { type ForcedPseudoStates, type PseudoState } from '../../shared/pseudo-state.type.js';
 import type { PseudoStyleSheets } from './pseudo-stylesheets.js';
+import { type StateFit } from './state-fit.js';
 /** The element a marker forces states in, and the states it forces there. */
 export interface AppliedPseudoStates {
     root: Element;
-    states: ForcedPseudoStates;
+    /** The variant's own states with the toggles on top, unfiltered as in 22.5.0. */
+    states: ForcedPseudoStates | null;
+    /** The active state's pseudo, `null` when no state is active. */
+    state: ForcedPseudoStates | null;
+    /** `null` when `state` is `null`. Re-evaluated on every mark. */
+    fit: StateFit | null;
 }
-/** True when `states` forces at least one state on at least one target. */
-export declare function forcesAnyState(states: ForcedPseudoStates | null | undefined): states is ForcedPseudoStates;
+/** The pseudo-classes actually forced right now: `states`, plus `state` while it fits. */
+export declare function appliedStateNames(applied: AppliedPseudoStates | null): PseudoState[];
 /**
  * Forces a variant's pseudo states on one rendered component.
  *
@@ -16,9 +22,19 @@ export declare function forcesAnyState(states: ForcedPseudoStates | null | undef
  * component's own CSS then applies, with no special case for sibling
  * combinators, pseudo-elements, `:has()` or `:not()`.
  *
+ * A second layer carries the component state that is active: its pseudo is
+ * forced only while it fits, and only on the targets a user could reach
+ * ({@link evaluateStateFit}). The variant's own states are forced as they are.
+ * Fit and reach are measured with the variant's classes and the state's on all
+ * of its targets at once, on every pass. The first pass, the one
+ * `data-prism-rendered` waits for, therefore marks what any later pass would,
+ * and a rule that takes away the pointer under its own `:hover` reads as not
+ * fitting, as the browser could not keep such an element hovered either.
+ *
  * The root is watched while states are forced: an element rendered later
  * (`@if`), or one whose classes or attributes change so that it starts or
- * stops matching a selector (`button:not([disabled])`), is marked again.
+ * stops matching a selector (`button:not([disabled])`), is marked again, and
+ * the state is checked again.
  *
  * One marker per rendered component: the Playground canvas has one, each
  * Overview cell has its own, so a state never leaks into a neighbouring cell.
@@ -28,17 +44,23 @@ export declare class PseudoStateMarker {
     private readonly _applied;
     private observer;
     /**
-     * What the marks are in place for, `null` while nothing is forced. A
-     * signal, so the renderer can hold back `data-prism-rendered` until the
-     * states it reports are the ones on screen.
+     * What the marks are in place for, `null` while nothing is forced and no
+     * state is active. A signal, so the renderer can hold back
+     * `data-prism-rendered` until the states it reports are the ones on screen.
+     * A state that does not fit keeps it set, with the reason in `fit`.
      */
     readonly applied: import("@angular/core").Signal<AppliedPseudoStates | null>;
     constructor(stylesheets: PseudoStyleSheets);
-    /** Forces `states` under `root`, replacing whatever this marker forced before. */
-    apply(root: Element | null, states: ForcedPseudoStates | null | undefined): void;
+    /**
+     * Forces `states`, and `state` where it fits, under `root`, replacing
+     * whatever this marker forced before.
+     */
+    apply(root: Element | null, states: ForcedPseudoStates | null | undefined, state?: ForcedPseudoStates | null): void;
     /** Removes every mark, stops watching, and releases the stylesheets. */
     clear(): void;
     private observe;
     private mark;
+    /** Puts the class of `name` on exactly `targets` under `root`. */
+    private write;
 }
 //# sourceMappingURL=pseudo-state-marker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"pseudo-state-marker.d.ts","sourceRoot":"","sources":["../../../src/app/pseudo/pseudo-state-marker.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,kBAAkB,EAAoC,MAAM,mCAAmC,CAAC;AAE9G,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,6EAA6E;AAC7E,MAAM,WAAW,mBAAmB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,kBAAkB,CAAC;CAC9B;AAED,2EAA2E;AAC3E,wBAAgB,cAAc,CAAC,MAAM,EAAE,kBAAkB,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,IAAI,kBAAkB,CAE1G;AA8CD;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,iBAAiB;IAWd,OAAO,CAAC,QAAQ,CAAC,WAAW;IAVxC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA4C;IACrE,OAAO,CAAC,QAAQ,CAAiC;IAEjD;;;;OAIG;IACH,QAAQ,CAAC,OAAO,6DAA8B;gBAEjB,WAAW,EAAE,iBAAiB;IAE3D,kFAAkF;IAClF,KAAK,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,EAAE,MAAM,EAAE,kBAAkB,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI;IAqBhF,wEAAwE;IACxE,KAAK,IAAI,IAAI;IAab,OAAO,CAAC,OAAO;IAWf,OAAO,CAAC,IAAI;CAoBf"}
+{"version":3,"file":"pseudo-state-marker.d.ts","sourceRoot":"","sources":["../../../src/app/pseudo/pseudo-state-marker.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,kBAAkB,EAAiB,KAAK,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAE7G,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,OAAO,EAAsC,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAEnF,6EAA6E;AAC7E,MAAM,WAAW,mBAAmB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,iFAAiF;IACjF,MAAM,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAClC,iEAAiE;IACjE,KAAK,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACjC,iEAAiE;IACjE,GAAG,EAAE,QAAQ,GAAG,IAAI,CAAC;CACxB;AAED,0FAA0F;AAC1F,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,mBAAmB,GAAG,IAAI,GAAG,WAAW,EAAE,CAMpF;AAcD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBAAa,iBAAiB;IAYd,OAAO,CAAC,QAAQ,CAAC,WAAW;IAXxC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA4C;IACrE,OAAO,CAAC,QAAQ,CAAiC;IAEjD;;;;;OAKG;IACH,QAAQ,CAAC,OAAO,6DAA8B;gBAEjB,WAAW,EAAE,iBAAiB;IAE3D;;;OAGG;IACH,KAAK,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,EAAE,MAAM,EAAE,kBAAkB,GAAG,IAAI,GAAG,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB,GAAG,IAAI,GAAG,IAAI;IAqBnH,wEAAwE;IACxE,KAAK,IAAI,IAAI;IAab,OAAO,CAAC,OAAO;IAWf,OAAO,CAAC,IAAI;IA2CZ,kEAAkE;IAClE,OAAO,CAAC,KAAK;CAYhB"}

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

@@ -1,49 +1,20 @@
 import { signal } from '@angular/core';
 import { PSEUDO_STATES } from '../../shared/pseudo-state.type.js';
 import { PSEUDO_CLASS_PREFIX, pseudoStateClass } from './pseudo-selector.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]));
+import { forcesAnyState, hasTarget, resolveTargets } from './pseudo-targets.js';
+import { evaluateStateFit, reachableTargets } from './state-fit.js';
+/** The pseudo-classes actually forced right now: `states`, plus `state` while it fits. */
+export function appliedStateNames(applied) {
+    if (!applied)
+        return [];
+    const { states, state, fit } = applied;
+    const stateForced = !!state && !!fit?.fits;
+    return PSEUDO_STATES.filter((name) => hasTarget(states?.[name]) || (stateForced && hasTarget(state[name])));
 }
-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.
- */
-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 a variant's pseudo states is not a valid selector, skipping it.`);
-            }
-        }
-    }
-    return targets;
+function sameFit(a, b) {
+    if (a === null || b === null)
+        return a === b;
+    return a.fits ? b.fits : !b.fits && a.reason === b.reason;
 }
 /** Every element under `root`, `root` included, that carries a forced-state class. */
 function markedElements(root) {
@@ -59,9 +30,19 @@ function markedElements(root) {
  * component's own CSS then applies, with no special case for sibling
  * combinators, pseudo-elements, `:has()` or `:not()`.
  *
+ * A second layer carries the component state that is active: its pseudo is
+ * forced only while it fits, and only on the targets a user could reach
+ * ({@link evaluateStateFit}). The variant's own states are forced as they are.
+ * Fit and reach are measured with the variant's classes and the state's on all
+ * of its targets at once, on every pass. The first pass, the one
+ * `data-prism-rendered` waits for, therefore marks what any later pass would,
+ * and a rule that takes away the pointer under its own `:hover` reads as not
+ * fitting, as the browser could not keep such an element hovered either.
+ *
  * The root is watched while states are forced: an element rendered later
  * (`@if`), or one whose classes or attributes change so that it starts or
- * stops matching a selector (`button:not([disabled])`), is marked again.
+ * stops matching a selector (`button:not([disabled])`), is marked again, and
+ * the state is checked again.
  *
  * One marker per rendered component: the Playground canvas has one, each
  * Overview cell has its own, so a state never leaks into a neighbouring cell.
@@ -72,17 +53,21 @@ export class PseudoStateMarker {
     ...(ngDevMode ? [{ debugName: "_applied" }] : /* istanbul ignore next */ []));
     observer = null;
     /**
-     * What the marks are in place for, `null` while nothing is forced. A
-     * signal, so the renderer can hold back `data-prism-rendered` until the
-     * states it reports are the ones on screen.
+     * What the marks are in place for, `null` while nothing is forced and no
+     * state is active. A signal, so the renderer can hold back
+     * `data-prism-rendered` until the states it reports are the ones on screen.
+     * A state that does not fit keeps it set, with the reason in `fit`.
      */
     applied = this._applied.asReadonly();
     constructor(stylesheets) {
         this.stylesheets = stylesheets;
     }
-    /** Forces `states` under `root`, replacing whatever this marker forced before. */
-    apply(root, states) {
-        if (!root || !forcesAnyState(states)) {
+    /**
+     * Forces `states`, and `state` where it fits, under `root`, replacing
+     * whatever this marker forced before.
+     */
+    apply(root, states, state) {
+        if (!root || (!forcesAnyState(states) && !state)) {
             this.clear();
             return;
         }
@@ -97,7 +82,7 @@ export class PseudoStateMarker {
             // Same root, new variant: its styles may have arrived since.
             this.stylesheets.sync();
         }
-        this._applied.set({ root, states });
+        this._applied.set({ root, states: states ?? null, state: state ?? null, fit: null });
         this.mark();
     }
     /** Removes every mark, stops watching, and releases the stylesheets. */
@@ -117,9 +102,9 @@ export class PseudoStateMarker {
     observe(root) {
         if (typeof MutationObserver === 'undefined')
             return;
-        // Our own class changes come back through here too; the second pass finds
-        // nothing to change. Inline styles alone cannot change what a selector
-        // matches, and an animation can write them every frame.
+        // Inline styles alone cannot change what a selector matches, and an
+        // animation can write them every frame. The marker's own writes never
+        // get here, see the end of mark.
         this.observer = new MutationObserver((records) => {
             if (records.some((record) => record.attributeName !== 'style'))
                 this.mark();
@@ -130,20 +115,51 @@ export class PseudoStateMarker {
         const applied = this._applied();
         if (!applied)
             return;
-        const { root, states } = applied;
-        for (const state of PSEUDO_STATES) {
-            const cls = pseudoStateClass(state);
-            const targets = resolveTargets(root, states[state]);
-            // `classList.remove` writes the attribute even when the class is absent,
-            // and the write would come back through the observer as a mutation.
-            for (const el of markedElements(root)) {
-                if (!targets.has(el) && el.classList.contains(cls))
-                    el.classList.remove(cls);
-            }
-            for (const el of targets) {
-                if (!el.classList.contains(cls))
-                    el.classList.add(cls);
-            }
+        const { root, states, state } = applied;
+        const forced = new Map();
+        const stateTargets = new Map();
+        // Every pass measures one DOM, whatever the previous pass left: the
+        // variant's classes, and the state's on every target it names, all at
+        // once. A target can take the pointer only under another forced class
+        // (a hover-reveal), and a mark must not depend on whether an unrelated
+        // write set off a second pass.
+        for (const name of PSEUDO_STATES) {
+            const variantTargets = resolveTargets(root, states?.[name]);
+            const targets = state ? resolveTargets(root, state[name]) : new Set();
+            forced.set(name, variantTargets);
+            stateTargets.set(name, targets);
+            this.write(root, name, new Set([...variantTargets, ...targets]));
+        }
+        const fit = state ? evaluateStateFit(root, state) : null;
+        // Read before the first class comes off, so no target is measured
+        // against a DOM another one's removal changed.
+        const reachable = PSEUDO_STATES.map((name) => new Set(fit?.fits ? reachableTargets(root, name, stateTargets.get(name)) : []));
+        // Only a change of the fit is news. The signal setting off its own
+        // effects is harmless, a new value on every mark is not.
+        if (!sameFit(applied.fit, fit))
+            this._applied.set({ ...applied, fit });
+        // The state's class comes off what it cannot reach, and off all of its
+        // targets when it does not fit. The variant's classes stay.
+        PSEUDO_STATES.forEach((name, i) => this.write(root, name, new Set([...forced.get(name), ...reachable[i]])));
+        // The records of the writes above are ours. Acting on them would only
+        // repeat this pass, and a state whose class takes away its own reach
+        // (`pointer-events: none`) would rewrite its class on every one. Anything
+        // the component changed before this pass was read by it, so nothing
+        // pending is lost.
+        this.observer?.takeRecords();
+    }
+    /** Puts the class of `name` on exactly `targets` under `root`. */
+    write(root, name, targets) {
+        const cls = pseudoStateClass(name);
+        // `classList.remove` writes the attribute even when the class is absent,
+        // and the write would come back through the observer as a mutation.
+        for (const el of markedElements(root)) {
+            if (!targets.has(el) && el.classList.contains(cls))
+                el.classList.remove(cls);
+        }
+        for (const el of targets) {
+            if (!el.classList.contains(cls))
+                el.classList.add(cls);
         }
     }
 }

package/dist/app/pseudo/pseudo-targets.d.ts

@@ -0,0 +1,11 @@
+import { type ForcedPseudoStates, type PseudoTarget } from '../../shared/pseudo-state.type.js';
+/** True when `states` forces at least one state on at least one target. */
+export declare function forcesAnyState(states: ForcedPseudoStates | null | undefined): states is ForcedPseudoStates;
+/** True when `target` names something: `true`, or a selector that is not blank. */
+export declare function hasTarget(target: PseudoTarget | undefined): boolean;
+/**
+ * The elements under `root` a target names. `root` counts: a selector can name
+ * the component's host, and `true` includes it.
+ */
+export declare function resolveTargets(root: Element, target: PseudoTarget | undefined): Set<Element>;
+//# sourceMappingURL=pseudo-targets.d.ts.map

package/dist/app/pseudo/pseudo-targets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pseudo-targets.d.ts","sourceRoot":"","sources":["../../../src/app/pseudo/pseudo-targets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,kBAAkB,EAAiB,KAAK,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAE9G,2EAA2E;AAC3E,wBAAgB,cAAc,CAAC,MAAM,EAAE,kBAAkB,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,IAAI,kBAAkB,CAE1G;AAED,mFAAmF;AACnF,wBAAgB,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,SAAS,GAAG,OAAO,CAInE;AAID;;;GAGG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,GAAG,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC,CAuB5F"}

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

@@ -54,13 +54,20 @@ export declare class PrismRendererComponent {
     private readonly overlayCache;
     readonly activeOverlay: import("@angular/core").WritableSignal<Type<unknown> | null>;
     /**
-     * Identifier of the currently rendered component/variant (for audit tooling / e2e).
-     * Held back until the variant's forced pseudo states are in place, see {@link resolveRenderedKey}.
+     * 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.
+     * 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'. */