@ng-prism/core 22.5.0 → 22.7.0-beta.0

package/dist/app/panels/panel-host/panel-badge.js

@@ -1,4 +1,3 @@
-import { deriveA11ySummary } from '../a11y/a11y-summary.js';
 /**
  * The badge a panel's tab carries, if any.
  *
@@ -18,18 +17,64 @@ export function resolvePanelBadge(panel, component, context) {
         return component ? panel.badge(component) : null;
     }
     if (panel.id === 'controls') {
-        return context.inputCount > 0 ? { text: String(context.inputCount), variant: 'default' } : null;
+        return countBadge(context.inputCount, 'input');
+    }
+    if (panel.id === 'events') {
+        return countBadge(context.eventCount, 'event');
     }
     if (panel.id === 'a11y') {
-        // `=== null` rather than a falsy check: a score of 0 is a real, and the
-        // most urgent, thing to show.
-        const result = context.a11yResult;
-        if (result === null)
-            return null;
-        return {
-            text: String(result.score),
-            variant: deriveA11ySummary(result, context.a11yThresholds).variant
-        };
+        return a11yViolationBadge(context.a11yResult);
     }
     return null;
 }
+const plural = (n, noun) => `${n} ${noun}${n === 1 ? '' : 's'}`;
+function countBadge(n, noun) {
+    return n > 0 ? { kind: 'count', text: String(n), label: plural(n, noun) } : null;
+}
+/**
+ * Reads a badge the way the tab bar renders it, including badges written
+ * before 22.7 that only set `variant`.
+ */
+export function normalizePanelBadge(badge) {
+    if (badge === null)
+        return null;
+    if (!badge.kind && badge.variant === 'ok')
+        return null;
+    const kind = badge.kind ?? (badge.variant === 'warn' || badge.variant === 'danger' ? 'issues' : 'count');
+    const label = badge.label ?? badge.text;
+    if (kind === 'count')
+        return { kind, text: badge.text, label };
+    if (badge.text === '0')
+        return null;
+    const legacyTone = badge.variant === 'warn' || badge.variant === 'danger' ? badge.variant : undefined;
+    return { kind, text: badge.text, tone: badge.tone ?? legacyTone ?? 'danger', label };
+}
+/**
+ * What to tell the author of a panel whose badge still sets `variant`, or
+ * `null` when it does not. The panel host logs it once per panel; the badge
+ * keeps rendering through {@link normalizePanelBadge} until 23.0.0.
+ */
+export function deprecatedBadgeVariantNotice(panelId, badge) {
+    if (badge?.variant === undefined)
+        return null;
+    return `The badge of panel "${panelId}" sets variant, which is deprecated since 22.7.0 and will be removed in 23.0.0. It is mapped to kind and tone until then; set those instead.`;
+}
+/**
+ * The a11y tab's badge, also shown on the Violations sub-tab: a number of open
+ * findings, not the score. The score is graded in the gauge, the sidebar and
+ * the panel. The tone follows the most severe violation, the same split the
+ * build gate draws.
+ */
+export function a11yViolationBadge(result) {
+    if (result === null)
+        return null;
+    const violations = result.critical + result.serious + result.moderate + result.minor;
+    if (violations === 0)
+        return null;
+    return {
+        kind: 'issues',
+        text: String(violations),
+        tone: result.critical + result.serious > 0 ? 'danger' : 'warn',
+        label: plural(violations, 'violation')
+    };
+}

package/dist/app/panels/panel-host/prism-panel-host.component.d.ts

@@ -1,6 +1,7 @@
 import { EnvironmentInjector, type Type } from '@angular/core';
 import type { PanelDefinition } from '../../../plugin/plugin.types.js';
 import { PrismPanelService } from '../../services/prism-panel.service.js';
+import { type PrismTabItem } from '../../shared/prism-tabs.component.js';
 import * as i0 from "@angular/core";
 type RenderedPanelEntry = {
     id: string;
@@ -24,7 +25,9 @@ export declare class PrismPanelHostComponent {
      */
     private readonly a11yThresholds;
     private readonly inputCount;
-    protected panelBadge(panel: PanelDefinition): import("../../../plugin/plugin.types.js").PanelBadge | null;
+    private readonly eventLog;
+    private panelBadge;
+    protected readonly tabItems: import("@angular/core").Signal<PrismTabItem[]>;
     private readonly builtInPanels;
     protected readonly allPanels: import("@angular/core").Signal<PanelDefinition[]>;
     protected readonly panelInputs: import("@angular/core").Signal<{

package/dist/app/panels/panel-host/prism-panel-host.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-panel-host.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/panel-host/prism-panel-host.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAwD,mBAAmB,EAAkB,KAAK,IAAI,EAAa,MAAM,eAAe,CAAC;AAChJ,OAAO,KAAK,EAAiB,eAAe,EAAmB,MAAM,iCAAiC,CAAC;AAGvG,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;;AAU1E,KAAK,kBAAkB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACzB,QAAQ,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACrC,SAAS,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,qBAQa,uBAAuB;IAChC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAC5D,SAAS,CAAC,QAAQ,CAAC,WAAW,sBAA+B;IAC7D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IACzD,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2C;IACpE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAE9D;;;;OAIG;IACH,OAAO,CAAC,QAAQ,CAAC,cAAc,CAO5B;IAEH,OAAO,CAAC,QAAQ,CAAC,UAAU,CAIxB;IAEH,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,eAAe;IAQ3C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAkB;IAEhD,SAAS,CAAC,QAAQ,CAAC,SAAS,oDAMzB;IAEH,SAAS,CAAC,QAAQ,CAAC,WAAW;;OAE1B;IAEJ,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoC;IAE9D,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAsD;IACrF,SAAS,CAAC,QAAQ,CAAC,mBAAmB,uDAA8D;;IAwCpG,OAAO,CAAC,iBAAiB;IAwBzB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;yCAnIlB,uBAAuB;2CAAvB,uBAAuB;CAuJnC"}
+{"version":3,"file":"prism-panel-host.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/panel-host/prism-panel-host.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAwD,mBAAmB,EAAkB,KAAK,IAAI,EAAa,MAAM,eAAe,CAAC;AAChJ,OAAO,KAAK,EAAiB,eAAe,EAAmB,MAAM,iCAAiC,CAAC;AAGvG,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAG1E,OAAO,EAAE,KAAK,YAAY,EAAsB,MAAM,sCAAsC,CAAC;;AAY7F,KAAK,kBAAkB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACzB,QAAQ,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACrC,SAAS,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,qBAQa,uBAAuB;IAChC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAC5D,SAAS,CAAC,QAAQ,CAAC,WAAW,sBAA+B;IAC7D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IACzD,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2C;IACpE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAE9D;;;;OAIG;IACH,OAAO,CAAC,QAAQ,CAAC,cAAc,CAO5B;IAEH,OAAO,CAAC,QAAQ,CAAC,UAAU,CAIxB;IAEH,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAgC;IAEzD,OAAO,CAAC,UAAU;IAgBlB,SAAS,CAAC,QAAQ,CAAC,QAAQ,iDAEzB;IAEF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAkB;IAEhD,SAAS,CAAC,QAAQ,CAAC,SAAS,oDAE1B;IAEF,SAAS,CAAC,QAAQ,CAAC,WAAW;;OAE1B;IAEJ,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoC;IAE9D,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAsD;IACrF,SAAS,CAAC,QAAQ,CAAC,mBAAmB,uDAA8D;;IAwCpG,OAAO,CAAC,iBAAiB;IAwBzB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;yCA7IlB,uBAAuB;2CAAvB,uBAAuB;CAiKnC"}

package/dist/app/panels/panel-host/prism-panel-host.component.js

@@ -1,73 +1,35 @@
 import { NgComponentOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, effect, EnvironmentInjector, inject, signal, untracked } from '@angular/core';
-import { PrismIconComponent } from '../../icons/prism-icon.component.js';
+import { PrismEventLogService } from '../../services/prism-event-log.service.js';
 import { PrismNavigationService } from '../../services/prism-navigation.service.js';
 import { PrismPanelService } from '../../services/prism-panel.service.js';
 import { PrismPluginService } from '../../services/prism-plugin.service.js';
 import { PrismRendererService } from '../../services/prism-renderer.service.js';
+import { PrismTabsComponent } from '../../shared/prism-tabs.component.js';
 import { PRISM_CONFIG, PRISM_MANIFEST } from '../../tokens/prism-tokens.js';
 import { A11yAuditService } from '../a11y/a11y-audit.service.js';
 import { resolveA11yThresholds } from '../a11y/a11y-thresholds.js';
 import { BUILTIN_PANELS } from '../builtin-panels.js';
-import { resolvePanelBadge } from './panel-badge.js';
+import { addonPanelsFor } from './addon-panels.js';
+import { deprecatedBadgeVariantNotice, normalizePanelBadge, resolvePanelBadge } from './panel-badge.js';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.id;
-function PrismPanelHostComponent_For_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-icon", 6);
-} if (rf & 2) {
-    const panel_r2 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("name", panel_r2.icon)("size", 13);
-} }
-function PrismPanelHostComponent_For_3_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 8);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const badge_r4 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("warn", badge_r4.variant === "warn")("danger", badge_r4.variant === "danger");
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(badge_r4.text);
-} }
-function PrismPanelHostComponent_For_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, PrismPanelHostComponent_For_3_Conditional_3_Conditional_0_Template, 2, 5, "span", 7);
-} if (rf & 2) {
-    i0.ɵɵconditional(ctx.variant !== "ok" ? 0 : -1);
-} }
-function PrismPanelHostComponent_For_3_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 5);
-    i0.ɵɵlistener("click", function PrismPanelHostComponent_For_3_Template_button_click_0_listener() { const panel_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.panelService.activePanelId.set(panel_r2.id)); });
-    i0.ɵɵconditionalCreate(1, PrismPanelHostComponent_For_3_Conditional_1_Template, 1, 2, "prism-icon", 6);
-    i0.ɵɵtext(2);
-    i0.ɵɵconditionalCreate(3, PrismPanelHostComponent_For_3_Conditional_3_Template, 1, 1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    let tmp_15_0;
-    const panel_r2 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("p-tab--active", ctx_r2.panelService.activePanelId() === panel_r2.id);
-    i0.ɵɵattribute("aria-selected", ctx_r2.panelService.activePanelId() === panel_r2.id)("aria-controls", ctx_r2.panelService.activePanelId() === panel_r2.id ? "panel-" + panel_r2.id : null);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(panel_r2.icon ? 1 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", panel_r2.label, " ");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_15_0 = ctx_r2.panelBadge(panel_r2)) ? 3 : -1, tmp_15_0);
-} }
-function PrismPanelHostComponent_For_6_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function PrismPanelHostComponent_For_5_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function PrismPanelHostComponent_For_6_Template(rf, ctx) { if (rf & 1) {
+function PrismPanelHostComponent_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
-    i0.ɵɵtemplate(1, PrismPanelHostComponent_For_6_ng_container_1_Template, 1, 0, "ng-container", 9);
+    i0.ɵɵtemplate(1, PrismPanelHostComponent_For_5_ng_container_1_Template, 1, 0, "ng-container", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const entry_r5 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("hidden", entry_r5.id !== ctx_r2.panelService.activePanelId());
+    const entry_r1 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("hidden", entry_r1.id !== ctx_r1.panelService.activePanelId());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngComponentOutlet", entry_r5.component)("ngComponentOutletInputs", ctx_r2.panelInputs())("ngComponentOutletInjector", entry_r5.injector ?? ctx_r2.envInjector);
+    i0.ɵɵproperty("ngComponentOutlet", entry_r1.component)("ngComponentOutletInputs", ctx_r1.panelInputs())("ngComponentOutletInjector", entry_r1.injector ?? ctx_r1.envInjector);
 } }
+/** Panels whose badge still sets `variant`, warned about once per page load. */
+const warnedVariantBadges = new Set();
 export class PrismPanelHostComponent {
     pluginService = inject(PrismPluginService);
     nav = inject(PrismNavigationService);
@@ -95,21 +57,25 @@ export class PrismPanelHostComponent {
         return comp?.meta.inputs.length ?? 0;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputCount" }] : /* istanbul ignore next */ []));
+    eventLog = inject(PrismEventLogService);
     panelBadge(panel) {
-        return resolvePanelBadge(panel, this.nav.activeComponent(), {
+        const badge = resolvePanelBadge(panel, this.nav.activeComponent(), {
             inputCount: this.inputCount(),
+            eventCount: this.eventLog.events().length,
             a11yResult: this.auditService.scoreResult(),
             a11yThresholds: this.a11yThresholds()
         });
+        const notice = deprecatedBadgeVariantNotice(panel.id, badge);
+        if (notice && !warnedVariantBadges.has(panel.id)) {
+            warnedVariantBadges.add(panel.id);
+            console.warn(`[ng-prism] ${notice}`);
+        }
+        return normalizePanelBadge(badge);
     }
+    tabItems = computed(() => this.allPanels().map((panel) => ({ id: panel.id, label: panel.label, icon: panel.icon, badge: this.panelBadge(panel) })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabItems" }] : /* istanbul ignore next */ []));
     builtInPanels = BUILTIN_PANELS;
-    allPanels = computed(() => {
-        const comp = this.nav.activeComponent();
-        const panels = [...this.builtInPanels.filter((p) => p.placement !== 'view'), ...this.pluginService.addonPanels()];
-        if (!comp)
-            return panels;
-        return panels.filter((p) => !p.isVisible || p.isVisible(comp));
-    }, /* @ts-ignore */
+    allPanels = computed(() => addonPanelsFor([...this.builtInPanels.filter((p) => p.placement !== 'view'), ...this.pluginService.addonPanels()], this.nav.activeComponent()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "allPanels" }] : /* istanbul ignore next */ []));
     panelInputs = computed(() => ({
         activeComponent: this.nav.activeComponent()
@@ -199,24 +165,24 @@ export class PrismPanelHostComponent {
             this.renderedPanels.set(next);
     }
     static ɵfac = function PrismPanelHostComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismPanelHostComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismPanelHostComponent, selectors: [["prism-panel-host"]], decls: 7, vars: 1, consts: [[1, "panel"], ["role", "tablist", 1, "panel-tabs"], ["role", "tab", 1, "p-tab", 3, "p-tab--active"], ["role", "tabpanel", 1, "panel-body", 3, "id"], [1, "panel-pane", 3, "hidden"], ["role", "tab", 1, "p-tab", 3, "click"], [3, "name", "size"], [1, "p-tab-badge", 3, "warn", "danger"], [1, "p-tab-badge"], [4, "ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector"]], template: function PrismPanelHostComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "nav", 1);
-            i0.ɵɵrepeaterCreate(2, PrismPanelHostComponent_For_3_Template, 4, 7, "button", 2, _forTrack0);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "div", 3);
-            i0.ɵɵrepeaterCreate(5, PrismPanelHostComponent_For_6_Template, 2, 4, "div", 4, _forTrack0);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismPanelHostComponent, selectors: [["prism-panel-host"]], decls: 6, vars: 3, consts: [[1, "panel"], [1, "panel-tabs"], ["ariaLabel", "Panels", "panelIdPrefix", "panel-", 3, "activeChange", "items", "active"], ["role", "tabpanel", 1, "panel-body", 3, "id"], [1, "panel-pane", 3, "hidden"], [4, "ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector"]], template: function PrismPanelHostComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "prism-tabs", 2);
+            i0.ɵɵlistener("activeChange", function PrismPanelHostComponent_Template_prism_tabs_activeChange_2_listener($event) { return $event && ctx.panelService.activePanelId.set($event); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(3, "div", 3);
+            i0.ɵɵrepeaterCreate(4, PrismPanelHostComponent_For_5_Template, 2, 4, "div", 4, _forTrack0);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
-            i0.ɵɵrepeater(ctx.allPanels());
-            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("items", ctx.tabItems())("active", ctx.panelService.activePanelId());
+            i0.ɵɵadvance();
             i0.ɵɵproperty("id", "panel-" + ctx.panelService.activePanelId());
             i0.ɵɵadvance();
             i0.ɵɵrepeater(ctx.renderedPanelsArray());
-        } }, dependencies: [NgComponentOutlet, PrismIconComponent], styles: [".panel[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--%NS%prism-bg-elevated);\n    border-top: 1px solid var(--%NS%prism-border);\n}\n\n.panel-tabs[_ngcontent-%COMP%] {\n    display: flex;\n    flex-shrink: 0;\n    gap: 2px;\n    align-items: center;\n    height: 40px;\n    padding: 0 16px;\n    overflow-x: auto;\n    scrollbar-width: none;\n    background: var(--%NS%prism-bg);\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.panel-tabs[_ngcontent-%COMP%]::-webkit-scrollbar {\n    display: none;\n}\n\n.p-tab[_ngcontent-%COMP%] {\n    position: relative;\n    display: flex;\n    gap: 7px;\n    align-items: center;\n    height: 100%;\n    padding: 0 12px;\n    font-family: var(--%NS%font-sans);\n    font-size: var(--%NS%fs-md);\n    font-weight: 500;\n    color: var(--%NS%prism-text-muted);\n    white-space: nowrap;\n    cursor: pointer;\n    background: none;\n    border: none;\n    transition: color var(--%NS%dur-fast);\n}\n\n.p-tab[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text-2);\n}\n\n.p-tab--active[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text);\n}\n\n.p-tab--%NS%active[_ngcontent-%COMP%]::after {\n    position: absolute;\n    right: 8px;\n    bottom: -1px;\n    left: 8px;\n    height: 2px;\n    content: '';\n    background: linear-gradient(90deg, var(--%NS%prism-primary-from), var(--%NS%prism-primary-to));\n    border-radius: 1px;\n}\n\n.p-tab-badge[_ngcontent-%COMP%] {\n    display: grid;\n    place-items: center;\n    min-width: 16px;\n    height: 16px;\n    padding: 0 5px;\n    font-family: var(--%NS%font-mono);\n    font-size: 10px;\n    font-weight: 700;\n    color: var(--%NS%prism-primary);\n    background: color-mix(in srgb, var(--%NS%prism-primary) 18%, transparent);\n    border-radius: 8px;\n}\n\n.p-tab-badge.warn[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-warn);\n    background: color-mix(in srgb, var(--%NS%prism-warn) 18%, transparent);\n}\n\n.p-tab-badge.danger[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-danger);\n    background: color-mix(in srgb, var(--%NS%prism-danger) 18%, transparent);\n}\n\n.panel-tabs-right[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    align-items: center;\n    padding-left: 10px;\n    margin-left: auto;\n}\n\n.icon-btn[_ngcontent-%COMP%] {\n    display: grid;\n    place-items: center;\n    width: 28px;\n    height: 28px;\n    color: var(--%NS%prism-text-muted);\n    cursor: pointer;\n    background: none;\n    border: none;\n    border-radius: var(--%NS%radius-sm);\n    transition: all var(--%NS%dur-fast);\n}\n\n.icon-btn[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text);\n    background: var(--%NS%prism-input-bg);\n}\n\n.panel-body[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n    background: var(--%NS%prism-bg-elevated);\n}\n\n.panel-body[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n}\n\n.panel-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: var(--%NS%prism-border-strong);\n    border-radius: 4px;\n}\n\n.panel-pane[_ngcontent-%COMP%] {\n    height: 100%;\n}\n\n.panel-pane[hidden][_ngcontent-%COMP%] {\n    display: none;\n}\n\n[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 2px;\n}"] });
+        } }, dependencies: [NgComponentOutlet, PrismTabsComponent], styles: [".panel[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--%NS%prism-bg-surface);\n    border-top: 1px solid var(--%NS%prism-border);\n}\n\n.panel-tabs[_ngcontent-%COMP%] {\n    display: flex;\n    flex-shrink: 0;\n    height: 38px;\n    padding: 0 12px;\n    background: var(--%NS%prism-bg);\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.panel-body[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n    background: var(--%NS%prism-bg-surface);\n}\n\n.panel-body[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n}\n\n.panel-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: var(--%NS%prism-border-strong);\n    border-radius: 4px;\n}\n\n.panel-pane[_ngcontent-%COMP%] {\n    height: 100%;\n}\n\n.panel-pane[hidden][_ngcontent-%COMP%] {\n    display: none;\n}\n\n[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 2px;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismPanelHostComponent, [{
         type: Component,
-        args: [{ selector: 'prism-panel-host', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgComponentOutlet, PrismIconComponent], template: "<div class=\"panel\">\n    <nav\n        class=\"panel-tabs\"\n        role=\"tablist\">\n        @for (panel of allPanels(); track panel.id) {\n            <button\n                class=\"p-tab\"\n                [class.p-tab--active]=\"panelService.activePanelId() === panel.id\"\n                (click)=\"panelService.activePanelId.set(panel.id)\"\n                role=\"tab\"\n                [attr.aria-selected]=\"panelService.activePanelId() === panel.id\"\n                [attr.aria-controls]=\"panelService.activePanelId() === panel.id ? 'panel-' + panel.id : null\">\n                @if (panel.icon) {\n                    <prism-icon\n                        [name]=\"panel.icon\"\n                        [size]=\"13\" />\n                }\n                {{ panel.label }}\n                @if (panelBadge(panel); as badge) {\n                    @if (badge.variant !== 'ok') {\n                        <span\n                            class=\"p-tab-badge\"\n                            [class.warn]=\"badge.variant === 'warn'\"\n                            [class.danger]=\"badge.variant === 'danger'\"\n                            >{{ badge.text }}</span\n                        >\n                    }\n                }\n            </button>\n        }\n    </nav>\n    <div\n        class=\"panel-body\"\n        [id]=\"'panel-' + panelService.activePanelId()\"\n        role=\"tabpanel\">\n        @for (entry of renderedPanelsArray(); track entry.id) {\n            <div\n                class=\"panel-pane\"\n                [hidden]=\"entry.id !== panelService.activePanelId()\">\n                <ng-container *ngComponentOutlet=\"entry.component; inputs: panelInputs(); injector: entry.injector ?? envInjector\" />\n            </div>\n        }\n    </div>\n</div>\n", styles: [".panel {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--prism-bg-elevated);\n    border-top: 1px solid var(--prism-border);\n}\n\n.panel-tabs {\n    display: flex;\n    flex-shrink: 0;\n    gap: 2px;\n    align-items: center;\n    height: 40px;\n    padding: 0 16px;\n    overflow-x: auto;\n    scrollbar-width: none;\n    background: var(--prism-bg);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.panel-tabs::-webkit-scrollbar {\n    display: none;\n}\n\n.p-tab {\n    position: relative;\n    display: flex;\n    gap: 7px;\n    align-items: center;\n    height: 100%;\n    padding: 0 12px;\n    font-family: var(--font-sans);\n    font-size: var(--fs-md);\n    font-weight: 500;\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n    cursor: pointer;\n    background: none;\n    border: none;\n    transition: color var(--dur-fast);\n}\n\n.p-tab:hover {\n    color: var(--prism-text-2);\n}\n\n.p-tab--active {\n    color: var(--prism-text);\n}\n\n.p-tab--active::after {\n    position: absolute;\n    right: 8px;\n    bottom: -1px;\n    left: 8px;\n    height: 2px;\n    content: '';\n    background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n    border-radius: 1px;\n}\n\n.p-tab-badge {\n    display: grid;\n    place-items: center;\n    min-width: 16px;\n    height: 16px;\n    padding: 0 5px;\n    font-family: var(--font-mono);\n    font-size: 10px;\n    font-weight: 700;\n    color: var(--prism-primary);\n    background: color-mix(in srgb, var(--prism-primary) 18%, transparent);\n    border-radius: 8px;\n}\n\n.p-tab-badge.warn {\n    color: var(--prism-warn);\n    background: color-mix(in srgb, var(--prism-warn) 18%, transparent);\n}\n\n.p-tab-badge.danger {\n    color: var(--prism-danger);\n    background: color-mix(in srgb, var(--prism-danger) 18%, transparent);\n}\n\n.panel-tabs-right {\n    display: flex;\n    gap: 4px;\n    align-items: center;\n    padding-left: 10px;\n    margin-left: auto;\n}\n\n.icon-btn {\n    display: grid;\n    place-items: center;\n    width: 28px;\n    height: 28px;\n    color: var(--prism-text-muted);\n    cursor: pointer;\n    background: none;\n    border: none;\n    border-radius: var(--radius-sm);\n    transition: all var(--dur-fast);\n}\n\n.icon-btn:hover {\n    color: var(--prism-text);\n    background: var(--prism-input-bg);\n}\n\n.panel-body {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n    background: var(--prism-bg-elevated);\n}\n\n.panel-body::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n}\n\n.panel-body::-webkit-scrollbar-thumb {\n    background: var(--prism-border-strong);\n    border-radius: 4px;\n}\n\n.panel-pane {\n    height: 100%;\n}\n\n.panel-pane[hidden] {\n    display: none;\n}\n\n:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 2px;\n}\n"] }]
+        args: [{ selector: 'prism-panel-host', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgComponentOutlet, PrismTabsComponent], template: "<div class=\"panel\">\n    <div class=\"panel-tabs\">\n        <prism-tabs\n            ariaLabel=\"Panels\"\n            panelIdPrefix=\"panel-\"\n            [items]=\"tabItems()\"\n            [active]=\"panelService.activePanelId()\"\n            (activeChange)=\"$event && panelService.activePanelId.set($event)\" />\n    </div>\n    <div\n        class=\"panel-body\"\n        [id]=\"'panel-' + panelService.activePanelId()\"\n        role=\"tabpanel\">\n        @for (entry of renderedPanelsArray(); track entry.id) {\n            <div\n                class=\"panel-pane\"\n                [hidden]=\"entry.id !== panelService.activePanelId()\">\n                <ng-container *ngComponentOutlet=\"entry.component; inputs: panelInputs(); injector: entry.injector ?? envInjector\" />\n            </div>\n        }\n    </div>\n</div>\n", styles: [".panel {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--prism-bg-surface);\n    border-top: 1px solid var(--prism-border);\n}\n\n.panel-tabs {\n    display: flex;\n    flex-shrink: 0;\n    height: 38px;\n    padding: 0 12px;\n    background: var(--prism-bg);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.panel-body {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n    background: var(--prism-bg-surface);\n}\n\n.panel-body::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n}\n\n.panel-body::-webkit-scrollbar-thumb {\n    background: var(--prism-border-strong);\n    border-radius: 4px;\n}\n\n.panel-pane {\n    height: 100%;\n}\n\n.panel-pane[hidden] {\n    display: none;\n}\n\n:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 2px;\n}\n"] }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPanelHostComponent, { className: "PrismPanelHostComponent", filePath: "app/panels/panel-host/prism-panel-host.component.ts", lineNumber: 31 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPanelHostComponent, { className: "PrismPanelHostComponent", filePath: "app/panels/panel-host/prism-panel-host.component.ts", lineNumber: 36 }); })();

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