@ng-prism/core 22.4.1 → 22.6.0

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

@@ -1,11 +1,34 @@
-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 { resolveVariantBg } from '../../shared/variant-bg.js';
 import { CANVAS_BG_STYLES } from '../canvas/canvas-bg.styles.js';
-import { buildKnownInputs } from '../renderer/known-inputs.js';
+import { buildInputBindings } from '../renderer/input-bindings.js';
 import { parseContentToNodes } from '../renderer/projectable-content.js';
-import { computeVariantState } from '../services/prism-renderer.service.js';
+import { PrismPanelService } from '../services/prism-panel.service.js';
+import { PrismPseudoStateService } from '../services/prism-pseudo-state.service.js';
+import { computeVariantState, PrismRendererService } from '../services/prism-renderer.service.js';
+import { openInPlayground } 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, "div", 3)(1, "span", 5);
+    i0.ɵɵtext(2, "\u2013");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "span", 6);
+    i0.ɵɵtext(4);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx);
+} }
+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.
@@ -16,14 +39,36 @@ const _c0 = ["outlet"];
  * writing to any of them would corrupt what they mean. `data-prism-rendered`
  * matters most: it is the selector external screenshot runners key on (see
  * `docs/guide/external-tooling.md`), and this component never emits it.
+ *
+ * Forced pseudo states are the variant's own, applied by a marker of the
+ * cell's own, so a hovered cell never hovers its neighbour. The tools menu's
+ * state toggle does not reach here: like every other control, it belongs to
+ * the Playground.
+ *
+ * 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
+ * reason in place of the component. Every cell, with or without a state, opens
+ * its exact combination in the Playground on click, Enter or Space.
  */
 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`. */
     bg = computed(() => resolveVariantBg(this.component().meta.showcaseConfig, this.index()), /* @ts-ignore */
@@ -39,19 +84,51 @@ 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 `Open ${variant}${state ? ` × ${state.name}` : ''} in the Playground`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* 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();
         });
-        this.destroyRef.onDestroy(() => 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
@@ -59,9 +136,20 @@ export class PrismOverviewCellComponent {
     // 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.
@@ -70,18 +158,30 @@ export class PrismOverviewCellComponent {
                 providers: component.meta.showcaseConfig.providers ?? [],
                 parent: this.injector
             });
-            const projectableNodes = activeContent ? parseContentToNodes(activeContent) : undefined;
+            const projectableNodes = activeContent ? parseContentToNodes(activeContent, reflectComponentType(component.type)?.ngContentSelectors ?? []) : undefined;
             const ref = this.outlet().createComponent(component.type, {
                 injector,
                 projectableNodes
             });
-            const knownInputs = buildKnownInputs(component);
+            const inputBindings = buildInputBindings(component);
             for (const [key, value] of Object.entries(values)) {
-                if (!knownInputs.has(key))
-                    continue;
-                ref.setInput(key, value);
+                const binding = inputBindings.get(key);
+                if (binding !== undefined)
+                    ref.setInput(binding, value);
             }
             ref.changeDetectorRef.detectChanges();
+            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
@@ -92,37 +192,55 @@ export class PrismOverviewCellComponent {
             // a caught cell actually show an empty stage with its caption still in
             // place, which shows "this variant failed" instead of a broken grid
             // with no indication of which cell caused it.
+            this.pseudoMarker.clear();
             this.outlet().clear();
             console.error(`[ng-prism] Variant ${index} of ${component.meta.className} failed to render:`, error);
+            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: 3, 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())("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"], [1, "cell__unfit"], [1, "cell__caption"], ["aria-hidden", "true", 1, "cell__unfit-mark"], [1, "cell__unfit-reason"]], 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, 5, 1, "div", 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  }"] });
+            let tmp_3_0;
+            i0.ɵɵattribute("data-bg", ctx.unfitReason() === null ? ctx.bg() : null)("data-unfit", ctx.unfitReason() === null ? null : "");
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional((tmp_3_0 = ctx.unfitReason()) ? 4 : -1, tmp_3_0);
+            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.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.cell__unfit[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: var(--%NS%sp-1);\n    align-items: center;\n    max-width: 100%;\n    font-family: var(--%NS%prism-font-mono);\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-muted);\n    text-align: center;\n}\n\n.cell__unfit-mark[_ngcontent-%COMP%] {\n    font-size: var(--%NS%fs-md);\n    line-height: 1;\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()',
+                    // 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(); as reason) {\n        <div class=\"cell__unfit\">\n            <span\n                class=\"cell__unfit-mark\"\n                aria-hidden=\"true\"\n                >\u2013</span\n            >\n            <span class=\"cell__unfit-reason\">{{ reason }}</span>\n        </div>\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.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 frame with the reason, 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.cell__unfit {\n    display: flex;\n    flex-direction: column;\n    gap: var(--sp-1);\n    align-items: center;\n    max-width: 100%;\n    font-family: var(--prism-font-mono);\n    font-size: var(--fs-xs);\n    color: var(--prism-text-muted);\n    text-align: center;\n}\n\n.cell__unfit-mark {\n    font-size: var(--fs-md);\n    line-height: 1;\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 }] }], 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: 32 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismOverviewCellComponent, { className: "PrismOverviewCellComponent", filePath: "app/overview/prism-overview-cell.component.ts", lineNumber: 70 }); })();

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,164 @@
+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_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 6);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx);
+} }
+function PrismOverviewMatrixComponent_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3)(1, "span", 4);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 5);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, PrismOverviewMatrixComponent_For_5_Conditional_5_Template, 2, 1, "span", 6);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_14_0;
+    const header_r1 = ctx.$implicit;
+    i0.ɵɵattribute("data-fits-nowhere", header_r1.fitsNowhere ? "" : null)("title", header_r1.fitsNowhere ? header_r1.column.title + " fits no variant; check its selectors" : null);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(header_r1.column.title);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(header_r1.column.signature);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_14_0 = header_r1.fit) ? 5 : -1, tmp_14_0);
+} }
+function PrismOverviewMatrixComponent_For_7_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 9);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx);
+} }
+function PrismOverviewMatrixComponent_For_7_Conditional_5_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_r2 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("component", ctx_r2.component())("index", row_r2.variant);
+} }
+function PrismOverviewMatrixComponent_For_7_Conditional_6_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 13)(1, "div", 11)(2, "prism-overview-cell", 14);
+    i0.ɵɵlistener("fitChange", function PrismOverviewMatrixComponent_For_7_Conditional_6_For_1_Template_prism_overview_cell_fitChange_2_listener($event) { const column_r5 = i0.ɵɵrestoreView(_r4).$implicit; const row_r2 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onFit(row_r2.variant, column_r5.state, $event)); });
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const column_r5 = ctx.$implicit;
+    const row_r2 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("component", ctx_r2.component())("index", row_r2.variant)("state", column_r5.state);
+} }
+function PrismOverviewMatrixComponent_For_7_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, PrismOverviewMatrixComponent_For_7_Conditional_6_For_1_Template, 3, 3, "div", 13, _forTrack2);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵrepeater(ctx_r2.matrix().columns);
+} }
+function PrismOverviewMatrixComponent_For_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 7)(2, "span", 8);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, PrismOverviewMatrixComponent_For_7_Conditional_4_Template, 2, 1, "span", 9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, PrismOverviewMatrixComponent_For_7_Conditional_5_Template, 3, 2, "div", 10)(6, PrismOverviewMatrixComponent_For_7_Conditional_6_Template, 2, 0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_11_0;
+    const row_r2 = ctx.$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(row_r2.title);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_11_0 = row_r2.note) ? 4 : -1, tmp_11_0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(row_r2.optedOut ? 5 : 6);
+} }
+/**
+ * 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__title"], [1, "matrix__signature"], [1, "matrix__fit"], ["role", "rowheader", 1, "matrix__variant"], [1, "matrix__name"], [1, "matrix__note"], ["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 ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵrepeaterCreate(4, PrismOverviewMatrixComponent_For_5_Template, 6, 5, "div", 3, _forTrack0);
+            i0.ɵɵelementEnd();
+            i0.ɵɵrepeaterCreate(6, PrismOverviewMatrixComponent_For_7_Template, 7, 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.matrix__corner[_ngcontent-%COMP%], \n.matrix__head[_ngcontent-%COMP%] {\n    top: 0;\n    z-index: 2;\n    justify-content: flex-end;\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__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.matrix__note[_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\n.matrix__head[data-fits-nowhere][_ngcontent-%COMP%] {\n    box-shadow: inset 0 -2px 0 var(--%NS%prism-mark-attention);\n}\n\n.matrix__head[data-fits-nowhere][_ngcontent-%COMP%]   .matrix__fit[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-attention);\n}\n\n.matrix__slot[_ngcontent-%COMP%] {\n    display: flex;\n    min-width: 0;\n    padding: var(--%NS%sp-3);\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\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__title\">{{ header.column.title }}</span>\n                <span class=\"matrix__signature\">{{ header.column.signature }}</span>\n                @if (header.fit; as fit) {\n                    <span class=\"matrix__fit\">{{ fit }}</span>\n                }\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                <span class=\"matrix__name\">{{ row.title }}</span>\n                @if (row.note; as note) {\n                    <span class=\"matrix__note\">{{ note }}</span>\n                }\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.matrix__corner,\n.matrix__head {\n    top: 0;\n    z-index: 2;\n    justify-content: flex-end;\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__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.matrix__note {\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/* 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-mark-attention);\n}\n\n.matrix__head[data-fits-nowhere] .matrix__fit {\n    color: var(--prism-mark-attention);\n}\n\n.matrix__slot {\n    display: flex;\n    min-width: 0;\n    padding: var(--sp-3);\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"}

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

@@ -1,28 +1,44 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { PrismOverviewCellComponent } from './prism-overview-cell.component.js';
+import { PrismOverviewMatrixComponent } from './prism-overview-matrix.component.js';
 import * as i0 from "@angular/core";
-function PrismOverviewComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-overview-cell", 1);
+function PrismOverviewComponent_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-overview-matrix", 0);
 } if (rf & 2) {
-    const $index_r1 = ctx.$index;
-    const component_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("component", component_r2)("index", $index_r1);
+    const component_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("component", component_r1);
 } }
-function PrismOverviewComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 0);
-    i0.ɵɵrepeaterCreate(1, PrismOverviewComponent_Conditional_0_For_2_Template, 1, 2, "prism-overview-cell", 1, i0.ɵɵrepeaterTrackByIndex);
+function PrismOverviewComponent_Conditional_0_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-overview-cell", 2);
+} if (rf & 2) {
+    const $index_r2 = ctx.$index;
+    const component_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("component", component_r1)("index", $index_r2);
+} }
+function PrismOverviewComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵrepeaterCreate(1, PrismOverviewComponent_Conditional_0_Conditional_1_For_2_Template, 1, 2, "prism-overview-cell", 2, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.variants());
 } }
+function PrismOverviewComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, PrismOverviewComponent_Conditional_0_Conditional_0_Template, 1, 1, "prism-overview-matrix", 0)(1, PrismOverviewComponent_Conditional_0_Conditional_1_Template, 3, 0, "div", 1);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r2.hasStates() ? 0 : 1);
+} }
 /**
  * All variants of one component at once: a contact sheet rather than a
  * viewfinder.
  *
  * 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 class PrismOverviewComponent {
     /** Input name fixed by `prism-view-panel-host`, which feeds every view panel. */
@@ -30,16 +46,23 @@ export class PrismOverviewComponent {
     ...(ngDevMode ? [{ debugName: "activeComponent" }] : /* istanbul ignore next */ []));
     variants = computed(() => this.activeComponent()?.meta.showcaseConfig.variants ?? [], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variants" }] : /* istanbul ignore next */ []));
+    hasStates = computed(() => (this.activeComponent()?.meta.showcaseConfig.states?.length ?? 0) > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasStates" }] : /* istanbul ignore next */ []));
     static ɵfac = function PrismOverviewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismOverviewComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismOverviewComponent, selectors: [["prism-overview"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 1, vars: 1, consts: [["role", "list", 1, "prism-overview"], [3, "component", "index"]], template: function PrismOverviewComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, PrismOverviewComponent_Conditional_0_Template, 3, 0, "div", 0);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismOverviewComponent, selectors: [["prism-overview"]], hostVars: 1, hostBindings: function PrismOverviewComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-matrix", ctx.hasStates() ? "" : null);
+        } }, inputs: { activeComponent: [1, "activeComponent"] }, decls: 1, vars: 1, consts: [[3, "component"], ["role", "list", 1, "prism-overview"], [3, "component", "index"]], template: function PrismOverviewComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, PrismOverviewComponent_Conditional_0_Template, 2, 1);
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.activeComponent()) ? 0 : -1, tmp_0_0);
-        } }, dependencies: [PrismOverviewCellComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n}\n\n.prism-overview[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n    gap: var(--%NS%sp-4);\n    align-content: start;\n    padding: var(--%NS%sp-6);\n}"] });
+        } }, dependencies: [PrismOverviewCellComponent, PrismOverviewMatrixComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n}\n\n.prism-overview[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n    gap: var(--%NS%sp-4);\n    align-content: start;\n    padding: var(--%NS%sp-6);\n}\n\n\n\n\n[data-matrix][_nghost-%COMP%] {\n    display: flex;\n    flex: 1 1 0;\n    flex-direction: column;\n    min-height: 0;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismOverviewComponent, [{
         type: Component,
-        args: [{ selector: 'prism-overview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismOverviewCellComponent], template: "@if (activeComponent(); as component) {\n    <div\n        class=\"prism-overview\"\n        role=\"list\">\n        @for (_ of variants(); track $index) {\n            <prism-overview-cell\n                [component]=\"component\"\n                [index]=\"$index\" />\n        }\n    </div>\n}\n", styles: [":host {\n    display: block;\n}\n\n.prism-overview {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n    gap: var(--sp-4);\n    align-content: start;\n    padding: var(--sp-6);\n}\n"] }]
+        args: [{ selector: 'prism-overview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismOverviewCellComponent, PrismOverviewMatrixComponent], host: {
+                    // Hands the panel's height down to the matrix, which scrolls on its own.
+                    '[attr.data-matrix]': "hasStates() ? '' : null"
+                }, template: "@if (activeComponent(); as component) {\n    @if (hasStates()) {\n        <prism-overview-matrix [component]=\"component\" />\n    } @else {\n        <div\n            class=\"prism-overview\"\n            role=\"list\">\n            @for (_ of variants(); track $index) {\n                <prism-overview-cell\n                    [component]=\"component\"\n                    [index]=\"$index\" />\n            }\n        </div>\n    }\n}\n", styles: [":host {\n    display: block;\n}\n\n.prism-overview {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n    gap: var(--sp-4);\n    align-content: start;\n    padding: var(--sp-6);\n}\n\n/* The panel host is a column flex box that scrolls. The matrix scrolls inside\n   itself instead, so both its scrollbars sit at the edge of the panel and its\n   header row and variant column stay in view. */\n:host([data-matrix]) {\n    display: flex;\n    flex: 1 1 0;\n    flex-direction: column;\n    min-height: 0;\n}\n"] }]
     }], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismOverviewComponent, { className: "PrismOverviewComponent", filePath: "app/overview/prism-overview.component.ts", lineNumber: 20 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismOverviewComponent, { className: "PrismOverviewComponent", filePath: "app/overview/prism-overview.component.ts", lineNumber: 28 }); })();