@ng-prism/core 22.4.0 → 22.5.0

package/README.md

@@ -6,7 +6,7 @@
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.5+-3178c6)](https://www.typescriptlang.org)
 [![License](https://img.shields.io/badge/license-MIT-green)](./LICENSE)
 
-**[Live Demo](https://dyingangel666.github.io/ng-prism/demo/?component=ButtonComponent)** · **[Documentation](https://dyingangel666.github.io/ng-prism/)**
+**[Live Demo](https://ng-prism.github.io/ng-prism/demo/?component=ButtonComponent)** · **[Documentation](https://ng-prism.github.io/ng-prism/)**
 
 ## Features
 

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

@@ -1,13 +1,15 @@
 import { type CanvasBg } from '../../shared/canvas-bg.type.js';
+import { type PseudoState } from '../../shared/pseudo-state.type.js';
 import { PrismCanvasService } from '../services/prism-canvas.service.js';
+import { PrismPseudoStateService } from '../services/prism-pseudo-state.service.js';
 import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
 import * as i0 from "@angular/core";
 /**
  * The canvas tools, as a rail floating over the canvas.
  *
  * Things you toggle constantly (guides, rulers, the viewport constraint) get
- * their own button; things you set once (background, zoom, viewport width) live
- * in the menu. The template is a view rather than a setting and keeps its own
+ * their own button; things you set once (background, forced state, zoom,
+ * viewport width) live in the menu. The template is a view rather than a setting and keeps its own
  * button. Zoom and the active viewport width are shown as readouts; the width
  * only appears while the viewport constraint is on.
  *
@@ -20,6 +22,14 @@ import * as i0 from "@angular/core";
 export declare class PrismCanvasToolbarComponent {
     protected readonly canvas: PrismCanvasService;
     protected readonly variantBg: PrismVariantBgService;
+    protected readonly pseudoState: PrismPseudoStateService;
+    /**
+     * The pseudo states the canvas can force, as toggles. Several can be on at
+     * once (`:hover` with `:focus-visible`). The active ones carry `is-on`, the
+     * ones the variant declares the `is-rec` edge, as in the Canvas group.
+     */
+    protected readonly states: readonly PseudoState[];
+    protected stateTitle(state: PseudoState): string;
     /** Angular templates resolve names against the component, not the global scope. */
     protected readonly Math: Math;
     protected setBg(bg: CanvasBg): void;

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

@@ -1 +1 @@
-{"version":3,"file":"prism-canvas-toolbar.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-toolbar.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAEhF;;;;;;;;;;;;;;GAcG;AACH,qBAQa,2BAA2B;IACpC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAE7D,mFAAmF;IACnF,SAAS,CAAC,QAAQ,CAAC,IAAI,OAAQ;IAE/B,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAQnC;;;;;;;;;;OAUG;IACH,SAAS,CAAC,QAAQ,CAAC,GAAG,sBAAc;IAEpC;;;;;;;OAOG;IACH,SAAS,CAAC,OAAO,CAAC,EAAE,EAAE,QAAQ,GAAG,MAAM,GAAG,IAAI;IAY9C,SAAS,CAAC,QAAQ,CAAC,KAAK;;;QAKtB;IAEF;;;;;OAKG;IACH,SAAS,CAAC,QAAQ,CAAC,SAAS,oBAAkB;IAE9C,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;yCA/D9B,2BAA2B;2CAA3B,2BAA2B;CAkEvC"}
+{"version":3,"file":"prism-canvas-toolbar.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-toolbar.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAGpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AACpF,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAEhF;;;;;;;;;;;;;;GAcG;AACH,qBAQa,2BAA2B;IACpC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAC7D,SAAS,CAAC,QAAQ,CAAC,WAAW,0BAAmC;IAEjE;;;;OAIG;IACH,SAAS,CAAC,QAAQ,CAAC,MAAM,yBAAiB;IAE1C,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM;IAIhD,mFAAmF;IACnF,SAAS,CAAC,QAAQ,CAAC,IAAI,OAAQ;IAE/B,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAQnC;;;;;;;;;;OAUG;IACH,SAAS,CAAC,QAAQ,CAAC,GAAG,sBAAc;IAEpC;;;;;;;OAOG;IACH,SAAS,CAAC,OAAO,CAAC,EAAE,EAAE,QAAQ,GAAG,MAAM,GAAG,IAAI;IAY9C,SAAS,CAAC,QAAQ,CAAC,KAAK;;;QAKtB;IAEF;;;;;OAKG;IACH,SAAS,CAAC,QAAQ,CAAC,SAAS,oBAAkB;IAE9C,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;yCA3E9B,2BAA2B;2CAA3B,2BAA2B;CA8EvC"}

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

@@ -1,8 +1,10 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { CANVAS_BGS } from '../../shared/canvas-bg.type.js';
+import { PSEUDO_STATES } from '../../shared/pseudo-state.type.js';
 import { VIEWPORT_SNAPS } from '../../shared/viewport.type.js';
 import { PrismIconComponent } from '../icons/prism-icon.component.js';
 import { PrismCanvasService } from '../services/prism-canvas.service.js';
+import { PrismPseudoStateService } from '../services/prism-pseudo-state.service.js';
 import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.value;
@@ -32,35 +34,49 @@ function PrismCanvasToolbarComponent_For_22_Template(rf, ctx) { if (rf & 1) {
 function PrismCanvasToolbarComponent_For_27_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 21);
-    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_27_Template_button_click_0_listener() { const z_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.canvas.setZoom(z_r5.value)); });
+    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_27_Template_button_click_0_listener() { const state_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.pseudoState.toggle(state_r5)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const z_r5 = ctx.$implicit;
+    const state_r5 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("is-on", ctx_r0.canvas.zoom() === z_r5.value);
+    i0.ɵɵclassProp("is-on", ctx_r0.pseudoState.isForced(state_r5))("is-rec", ctx_r0.pseudoState.isDeclared(state_r5));
+    i0.ɵɵattribute("aria-pressed", ctx_r0.pseudoState.isForced(state_r5))("title", ctx_r0.stateTitle(state_r5));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", z_r5.label, " ");
+    i0.ɵɵtextInterpolate1(" :", state_r5, " ");
 } }
-function PrismCanvasToolbarComponent_For_34_Template(rf, ctx) { if (rf & 1) {
+function PrismCanvasToolbarComponent_For_32_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 21);
-    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_34_Template_button_click_0_listener() { const w_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.canvas.setViewportWidth(w_r7)); });
+    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_32_Template_button_click_0_listener() { const z_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.canvas.setZoom(z_r7.value)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const w_r7 = ctx.$implicit;
+    const z_r7 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("is-on", ctx_r0.canvas.viewportWidth() === w_r7);
+    i0.ɵɵclassProp("is-on", ctx_r0.canvas.zoom() === z_r7.value);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", w_r7, " ");
+    i0.ɵɵtextInterpolate1(" ", z_r7.label, " ");
+} }
+function PrismCanvasToolbarComponent_For_39_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 21);
+    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_39_Template_button_click_0_listener() { const w_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.canvas.setViewportWidth(w_r9)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const w_r9 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("is-on", ctx_r0.canvas.viewportWidth() === w_r9);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", w_r9, " ");
 } }
 /**
  * The canvas tools, as a rail floating over the canvas.
  *
  * Things you toggle constantly (guides, rulers, the viewport constraint) get
- * their own button; things you set once (background, zoom, viewport width) live
- * in the menu. The template is a view rather than a setting and keeps its own
+ * their own button; things you set once (background, forced state, zoom,
+ * viewport width) live in the menu. The template is a view rather than a setting and keeps its own
  * button. Zoom and the active viewport width are shown as readouts; the width
  * only appears while the viewport constraint is on.
  *
@@ -73,6 +89,16 @@ function PrismCanvasToolbarComponent_For_34_Template(rf, ctx) { if (rf & 1) {
 export class PrismCanvasToolbarComponent {
     canvas = inject(PrismCanvasService);
     variantBg = inject(PrismVariantBgService);
+    pseudoState = inject(PrismPseudoStateService);
+    /**
+     * The pseudo states the canvas can force, as toggles. Several can be on at
+     * once (`:hover` with `:focus-visible`). The active ones carry `is-on`, the
+     * ones the variant declares the `is-rec` edge, as in the Canvas group.
+     */
+    states = PSEUDO_STATES;
+    stateTitle(state) {
+        return this.pseudoState.isDeclared(state) ? `:${state} is forced by this variant` : `Force :${state} on the whole component`;
+    }
     /** Angular templates resolve names against the component, not the global scope. */
     Math = Math;
     setBg(bg) {
@@ -132,7 +158,7 @@ export class PrismCanvasToolbarComponent {
         return s.charAt(0).toUpperCase() + s.slice(1);
     }
     static ɵfac = function PrismCanvasToolbarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismCanvasToolbarComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismCanvasToolbarComponent, selectors: [["prism-canvas-toolbar"]], decls: 35, vars: 24, consts: [[1, "prism-toolrail"], [1, "prism-toolrail__zoom"], [1, "prism-toolrail__vp"], ["type", "button", "title", "Toggle guides", "aria-label", "Toggle guides", 1, "prism-toolrail__btn", 3, "click"], ["name", "crosshair", 3, "size"], ["type", "button", "title", "Toggle rulers", "aria-label", "Toggle rulers", 1, "prism-toolrail__btn", 3, "click"], ["name", "move", 3, "size"], ["type", "button", "title", "Toggle viewport width", "aria-label", "Toggle viewport width", 1, "prism-toolrail__btn", 3, "click"], ["name", "ruler-dimension", 3, "size"], ["type", "button", "title", "Toggle measure tool", "aria-label", "Toggle measure tool", 1, "prism-toolrail__btn", 3, "click"], ["name", "ruler", 3, "size"], ["type", "button", "popovertarget", "prism-tools", "title", "Canvas, zoom and width", "aria-label", "Canvas, zoom and width", 1, "prism-toolrail__btn"], ["name", "sliders-horizontal", 3, "size"], [1, "prism-toolrail__sep"], ["type", "button", "popovertarget", "prism-template", "title", "Toggle Angular template", "aria-label", "Toggle Angular template", 1, "prism-toolrail__btn"], ["name", "code", 3, "size"], ["popover", "", "id", "prism-tools", "role", "dialog", "aria-label", "Canvas, zoom and width", 1, "prism-toolmenu"], [1, "prism-toolmenu__lbl"], [1, "prism-toolmenu__row"], ["type", "button", 3, "is-on", "is-rec"], ["type", "button", 3, "is-on"], ["type", "button", 3, "click"]], template: function PrismCanvasToolbarComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismCanvasToolbarComponent, selectors: [["prism-canvas-toolbar"]], decls: 40, vars: 24, consts: [[1, "prism-toolrail"], [1, "prism-toolrail__zoom"], [1, "prism-toolrail__vp"], ["type", "button", "title", "Toggle guides", "aria-label", "Toggle guides", 1, "prism-toolrail__btn", 3, "click"], ["name", "crosshair", 3, "size"], ["type", "button", "title", "Toggle rulers", "aria-label", "Toggle rulers", 1, "prism-toolrail__btn", 3, "click"], ["name", "move", 3, "size"], ["type", "button", "title", "Toggle viewport width", "aria-label", "Toggle viewport width", 1, "prism-toolrail__btn", 3, "click"], ["name", "ruler-dimension", 3, "size"], ["type", "button", "title", "Toggle measure tool", "aria-label", "Toggle measure tool", 1, "prism-toolrail__btn", 3, "click"], ["name", "ruler", 3, "size"], ["type", "button", "popovertarget", "prism-tools", "title", "Canvas, state, zoom and width", "aria-label", "Canvas, state, zoom and width", 1, "prism-toolrail__btn"], ["name", "sliders-horizontal", 3, "size"], [1, "prism-toolrail__sep"], ["type", "button", "popovertarget", "prism-template", "title", "Toggle Angular template", "aria-label", "Toggle Angular template", 1, "prism-toolrail__btn"], ["name", "code", 3, "size"], ["popover", "", "id", "prism-tools", "role", "dialog", "aria-label", "Canvas, state, zoom and width", 1, "prism-toolmenu"], [1, "prism-toolmenu__lbl"], [1, "prism-toolmenu__row"], ["type", "button", 3, "is-on", "is-rec"], ["type", "button", 3, "is-on"], ["type", "button", 3, "click"]], template: function PrismCanvasToolbarComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "span", 1);
             i0.ɵɵtext(2);
             i0.ɵɵconditionalCreate(3, PrismCanvasToolbarComponent_Conditional_3_Template, 2, 1, "span", 2);
@@ -167,19 +193,25 @@ export class PrismCanvasToolbarComponent {
             i0.ɵɵrepeaterCreate(21, PrismCanvasToolbarComponent_For_22_Template, 2, 6, "button", 19, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(23, "span", 17);
-            i0.ɵɵtext(24, "Zoom");
+            i0.ɵɵtext(24, "State");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(25, "div", 18);
-            i0.ɵɵrepeaterCreate(26, PrismCanvasToolbarComponent_For_27_Template, 2, 3, "button", 20, _forTrack0);
+            i0.ɵɵrepeaterCreate(26, PrismCanvasToolbarComponent_For_27_Template, 2, 7, "button", 19, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(28, "span", 17);
-            i0.ɵɵtext(29, "Width");
+            i0.ɵɵtext(29, "Zoom");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(30, "div", 18)(31, "button", 21);
-            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_31_listener() { return ctx.canvas.setViewportWidth(null); });
-            i0.ɵɵtext(32, " Auto ");
+            i0.ɵɵelementStart(30, "div", 18);
+            i0.ɵɵrepeaterCreate(31, PrismCanvasToolbarComponent_For_32_Template, 2, 3, "button", 20, _forTrack0);
             i0.ɵɵelementEnd();
-            i0.ɵɵrepeaterCreate(33, PrismCanvasToolbarComponent_For_34_Template, 2, 3, "button", 20, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵelementStart(33, "span", 17);
+            i0.ɵɵtext(34, "Width");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(35, "div", 18)(36, "button", 21);
+            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_36_listener() { return ctx.canvas.setViewportWidth(null); });
+            i0.ɵɵtext(37, " Auto ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵrepeaterCreate(38, PrismCanvasToolbarComponent_For_39_Template, 2, 3, "button", 20, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵclassProp("has-rulers", ctx.canvas.rulers());
@@ -214,6 +246,8 @@ export class PrismCanvasToolbarComponent {
             i0.ɵɵadvance(5);
             i0.ɵɵrepeater(ctx.bgs);
             i0.ɵɵadvance(5);
+            i0.ɵɵrepeater(ctx.states);
+            i0.ɵɵadvance(5);
             i0.ɵɵrepeater(ctx.zooms);
             i0.ɵɵadvance(5);
             i0.ɵɵclassProp("is-on", ctx.canvas.viewportWidth() === null);
@@ -223,6 +257,6 @@ export class PrismCanvasToolbarComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismCanvasToolbarComponent, [{
         type: Component,
-        args: [{ selector: 'prism-canvas-toolbar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: "<!-- Anchored in .prism-canvas-wrap, absolute, not fixed:\n     a viewport-fixed rail would float over the sidebar and the panel, stay\n     put while those are resized, and sit on top of running text in the API\n     view where it has no business being. -->\n<div\n    class=\"prism-toolrail\"\n    [class.has-rulers]=\"canvas.rulers()\">\n    <span class=\"prism-toolrail__zoom\">\n        {{ Math.round(canvas.zoom() * 100) }}%\n        @if (canvas.viewportWidth() !== null) {\n            <span class=\"prism-toolrail__vp\">{{ canvas.viewportWidth() }}px</span>\n        }\n    </span>\n\n    <button\n        type=\"button\"\n        class=\"prism-toolrail__btn\"\n        [class.is-on]=\"canvas.guides()\"\n        (click)=\"canvas.toggleGuides()\"\n        title=\"Toggle guides\"\n        aria-label=\"Toggle guides\"\n        [attr.aria-pressed]=\"canvas.guides()\">\n        <prism-icon\n            name=\"crosshair\"\n            [size]=\"14\" />\n    </button>\n\n    <button\n        type=\"button\"\n        class=\"prism-toolrail__btn\"\n        [class.is-on]=\"canvas.rulers()\"\n        (click)=\"canvas.toggleRulers()\"\n        title=\"Toggle rulers\"\n        aria-label=\"Toggle rulers\"\n        [attr.aria-pressed]=\"canvas.rulers()\">\n        <prism-icon\n            name=\"move\"\n            [size]=\"14\" />\n    </button>\n\n    <button\n        type=\"button\"\n        class=\"prism-toolrail__btn\"\n        [class.is-on]=\"canvas.viewportWidth() !== null\"\n        (click)=\"canvas.toggleViewport()\"\n        title=\"Toggle viewport width\"\n        aria-label=\"Toggle viewport width\"\n        [attr.aria-pressed]=\"canvas.viewportWidth() !== null\">\n        <prism-icon\n            name=\"ruler-dimension\"\n            [size]=\"14\" />\n    </button>\n\n    <button\n        type=\"button\"\n        class=\"prism-toolrail__btn\"\n        [class.is-on]=\"canvas.measure()\"\n        (click)=\"canvas.toggleMeasure()\"\n        title=\"Toggle measure tool\"\n        aria-label=\"Toggle measure tool\"\n        [attr.aria-pressed]=\"canvas.measure()\">\n        <prism-icon\n            name=\"ruler\"\n            [size]=\"14\" />\n    </button>\n\n    <button\n        type=\"button\"\n        class=\"prism-toolrail__btn\"\n        popovertarget=\"prism-tools\"\n        title=\"Canvas, zoom and width\"\n        aria-label=\"Canvas, zoom and width\">\n        <prism-icon\n            name=\"sliders-horizontal\"\n            [size]=\"14\" />\n    </button>\n\n    <span class=\"prism-toolrail__sep\"></span>\n\n    <button\n        type=\"button\"\n        class=\"prism-toolrail__btn\"\n        popovertarget=\"prism-template\"\n        title=\"Toggle Angular template\"\n        aria-label=\"Toggle Angular template\">\n        <prism-icon\n            name=\"code\"\n            [size]=\"14\" />\n    </button>\n</div>\n\n<!-- Only the three choosers. The toggles stay outside: you flip guides,\n     rulers and the viewport constraint constantly while working, and a\n     toggle two clicks deep is the classic mistake. What you only ever\n     set may live in a menu. -->\n<div\n    popover\n    id=\"prism-tools\"\n    class=\"prism-toolmenu\"\n    role=\"dialog\"\n    aria-label=\"Canvas, zoom and width\">\n    <span class=\"prism-toolmenu__lbl\">Canvas</span>\n    <div class=\"prism-toolmenu__row\">\n        @for (bg of bgs; track bg) {\n            <button\n                type=\"button\"\n                [class.is-on]=\"variantBg.effective() === bg\"\n                [class.is-rec]=\"variantBg.recommended() === bg\"\n                [attr.title]=\"bgTitle(bg)\"\n                (click)=\"setBg(bg)\">\n                {{ capitalize(bg) }}\n            </button>\n        }\n    </div>\n\n    <span class=\"prism-toolmenu__lbl\">Zoom</span>\n    <div class=\"prism-toolmenu__row\">\n        @for (z of zooms; track z.value) {\n            <button\n                type=\"button\"\n                [class.is-on]=\"canvas.zoom() === z.value\"\n                (click)=\"canvas.setZoom(z.value)\">\n                {{ z.label }}\n            </button>\n        }\n    </div>\n\n    <span class=\"prism-toolmenu__lbl\">Width</span>\n    <div class=\"prism-toolmenu__row\">\n        <button\n            type=\"button\"\n            [class.is-on]=\"canvas.viewportWidth() === null\"\n            (click)=\"canvas.setViewportWidth(null)\">\n            Auto\n        </button>\n        @for (w of viewports; track w) {\n            <button\n                type=\"button\"\n                [class.is-on]=\"canvas.viewportWidth() === w\"\n                (click)=\"canvas.setViewportWidth(w)\">\n                {{ w }}\n            </button>\n        }\n    </div>\n</div>\n", styles: [":host {\n    display: contents;\n}\n\n/* Canvas overlays sit at --prism-canvas-overlay-*, which the stage grows\n   when the rulers claim its top and left edges (see the\n   .prism-canvas-stage[data-rulers] rule in prism-renderer.component.ts).\n   prism-canvas-bg-pill simply inherits those; this rail cannot, because\n   capture mode requires it to be a direct child of .prism-canvas-wrap\n   outside the stage. So it mirrors the same values off canvas.rulers()\n   instead, so keep the two in step.\n\n   z-index outranks the rulers' 4 rather than matching it: the rail is a\n   control and they are chrome, and the toolbar renders before the\n   renderer in the shell, so an equal z-index let the rulers paint over\n   the buttons. */\n.prism-toolrail {\n    position: absolute;\n    top: var(--prism-canvas-overlay-top, 12px);\n    right: var(--prism-canvas-overlay-inline, 20px);\n    z-index: 5;\n    display: flex;\n    flex-direction: column;\n    gap: var(--sp-1);\n    align-items: center;\n    padding: var(--sp-2);\n    anchor-name: --prism-toolrail;\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border-strong);\n    border-radius: var(--radius-md);\n    box-shadow: 0 4px 16px -6px rgb(0 0 0 / 40%);\n}\n\n.prism-toolrail.has-rulers {\n    --prism-canvas-overlay-top: 28px;\n    --prism-canvas-overlay-inline: 28px;\n}\n\n.prism-toolrail__zoom {\n    width: 100%;\n    padding-bottom: var(--sp-1);\n    font-family: var(--font-mono);\n    font-size: 9px;\n    color: var(--prism-text-ghost);\n    text-align: center;\n    border-bottom: 1px solid var(--prism-border);\n}\n\n/* The one number on this rail that is not a percentage, so it takes the\n   measurement colour the theme already reserves for rulers and guides\n   rather than a second neutral that would read as a second zoom. */\n.prism-toolrail__vp {\n    display: block;\n    color: var(--prism-measure);\n}\n\n.prism-toolrail__btn {\n    display: grid;\n    place-items: center;\n    width: 26px;\n    height: 26px;\n    padding: 0;\n    color: var(--prism-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--radius-xs);\n}\n\n.prism-toolrail__btn:hover {\n    color: var(--prism-text);\n}\n\n.prism-toolrail__btn:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 1px;\n}\n\n.prism-toolrail__btn.is-on {\n    color: var(--prism-text);\n    background: color-mix(in srgb, var(--prism-primary) 18%, transparent);\n}\n\n.prism-toolrail__sep {\n    width: 14px;\n    height: 1px;\n    margin: var(--sp-1) 0;\n    background: var(--prism-border);\n}\n\n.prism-toolmenu {\n    inset: auto;\n    gap: var(--sp-2);\n    padding: var(--sp-3);\n    margin: 0;\n    margin-inline-end: var(--sp-2);\n    position-area: inline-start;\n    position-anchor: --prism-toolrail;\n    position-try-fallbacks: flip-inline;\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border-strong);\n    border-radius: var(--radius-md);\n    box-shadow: 0 8px 28px -10px rgb(0 0 0 / 45%);\n}\n\n/* display belongs on :popover-open and nowhere else (see the note in\n   prism-template-popover.component.ts). An author display on the base\n   rule outranks the UA's [popover]:not(:popover-open) { display: none }\n   and pins the menu open. */\n.prism-toolmenu:popover-open {\n    display: flex;\n    flex-direction: column;\n}\n\n.prism-toolmenu__lbl {\n    font-size: var(--fs-xs);\n    color: var(--prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n}\n\n.prism-toolmenu__row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--sp-1);\n}\n\n.prism-toolmenu__row button {\n    padding: 2px var(--sp-3);\n    font-size: var(--fs-md);\n    color: var(--prism-text-2);\n    white-space: nowrap;\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-xs);\n}\n\n.prism-toolmenu__row button.is-on {\n    color: var(--prism-text);\n    background: color-mix(in srgb, var(--prism-primary) 16%, transparent);\n    border-color: color-mix(in srgb, var(--prism-primary) 38%, transparent);\n}\n\n.prism-toolmenu__row button.is-rec {\n    border-color: color-mix(in srgb, var(--prism-primary) 30%, transparent);\n}\n"] }]
+        args: [{ selector: 'prism-canvas-toolbar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: "<!-- Anchored in .prism-canvas-wrap, absolute, not fixed:\n     a viewport-fixed rail would float over the sidebar and the panel, stay\n     put while those are resized, and sit on top of running text in the API\n     view where it has no business being. -->\n<div\n    class=\"prism-toolrail\"\n    [class.has-rulers]=\"canvas.rulers()\">\n    <span class=\"prism-toolrail__zoom\">\n        {{ Math.round(canvas.zoom() * 100) }}%\n        @if (canvas.viewportWidth() !== null) {\n            <span class=\"prism-toolrail__vp\">{{ canvas.viewportWidth() }}px</span>\n        }\n    </span>\n\n    <button\n        type=\"button\"\n        class=\"prism-toolrail__btn\"\n        [class.is-on]=\"canvas.guides()\"\n        (click)=\"canvas.toggleGuides()\"\n        title=\"Toggle guides\"\n        aria-label=\"Toggle guides\"\n        [attr.aria-pressed]=\"canvas.guides()\">\n        <prism-icon\n            name=\"crosshair\"\n            [size]=\"14\" />\n    </button>\n\n    <button\n        type=\"button\"\n        class=\"prism-toolrail__btn\"\n        [class.is-on]=\"canvas.rulers()\"\n        (click)=\"canvas.toggleRulers()\"\n        title=\"Toggle rulers\"\n        aria-label=\"Toggle rulers\"\n        [attr.aria-pressed]=\"canvas.rulers()\">\n        <prism-icon\n            name=\"move\"\n            [size]=\"14\" />\n    </button>\n\n    <button\n        type=\"button\"\n        class=\"prism-toolrail__btn\"\n        [class.is-on]=\"canvas.viewportWidth() !== null\"\n        (click)=\"canvas.toggleViewport()\"\n        title=\"Toggle viewport width\"\n        aria-label=\"Toggle viewport width\"\n        [attr.aria-pressed]=\"canvas.viewportWidth() !== null\">\n        <prism-icon\n            name=\"ruler-dimension\"\n            [size]=\"14\" />\n    </button>\n\n    <button\n        type=\"button\"\n        class=\"prism-toolrail__btn\"\n        [class.is-on]=\"canvas.measure()\"\n        (click)=\"canvas.toggleMeasure()\"\n        title=\"Toggle measure tool\"\n        aria-label=\"Toggle measure tool\"\n        [attr.aria-pressed]=\"canvas.measure()\">\n        <prism-icon\n            name=\"ruler\"\n            [size]=\"14\" />\n    </button>\n\n    <button\n        type=\"button\"\n        class=\"prism-toolrail__btn\"\n        popovertarget=\"prism-tools\"\n        title=\"Canvas, state, zoom and width\"\n        aria-label=\"Canvas, state, zoom and width\">\n        <prism-icon\n            name=\"sliders-horizontal\"\n            [size]=\"14\" />\n    </button>\n\n    <span class=\"prism-toolrail__sep\"></span>\n\n    <button\n        type=\"button\"\n        class=\"prism-toolrail__btn\"\n        popovertarget=\"prism-template\"\n        title=\"Toggle Angular template\"\n        aria-label=\"Toggle Angular template\">\n        <prism-icon\n            name=\"code\"\n            [size]=\"14\" />\n    </button>\n</div>\n\n<!-- Only the choosers. The toggles stay outside: you flip guides,\n     rulers and the viewport constraint constantly while working, and a\n     toggle two clicks deep is the classic mistake. What you only ever\n     set may live in a menu. The states are toggles too, but set once per\n     variant and dropped with it, like the background. -->\n<div\n    popover\n    id=\"prism-tools\"\n    class=\"prism-toolmenu\"\n    role=\"dialog\"\n    aria-label=\"Canvas, state, zoom and width\">\n    <span class=\"prism-toolmenu__lbl\">Canvas</span>\n    <div class=\"prism-toolmenu__row\">\n        @for (bg of bgs; track bg) {\n            <button\n                type=\"button\"\n                [class.is-on]=\"variantBg.effective() === bg\"\n                [class.is-rec]=\"variantBg.recommended() === bg\"\n                [attr.title]=\"bgTitle(bg)\"\n                (click)=\"setBg(bg)\">\n                {{ capitalize(bg) }}\n            </button>\n        }\n    </div>\n\n    <span class=\"prism-toolmenu__lbl\">State</span>\n    <div class=\"prism-toolmenu__row\">\n        @for (state of states; track state) {\n            <button\n                type=\"button\"\n                [class.is-on]=\"pseudoState.isForced(state)\"\n                [class.is-rec]=\"pseudoState.isDeclared(state)\"\n                [attr.aria-pressed]=\"pseudoState.isForced(state)\"\n                [attr.title]=\"stateTitle(state)\"\n                (click)=\"pseudoState.toggle(state)\">\n                :{{ state }}\n            </button>\n        }\n    </div>\n\n    <span class=\"prism-toolmenu__lbl\">Zoom</span>\n    <div class=\"prism-toolmenu__row\">\n        @for (z of zooms; track z.value) {\n            <button\n                type=\"button\"\n                [class.is-on]=\"canvas.zoom() === z.value\"\n                (click)=\"canvas.setZoom(z.value)\">\n                {{ z.label }}\n            </button>\n        }\n    </div>\n\n    <span class=\"prism-toolmenu__lbl\">Width</span>\n    <div class=\"prism-toolmenu__row\">\n        <button\n            type=\"button\"\n            [class.is-on]=\"canvas.viewportWidth() === null\"\n            (click)=\"canvas.setViewportWidth(null)\">\n            Auto\n        </button>\n        @for (w of viewports; track w) {\n            <button\n                type=\"button\"\n                [class.is-on]=\"canvas.viewportWidth() === w\"\n                (click)=\"canvas.setViewportWidth(w)\">\n                {{ w }}\n            </button>\n        }\n    </div>\n</div>\n", styles: [":host {\n    display: contents;\n}\n\n/* Canvas overlays sit at --prism-canvas-overlay-*, which the stage grows\n   when the rulers claim its top and left edges (see the\n   .prism-canvas-stage[data-rulers] rule in prism-renderer.component.ts).\n   prism-canvas-bg-pill simply inherits those; this rail cannot, because\n   capture mode requires it to be a direct child of .prism-canvas-wrap\n   outside the stage. So it mirrors the same values off canvas.rulers()\n   instead, so keep the two in step.\n\n   z-index outranks the rulers' 4 rather than matching it: the rail is a\n   control and they are chrome, and the toolbar renders before the\n   renderer in the shell, so an equal z-index let the rulers paint over\n   the buttons. */\n.prism-toolrail {\n    position: absolute;\n    top: var(--prism-canvas-overlay-top, 12px);\n    right: var(--prism-canvas-overlay-inline, 20px);\n    z-index: 5;\n    display: flex;\n    flex-direction: column;\n    gap: var(--sp-1);\n    align-items: center;\n    padding: var(--sp-2);\n    anchor-name: --prism-toolrail;\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border-strong);\n    border-radius: var(--radius-md);\n    box-shadow: 0 4px 16px -6px rgb(0 0 0 / 40%);\n}\n\n.prism-toolrail.has-rulers {\n    --prism-canvas-overlay-top: 28px;\n    --prism-canvas-overlay-inline: 28px;\n}\n\n.prism-toolrail__zoom {\n    width: 100%;\n    padding-bottom: var(--sp-1);\n    font-family: var(--font-mono);\n    font-size: 9px;\n    color: var(--prism-text-ghost);\n    text-align: center;\n    border-bottom: 1px solid var(--prism-border);\n}\n\n/* The one number on this rail that is not a percentage, so it takes the\n   measurement colour the theme already reserves for rulers and guides\n   rather than a second neutral that would read as a second zoom. */\n.prism-toolrail__vp {\n    display: block;\n    color: var(--prism-measure);\n}\n\n.prism-toolrail__btn {\n    display: grid;\n    place-items: center;\n    width: 26px;\n    height: 26px;\n    padding: 0;\n    color: var(--prism-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--radius-xs);\n}\n\n.prism-toolrail__btn:hover {\n    color: var(--prism-text);\n}\n\n.prism-toolrail__btn:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 1px;\n}\n\n.prism-toolrail__btn.is-on {\n    color: var(--prism-text);\n    background: color-mix(in srgb, var(--prism-primary) 18%, transparent);\n}\n\n.prism-toolrail__sep {\n    width: 14px;\n    height: 1px;\n    margin: var(--sp-1) 0;\n    background: var(--prism-border);\n}\n\n.prism-toolmenu {\n    inset: auto;\n    gap: var(--sp-2);\n    padding: var(--sp-3);\n    margin: 0;\n    margin-inline-end: var(--sp-2);\n    position-area: inline-start;\n    position-anchor: --prism-toolrail;\n    position-try-fallbacks: flip-inline;\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border-strong);\n    border-radius: var(--radius-md);\n    box-shadow: 0 8px 28px -10px rgb(0 0 0 / 45%);\n}\n\n/* display belongs on :popover-open and nowhere else (see the note in\n   prism-template-popover.component.ts). An author display on the base\n   rule outranks the UA's [popover]:not(:popover-open) { display: none }\n   and pins the menu open. */\n.prism-toolmenu:popover-open {\n    display: flex;\n    flex-direction: column;\n}\n\n.prism-toolmenu__lbl {\n    font-size: var(--fs-xs);\n    color: var(--prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n}\n\n.prism-toolmenu__row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--sp-1);\n}\n\n.prism-toolmenu__row button {\n    padding: 2px var(--sp-3);\n    font-size: var(--fs-md);\n    color: var(--prism-text-2);\n    white-space: nowrap;\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-xs);\n}\n\n.prism-toolmenu__row button.is-on {\n    color: var(--prism-text);\n    background: color-mix(in srgb, var(--prism-primary) 16%, transparent);\n    border-color: color-mix(in srgb, var(--prism-primary) 38%, transparent);\n}\n\n.prism-toolmenu__row button.is-rec {\n    border-color: color-mix(in srgb, var(--prism-primary) 30%, transparent);\n}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasToolbarComponent, { className: "PrismCanvasToolbarComponent", filePath: "app/canvas/prism-canvas-toolbar.component.ts", lineNumber: 31 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasToolbarComponent, { className: "PrismCanvasToolbarComponent", filePath: "app/canvas/prism-canvas-toolbar.component.ts", lineNumber: 33 }); })();

package/dist/app/discovery-manifest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"discovery-manifest.d.ts","sourceRoot":"","sources":["../../src/app/discovery-manifest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAsB,iBAAiB,EAAoB,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAuD1H,6EAA6E;AAC7E,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAM/G;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,eAAe,GAAG,iBAAiB,CAsCnF"}
+{"version":3,"file":"discovery-manifest.d.ts","sourceRoot":"","sources":["../../src/app/discovery-manifest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAsB,iBAAiB,EAAoB,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAyD1H,6EAA6E;AAC7E,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAM/G;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,eAAe,GAAG,iBAAiB,CAyCnF"}

package/dist/app/discovery-manifest.js

@@ -1,4 +1,5 @@
 import { resolveVariantBg } from '../shared/variant-bg.js';
+import { forcesAnyState } from './pseudo/pseudo-state-marker.js';
 /**
  * External tooling reads `__PRISM_MANIFEST__` through a structured-clone bridge
  * (Playwright's `page.evaluate()`, `postMessage`, devtools). `ShowcaseConfig.meta`
@@ -75,8 +76,13 @@ export function buildDiscoveryManifest(manifest) {
             const variants = declared.length
                 ? declared.map((variant, index) => {
                     const meta = serializableMeta(variant.meta);
-                    const bg = resolveVariantBg(showcaseConfig, index);
-                    return meta ? { name: variant.name, index, bg, meta } : { name: variant.name, index, bg };
+                    const pseudo = forcesAnyState(variant.pseudo) ? serializableMeta(variant.pseudo) : undefined;
+                    const discovered = { name: variant.name, index, bg: resolveVariantBg(showcaseConfig, index) };
+                    if (meta)
+                        discovered.meta = meta;
+                    if (pseudo)
+                        discovered.pseudo = pseudo;
+                    return discovered;
                 })
                 : [
                     {

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

@@ -10,12 +10,18 @@ import * as i0 from "@angular/core";
  * writing to any of them would corrupt what they mean. `data-prism-rendered`
  * matters most: it is the selector external screenshot runners key on (see
  * `docs/guide/external-tooling.md`), and this component never emits it.
+ *
+ * Forced pseudo states are the variant's own, applied by a marker of the
+ * cell's own, so a hovered cell never hovers its neighbour. The tools menu's
+ * state toggle does not reach here: like every other control, it belongs to
+ * the Playground.
  */
 export declare class PrismOverviewCellComponent {
     readonly component: import("@angular/core").InputSignal<RuntimeComponent>;
     readonly index: import("@angular/core").InputSignal<number>;
     private readonly injector;
     private readonly destroyRef;
+    private readonly pseudoMarker;
     private readonly outlet;
     /** Never null: `resolveVariantBg` falls back to `DEFAULT_VARIANT_BG`. */
     protected readonly bg: import("@angular/core").Signal<import("../services/prism-canvas.service.js").CanvasBg>;

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

@@ -1 +1 @@
-{"version":3,"file":"prism-overview-cell.component.d.ts","sourceRoot":"","sources":["../../../src/app/overview/prism-overview-cell.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;;AAOrE;;;;;;;;;;GAUG;AACH,qBAYa,0BAA0B;IACnC,QAAQ,CAAC,SAAS,wDAAsC;IACxD,QAAQ,CAAC,KAAK,8CAA4B;IAE1C,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IAEH,yEAAyE;IACzE,SAAS,CAAC,QAAQ,CAAC,EAAE,yFAAwF;IAE7G,SAAS,CAAC,QAAQ,CAAC,OAAO,yCAUvB;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,0CAKtB;;IAmBH,OAAO,CAAC,KAAK;yCAjDJ,0BAA0B;2CAA1B,0BAA0B;CAyFtC"}
+{"version":3,"file":"prism-overview-cell.component.d.ts","sourceRoot":"","sources":["../../../src/app/overview/prism-overview-cell.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;;AAQrE;;;;;;;;;;;;;;;GAeG;AACH,qBAYa,0BAA0B;IACnC,QAAQ,CAAC,SAAS,wDAAsC;IACxD,QAAQ,CAAC,KAAK,8CAA4B;IAE1C,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAkD;IAC/E,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IAEH,yEAAyE;IACzE,SAAS,CAAC,QAAQ,CAAC,EAAE,yFAAwF;IAE7G,SAAS,CAAC,QAAQ,CAAC,OAAO,yCAUvB;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,0CAKtB;;IAsBH,OAAO,CAAC,KAAK;yCArDJ,0BAA0B;2CAA1B,0BAA0B;CA+FtC"}

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

@@ -3,6 +3,7 @@ import { resolveVariantBg } from '../../shared/variant-bg.js';
 import { CANVAS_BG_STYLES } from '../canvas/canvas-bg.styles.js';
 import { buildKnownInputs } from '../renderer/known-inputs.js';
 import { parseContentToNodes } from '../renderer/projectable-content.js';
+import { PrismPseudoStateService } from '../services/prism-pseudo-state.service.js';
 import { computeVariantState } from '../services/prism-renderer.service.js';
 import * as i0 from "@angular/core";
 const _c0 = ["outlet"];
@@ -16,6 +17,11 @@ const _c0 = ["outlet"];
  * writing to any of them would corrupt what they mean. `data-prism-rendered`
  * matters most: it is the selector external screenshot runners key on (see
  * `docs/guide/external-tooling.md`), and this component never emits it.
+ *
+ * Forced pseudo states are the variant's own, applied by a marker of the
+ * cell's own, so a hovered cell never hovers its neighbour. The tools menu's
+ * state toggle does not reach here: like every other control, it belongs to
+ * the Playground.
  */
 export class PrismOverviewCellComponent {
     component = input.required(/* @ts-ignore */
@@ -24,6 +30,7 @@ export class PrismOverviewCellComponent {
     ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
     injector = inject(Injector);
     destroyRef = inject(DestroyRef);
+    pseudoMarker = inject(PrismPseudoStateService).createMarker();
     outlet = viewChild.required('outlet', { ...(ngDevMode ? { debugName: "outlet" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
     /** Never null: `resolveVariantBg` falls back to `DEFAULT_VARIANT_BG`. */
     bg = computed(() => resolveVariantBg(this.component().meta.showcaseConfig, this.index()), /* @ts-ignore */
@@ -51,7 +58,10 @@ export class PrismOverviewCellComponent {
             const index = this.index();
             untracked(() => this.mount(component, index));
         });
-        this.destroyRef.onDestroy(() => this.outlet().clear());
+        this.destroyRef.onDestroy(() => {
+            this.pseudoMarker.clear();
+            this.outlet().clear();
+        });
     }
     // The Playground lets a variant that throws on construction propagate: one
     // broken instance, and the user navigates away from it. The Overview
@@ -82,6 +92,7 @@ export class PrismOverviewCellComponent {
                 ref.setInput(key, value);
             }
             ref.changeDetectorRef.detectChanges();
+            this.pseudoMarker.apply(ref.location.nativeElement, component.meta.showcaseConfig.variants?.[index]?.pseudo);
         }
         catch (error) {
             // `createComponent` attaches the host element and its structural DOM
@@ -92,6 +103,7 @@ export class PrismOverviewCellComponent {
             // a caught cell actually show an empty stage with its caption still in
             // place, which shows "this variant failed" instead of a broken grid
             // with no indication of which cell caused it.
+            this.pseudoMarker.clear();
             this.outlet().clear();
             console.error(`[ng-prism] Variant ${index} of ${component.meta.className} failed to render:`, error);
         }
@@ -125,4 +137,4 @@ export class PrismOverviewCellComponent {
     }], () => [], { component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], outlet: [{ type: i0.ViewChild, args: ['outlet', { ...{
                         read: ViewContainerRef
                     }, isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismOverviewCellComponent, { className: "PrismOverviewCellComponent", filePath: "app/overview/prism-overview-cell.component.ts", lineNumber: 32 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismOverviewCellComponent, { className: "PrismOverviewCellComponent", filePath: "app/overview/prism-overview-cell.component.ts", lineNumber: 38 }); })();

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,44 @@
+import { type ForcedPseudoStates } from '../../shared/pseudo-state.type.js';
+import type { PseudoStyleSheets } from './pseudo-stylesheets.js';
+/** The element a marker forces states in, and the states it forces there. */
+export interface AppliedPseudoStates {
+    root: Element;
+    states: ForcedPseudoStates;
+}
+/** True when `states` forces at least one state on at least one target. */
+export declare function forcesAnyState(states: ForcedPseudoStates | null | undefined): states is ForcedPseudoStates;
+/**
+ * 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()`.
+ *
+ * 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.
+ *
+ * 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. A
+     * signal, so the renderer can hold back `data-prism-rendered` until the
+     * states it reports are the ones on screen.
+     */
+    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;
+    /** Removes every mark, stops watching, and releases the stylesheets. */
+    clear(): void;
+    private observe;
+    private mark;
+}
+//# 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,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"}