@ng-prism/core 22.4.1 → 22.6.0

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

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

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-selector.d.ts

@@ -0,0 +1,24 @@
+import { type PseudoState } from '../../shared/pseudo-state.type.js';
+/** Prefix of the classes that stand in for a forced pseudo-class. */
+export declare const PSEUDO_CLASS_PREFIX = "prism-pseudo--";
+/** The class that stands in for `state`, e.g. `prism-pseudo--focus-visible`. */
+export declare function pseudoStateClass(state: PseudoState): string;
+/**
+ * The selector with every forced pseudo-class `:x` widened to
+ * `:is(:x, .prism-pseudo--x)` ({@link pseudoStateClass}), or `null` when it
+ * uses none or has been widened before.
+ *
+ * Without the class on any element the widened selector matches exactly what
+ * the original matched, with the same specificity: `:is()` takes the highest
+ * of its arguments, and a class weighs what a pseudo-class weighs. With the
+ * class, an element counts as being in the state whether it is forced or real,
+ * which keeps `:not(:hover)` exact in both directions and lets a forced state
+ * combine with a real one in the same selector.
+ *
+ * Tokenised rather than string-replaced. An escaped colon (`.md\:hover`) and an
+ * attribute value (`[title=":hover"]`) are left alone, and a state that follows
+ * a pseudo-element (`::part(x):hover`) is kept as it is, because `:is()` is not
+ * allowed there.
+ */
+export declare function rewritePseudoSelector(selectorText: string): string | null;
+//# sourceMappingURL=pseudo-selector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pseudo-selector.d.ts","sourceRoot":"","sources":["../../../src/app/pseudo/pseudo-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAEpF,qEAAqE;AACrE,eAAO,MAAM,mBAAmB,mBAAmB,CAAC;AAEpD,gFAAgF;AAChF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAE3D;AAWD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAgDzE"}

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

@@ -0,0 +1,136 @@
+import { PSEUDO_STATES } from '../../shared/pseudo-state.type.js';
+/** Prefix of the classes that stand in for a forced pseudo-class. */
+export const PSEUDO_CLASS_PREFIX = 'prism-pseudo--';
+/** The class that stands in for `state`, e.g. `prism-pseudo--focus-visible`. */
+export function pseudoStateClass(state) {
+    return `${PSEUDO_CLASS_PREFIX}${state}`;
+}
+const FORCEABLE = new Set(PSEUDO_STATES);
+/** CSS 2 pseudo-elements, which still parse with a single colon. */
+const LEGACY_PSEUDO_ELEMENTS = new Set(['before', 'after', 'first-line', 'first-letter']);
+const HEX_DIGIT = /[0-9a-f]/i;
+const WHITESPACE = /[ \t\n\r\f]/;
+const IDENT_CHAR = /[a-z0-9_-]/i;
+/**
+ * The selector with every forced pseudo-class `:x` widened to
+ * `:is(:x, .prism-pseudo--x)` ({@link pseudoStateClass}), or `null` when it
+ * uses none or has been widened before.
+ *
+ * Without the class on any element the widened selector matches exactly what
+ * the original matched, with the same specificity: `:is()` takes the highest
+ * of its arguments, and a class weighs what a pseudo-class weighs. With the
+ * class, an element counts as being in the state whether it is forced or real,
+ * which keeps `:not(:hover)` exact in both directions and lets a forced state
+ * combine with a real one in the same selector.
+ *
+ * Tokenised rather than string-replaced. An escaped colon (`.md\:hover`) and an
+ * attribute value (`[title=":hover"]`) are left alone, and a state that follows
+ * a pseudo-element (`::part(x):hover`) is kept as it is, because `:is()` is not
+ * allowed there.
+ */
+export function rewritePseudoSelector(selectorText) {
+    const s = selectorText;
+    if (s.includes(PSEUDO_CLASS_PREFIX))
+        return null;
+    let out = '';
+    let changed = false;
+    // One entry per nesting level: whether the compound being read follows a pseudo-element.
+    const afterPseudoElement = [false];
+    let i = 0;
+    while (i < s.length) {
+        const ch = s[i];
+        const level = afterPseudoElement.length - 1;
+        let end = i + 1;
+        if (ch === '\\') {
+            end = escapeEnd(s, i);
+        }
+        else if (ch === '"' || ch === "'") {
+            end = stringEnd(s, i);
+        }
+        else if (ch === '[') {
+            end = attributeEnd(s, i);
+        }
+        else if (ch === '(') {
+            afterPseudoElement.push(false);
+        }
+        else if (ch === ')') {
+            if (level > 0)
+                afterPseudoElement.pop();
+        }
+        else if (ch === ',' || ch === '>' || ch === '+' || ch === '~' || WHITESPACE.test(ch)) {
+            afterPseudoElement[level] = false;
+        }
+        else if (ch === ':') {
+            const isElement = s[i + 1] === ':';
+            const nameStart = i + (isElement ? 2 : 1);
+            end = identEnd(s, nameStart);
+            const name = s.slice(nameStart, end).toLowerCase();
+            if (!isElement && FORCEABLE.has(name) && s[end] !== '(' && !afterPseudoElement[level]) {
+                out += `:is(${s.slice(i, end)}, .${PSEUDO_CLASS_PREFIX}${name})`;
+                changed = true;
+                i = end;
+                continue;
+            }
+            if (isElement || LEGACY_PSEUDO_ELEMENTS.has(name))
+                afterPseudoElement[level] = true;
+        }
+        out += s.slice(i, end);
+        i = end;
+    }
+    return changed ? out : null;
+}
+/** End of the escape starting at `start`: a hex escape takes up to six digits and one whitespace character. */
+function escapeEnd(s, start) {
+    let i = start + 1;
+    if (i >= s.length)
+        return i;
+    if (!HEX_DIGIT.test(s[i]))
+        return i + 1;
+    while (i < s.length && i < start + 7 && HEX_DIGIT.test(s[i]))
+        i++;
+    if (s[i] === '\r' && s[i + 1] === '\n')
+        return i + 2;
+    return i < s.length && WHITESPACE.test(s[i]) ? i + 1 : i;
+}
+function identEnd(s, start) {
+    let i = start;
+    while (i < s.length) {
+        if (s[i] === '\\') {
+            i = escapeEnd(s, i);
+        }
+        else if (IDENT_CHAR.test(s[i]) || s.charCodeAt(i) >= 0x80) {
+            i++;
+        }
+        else {
+            break;
+        }
+    }
+    return i;
+}
+function stringEnd(s, start) {
+    const quote = s[start];
+    let i = start + 1;
+    while (i < s.length) {
+        if (s[i] === '\\')
+            i += 2;
+        else if (s[i] === quote)
+            return i + 1;
+        else
+            i++;
+    }
+    return i;
+}
+function attributeEnd(s, start) {
+    let i = start + 1;
+    while (i < s.length) {
+        if (s[i] === '\\')
+            i = escapeEnd(s, i);
+        else if (s[i] === '"' || s[i] === "'")
+            i = stringEnd(s, i);
+        else if (s[i] === ']')
+            return i + 1;
+        else
+            i++;
+    }
+    return i;
+}

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

@@ -0,0 +1,66 @@
+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;
+    /** 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;
+}
+/** 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.
+ *
+ * Puts the stand-in class of each state ({@link pseudoStateClass}) on the
+ * targeted elements, and holds the document's {@link PseudoStyleSheets} so that
+ * every selector using the pseudo-class also matches that class. The
+ * 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, 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.
+ */
+export declare class PseudoStateMarker {
+    private readonly stylesheets;
+    private readonly _applied;
+    private observer;
+    /**
+     * 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`, 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

@@ -0,0 +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,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

@@ -0,0 +1,165 @@
+import { signal } from '@angular/core';
+import { PSEUDO_STATES } from '../../shared/pseudo-state.type.js';
+import { PSEUDO_CLASS_PREFIX, pseudoStateClass } from './pseudo-selector.js';
+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 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) {
+    const marked = Array.from(root.querySelectorAll(`[class*="${PSEUDO_CLASS_PREFIX}"]`));
+    return Array.from(root.classList).some((cls) => cls.startsWith(PSEUDO_CLASS_PREFIX)) ? [root, ...marked] : marked;
+}
+/**
+ * Forces a variant's pseudo states on one rendered component.
+ *
+ * Puts the stand-in class of each state ({@link pseudoStateClass}) on the
+ * targeted elements, and holds the document's {@link PseudoStyleSheets} so that
+ * every selector using the pseudo-class also matches that class. The
+ * 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, 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.
+ */
+export class PseudoStateMarker {
+    stylesheets;
+    _applied = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_applied" }] : /* istanbul ignore next */ []));
+    observer = null;
+    /**
+     * 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`, 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;
+        }
+        const previous = this._applied();
+        if (previous && previous.root !== root)
+            this.clear();
+        if (!this._applied()) {
+            this.stylesheets.acquire();
+            this.observe(root);
+        }
+        else {
+            // Same root, new variant: its styles may have arrived since.
+            this.stylesheets.sync();
+        }
+        this._applied.set({ root, states: states ?? null, state: state ?? null, fit: null });
+        this.mark();
+    }
+    /** Removes every mark, stops watching, and releases the stylesheets. */
+    clear() {
+        const applied = this._applied();
+        if (!applied)
+            return;
+        this.observer?.disconnect();
+        this.observer = null;
+        for (const el of markedElements(applied.root)) {
+            for (const state of PSEUDO_STATES)
+                el.classList.remove(pseudoStateClass(state));
+        }
+        this._applied.set(null);
+        this.stylesheets.release();
+    }
+    observe(root) {
+        if (typeof MutationObserver === 'undefined')
+            return;
+        // 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();
+        });
+        this.observer.observe(root, { childList: true, subtree: true, attributes: true });
+    }
+    mark() {
+        const applied = this._applied();
+        if (!applied)
+            return;
+        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-stylesheets.d.ts

@@ -0,0 +1,49 @@
+/** A stylesheet or a grouping rule: anything that holds rules. */
+interface RuleContainer {
+    readonly cssRules: CSSRuleList;
+}
+/**
+ * Widens every selector in `container` that uses a forced pseudo-class, so it
+ * also matches the pseudo-class's stand-in class: `:hover` becomes
+ * `:is(:hover, .prism-pseudo--hover)` ({@link rewritePseudoSelector}).
+ *
+ * In place, through `selectorText`. The rule keeps its position in the sheet
+ * and its specificity, so it wins and loses against the rules around it exactly
+ * as it does for the real state, and no index another script holds moves.
+ * Without the class on an element the widened selector matches what the
+ * original matched, which keeps the shell and every other variant untouched.
+ * A copy of the rule could not keep `:not(:hover)` right: it would either
+ * match a really hovered element or leave the original matching a forced one.
+ *
+ * Idempotent: a selector widened before is not widened again.
+ * Returns the number of selectors widened.
+ */
+export declare function rewriteRules(container: RuleContainer): number;
+/**
+ * The document's stylesheets, rewritten for forced pseudo states.
+ *
+ * Lazy: nothing is touched until a variant forces a state ({@link rewriteRules}
+ * says what changes). Every sheet is rewritten once, tracked by object, which also covers a `<style>` whose
+ * content is replaced (HMR, Angular removing and re-adding component styles):
+ * the browser gives it a new sheet, and the new sheet is rewritten again.
+ *
+ * `document.head` is watched only while at least one marker holds the sheets
+ * ({@link acquire}), so styles that arrive later, through a lazily rendered
+ * child component or a hot reload, are rewritten too.
+ */
+export declare class PseudoStyleSheets {
+    private readonly doc;
+    private readonly rewritten;
+    private readonly awaitedLinks;
+    private observer;
+    private holders;
+    constructor(doc: Document);
+    /** Rewrites what has not been rewritten yet, and keeps doing so for new styles until {@link release}. */
+    acquire(): void;
+    release(): void;
+    /** Rewrites every sheet of the document that has not been rewritten yet. */
+    sync(): void;
+    rewriteSheet(sheet: CSSStyleSheet): void;
+}
+export {};
+//# sourceMappingURL=pseudo-stylesheets.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pseudo-stylesheets.d.ts","sourceRoot":"","sources":["../../../src/app/pseudo/pseudo-stylesheets.ts"],"names":[],"mappings":"AAGA,kEAAkE;AAClE,UAAU,aAAa;IACnB,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC;CAClC;AAoBD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,YAAY,CAAC,SAAS,EAAE,aAAa,GAAG,MAAM,CAmB7D;AAED;;;;;;;;;;;GAWG;AACH,qBAAa,iBAAiB;IAMd,OAAO,CAAC,QAAQ,CAAC,GAAG;IALhC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAgC;IAC1D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA0B;IACvD,OAAO,CAAC,QAAQ,CAAiC;IACjD,OAAO,CAAC,OAAO,CAAK;gBAES,GAAG,EAAE,QAAQ;IAE1C,yGAAyG;IACzG,OAAO,IAAI,IAAI;IAQf,OAAO,IAAI,IAAI;IAQf,4EAA4E;IAC5E,IAAI,IAAI,IAAI;IAkBZ,YAAY,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;CA0B3C"}

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

@@ -0,0 +1,137 @@
+import { isDevMode } from '@angular/core';
+import { rewritePseudoSelector } from './pseudo-selector.js';
+// Duck-typed rather than `instanceof`: the constructors belong to the window
+// that owns the sheet, and not every engine has all of them (`CSSContainerRule`,
+// `CSSLayerBlockRule`).
+function isStyleRule(rule) {
+    return typeof rule.selectorText === 'string' && 'style' in rule;
+}
+// `@media`, `@supports`, `@layer`, `@container`, and a style rule with nested
+// rules. `@keyframes` holds rules too, but no selectors: it is the one that
+// takes new rules through `appendRule` instead of `insertRule`.
+function isRuleContainer(rule) {
+    return 'cssRules' in rule && typeof rule.insertRule === 'function';
+}
+function isImportRule(rule) {
+    return 'styleSheet' in rule && 'href' in rule;
+}
+/**
+ * Widens every selector in `container` that uses a forced pseudo-class, so it
+ * also matches the pseudo-class's stand-in class: `:hover` becomes
+ * `:is(:hover, .prism-pseudo--hover)` ({@link rewritePseudoSelector}).
+ *
+ * In place, through `selectorText`. The rule keeps its position in the sheet
+ * and its specificity, so it wins and loses against the rules around it exactly
+ * as it does for the real state, and no index another script holds moves.
+ * Without the class on an element the widened selector matches what the
+ * original matched, which keeps the shell and every other variant untouched.
+ * A copy of the rule could not keep `:not(:hover)` right: it would either
+ * match a really hovered element or leave the original matching a forced one.
+ *
+ * Idempotent: a selector widened before is not widened again.
+ * Returns the number of selectors widened.
+ */
+export function rewriteRules(container) {
+    let widened = 0;
+    for (const rule of Array.from(container.cssRules)) {
+        if (isStyleRule(rule)) {
+            const original = rule.selectorText;
+            const selector = rewritePseudoSelector(original);
+            if (selector !== null) {
+                rule.selectorText = selector;
+                // The setter ignores a selector the engine does not accept.
+                if (rule.selectorText !== original)
+                    widened++;
+                else if (isDevMode())
+                    console.warn(`[ng-prism] Could not force a pseudo state for "${original}".`);
+            }
+        }
+        // A nested rule can force a state of its own (`.a { &:hover {} }`).
+        if (isRuleContainer(rule))
+            widened += rewriteRules(rule);
+    }
+    return widened;
+}
+/**
+ * The document's stylesheets, rewritten for forced pseudo states.
+ *
+ * Lazy: nothing is touched until a variant forces a state ({@link rewriteRules}
+ * says what changes). Every sheet is rewritten once, tracked by object, which also covers a `<style>` whose
+ * content is replaced (HMR, Angular removing and re-adding component styles):
+ * the browser gives it a new sheet, and the new sheet is rewritten again.
+ *
+ * `document.head` is watched only while at least one marker holds the sheets
+ * ({@link acquire}), so styles that arrive later, through a lazily rendered
+ * child component or a hot reload, are rewritten too.
+ */
+export class PseudoStyleSheets {
+    doc;
+    rewritten = new WeakSet();
+    awaitedLinks = new WeakSet();
+    observer = null;
+    holders = 0;
+    constructor(doc) {
+        this.doc = doc;
+    }
+    /** Rewrites what has not been rewritten yet, and keeps doing so for new styles until {@link release}. */
+    acquire() {
+        this.holders++;
+        this.sync();
+        if (this.observer || typeof MutationObserver === 'undefined' || !this.doc.head)
+            return;
+        this.observer = new MutationObserver(() => this.sync());
+        this.observer.observe(this.doc.head, { childList: true, subtree: true, characterData: true });
+    }
+    release() {
+        if (this.holders === 0)
+            return;
+        this.holders--;
+        if (this.holders > 0)
+            return;
+        this.observer?.disconnect();
+        this.observer = null;
+    }
+    /** Rewrites every sheet of the document that has not been rewritten yet. */
+    sync() {
+        for (const sheet of Array.from(this.doc.styleSheets))
+            this.rewriteSheet(sheet);
+        for (const sheet of this.doc.adoptedStyleSheets ?? [])
+            this.rewriteSheet(sheet);
+        // A `<link>` has no sheet until it has loaded.
+        for (const link of Array.from(this.doc.querySelectorAll('link[rel~="stylesheet"]'))) {
+            if (link.sheet || this.awaitedLinks.has(link))
+                continue;
+            this.awaitedLinks.add(link);
+            link.addEventListener('load', () => {
+                this.awaitedLinks.delete(link);
+                if (this.holders > 0)
+                    this.sync();
+            }, { once: true });
+        }
+    }
+    rewriteSheet(sheet) {
+        if (this.rewritten.has(sheet))
+            return;
+        let rules;
+        try {
+            rules = sheet.cssRules;
+        }
+        catch (error) {
+            // Anything else means the sheet has not loaded yet; the link's load listener comes back to it.
+            if (!(error instanceof DOMException) || error.name !== 'SecurityError')
+                return;
+            this.rewritten.add(sheet);
+            if (isDevMode()) {
+                console.warn(`[ng-prism] Cannot force pseudo states in ${sheet.href ?? 'a stylesheet'}: its rules are cross-origin and cannot be read. ` +
+                    'Serve it from the same origin, or with CORS and a crossorigin attribute.');
+            }
+            return;
+        }
+        this.rewritten.add(sheet);
+        for (const rule of Array.from(rules)) {
+            if (isImportRule(rule) && rule.styleSheet)
+                this.rewriteSheet(rule.styleSheet);
+        }
+        rewriteRules(sheet);
+    }
+}

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"}