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

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;;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"}
+{"version":3,"file":"prism-overview-cell.component.d.ts","sourceRoot":"","sources":["../../../src/app/overview/prism-overview-cell.component.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAKrE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;;AASvD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAsBa,0BAA0B;IACnC,QAAQ,CAAC,SAAS,wDAAsC;IACxD,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,gGAAgG;IAChG,QAAQ,CAAC,KAAK,qDAA8B;IAC5C,mFAAmF;IACnF,QAAQ,CAAC,IAAI,0DAAsC;IACnD,6FAA6F;IAC7F,QAAQ,CAAC,SAAS,qDAAsB;IAExC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAgC;IACzD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA6B;IACpD,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,8EAA8E;IAC9E,SAAS,CAAC,QAAQ,CAAC,WAAW,wDAA+B;IAE7D,SAAS,CAAC,QAAQ,CAAC,KAAK,yCAOrB;IAEH,sDAAsD;IACtD,SAAS,CAAC,QAAQ,CAAC,OAAO,0CAIvB;IAEH,SAAS,CAAC,QAAQ,CAAC,SAAS,0CAKzB;;IAuBH,SAAS,CAAC,IAAI,IAAI,IAAI;IAItB,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAkB/C,OAAO,CAAC,KAAK;IA0Eb,OAAO,CAAC,KAAK;yCAjLJ,0BAA0B;2CAA1B,0BAA0B;CAqLtC"}

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

@@ -1,12 +1,30 @@
-import { ChangeDetectionStrategy, Component, computed, DestroyRef, effect, inject, Injector, input, untracked, viewChild, ViewContainerRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, DestroyRef, effect, inject, Injector, input, output, reflectComponentType, signal, untracked, viewChild, ViewContainerRef } from '@angular/core';
+import { PRISM_VARIANT_INPUT } from '../../shared/composition.js';
 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 { activeCase, renderTypeFor } from '../renderer/composition.js';
+import { buildInputBindings } from '../renderer/input-bindings.js';
 import { parseContentToNodes } from '../renderer/projectable-content.js';
+import { PrismPanelService } from '../services/prism-panel.service.js';
 import { PrismPseudoStateService } from '../services/prism-pseudo-state.service.js';
-import { computeVariantState } from '../services/prism-renderer.service.js';
+import { computeVariantState, PrismRendererService } from '../services/prism-renderer.service.js';
+import { isPlaygroundCombination, openInPlayground, playgroundLabel } from './open-in-playground.js';
 import * as i0 from "@angular/core";
 const _c0 = ["outlet"];
+function PrismOverviewCellComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 3);
+    i0.ɵɵtext(1, "\u2013");
+    i0.ɵɵdomElementEnd();
+} }
+function PrismOverviewCellComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 4);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.caption());
+} }
 /**
  * One frame of the contact sheet: a stage painting the variant's declared
  * background, with the variant's own instance on it and a caption beneath.
@@ -22,14 +40,32 @@ const _c0 = ["outlet"];
  * 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.
+ *
+ * A cell can combine its variant with one of the component's `states` (the
+ * matrix does). When the marker finds that the state does not fit the rendered
+ * component, or the variant opted out with `states: false`, the cell shows the
+ * a dash in place of the component, with the reason as its tooltip and in its
+ * label. Every cell, with or without a state, opens its exact combination in
+ * the Playground on click, Enter or Space, and the one the Playground shows is
+ * outlined.
  */
 export class PrismOverviewCellComponent {
     component = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "component" }] : /* istanbul ignore next */ []));
     index = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    /** Position of the component state in `ShowcaseConfig.states`, `null` for the variant alone. */
+    state = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    /** `matrix` leaves the caption and the grid span to the matrix around the cell. */
+    mode = input('sheet', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Whether the state fits the rendered variant. Only emitted while `state` is not `null`. */
+    fitChange = output();
     injector = inject(Injector);
     destroyRef = inject(DestroyRef);
+    renderer = inject(PrismRendererService);
+    panels = inject(PrismPanelService);
     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`. */
@@ -46,32 +82,78 @@ export class PrismOverviewCellComponent {
         return variant ? `${number} ${variant.name}` : number;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
-    isWide = computed(() => {
+    /** Why the state is not shown on this cell, `null` while the component is. */
+    unfitReason = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unfitReason" }] : /* istanbul ignore next */ []));
+    label = computed(() => {
+        const config = this.component().meta.showcaseConfig;
+        const variant = config.variants?.[this.index()]?.name ?? this.caption();
+        const stateIndex = this.state();
+        const state = stateIndex === null ? undefined : config.states?.[stateIndex];
+        return playgroundLabel(variant, state?.name, this.unfitReason());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** The combination the Playground shows right now. */
+    current = computed(() => {
+        const optedOut = this.component().meta.showcaseConfig.variants?.[this.index()]?.states === false;
+        return isPlaygroundCombination(this.renderer, this.index(), this.state(), optedOut);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    stretches = computed(() => {
         const config = this.component().meta.showcaseConfig;
         const variant = config.variants?.[this.index()];
         return (variant?.canvasLayout ?? config.canvasLayout ?? 'fit') === 'stretch';
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isWide" }] : /* istanbul ignore next */ []));
+    ...(ngDevMode ? [{ debugName: "stretches" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const component = this.component();
             const index = this.index();
-            untracked(() => this.mount(component, index));
+            const state = this.state();
+            untracked(() => {
+                const fit = this.mount(component, index, state);
+                // Outside `mount`'s try: a handler that throws is the parent's
+                // doing, not a variant that failed to render.
+                if (fit)
+                    this.fitChange.emit(fit);
+            });
         });
         this.destroyRef.onDestroy(() => {
             this.pseudoMarker.clear();
             this.outlet().clear();
         });
     }
+    open() {
+        openInPlayground(this.renderer, this.panels, this.index(), this.state());
+    }
+    onKeydown(event) {
+        // Only for the cell itself: Enter and Space belong to a control inside the
+        // component while it has the focus.
+        if (event.target !== event.currentTarget || (event.key !== 'Enter' && event.key !== ' '))
+            return;
+        event.preventDefault();
+        this.open();
+    }
     // The Playground lets a variant that throws on construction propagate: one
     // broken instance, and the user navigates away from it. The Overview
     // fans instantiation out from one instance to n, all mounted in the same
     // change-detection pass. An uncaught throw here would abort the refresh of
     // every cell after it, so one bad variant would take down the whole sheet
     // instead of just its own cell. Hence: contain here, propagate there.
-    mount(component, index) {
+    //
+    // Returns the fit of the state on the rendered variant, `null` when the cell
+    // has no state or the variant failed to render.
+    mount(component, index, stateIndex) {
+        this.unfitReason.set(null);
         try {
             this.outlet().clear();
+            const variant = component.meta.showcaseConfig.variants?.[index];
+            // The matrix gives such a variant one cell without a state, so this is
+            // not asked for today. Nothing to mount, and nothing to evaluate.
+            if (stateIndex !== null && variant?.states === false) {
+                this.pseudoMarker.clear();
+                return this.unfit('states: false');
+            }
             // No `onUnknownInput` callback: the Playground already warns once per
             // component, and repeating that warning per cell would say the same thing
             // n times.
@@ -80,19 +162,35 @@ export class PrismOverviewCellComponent {
                 providers: component.meta.showcaseConfig.providers ?? [],
                 parent: this.injector
             });
-            const projectableNodes = activeContent ? parseContentToNodes(activeContent) : undefined;
-            const ref = this.outlet().createComponent(component.type, {
+            const composed = activeCase(component, index) !== null;
+            const type = renderTypeFor(component, index);
+            const projectableNodes = activeContent && !composed ? parseContentToNodes(activeContent, reflectComponentType(type)?.ngContentSelectors ?? []) : undefined;
+            const ref = this.outlet().createComponent(type, {
                 injector,
                 projectableNodes
             });
-            const knownInputs = buildKnownInputs(component);
+            if (composed)
+                ref.setInput(PRISM_VARIANT_INPUT, index);
+            const inputBindings = buildInputBindings(component, index);
             for (const [key, value] of Object.entries(values)) {
-                if (!knownInputs.has(key))
-                    continue;
-                ref.setInput(key, value);
+                const binding = inputBindings.get(key);
+                // None for an unknown input, and none for one the composition of the variant leaves unbound.
+                if (binding !== undefined)
+                    ref.setInput(binding, value);
             }
             ref.changeDetectorRef.detectChanges();
-            this.pseudoMarker.apply(ref.location.nativeElement, component.meta.showcaseConfig.variants?.[index]?.pseudo);
+            const statePseudo = stateIndex === null ? null : (component.meta.showcaseConfig.states?.[stateIndex]?.pseudo ?? null);
+            this.pseudoMarker.apply(ref.location.nativeElement, variant?.pseudo, statePseudo);
+            const fit = this.pseudoMarker.applied()?.fit ?? null;
+            if (!fit || fit.fits)
+                return fit;
+            // The marker keeps a state that does not fit applied and forces nothing of
+            // it, the Playground wants that to show why. A cell has no use for the
+            // component then: it would be a picture of the variant under a label
+            // that says something else.
+            this.pseudoMarker.clear();
+            this.outlet().clear();
+            return this.unfit(fit.reason);
         }
         catch (error) {
             // `createComponent` attaches the host element and its structural DOM
@@ -106,35 +204,54 @@ export class PrismOverviewCellComponent {
             this.pseudoMarker.clear();
             this.outlet().clear();
             console.error(`[ng-prism] Variant ${index} of ${component.meta.className} failed to render:`, error);
+            return null;
         }
     }
+    unfit(reason) {
+        this.unfitReason.set(reason);
+        return { fits: false, reason };
+    }
     static ɵfac = function PrismOverviewCellComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismOverviewCellComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismOverviewCellComponent, selectors: [["prism-overview-cell"]], viewQuery: function PrismOverviewCellComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuerySignal(ctx.outlet, _c0, 5, ViewContainerRef);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, hostAttrs: ["role", "listitem"], hostVars: 1, hostBindings: function PrismOverviewCellComponent_HostBindings(rf, ctx) { if (rf & 2) {
-            i0.ɵɵattribute("data-wide", ctx.isWide() ? "" : null);
-        } }, inputs: { component: [1, "component"], index: [1, "index"] }, decls: 6, vars: 2, consts: [["outlet", ""], [1, "cell__stage"], [1, "cell__mount"], [1, "cell__caption"]], template: function PrismOverviewCellComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, hostAttrs: ["role", "listitem", "tabindex", "0"], hostVars: 6, hostBindings: function PrismOverviewCellComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function PrismOverviewCellComponent_click_HostBindingHandler() { return ctx.open(); })("keydown", function PrismOverviewCellComponent_keydown_HostBindingHandler($event) { return ctx.onKeydown($event); });
+        } if (rf & 2) {
+            i0.ɵɵattribute("aria-label", ctx.label())("title", ctx.unfitReason())("data-matrix", ctx.mode() === "matrix" ? "" : null)("data-current", ctx.current() ? "" : null)("data-wide", ctx.mode() === "sheet" && ctx.stretches() ? "" : null)("data-stretch", ctx.mode() === "matrix" && ctx.stretches() ? "" : null);
+        } }, inputs: { component: [1, "component"], index: [1, "index"], state: [1, "state"], mode: [1, "mode"] }, outputs: { fitChange: "fitChange" }, decls: 6, vars: 4, consts: [["outlet", ""], [1, "cell__stage"], [1, "cell__mount"], ["aria-hidden", "true", 1, "cell__unfit"], [1, "cell__caption"]], template: function PrismOverviewCellComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵdomElementStart(0, "div", 1)(1, "div", 2);
             i0.ɵɵdomElementContainer(2, null, 0);
-            i0.ɵɵdomElementEnd()();
-            i0.ɵɵdomElementStart(4, "span", 3);
-            i0.ɵɵtext(5);
             i0.ɵɵdomElementEnd();
+            i0.ɵɵconditionalCreate(4, PrismOverviewCellComponent_Conditional_4_Template, 2, 0, "span", 3);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵconditionalCreate(5, PrismOverviewCellComponent_Conditional_5_Template, 2, 1, "span", 4);
         } if (rf & 2) {
-            i0.ɵɵattribute("data-bg", ctx.bg());
-            i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate(ctx.caption());
-        } }, styles: ["[_nghost-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: var(--%NS%sp-2);\n    min-width: 0;\n}\n\n\n\n[data-wide][_nghost-%COMP%] {\n    grid-column: 1 / -1;\n}\n\n.cell__stage[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    padding: var(--%NS%sp-5);\n    overflow: hidden;\n    outline: 1px solid var(--%NS%prism-stage-edge);\n    outline-offset: -1px;\n    background-color: var(--%NS%prism-stage);\n    border-radius: var(--%NS%radius-sm);\n}\n\n.cell__mount[_ngcontent-%COMP%] {\n    display: inline-block;\n    max-width: 100%;\n}\n\n[data-wide][_nghost-%COMP%]   .cell__mount[_ngcontent-%COMP%] {\n    display: block;\n    width: 100%;\n}\n\n\n\n\n\n.cell__caption[_ngcontent-%COMP%] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--%NS%prism-font-mono);\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-muted);\n    white-space: nowrap;\n}", "[data-bg=\"dots\"][_ngcontent-%COMP%] {\n    background-image: radial-gradient(circle, var(--%NS%prism-dot) 1px, transparent 1px);\n    background-size: 20px 20px;\n  }\n\n  [data-bg=\"plain\"][_ngcontent-%COMP%] {\n    background-image: none;\n  }\n\n  \n\n\n\n  \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  [data-bg=\"light\"][_ngcontent-%COMP%] {\n    background-color: var(--%NS%prism-void-light, #f7f5fc);\n    background-image: none;\n    --%NS%prism-measure: #ca00c1;\n    --%NS%prism-measure-plate: var(--%NS%prism-void-light, #f7f5fc);\n  }\n  [data-bg=\"dark\"][_ngcontent-%COMP%] {\n    background-color: var(--%NS%prism-void-dark, #07050f);\n    background-image: none;\n    --%NS%prism-measure: #f632ff;\n    --%NS%prism-measure-plate: var(--%NS%prism-void-dark, #07050f);\n  }\n\n  \n\n\n  [data-bg=\"checker\"][_ngcontent-%COMP%], \n   [data-bg=\"transparent\"][_ngcontent-%COMP%] {\n    background-image:\n      linear-gradient(45deg, var(--%NS%prism-border) 25%, transparent 25%),\n      linear-gradient(-45deg, var(--%NS%prism-border) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, var(--%NS%prism-border) 75%),\n      linear-gradient(-45deg, transparent 75%, var(--%NS%prism-border) 75%);\n    background-size: 16px 16px;\n    background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n  }"] });
+            i0.ɵɵattribute("data-bg", ctx.unfitReason() === null ? ctx.bg() : null)("data-unfit", ctx.unfitReason() === null ? null : "");
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(ctx.unfitReason() !== null ? 4 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.mode() === "sheet" ? 5 : -1);
+        } }, styles: ["[_nghost-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: var(--%NS%sp-2);\n    min-width: 0;\n    cursor: pointer;\n}\n\n[_nghost-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 2px;\n    border-radius: var(--%NS%radius-sm);\n}\n\n\n\n[data-wide][_nghost-%COMP%] {\n    grid-column: 1 / -1;\n}\n\n.cell__stage[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    padding: var(--%NS%sp-5);\n    overflow: hidden;\n    outline: 1px solid var(--%NS%prism-stage-edge);\n    outline-offset: -1px;\n    background-color: var(--%NS%prism-stage);\n    border-radius: var(--%NS%radius-sm);\n}\n\n\n\n[data-matrix][_nghost-%COMP%]   .cell__stage[_ngcontent-%COMP%] {\n    min-height: 72px;\n    padding: var(--%NS%sp-3);\n}\n\n\n\n\n[_nghost-%COMP%]:hover   .cell__stage[_ngcontent-%COMP%], \n[data-current][_nghost-%COMP%]   .cell__stage[_ngcontent-%COMP%] {\n    outline-width: 1.5px;\n    outline-color: var(--%NS%prism-primary);\n    outline-offset: 1px;\n}\n\n.cell__mount[_ngcontent-%COMP%] {\n    display: inline-block;\n    max-width: 100%;\n}\n\n[data-wide][_nghost-%COMP%]   .cell__mount[_ngcontent-%COMP%], \n[data-stretch][_nghost-%COMP%]   .cell__mount[_ngcontent-%COMP%] {\n    display: block;\n    width: 100%;\n}\n\n\n\n.cell__stage[data-unfit][_ngcontent-%COMP%] {\n    outline-style: dashed;\n    background: none;\n}\n\n.cell__stage[data-unfit][_ngcontent-%COMP%]   .cell__mount[_ngcontent-%COMP%] {\n    display: none;\n}\n\n\n.cell__unfit[_ngcontent-%COMP%] {\n    font-family: var(--%NS%prism-font-mono);\n    font-size: var(--%NS%fs-md);\n    line-height: 1;\n    color: var(--%NS%prism-text-muted);\n}\n\n\n\n\n\n.cell__caption[_ngcontent-%COMP%] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--%NS%prism-font-mono);\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-muted);\n    white-space: nowrap;\n}", "[data-bg=\"dots\"][_ngcontent-%COMP%] {\n    background-image: radial-gradient(circle, var(--%NS%prism-dot) 1px, transparent 1px);\n    background-size: 20px 20px;\n  }\n\n  [data-bg=\"plain\"][_ngcontent-%COMP%] {\n    background-image: none;\n  }\n\n  \n\n\n\n  \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  [data-bg=\"light\"][_ngcontent-%COMP%] {\n    background-color: var(--%NS%prism-void-light, #f7f5fc);\n    background-image: none;\n    --%NS%prism-measure: #ca00c1;\n    --%NS%prism-measure-plate: var(--%NS%prism-void-light, #f7f5fc);\n  }\n  [data-bg=\"dark\"][_ngcontent-%COMP%] {\n    background-color: var(--%NS%prism-void-dark, #07050f);\n    background-image: none;\n    --%NS%prism-measure: #f632ff;\n    --%NS%prism-measure-plate: var(--%NS%prism-void-dark, #07050f);\n  }\n\n  \n\n\n  [data-bg=\"checker\"][_ngcontent-%COMP%], \n   [data-bg=\"transparent\"][_ngcontent-%COMP%] {\n    background-image:\n      linear-gradient(45deg, var(--%NS%prism-border) 25%, transparent 25%),\n      linear-gradient(-45deg, var(--%NS%prism-border) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, var(--%NS%prism-border) 75%),\n      linear-gradient(-45deg, transparent 75%, var(--%NS%prism-border) 75%);\n    background-size: 16px 16px;\n    background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n  }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismOverviewCellComponent, [{
         type: Component,
         args: [{ selector: 'prism-overview-cell', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                     role: 'listitem',
-                    '[attr.data-wide]': "isWide() ? '' : null"
-                }, template: "<div\n    class=\"cell__stage\"\n    [attr.data-bg]=\"bg()\">\n    <div class=\"cell__mount\"><ng-container #outlet /></div>\n</div>\n<span class=\"cell__caption\">{{ caption() }}</span>\n", styles: [":host {\n    display: flex;\n    flex-direction: column;\n    gap: var(--sp-2);\n    min-width: 0;\n}\n\n/* A stretch variant has no intrinsic width to compare against its\n   neighbours, so it takes the row rather than a column. */\n:host([data-wide]) {\n    grid-column: 1 / -1;\n}\n\n.cell__stage {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    padding: var(--sp-5);\n    overflow: hidden;\n    outline: 1px solid var(--prism-stage-edge);\n    outline-offset: -1px;\n    background-color: var(--prism-stage);\n    border-radius: var(--radius-sm);\n}\n\n.cell__mount {\n    display: inline-block;\n    max-width: 100%;\n}\n\n:host([data-wide]) .cell__mount {\n    display: block;\n    width: 100%;\n}\n\n/* The caption sits below the frame, not on it. Inside, it would have to\n   invert against every background the cell can paint, and gaining a new\n   contrast rule per CanvasBg value is the cost the sheet exists to\n   avoid. */\n.cell__caption {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--prism-font-mono);\n    font-size: var(--fs-xs);\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n}\n", "\n  [data-bg=\"dots\"] {\n    background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n    background-size: 20px 20px;\n  }\n\n  [data-bg=\"plain\"] {\n    background-image: none;\n  }\n\n  /* Flat, not dotted. \"light\" and \"dark\" name the surface a component was\n     designed against, and their colour is absolute rather than a theme token,\n     which makes them the values to declare for a screenshot baseline. Use\n     \"dots\" for the grid. */\n  /* These two also re-point --prism-measure. Other overlays use theme colours\n     on theme surfaces, but these grounds ignore the theme: \"light\" stays\n     near-white in the dark theme and \"dark\" stays near-black in the light one.\n     The dark theme's magenta reaches only 2.85:1 on the light ground, under the\n     4.5:1 its 9px readout needs, so the measurement colour has to follow the\n     ground, not the theme.\n\n     --prism-measure-plate follows it for the same reason. It is the surface\n     the measuring tool's value label paints itself on, so the label reads as a\n     gap in the measurement line rather than a badge on top of it. At its\n     --prism-stage fallback it would be the theme's stage under a re-pointed\n     foreground: the light theme's magenta on the dark theme's stage reads\n     3.71:1, the dark theme's on white 3.08:1. Pinned to the ground the same way,\n     the pairs reach 4.54:1 and 6.57:1. A color-mix against the ground would\n     work too, but this file already states both grounds literally, and one\n     mechanism per decision is enough.\n\n     Literal values because this file is theme-independent, like the two\n     grounds below. Keep them in step with --prism-measure in\n     prism-default-theme.ts; semantic-colours.spec.ts fails if they drift. */\n  [data-bg=\"light\"] {\n    background-color: var(--prism-void-light, #f7f5fc);\n    background-image: none;\n    --prism-measure: #ca00c1;\n    --prism-measure-plate: var(--prism-void-light, #f7f5fc);\n  }\n  [data-bg=\"dark\"] {\n    background-color: var(--prism-void-dark, #07050f);\n    background-image: none;\n    --prism-measure: #f632ff;\n    --prism-measure-plate: var(--prism-void-dark, #07050f);\n  }\n\n  /* \"transparent\" shares the checkerboard. In the app the checkerboard is\n     already the UI's sign for \"no surface\", and a see-through stage would only\n     show the shell behind it. Only CAPTURE_STYLES tells the two apart. */\n  [data-bg=\"checker\"],\n  [data-bg=\"transparent\"] {\n    background-image:\n      linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n      linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n      linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n    background-size: 16px 16px;\n    background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n  }\n"] }]
-    }], () => [], { 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', { ...{
+                    tabindex: '0',
+                    '[attr.aria-label]': 'label()',
+                    '[attr.title]': 'unfitReason()',
+                    '[attr.data-matrix]': "mode() === 'matrix' ? '' : null",
+                    '[attr.data-current]': "current() ? '' : null",
+                    // In the matrix the grid spans are the matrix's own. A stretch variant still
+                    // fills its cell, so `canvasLayout` holds for the whole row.
+                    '[attr.data-wide]': "mode() === 'sheet' && stretches() ? '' : null",
+                    '[attr.data-stretch]': "mode() === 'matrix' && stretches() ? '' : null",
+                    '(click)': 'open()',
+                    '(keydown)': 'onKeydown($event)'
+                }, template: "<div\n    class=\"cell__stage\"\n    [attr.data-bg]=\"unfitReason() === null ? bg() : null\"\n    [attr.data-unfit]=\"unfitReason() === null ? null : ''\">\n    <div class=\"cell__mount\"><ng-container #outlet /></div>\n    @if (unfitReason() !== null) {\n        <span\n            class=\"cell__unfit\"\n            aria-hidden=\"true\"\n            >\u2013</span\n        >\n    }\n</div>\n@if (mode() === 'sheet') {\n    <span class=\"cell__caption\">{{ caption() }}</span>\n}\n", styles: [":host {\n    display: flex;\n    flex-direction: column;\n    gap: var(--sp-2);\n    min-width: 0;\n    cursor: pointer;\n}\n\n:host(:focus-visible) {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 2px;\n    border-radius: var(--radius-sm);\n}\n\n/* A stretch variant has no intrinsic width to compare against its\n   neighbours, so it takes the row rather than a column. */\n:host([data-wide]) {\n    grid-column: 1 / -1;\n}\n\n.cell__stage {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    padding: var(--sp-5);\n    overflow: hidden;\n    outline: 1px solid var(--prism-stage-edge);\n    outline-offset: -1px;\n    background-color: var(--prism-stage);\n    border-radius: var(--radius-sm);\n}\n\n/* The matrix is denser than the sheet: a row of five states has to fit the\n   panel. The component keeps its own size; only the frame around it shrinks. */\n:host([data-matrix]) .cell__stage {\n    min-height: 72px;\n    padding: var(--sp-3);\n}\n\n/* What the click opens, and what the Playground shows right now. Outside the\n   stage, on the panel surface, where the primary holds its contrast whatever\n   ground the cell paints. Longhands, so a dashed n/a frame stays dashed. */\n:host(:hover) .cell__stage,\n:host([data-current]) .cell__stage {\n    outline-width: 1.5px;\n    outline-color: var(--prism-primary);\n    outline-offset: 1px;\n}\n\n.cell__mount {\n    display: inline-block;\n    max-width: 100%;\n}\n\n:host([data-wide]) .cell__mount,\n:host([data-stretch]) .cell__mount {\n    display: block;\n    width: 100%;\n}\n\n/* A state that does not fit shows no component and paints no ground: an\n   empty, dashed frame, so it cannot pass for a rendering. */\n.cell__stage[data-unfit] {\n    outline-style: dashed;\n    background: none;\n}\n\n.cell__stage[data-unfit] .cell__mount {\n    display: none;\n}\n\n/* Only the dash: the reason is the cell's tooltip and part of its label. */\n.cell__unfit {\n    font-family: var(--prism-font-mono);\n    font-size: var(--fs-md);\n    line-height: 1;\n    color: var(--prism-text-muted);\n}\n\n/* The caption sits below the frame, not on it. Inside, it would have to\n   invert against every background the cell can paint, and gaining a new\n   contrast rule per CanvasBg value is the cost the sheet exists to\n   avoid. */\n.cell__caption {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--prism-font-mono);\n    font-size: var(--fs-xs);\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n}\n", "\n  [data-bg=\"dots\"] {\n    background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n    background-size: 20px 20px;\n  }\n\n  [data-bg=\"plain\"] {\n    background-image: none;\n  }\n\n  /* Flat, not dotted. \"light\" and \"dark\" name the surface a component was\n     designed against, and their colour is absolute rather than a theme token,\n     which makes them the values to declare for a screenshot baseline. Use\n     \"dots\" for the grid. */\n  /* These two also re-point --prism-measure. Other overlays use theme colours\n     on theme surfaces, but these grounds ignore the theme: \"light\" stays\n     near-white in the dark theme and \"dark\" stays near-black in the light one.\n     The dark theme's magenta reaches only 2.85:1 on the light ground, under the\n     4.5:1 its 9px readout needs, so the measurement colour has to follow the\n     ground, not the theme.\n\n     --prism-measure-plate follows it for the same reason. It is the surface\n     the measuring tool's value label paints itself on, so the label reads as a\n     gap in the measurement line rather than a badge on top of it. At its\n     --prism-stage fallback it would be the theme's stage under a re-pointed\n     foreground: the light theme's magenta on the dark theme's stage reads\n     3.71:1, the dark theme's on white 3.08:1. Pinned to the ground the same way,\n     the pairs reach 4.54:1 and 6.57:1. A color-mix against the ground would\n     work too, but this file already states both grounds literally, and one\n     mechanism per decision is enough.\n\n     Literal values because this file is theme-independent, like the two\n     grounds below. Keep them in step with --prism-measure in canvas-overlay-tokens.ts and\n     prism-default-theme.ts; semantic-colours.spec.ts fails if they drift. */\n  [data-bg=\"light\"] {\n    background-color: var(--prism-void-light, #f7f5fc);\n    background-image: none;\n    --prism-measure: #ca00c1;\n    --prism-measure-plate: var(--prism-void-light, #f7f5fc);\n  }\n  [data-bg=\"dark\"] {\n    background-color: var(--prism-void-dark, #07050f);\n    background-image: none;\n    --prism-measure: #f632ff;\n    --prism-measure-plate: var(--prism-void-dark, #07050f);\n  }\n\n  /* \"transparent\" shares the checkerboard. In the app the checkerboard is\n     already the UI's sign for \"no surface\", and a see-through stage would only\n     show the shell behind it. Only CAPTURE_STYLES tells the two apart. */\n  [data-bg=\"checker\"],\n  [data-bg=\"transparent\"] {\n    background-image:\n      linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n      linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n      linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n    background-size: 16px 16px;\n    background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n  }\n"] }]
+    }], () => [], { component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], fitChange: [{ type: i0.Output, args: ["fitChange"] }], 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: 38 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismOverviewCellComponent, { className: "PrismOverviewCellComponent", filePath: "app/overview/prism-overview-cell.component.ts", lineNumber: 77 }); })();

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

@@ -0,0 +1,29 @@
+import type { RuntimeComponent } from '../../plugin/plugin.types.js';
+import type { StateFit } from '../pseudo/state-fit.js';
+import * as i0 from "@angular/core";
+/**
+ * The Overview of a component with `states`: variants down, Default and every
+ * state across, each intersection one `prism-overview-cell`.
+ *
+ * Whether a state fits a variant is something only the rendered cell knows, so
+ * the cells report it (`fitChange`) and this component keeps the answers. The
+ * column headers count them. A state that fits no variant at all is almost
+ * certainly a selector that matches nothing: its header is marked, and the
+ * console warns about it once.
+ *
+ * The first row and the first column stay in view while the matrix scrolls.
+ */
+export declare class PrismOverviewMatrixComponent {
+    readonly component: import("@angular/core").InputSignal<RuntimeComponent>;
+    protected readonly matrix: import("@angular/core").Signal<import("./overview-matrix.js").OverviewMatrix>;
+    /** What each cell answered, by {@link fitKey}. Starts over with every component. */
+    private readonly fits;
+    /** The column titles with their fit counts (the Default column has none), and whether a state fits no variant. */
+    protected readonly headers: import("@angular/core").Signal<import("./overview-matrix.js").ColumnHeader[]>;
+    constructor();
+    protected onFit(variant: number, state: number | null, fit: StateFit): void;
+    private warnAbout;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismOverviewMatrixComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismOverviewMatrixComponent, "prism-overview-matrix", never, { "component": { "alias": "component"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=prism-overview-matrix.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prism-overview-matrix.component.d.ts","sourceRoot":"","sources":["../../../src/app/overview/prism-overview-matrix.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;;AAWvD;;;;;;;;;;;GAWG;AACH,qBAQa,4BAA4B;IACrC,QAAQ,CAAC,SAAS,wDAAsC;IAExD,SAAS,CAAC,QAAQ,CAAC,MAAM,gFAA6E;IAEtG,oFAAoF;IACpF,OAAO,CAAC,QAAQ,CAAC,IAAI,CAGlB;IAEH,kHAAkH;IAClH,SAAS,CAAC,QAAQ,CAAC,OAAO,gFAA6D;;IAWvF,SAAS,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,QAAQ,GAAG,IAAI;IAK3E,OAAO,CAAC,SAAS;yCA5BR,4BAA4B;2CAA5B,4BAA4B;CA0CxC"}

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

@@ -0,0 +1,155 @@
+import { ChangeDetectionStrategy, Component, computed, effect, input, linkedSignal, untracked } from '@angular/core';
+import { buildOverviewMatrix, columnHeaders, fitKey, statesFittingNowhere } from './overview-matrix.js';
+import { PrismOverviewCellComponent } from './prism-overview-cell.component.js';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.column.state;
+const _forTrack1 = ($index, $item) => $item.variant;
+const _forTrack2 = ($index, $item) => $item.state;
+function PrismOverviewMatrixComponent_For_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 6);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const fit_r1 = ctx;
+    i0.ɵɵattribute("title", fit_r1.title);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(fit_r1.text);
+} }
+function PrismOverviewMatrixComponent_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3)(1, "span", 4)(2, "span", 5);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, PrismOverviewMatrixComponent_For_5_Conditional_4_Template, 2, 2, "span", 6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 7);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    let tmp_13_0;
+    const header_r2 = ctx.$implicit;
+    i0.ɵɵattribute("data-fits-nowhere", header_r2.fitsNowhere ? "" : null)("title", header_r2.fitsNowhere ? header_r2.column.title + " fits no variant; check its selectors" : null);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(header_r2.column.title);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_13_0 = header_r2.fit) ? 4 : -1, tmp_13_0);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(header_r2.column.signature);
+} }
+function PrismOverviewMatrixComponent_For_7_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10)(1, "div", 11);
+    i0.ɵɵelement(2, "prism-overview-cell", 12);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const row_r3 = i0.ɵɵnextContext().$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("component", ctx_r3.component())("index", row_r3.variant);
+} }
+function PrismOverviewMatrixComponent_For_7_Conditional_5_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 13)(1, "div", 11)(2, "prism-overview-cell", 14);
+    i0.ɵɵlistener("fitChange", function PrismOverviewMatrixComponent_For_7_Conditional_5_For_1_Template_prism_overview_cell_fitChange_2_listener($event) { const column_r6 = i0.ɵɵrestoreView(_r5).$implicit; const row_r3 = i0.ɵɵnextContext(2).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onFit(row_r3.variant, column_r6.state, $event)); });
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const column_r6 = ctx.$implicit;
+    const row_r3 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("component", ctx_r3.component())("index", row_r3.variant)("state", column_r6.state);
+} }
+function PrismOverviewMatrixComponent_For_7_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, PrismOverviewMatrixComponent_For_7_Conditional_5_For_1_Template, 3, 3, "div", 13, _forTrack2);
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵrepeater(ctx_r3.matrix().columns);
+} }
+function PrismOverviewMatrixComponent_For_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 8)(2, "span", 9);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(4, PrismOverviewMatrixComponent_For_7_Conditional_4_Template, 3, 2, "div", 10)(5, PrismOverviewMatrixComponent_For_7_Conditional_5_Template, 2, 0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const row_r3 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("title", row_r3.note);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(row_r3.title);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(row_r3.optedOut ? 4 : 5);
+} }
+/**
+ * The states a component has been warned about, by index. Module-level and weak,
+ * so leaving the Overview and coming back does not repeat the warning, while a
+ * rebuilt component (HMR) has its own.
+ */
+const warnedStates = new WeakMap();
+/**
+ * The Overview of a component with `states`: variants down, Default and every
+ * state across, each intersection one `prism-overview-cell`.
+ *
+ * Whether a state fits a variant is something only the rendered cell knows, so
+ * the cells report it (`fitChange`) and this component keeps the answers. The
+ * column headers count them. A state that fits no variant at all is almost
+ * certainly a selector that matches nothing: its header is marked, and the
+ * console warns about it once.
+ *
+ * The first row and the first column stay in view while the matrix scrolls.
+ */
+export class PrismOverviewMatrixComponent {
+    component = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "component" }] : /* istanbul ignore next */ []));
+    matrix = computed(() => buildOverviewMatrix(this.component().meta.showcaseConfig), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "matrix" }] : /* istanbul ignore next */ []));
+    /** What each cell answered, by {@link fitKey}. Starts over with every component. */
+    fits = linkedSignal({ ...(ngDevMode ? { debugName: "fits" } : /* istanbul ignore next */ {}), source: this.component,
+        computation: () => new Map() });
+    /** The column titles with their fit counts (the Default column has none), and whether a state fits no variant. */
+    headers = computed(() => columnHeaders(this.fits(), this.matrix()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headers" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const component = this.component();
+            const nowhere = statesFittingNowhere(this.fits(), this.matrix());
+            untracked(() => this.warnAbout(component, nowhere));
+        });
+    }
+    onFit(variant, state, fit) {
+        if (state === null)
+            return;
+        this.fits.update((fits) => new Map(fits).set(fitKey(variant, state), fit));
+    }
+    warnAbout(component, states) {
+        const warned = warnedStates.get(component) ?? new Set();
+        warnedStates.set(component, warned);
+        for (const state of states) {
+            if (warned.has(state))
+                continue;
+            const name = component.meta.showcaseConfig.states?.[state]?.name;
+            warned.add(state);
+            console.warn(`[ng-prism] State "${name}" of ${component.meta.className} fits no variant; check its selectors.`);
+        }
+    }
+    static ɵfac = function PrismOverviewMatrixComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismOverviewMatrixComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismOverviewMatrixComponent, selectors: [["prism-overview-matrix"]], inputs: { component: [1, "component"] }, decls: 8, vars: 3, consts: [["role", "table", 1, "matrix"], ["role", "row", 1, "matrix__row"], ["role", "columnheader", 1, "matrix__corner"], ["role", "columnheader", 1, "matrix__head"], [1, "matrix__head-line"], [1, "matrix__title"], [1, "matrix__fit"], [1, "matrix__signature"], ["role", "rowheader", 1, "matrix__variant"], [1, "matrix__name"], ["role", "cell", 1, "matrix__slot", "matrix__slot--span"], ["role", "list", 1, "matrix__list"], ["mode", "matrix", 3, "component", "index"], ["role", "cell", 1, "matrix__slot"], ["mode", "matrix", 3, "fitChange", "component", "index", "state"]], template: function PrismOverviewMatrixComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
+            i0.ɵɵtext(3, " Variant \\ State ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵrepeaterCreate(4, PrismOverviewMatrixComponent_For_5_Template, 7, 5, "div", 3, _forTrack0);
+            i0.ɵɵelementEnd();
+            i0.ɵɵrepeaterCreate(6, PrismOverviewMatrixComponent_For_7_Template, 6, 3, "div", 1, _forTrack1);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵstyleProp("--%NS%matrix-columns", ctx.matrix().columns.length);
+            i0.ɵɵattribute("aria-label", ctx.component().meta.showcaseConfig.title + " variants by state");
+            i0.ɵɵadvance(4);
+            i0.ɵɵrepeater(ctx.headers());
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.matrix().rows);
+        } }, dependencies: [PrismOverviewCellComponent], styles: ["\n\n\n[_nghost-%COMP%] {\n    display: flex;\n    flex: 1 1 0;\n    flex-direction: column;\n    min-height: 0;\n}\n\n.matrix[_ngcontent-%COMP%] {\n    --%NS%matrix-edge: var(--%NS%prism-border);\n\n    display: grid;\n    flex: 1 1 0;\n    grid-template-columns: minmax(120px, max-content) repeat(var(--%NS%matrix-columns, 1), minmax(160px, 1fr));\n    align-content: start;\n    min-height: 0;\n    overflow: auto;\n}\n\n\n\n.matrix__row[_ngcontent-%COMP%] {\n    display: contents;\n}\n\n.matrix__corner[_ngcontent-%COMP%], \n.matrix__head[_ngcontent-%COMP%], \n.matrix__variant[_ngcontent-%COMP%] {\n    position: sticky;\n    display: flex;\n    flex-direction: column;\n    gap: var(--%NS%sp-1);\n    min-width: 0;\n    padding: var(--%NS%sp-3) var(--%NS%sp-4);\n    background: var(--%NS%prism-bg-elevated);\n}\n\n\n\n.matrix__corner[_ngcontent-%COMP%], \n.matrix__head[_ngcontent-%COMP%] {\n    top: 0;\n    z-index: 2;\n    justify-content: flex-start;\n    border-bottom: 1px solid var(--%NS%matrix-edge);\n}\n\n.matrix__corner[_ngcontent-%COMP%], \n.matrix__variant[_ngcontent-%COMP%] {\n    left: 0;\n    z-index: 1;\n    border-right: 1px solid var(--%NS%matrix-edge);\n}\n\n\n.matrix__corner[_ngcontent-%COMP%] {\n    z-index: 3;\n    font-family: var(--%NS%prism-font-mono);\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-muted);\n}\n\n.matrix__variant[_ngcontent-%COMP%] {\n    justify-content: center;\n}\n\n.matrix__head-line[_ngcontent-%COMP%] {\n    display: flex;\n    gap: var(--%NS%sp-3);\n    align-items: baseline;\n    justify-content: space-between;\n    min-width: 0;\n}\n\n.matrix__title[_ngcontent-%COMP%], \n.matrix__name[_ngcontent-%COMP%] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--%NS%fs-sm);\n    font-weight: 600;\n    color: var(--%NS%prism-text);\n    white-space: nowrap;\n}\n\n.matrix__signature[_ngcontent-%COMP%], \n.matrix__fit[_ngcontent-%COMP%] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--%NS%prism-font-mono);\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-muted);\n    white-space: nowrap;\n}\n\n.matrix__fit[_ngcontent-%COMP%] {\n    flex: none;\n    font-variant-numeric: tabular-nums;\n    cursor: help;\n}\n\n\n.matrix__head[data-fits-nowhere][_ngcontent-%COMP%] {\n    box-shadow: inset 0 -2px 0 var(--%NS%prism-warn);\n}\n\n.matrix__head[data-fits-nowhere][_ngcontent-%COMP%]   .matrix__fit[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-warn);\n}\n\n\n.matrix__slot[_ngcontent-%COMP%] {\n    display: flex;\n    min-width: 0;\n    padding: var(--%NS%sp-2);\n}\n\n\n\n.matrix__slot--span[_ngcontent-%COMP%] {\n    grid-column: 2 / -1;\n}\n\n.matrix__list[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    min-width: 0;\n}\n\n.matrix__list[_ngcontent-%COMP%]    > prism-overview-cell[_ngcontent-%COMP%] {\n    flex: 1;\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismOverviewMatrixComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-overview-matrix', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismOverviewCellComponent], template: "<div\n    class=\"matrix\"\n    role=\"table\"\n    [attr.aria-label]=\"component().meta.showcaseConfig.title + ' variants by state'\"\n    [style.--matrix-columns]=\"matrix().columns.length\">\n    <div\n        class=\"matrix__row\"\n        role=\"row\">\n        <div\n            class=\"matrix__corner\"\n            role=\"columnheader\">\n            Variant \\ State\n        </div>\n        @for (header of headers(); track header.column.state) {\n            <div\n                class=\"matrix__head\"\n                role=\"columnheader\"\n                [attr.data-fits-nowhere]=\"header.fitsNowhere ? '' : null\"\n                [attr.title]=\"header.fitsNowhere ? header.column.title + ' fits no variant; check its selectors' : null\">\n                <span class=\"matrix__head-line\">\n                    <span class=\"matrix__title\">{{ header.column.title }}</span>\n                    @if (header.fit; as fit) {\n                        <span\n                            class=\"matrix__fit\"\n                            [attr.title]=\"fit.title\"\n                            >{{ fit.text }}</span\n                        >\n                    }\n                </span>\n                <span class=\"matrix__signature\">{{ header.column.signature }}</span>\n            </div>\n        }\n    </div>\n    @for (row of matrix().rows; track row.variant) {\n        <div\n            class=\"matrix__row\"\n            role=\"row\">\n            <div\n                class=\"matrix__variant\"\n                role=\"rowheader\"\n                [attr.title]=\"row.note\">\n                <span class=\"matrix__name\">{{ row.title }}</span>\n            </div>\n            @if (row.optedOut) {\n                <div\n                    class=\"matrix__slot matrix__slot--span\"\n                    role=\"cell\">\n                    <div\n                        class=\"matrix__list\"\n                        role=\"list\">\n                        <prism-overview-cell\n                            [component]=\"component()\"\n                            [index]=\"row.variant\"\n                            mode=\"matrix\" />\n                    </div>\n                </div>\n            } @else {\n                @for (column of matrix().columns; track column.state) {\n                    <div\n                        class=\"matrix__slot\"\n                        role=\"cell\">\n                        <div\n                            class=\"matrix__list\"\n                            role=\"list\">\n                            <prism-overview-cell\n                                [component]=\"component()\"\n                                [index]=\"row.variant\"\n                                [state]=\"column.state\"\n                                mode=\"matrix\"\n                                (fitChange)=\"onFit(row.variant, column.state, $event)\" />\n                        </div>\n                    </div>\n                }\n            }\n        </div>\n    }\n</div>\n", styles: ["/* The host hands its height to the matrix, which scrolls on its own: the\n   header row and the variant column stay in view only if the scrolling\n   happens inside the grid that holds them. */\n:host {\n    display: flex;\n    flex: 1 1 0;\n    flex-direction: column;\n    min-height: 0;\n}\n\n.matrix {\n    --matrix-edge: var(--prism-border);\n\n    display: grid;\n    flex: 1 1 0;\n    grid-template-columns: minmax(120px, max-content) repeat(var(--matrix-columns, 1), minmax(160px, 1fr));\n    align-content: start;\n    min-height: 0;\n    overflow: auto;\n}\n\n/* The rows only carry the roles. Their cells are the grid's, so the columns\n   line up from the header down. */\n.matrix__row {\n    display: contents;\n}\n\n.matrix__corner,\n.matrix__head,\n.matrix__variant {\n    position: sticky;\n    display: flex;\n    flex-direction: column;\n    gap: var(--sp-1);\n    min-width: 0;\n    padding: var(--sp-3) var(--sp-4);\n    background: var(--prism-bg-elevated);\n}\n\n/* Top-aligned: a title and its signature read from the same line in every\n   column, however long a neighbour's signature runs. */\n.matrix__corner,\n.matrix__head {\n    top: 0;\n    z-index: 2;\n    justify-content: flex-start;\n    border-bottom: 1px solid var(--matrix-edge);\n}\n\n.matrix__corner,\n.matrix__variant {\n    left: 0;\n    z-index: 1;\n    border-right: 1px solid var(--matrix-edge);\n}\n\n/* Above the header row and the variant column both, where they cross. */\n.matrix__corner {\n    z-index: 3;\n    font-family: var(--prism-font-mono);\n    font-size: var(--fs-xs);\n    color: var(--prism-text-muted);\n}\n\n.matrix__variant {\n    justify-content: center;\n}\n\n.matrix__head-line {\n    display: flex;\n    gap: var(--sp-3);\n    align-items: baseline;\n    justify-content: space-between;\n    min-width: 0;\n}\n\n.matrix__title,\n.matrix__name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--fs-sm);\n    font-weight: 600;\n    color: var(--prism-text);\n    white-space: nowrap;\n}\n\n.matrix__signature,\n.matrix__fit {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--prism-font-mono);\n    font-size: var(--fs-xs);\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n}\n\n.matrix__fit {\n    flex: none;\n    font-variant-numeric: tabular-nums;\n    cursor: help;\n}\n\n/* A state that fits no variant at all: most likely a selector with a typo. */\n.matrix__head[data-fits-nowhere] {\n    box-shadow: inset 0 -2px 0 var(--prism-warn);\n}\n\n.matrix__head[data-fits-nowhere] .matrix__fit {\n    color: var(--prism-warn);\n}\n\n/* 4px each side: 8px between neighbouring cells. */\n.matrix__slot {\n    display: flex;\n    min-width: 0;\n    padding: var(--sp-2);\n}\n\n/* A variant that opted out has a single cell, over Default and every state:\n   it is not combined with any of them. */\n.matrix__slot--span {\n    grid-column: 2 / -1;\n}\n\n.matrix__list {\n    display: flex;\n    flex: 1;\n    min-width: 0;\n}\n\n.matrix__list > prism-overview-cell {\n    flex: 1;\n}\n"] }]
+    }], () => [], { component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismOverviewMatrixComponent, { className: "PrismOverviewMatrixComponent", filePath: "app/overview/prism-overview-matrix.component.ts", lineNumber: 34 }); })();

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

@@ -6,11 +6,15 @@ import * as i0 from "@angular/core";
  *
  * No controls of any kind: columns follow the window, and
  * everything else a cell shows is what the variant itself declared.
+ *
+ * A component that declares `states` gets the matrix instead, variants against
+ * states. Without states the sheet stays what it was.
  */
 export declare class PrismOverviewComponent {
     /** Input name fixed by `prism-view-panel-host`, which feeds every view panel. */
     readonly activeComponent: import("@angular/core").InputSignal<RuntimeComponent | null>;
     protected readonly variants: import("@angular/core").Signal<import("../../index.js").Variant<unknown>[]>;
+    protected readonly hasStates: import("@angular/core").Signal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismOverviewComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PrismOverviewComponent, "prism-overview", never, { "activeComponent": { "alias": "activeComponent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"prism-overview.component.d.ts","sourceRoot":"","sources":["../../../src/app/overview/prism-overview.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;;AAGrE;;;;;;GAMG;AACH,qBAQa,sBAAsB;IAC/B,iFAAiF;IACjF,QAAQ,CAAC,eAAe,+DAAwC;IAEhE,SAAS,CAAC,QAAQ,CAAC,QAAQ,8EAA8E;yCAJhG,sBAAsB;2CAAtB,sBAAsB;CAKlC"}
+{"version":3,"file":"prism-overview.component.d.ts","sourceRoot":"","sources":["../../../src/app/overview/prism-overview.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;;AAIrE;;;;;;;;;GASG;AACH,qBAYa,sBAAsB;IAC/B,iFAAiF;IACjF,QAAQ,CAAC,eAAe,+DAAwC;IAEhE,SAAS,CAAC,QAAQ,CAAC,QAAQ,8EAA8E;IAEzG,SAAS,CAAC,QAAQ,CAAC,SAAS,0CAAyF;yCAN5G,sBAAsB;2CAAtB,sBAAsB;CAOlC"}