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

package/dist/app/index.js

@@ -29,7 +29,9 @@ export { enablePrismHmr } from './hmr.js';
 //
 // They still reach Node: `@ng-prism/plugin-coverage` and
 // `@ng-prism/plugin-visual-regression` re-export their header badges statically
-// from their Node entry, and those import `PrismMetricBadgeComponent` from here.
+// from their Node entry, and those import `PrismMetricBadgeComponent` from here;
+// since 22.7 `@ng-prism/plugin-perf` does the same with its panel, which is
+// built from the UI primitives below.
 // Loading a plugin config in `builder/config-loader` therefore pulls this whole
 // file, shell included, into Node. That only works because the config loader
 // imports `@angular/compiler` first.
@@ -41,3 +43,12 @@ export { enablePrismHmr } from './hmr.js';
 // public API decision.
 export { PrismMetricBadgeComponent } from './shared/prism-metric-badge.component.js';
 export { PrismIconComponent } from './icons/prism-icon.component.js';
+export { PrismBadgeComponent } from './shared/prism-badge.component.js';
+export { toneForStatus } from './shared/badge.types.js';
+export { PrismTabsComponent } from './shared/prism-tabs.component.js';
+export { PrismSegmentedComponent } from './shared/prism-segmented.component.js';
+export { PrismPanelToolbarComponent } from './shared/prism-panel-toolbar.component.js';
+export { PrismListRowComponent } from './shared/prism-list-row.component.js';
+export { PrismIconButtonComponent } from './shared/prism-icon-button.component.js';
+export { PrismButtonComponent } from './shared/prism-button.component.js';
+export { PrismMetricCardComponent } from './shared/prism-metric-card.component.js';

package/dist/app/layout-menu/prism-layout-menu.component.d.ts

@@ -1,7 +1,10 @@
 import { PrismLayoutService } from '../services/prism-layout.service.js';
+import { PrismThemeService } from '../services/prism-theme.service.js';
 import * as i0 from "@angular/core";
 export declare class PrismLayoutMenuComponent {
     protected readonly layout: PrismLayoutService;
+    /** The dropdown opens out of the navy header band but belongs to the app, so it takes the active theme back. */
+    protected readonly theme: PrismThemeService;
     protected readonly open: import("@angular/core").WritableSignal<boolean>;
     protected toggle(target: 'sidebar' | 'toolbar' | 'addons' | 'orientation'): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismLayoutMenuComponent, never>;

package/dist/app/layout-menu/prism-layout-menu.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-layout-menu.component.d.ts","sourceRoot":"","sources":["../../../src/app/layout-menu/prism-layout-menu.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAEzE,qBAMa,wBAAwB;IACjC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,IAAI,kDAAiB;IAExC,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,GAAG,IAAI;yCAJvE,wBAAwB;2CAAxB,wBAAwB;CAqBpC"}
+{"version":3,"file":"prism-layout-menu.component.d.ts","sourceRoot":"","sources":["../../../src/app/layout-menu/prism-layout-menu.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;;AAGvE,qBAOa,wBAAwB;IACjC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,gHAAgH;IAChH,SAAS,CAAC,QAAQ,CAAC,KAAK,oBAA6B;IACrD,SAAS,CAAC,QAAQ,CAAC,IAAI,kDAAiB;IAExC,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,GAAG,IAAI;yCANvE,wBAAwB;2CAAxB,wBAAwB;CAuBpC"}

package/dist/app/layout-menu/prism-layout-menu.component.js

@@ -1,73 +1,86 @@
 import { Component, inject, signal } from '@angular/core';
+import { PrismIconComponent } from '../icons/prism-icon.component.js';
 import { PrismLayoutService } from '../services/prism-layout.service.js';
+import { PrismThemeService } from '../services/prism-theme.service.js';
+import { PrismIconButtonComponent } from '../shared/prism-icon-button.component.js';
 import * as i0 from "@angular/core";
-function PrismLayoutMenuComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function PrismLayoutMenuComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵdomElementStart(0, "div", 6);
-    i0.ɵɵdomListener("click", function PrismLayoutMenuComponent_Conditional_6_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.open.set(false)); });
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(1, "div", 7)(2, "button", 8);
-    i0.ɵɵdomListener("click", function PrismLayoutMenuComponent_Conditional_6_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggle("sidebar")); });
-    i0.ɵɵdomElementStart(3, "span", 9);
+    i0.ɵɵelementStart(0, "div", 3);
+    i0.ɵɵlistener("click", function PrismLayoutMenuComponent_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.open.set(false)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(1, "div", 4)(2, "button", 5);
+    i0.ɵɵlistener("click", function PrismLayoutMenuComponent_Conditional_3_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggle("sidebar")); });
+    i0.ɵɵelementStart(3, "span", 6);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵdomElementStart(4, "svg", 10);
-    i0.ɵɵdomElement(5, "path", 11);
-    i0.ɵɵdomElementEnd()();
+    i0.ɵɵelementStart(4, "svg", 7);
+    i0.ɵɵelement(5, "path", 8);
+    i0.ɵɵelementEnd()();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵdomElementStart(6, "span", 12);
+    i0.ɵɵelementStart(6, "span", 9);
     i0.ɵɵtext(7, "Show sidebar");
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(8, "span", 13)(9, "kbd");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "span", 10)(9, "kbd");
     i0.ɵɵtext(10, "\u2325");
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(11, "kbd");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "kbd");
     i0.ɵɵtext(12, "S");
-    i0.ɵɵdomElementEnd()()();
-    i0.ɵɵdomElementStart(13, "button", 8);
-    i0.ɵɵdomListener("click", function PrismLayoutMenuComponent_Conditional_6_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggle("toolbar")); });
-    i0.ɵɵdomElementStart(14, "span", 9);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(13, "button", 5);
+    i0.ɵɵlistener("click", function PrismLayoutMenuComponent_Conditional_3_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggle("toolbar")); });
+    i0.ɵɵelementStart(14, "span", 6);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵdomElementStart(15, "svg", 10);
-    i0.ɵɵdomElement(16, "path", 11);
-    i0.ɵɵdomElementEnd()();
+    i0.ɵɵelementStart(15, "svg", 7);
+    i0.ɵɵelement(16, "path", 8);
+    i0.ɵɵelementEnd()();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵdomElementStart(17, "span", 12);
+    i0.ɵɵelementStart(17, "span", 9);
     i0.ɵɵtext(18, "Show variant rail");
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(19, "span", 13)(20, "kbd");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "span", 10)(20, "kbd");
     i0.ɵɵtext(21, "\u2325");
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(22, "kbd");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "kbd");
     i0.ɵɵtext(23, "T");
-    i0.ɵɵdomElementEnd()()();
-    i0.ɵɵdomElementStart(24, "button", 8);
-    i0.ɵɵdomListener("click", function PrismLayoutMenuComponent_Conditional_6_Template_button_click_24_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggle("addons")); });
-    i0.ɵɵdomElementStart(25, "span", 9);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(24, "button", 5);
+    i0.ɵɵlistener("click", function PrismLayoutMenuComponent_Conditional_3_Template_button_click_24_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggle("addons")); });
+    i0.ɵɵelementStart(25, "span", 6);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵdomElementStart(26, "svg", 10);
-    i0.ɵɵdomElement(27, "path", 11);
-    i0.ɵɵdomElementEnd()();
+    i0.ɵɵelementStart(26, "svg", 7);
+    i0.ɵɵelement(27, "path", 8);
+    i0.ɵɵelementEnd()();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵdomElementStart(28, "span", 12);
+    i0.ɵɵelementStart(28, "span", 9);
     i0.ɵɵtext(29, "Show addons panel");
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(30, "span", 13)(31, "kbd");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(30, "span", 10)(31, "kbd");
     i0.ɵɵtext(32, "\u2325");
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(33, "kbd");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(33, "kbd");
     i0.ɵɵtext(34, "A");
-    i0.ɵɵdomElementEnd()()()();
+    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(3);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleMap(ctx_r1.theme.appTokens());
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("aria-checked", ctx_r1.layout.sidebarVisible());
+    i0.ɵɵadvance();
     i0.ɵɵclassProp("layout-menu__check--on", ctx_r1.layout.sidebarVisible());
-    i0.ɵɵadvance(11);
+    i0.ɵɵadvance(10);
+    i0.ɵɵattribute("aria-checked", ctx_r1.layout.toolbarVisible());
+    i0.ɵɵadvance();
     i0.ɵɵclassProp("layout-menu__check--on", ctx_r1.layout.toolbarVisible());
-    i0.ɵɵadvance(11);
+    i0.ɵɵadvance(10);
+    i0.ɵɵattribute("aria-checked", ctx_r1.layout.addonsVisible());
+    i0.ɵɵadvance();
     i0.ɵɵclassProp("layout-menu__check--on", ctx_r1.layout.addonsVisible());
 } }
 export class PrismLayoutMenuComponent {
     layout = inject(PrismLayoutService);
+    /** The dropdown opens out of the navy header band but belongs to the app, so it takes the active theme back. */
+    theme = inject(PrismThemeService);
     open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     toggle(target) {
@@ -88,24 +101,25 @@ export class PrismLayoutMenuComponent {
         }
     }
     static ɵfac = function PrismLayoutMenuComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismLayoutMenuComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismLayoutMenuComponent, selectors: [["prism-layout-menu"]], decls: 7, vars: 3, consts: [[1, "layout-menu"], ["title", "Layout options", 1, "layout-menu__trigger", 3, "click"], ["width", "16", "height", "16", "viewBox", "0 0 16 16", "fill", "none"], ["cx", "8", "cy", "3", "r", "1.25", "fill", "currentColor"], ["cx", "8", "cy", "8", "r", "1.25", "fill", "currentColor"], ["cx", "8", "cy", "13", "r", "1.25", "fill", "currentColor"], [1, "layout-menu__backdrop", 3, "click"], [1, "layout-menu__dropdown"], [1, "layout-menu__item", 3, "click"], [1, "layout-menu__check"], ["width", "12", "height", "12", "viewBox", "0 0 12 12", "fill", "none"], ["d", "M2 6l3 3 5-5", "stroke", "currentColor", "stroke-width", "1.5", "stroke-linecap", "round", "stroke-linejoin", "round"], [1, "layout-menu__label"], [1, "layout-menu__kbd"]], template: function PrismLayoutMenuComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵdomElementStart(0, "div", 0)(1, "button", 1);
-            i0.ɵɵdomListener("click", function PrismLayoutMenuComponent_Template_button_click_1_listener() { return ctx.open.set(!ctx.open()); });
-            i0.ɵɵnamespaceSVG();
-            i0.ɵɵdomElementStart(2, "svg", 2);
-            i0.ɵɵdomElement(3, "circle", 3)(4, "circle", 4)(5, "circle", 5);
-            i0.ɵɵdomElementEnd()();
-            i0.ɵɵconditionalCreate(6, PrismLayoutMenuComponent_Conditional_6_Template, 35, 6);
-            i0.ɵɵdomElementEnd();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismLayoutMenuComponent, selectors: [["prism-layout-menu"]], decls: 4, vars: 4, consts: [[1, "layout-menu"], ["prismIconButton", "", "size", "md", "aria-label", "Layout options", "aria-haspopup", "menu", "title", "Layout options", 3, "click", "pressed"], ["name", "more-vertical", 3, "size"], [1, "layout-menu__backdrop", 3, "click"], ["role", "menu", "aria-label", "Layout", 1, "layout-menu__dropdown"], ["role", "menuitemcheckbox", 1, "layout-menu__item", 3, "click"], [1, "layout-menu__check"], ["width", "12", "height", "12", "viewBox", "0 0 12 12", "fill", "none"], ["d", "M2 6l3 3 5-5", "stroke", "currentColor", "stroke-width", "1.5", "stroke-linecap", "round", "stroke-linejoin", "round"], [1, "layout-menu__label"], [1, "layout-menu__kbd"]], template: function PrismLayoutMenuComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "button", 1);
+            i0.ɵɵlistener("click", function PrismLayoutMenuComponent_Template_button_click_1_listener() { return ctx.open.set(!ctx.open()); });
+            i0.ɵɵelement(2, "prism-icon", 2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(3, PrismLayoutMenuComponent_Conditional_3_Template, 35, 11);
+            i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("layout-menu__trigger--active", ctx.open());
-            i0.ɵɵadvance(5);
-            i0.ɵɵconditional(ctx.open() ? 6 : -1);
-        } }, styles: [".layout-menu[_ngcontent-%COMP%] {\n    position: relative;\n}\n\n.layout-menu__trigger[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 30px;\n    color: var(--%NS%prism-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: var(--%NS%prism-radius-sm);\n    transition:\n        border-color 0.15s,\n        color 0.15s,\n        background 0.15s;\n}\n\n.layout-menu__trigger[_ngcontent-%COMP%]:hover, \n.layout-menu__trigger--active[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text);\n    background: var(--%NS%prism-bg-surface);\n    border-color: var(--%NS%prism-border-strong);\n}\n\n.layout-menu__backdrop[_ngcontent-%COMP%] {\n    position: fixed;\n    inset: 0;\n    z-index: 40;\n}\n\n.layout-menu__dropdown[_ngcontent-%COMP%] {\n    position: absolute;\n    top: calc(100% + 6px);\n    right: 0;\n    z-index: 50;\n    min-width: 240px;\n    padding: 4px;\n    background: var(--%NS%prism-bg-elevated);\n    border: 1px solid var(--%NS%prism-border-strong);\n    border-radius: var(--%NS%prism-radius);\n    box-shadow: 0 8px 32px rgb(0 0 0 / 40%);\n}\n\n.layout-menu__item[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    width: 100%;\n    padding: 7px 10px;\n    font-family: var(--%NS%prism-font-sans);\n    font-size: 13px;\n    color: var(--%NS%prism-text);\n    text-align: left;\n    cursor: pointer;\n    background: none;\n    border: none;\n    border-radius: var(--%NS%prism-radius-sm);\n    transition: background 0.1s;\n}\n\n.layout-menu__item[_ngcontent-%COMP%]:hover {\n    background: var(--%NS%prism-bg-surface);\n}\n\n.layout-menu__check[_ngcontent-%COMP%] {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 16px;\n    height: 16px;\n    color: transparent;\n    border: 1px solid var(--%NS%prism-border-strong);\n    border-radius: 3px;\n}\n\n.layout-menu__check--on[_ngcontent-%COMP%] {\n    color: white;\n    background: var(--%NS%prism-primary);\n    border-color: var(--%NS%prism-primary);\n}\n\n.layout-menu__icon[_ngcontent-%COMP%] {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 16px;\n    height: 16px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.layout-menu__label[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.layout-menu__kbd[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 2px;\n    opacity: 0.6;\n}\n\nkbd[_ngcontent-%COMP%] {\n    padding: 1px 4px;\n    font-family: var(--%NS%prism-font-sans);\n    font-size: 11px;\n    color: var(--%NS%prism-text-muted);\n    background: var(--%NS%prism-bg-surface);\n    border: 1px solid var(--%NS%prism-border-strong);\n    border-radius: 3px;\n}\n\n.layout-menu__divider[_ngcontent-%COMP%] {\n    height: 1px;\n    margin: 4px 0;\n    background: var(--%NS%prism-border);\n}"] });
+            i0.ɵɵproperty("pressed", ctx.open() ? true : null);
+            i0.ɵɵattribute("aria-expanded", ctx.open());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("size", 16);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.open() ? 3 : -1);
+        } }, dependencies: [PrismIconButtonComponent, PrismIconComponent], styles: [".layout-menu[_ngcontent-%COMP%] {\n    position: relative;\n}\n\n.layout-menu__backdrop[_ngcontent-%COMP%] {\n    position: fixed;\n    inset: 0;\n    z-index: 40;\n}\n\n.layout-menu__dropdown[_ngcontent-%COMP%] {\n    position: absolute;\n    top: calc(100% + 6px);\n    right: 0;\n    z-index: 50;\n    min-width: 240px;\n    padding: 4px;\n    background: var(--%NS%prism-bg-elevated);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: var(--%NS%radius-md);\n    box-shadow: var(--%NS%prism-shadow-md);\n}\n\n.layout-menu__item[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    width: 100%;\n    padding: 7px 10px;\n    font-family: var(--%NS%prism-font-sans);\n    font-size: 13px;\n    color: var(--%NS%prism-text);\n    text-align: left;\n    cursor: pointer;\n    background: none;\n    border: none;\n    border-radius: var(--%NS%radius-sm);\n    transition: background 0.1s;\n}\n\n.layout-menu__item[_ngcontent-%COMP%]:hover {\n    background: var(--%NS%prism-bg-surface);\n}\n\n.layout-menu__check[_ngcontent-%COMP%] {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 16px;\n    height: 16px;\n    color: transparent;\n    border: 1px solid var(--%NS%prism-border-strong);\n    border-radius: 3px;\n}\n\n.layout-menu__check--on[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-on-primary);\n    background: var(--%NS%prism-primary-fill);\n    border-color: var(--%NS%prism-primary-fill);\n}\n\n.layout-menu__icon[_ngcontent-%COMP%] {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 16px;\n    height: 16px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.layout-menu__label[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.layout-menu__kbd[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 2px;\n    opacity: 0.6;\n}\n\nkbd[_ngcontent-%COMP%] {\n    padding: 1px 4px;\n    font-family: var(--%NS%prism-font-sans);\n    font-size: 11px;\n    color: var(--%NS%prism-text-muted);\n    background: var(--%NS%prism-bg-surface);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 3px;\n}\n\n.layout-menu__divider[_ngcontent-%COMP%] {\n    height: 1px;\n    margin: 4px 0;\n    background: var(--%NS%prism-border);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismLayoutMenuComponent, [{
         type: Component,
-        args: [{ selector: 'prism-layout-menu', standalone: true, template: "<div class=\"layout-menu\">\n    <button\n        class=\"layout-menu__trigger\"\n        (click)=\"open.set(!open())\"\n        [class.layout-menu__trigger--active]=\"open()\"\n        title=\"Layout options\">\n        <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\">\n            <circle\n                cx=\"8\"\n                cy=\"3\"\n                r=\"1.25\"\n                fill=\"currentColor\" />\n            <circle\n                cx=\"8\"\n                cy=\"8\"\n                r=\"1.25\"\n                fill=\"currentColor\" />\n            <circle\n                cx=\"8\"\n                cy=\"13\"\n                r=\"1.25\"\n                fill=\"currentColor\" />\n        </svg>\n    </button>\n    @if (open()) {\n        <div\n            class=\"layout-menu__backdrop\"\n            (click)=\"open.set(false)\"></div>\n        <div class=\"layout-menu__dropdown\">\n            <button\n                class=\"layout-menu__item\"\n                (click)=\"toggle('sidebar')\">\n                <span\n                    class=\"layout-menu__check\"\n                    [class.layout-menu__check--on]=\"layout.sidebarVisible()\">\n                    <svg\n                        width=\"12\"\n                        height=\"12\"\n                        viewBox=\"0 0 12 12\"\n                        fill=\"none\">\n                        <path\n                            d=\"M2 6l3 3 5-5\"\n                            stroke=\"currentColor\"\n                            stroke-width=\"1.5\"\n                            stroke-linecap=\"round\"\n                            stroke-linejoin=\"round\" />\n                    </svg>\n                </span>\n                <span class=\"layout-menu__label\">Show sidebar</span>\n                <span class=\"layout-menu__kbd\"><kbd>\u2325</kbd><kbd>S</kbd></span>\n            </button>\n            <button\n                class=\"layout-menu__item\"\n                (click)=\"toggle('toolbar')\">\n                <span\n                    class=\"layout-menu__check\"\n                    [class.layout-menu__check--on]=\"layout.toolbarVisible()\">\n                    <svg\n                        width=\"12\"\n                        height=\"12\"\n                        viewBox=\"0 0 12 12\"\n                        fill=\"none\">\n                        <path\n                            d=\"M2 6l3 3 5-5\"\n                            stroke=\"currentColor\"\n                            stroke-width=\"1.5\"\n                            stroke-linecap=\"round\"\n                            stroke-linejoin=\"round\" />\n                    </svg>\n                </span>\n                <span class=\"layout-menu__label\">Show variant rail</span>\n                <span class=\"layout-menu__kbd\"><kbd>\u2325</kbd><kbd>T</kbd></span>\n            </button>\n            <button\n                class=\"layout-menu__item\"\n                (click)=\"toggle('addons')\">\n                <span\n                    class=\"layout-menu__check\"\n                    [class.layout-menu__check--on]=\"layout.addonsVisible()\">\n                    <svg\n                        width=\"12\"\n                        height=\"12\"\n                        viewBox=\"0 0 12 12\"\n                        fill=\"none\">\n                        <path\n                            d=\"M2 6l3 3 5-5\"\n                            stroke=\"currentColor\"\n                            stroke-width=\"1.5\"\n                            stroke-linecap=\"round\"\n                            stroke-linejoin=\"round\" />\n                    </svg>\n                </span>\n                <span class=\"layout-menu__label\">Show addons panel</span>\n                <span class=\"layout-menu__kbd\"><kbd>\u2325</kbd><kbd>A</kbd></span>\n            </button>\n        </div>\n    }\n</div>\n", styles: [".layout-menu {\n    position: relative;\n}\n\n.layout-menu__trigger {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 30px;\n    color: var(--prism-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--prism-border);\n    border-radius: var(--prism-radius-sm);\n    transition:\n        border-color 0.15s,\n        color 0.15s,\n        background 0.15s;\n}\n\n.layout-menu__trigger:hover,\n.layout-menu__trigger--active {\n    color: var(--prism-text);\n    background: var(--prism-bg-surface);\n    border-color: var(--prism-border-strong);\n}\n\n.layout-menu__backdrop {\n    position: fixed;\n    inset: 0;\n    z-index: 40;\n}\n\n.layout-menu__dropdown {\n    position: absolute;\n    top: calc(100% + 6px);\n    right: 0;\n    z-index: 50;\n    min-width: 240px;\n    padding: 4px;\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border-strong);\n    border-radius: var(--prism-radius);\n    box-shadow: 0 8px 32px rgb(0 0 0 / 40%);\n}\n\n.layout-menu__item {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    width: 100%;\n    padding: 7px 10px;\n    font-family: var(--prism-font-sans);\n    font-size: 13px;\n    color: var(--prism-text);\n    text-align: left;\n    cursor: pointer;\n    background: none;\n    border: none;\n    border-radius: var(--prism-radius-sm);\n    transition: background 0.1s;\n}\n\n.layout-menu__item:hover {\n    background: var(--prism-bg-surface);\n}\n\n.layout-menu__check {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 16px;\n    height: 16px;\n    color: transparent;\n    border: 1px solid var(--prism-border-strong);\n    border-radius: 3px;\n}\n\n.layout-menu__check--on {\n    color: white;\n    background: var(--prism-primary);\n    border-color: var(--prism-primary);\n}\n\n.layout-menu__icon {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 16px;\n    height: 16px;\n    color: var(--prism-text-muted);\n}\n\n.layout-menu__label {\n    flex: 1;\n}\n\n.layout-menu__kbd {\n    display: flex;\n    gap: 2px;\n    opacity: 0.6;\n}\n\nkbd {\n    padding: 1px 4px;\n    font-family: var(--prism-font-sans);\n    font-size: 11px;\n    color: var(--prism-text-muted);\n    background: var(--prism-bg-surface);\n    border: 1px solid var(--prism-border-strong);\n    border-radius: 3px;\n}\n\n.layout-menu__divider {\n    height: 1px;\n    margin: 4px 0;\n    background: var(--prism-border);\n}\n"] }]
+        args: [{ selector: 'prism-layout-menu', standalone: true, imports: [PrismIconButtonComponent, PrismIconComponent], template: "<div class=\"layout-menu\">\n    <button\n        prismIconButton\n        size=\"md\"\n        aria-label=\"Layout options\"\n        aria-haspopup=\"menu\"\n        [attr.aria-expanded]=\"open()\"\n        [pressed]=\"open() ? true : null\"\n        (click)=\"open.set(!open())\"\n        title=\"Layout options\">\n        <prism-icon\n            name=\"more-vertical\"\n            [size]=\"16\" />\n    </button>\n    @if (open()) {\n        <div\n            class=\"layout-menu__backdrop\"\n            (click)=\"open.set(false)\"></div>\n        <div\n            class=\"layout-menu__dropdown\"\n            role=\"menu\"\n            aria-label=\"Layout\"\n            [style]=\"theme.appTokens()\">\n            <button\n                class=\"layout-menu__item\"\n                role=\"menuitemcheckbox\"\n                [attr.aria-checked]=\"layout.sidebarVisible()\"\n                (click)=\"toggle('sidebar')\">\n                <span\n                    class=\"layout-menu__check\"\n                    [class.layout-menu__check--on]=\"layout.sidebarVisible()\">\n                    <svg\n                        width=\"12\"\n                        height=\"12\"\n                        viewBox=\"0 0 12 12\"\n                        fill=\"none\">\n                        <path\n                            d=\"M2 6l3 3 5-5\"\n                            stroke=\"currentColor\"\n                            stroke-width=\"1.5\"\n                            stroke-linecap=\"round\"\n                            stroke-linejoin=\"round\" />\n                    </svg>\n                </span>\n                <span class=\"layout-menu__label\">Show sidebar</span>\n                <span class=\"layout-menu__kbd\"><kbd>\u2325</kbd><kbd>S</kbd></span>\n            </button>\n            <button\n                class=\"layout-menu__item\"\n                role=\"menuitemcheckbox\"\n                [attr.aria-checked]=\"layout.toolbarVisible()\"\n                (click)=\"toggle('toolbar')\">\n                <span\n                    class=\"layout-menu__check\"\n                    [class.layout-menu__check--on]=\"layout.toolbarVisible()\">\n                    <svg\n                        width=\"12\"\n                        height=\"12\"\n                        viewBox=\"0 0 12 12\"\n                        fill=\"none\">\n                        <path\n                            d=\"M2 6l3 3 5-5\"\n                            stroke=\"currentColor\"\n                            stroke-width=\"1.5\"\n                            stroke-linecap=\"round\"\n                            stroke-linejoin=\"round\" />\n                    </svg>\n                </span>\n                <span class=\"layout-menu__label\">Show variant rail</span>\n                <span class=\"layout-menu__kbd\"><kbd>\u2325</kbd><kbd>T</kbd></span>\n            </button>\n            <button\n                class=\"layout-menu__item\"\n                role=\"menuitemcheckbox\"\n                [attr.aria-checked]=\"layout.addonsVisible()\"\n                (click)=\"toggle('addons')\">\n                <span\n                    class=\"layout-menu__check\"\n                    [class.layout-menu__check--on]=\"layout.addonsVisible()\">\n                    <svg\n                        width=\"12\"\n                        height=\"12\"\n                        viewBox=\"0 0 12 12\"\n                        fill=\"none\">\n                        <path\n                            d=\"M2 6l3 3 5-5\"\n                            stroke=\"currentColor\"\n                            stroke-width=\"1.5\"\n                            stroke-linecap=\"round\"\n                            stroke-linejoin=\"round\" />\n                    </svg>\n                </span>\n                <span class=\"layout-menu__label\">Show addons panel</span>\n                <span class=\"layout-menu__kbd\"><kbd>\u2325</kbd><kbd>A</kbd></span>\n            </button>\n        </div>\n    }\n</div>\n", styles: [".layout-menu {\n    position: relative;\n}\n\n.layout-menu__backdrop {\n    position: fixed;\n    inset: 0;\n    z-index: 40;\n}\n\n.layout-menu__dropdown {\n    position: absolute;\n    top: calc(100% + 6px);\n    right: 0;\n    z-index: 50;\n    min-width: 240px;\n    padding: 4px;\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-md);\n    box-shadow: var(--prism-shadow-md);\n}\n\n.layout-menu__item {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    width: 100%;\n    padding: 7px 10px;\n    font-family: var(--prism-font-sans);\n    font-size: 13px;\n    color: var(--prism-text);\n    text-align: left;\n    cursor: pointer;\n    background: none;\n    border: none;\n    border-radius: var(--radius-sm);\n    transition: background 0.1s;\n}\n\n.layout-menu__item:hover {\n    background: var(--prism-bg-surface);\n}\n\n.layout-menu__check {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 16px;\n    height: 16px;\n    color: transparent;\n    border: 1px solid var(--prism-border-strong);\n    border-radius: 3px;\n}\n\n.layout-menu__check--on {\n    color: var(--prism-on-primary);\n    background: var(--prism-primary-fill);\n    border-color: var(--prism-primary-fill);\n}\n\n.layout-menu__icon {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 16px;\n    height: 16px;\n    color: var(--prism-text-muted);\n}\n\n.layout-menu__label {\n    flex: 1;\n}\n\n.layout-menu__kbd {\n    display: flex;\n    gap: 2px;\n    opacity: 0.6;\n}\n\nkbd {\n    padding: 1px 4px;\n    font-family: var(--prism-font-sans);\n    font-size: 11px;\n    color: var(--prism-text-muted);\n    background: var(--prism-bg-surface);\n    border: 1px solid var(--prism-border);\n    border-radius: 3px;\n}\n\n.layout-menu__divider {\n    height: 1px;\n    margin: 4px 0;\n    background: var(--prism-border);\n}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismLayoutMenuComponent, { className: "PrismLayoutMenuComponent", filePath: "app/layout-menu/prism-layout-menu.component.ts", lineNumber: 10 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismLayoutMenuComponent, { className: "PrismLayoutMenuComponent", filePath: "app/layout-menu/prism-layout-menu.component.ts", lineNumber: 14 }); })();

package/dist/app/overview/open-in-playground.d.ts

@@ -0,0 +1,19 @@
+import type { PrismPanelService } from '../services/prism-panel.service.js';
+import type { PrismRendererService } from '../services/prism-renderer.service.js';
+/**
+ * Shows one Overview cell's exact combination in the Playground: the variant,
+ * the component state (`null` for none), and the Playground view itself.
+ *
+ * The view switches last, so the Playground never paints the variant it showed
+ * before for a frame.
+ */
+export declare function openInPlayground(renderer: Pick<PrismRendererService, 'selectVariant' | 'selectState'>, panels: Pick<PrismPanelService, 'activeViewId'>, variantIndex: number, stateIndex: number | null): void;
+/**
+ * Whether a cell shows what the Playground shows: the same variant under the
+ * same component state. A variant that opted out with `states: false` shows
+ * no state in either place, so only the variant counts for it.
+ */
+export declare function isPlaygroundCombination(renderer: Pick<PrismRendererService, 'activeVariantIndex' | 'activeStateIndex'>, variantIndex: number, stateIndex: number | null, statesOptedOut?: boolean): boolean;
+/** A cell's accessible name, with the reason when its state does not apply: the cell itself shows only a dash then. */
+export declare function playgroundLabel(variant: string, state: string | undefined, unfitReason: string | null): string;
+//# sourceMappingURL=open-in-playground.d.ts.map

package/dist/app/overview/open-in-playground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"open-in-playground.d.ts","sourceRoot":"","sources":["../../../src/app/overview/open-in-playground.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAC5E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAElF;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC5B,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EAAE,eAAe,GAAG,aAAa,CAAC,EACrE,MAAM,EAAE,IAAI,CAAC,iBAAiB,EAAE,cAAc,CAAC,EAC/C,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,MAAM,GAAG,IAAI,GAC1B,IAAI,CAIN;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,CACnC,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EAAE,oBAAoB,GAAG,kBAAkB,CAAC,EAC/E,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,MAAM,GAAG,IAAI,EACzB,cAAc,UAAQ,GACvB,OAAO,CAET;AAED,uHAAuH;AACvH,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAI9G"}

package/dist/app/overview/open-in-playground.js

@@ -0,0 +1,25 @@
+/**
+ * Shows one Overview cell's exact combination in the Playground: the variant,
+ * the component state (`null` for none), and the Playground view itself.
+ *
+ * The view switches last, so the Playground never paints the variant it showed
+ * before for a frame.
+ */
+export function openInPlayground(renderer, panels, variantIndex, stateIndex) {
+    renderer.selectVariant(variantIndex);
+    renderer.selectState(stateIndex);
+    panels.activeViewId.set('renderer');
+}
+/**
+ * Whether a cell shows what the Playground shows: the same variant under the
+ * same component state. A variant that opted out with `states: false` shows
+ * no state in either place, so only the variant counts for it.
+ */
+export function isPlaygroundCombination(renderer, variantIndex, stateIndex, statesOptedOut = false) {
+    return renderer.activeVariantIndex() === variantIndex && (statesOptedOut || renderer.activeStateIndex() === stateIndex);
+}
+/** A cell's accessible name, with the reason when its state does not apply: the cell itself shows only a dash then. */
+export function playgroundLabel(variant, state, unfitReason) {
+    const label = `Open ${variant}${state ? ` × ${state}` : ''} in the Playground`;
+    return unfitReason === null ? label : `${label} (not applicable: ${unfitReason})`;
+}

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

@@ -0,0 +1,85 @@
+import type { ShowcaseConfig } from '../../decorator/showcase.types.js';
+import { type ForcedPseudoStates } from '../../shared/pseudo-state.type.js';
+import { type StateFit } from '../pseudo/state-fit.js';
+/** `state` is the position in `ShowcaseConfig.states`, `null` for the Default column. */
+export interface MatrixColumn {
+    state: number | null;
+    title: string;
+    signature: string;
+    /** Whether the column's state forces anything. `false` for Default and for a slot the scanner could not use. */
+    forcesState: boolean;
+}
+/** `variant` is the position in `ShowcaseConfig.variants`; the implicit Default row of a variant-less component is 0. */
+export interface MatrixRow {
+    variant: number;
+    title: string;
+    /** `bg: dark` or `states: false`: the row header's tooltip. */
+    note: string | null;
+    optedOut: boolean;
+}
+export interface OverviewMatrix {
+    columns: MatrixColumn[];
+    rows: MatrixRow[];
+}
+/**
+ * The Overview as a matrix: a row per variant, a column for Default and one
+ * per component state.
+ *
+ * A component without variants still renders, as a variant of its own, so it
+ * gets one implicit `Default` row, like the canvas. A variant that opts out
+ * with `states: false` keeps its row but takes part in no state column.
+ */
+export declare function buildOverviewMatrix(config: ShowcaseConfig): OverviewMatrix;
+/**
+ * What a state forces, in a line: `hover + active → .btn`.
+ *
+ * The pseudo-classes come in {@link PSEUDO_STATES} order, grouped by the target
+ * they share. Classes with different targets make one group each, joined with
+ * `; ` (`hover → .pill; focus-visible → .pill__close`). A slot that names no
+ * target forces nothing, as the marker sees it.
+ */
+export declare function pseudoSignature(pseudo: ForcedPseudoStates): string;
+/** A column's fit count: short in the header, spelled out in its tooltip. */
+export interface FitLabel {
+    text: string;
+    title: string;
+}
+/** `2/5`: the variants a state fits, of those it is combined with. */
+export declare function fitLabel(fits: number, total: number): FitLabel;
+/** Key of one cell's result in the map the matrix collects from the cells. */
+export declare function fitKey(variant: number, state: number): string;
+export interface ColumnFit {
+    /** Cells of the column whose state fits. */
+    fits: number;
+    /** Cells the column has: the rows that did not opt out. */
+    eligible: number;
+    /** Whether every one of those cells has answered. */
+    complete: boolean;
+}
+/** The fits of one state column, as far as the cells have answered. */
+export declare function columnFit(results: ReadonlyMap<string, StateFit>, matrix: OverviewMatrix, state: number): ColumnFit;
+/**
+ * The states whose column is complete and fits nowhere, by index: almost
+ * certainly a selector with a typo.
+ *
+ * A column that is still waiting for a cell, or whose cell failed to render and
+ * so never answers, is not complete: a state is only called misplaced once every
+ * cell has had its say. A state no variant is combined with has no cell to
+ * judge it, so it is not reported either. Nor is a state that forces nothing (a
+ * slot the scanner could not use): it fits nowhere by construction, has no
+ * selector to check, and the scanner has reported it already.
+ *
+ * Stateless: the caller keeps track of what it already reported.
+ */
+export declare function statesFittingNowhere(results: ReadonlyMap<string, StateFit>, matrix: OverviewMatrix): number[];
+/** One column header of the matrix. */
+export interface ColumnHeader {
+    column: MatrixColumn;
+    /** `x/y` and its tooltip, `null` for the Default column. */
+    fit: FitLabel | null;
+    /** The state is one of {@link statesFittingNowhere}. */
+    fitsNowhere: boolean;
+}
+/** The column headers with their fit counts, and whether a state fits no variant, as far as the cells have answered. */
+export declare function columnHeaders(results: ReadonlyMap<string, StateFit>, matrix: OverviewMatrix): ColumnHeader[];
+//# sourceMappingURL=overview-matrix.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overview-matrix.d.ts","sourceRoot":"","sources":["../../../src/app/overview/overview-matrix.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,KAAK,kBAAkB,EAAmC,MAAM,mCAAmC,CAAC;AAE7G,OAAO,EAAkB,KAAK,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAEvE,yFAAyF;AACzF,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,gHAAgH;IAChH,WAAW,EAAE,OAAO,CAAC;CACxB;AAED,yHAAyH;AACzH,MAAM,WAAW,SAAS;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,cAAc;IAC3B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,IAAI,EAAE,SAAS,EAAE,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,cAAc,GAAG,cAAc,CAsB1E;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,kBAAkB,GAAG,MAAM,CAelE;AAED,6EAA6E;AAC7E,MAAM,WAAW,QAAQ;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,sEAAsE;AACtE,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,QAAQ,CAE9D;AAED,8EAA8E;AAC9E,wBAAgB,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAE7D;AAED,MAAM,WAAW,SAAS;IACtB,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,QAAQ,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,uEAAuE;AACvE,wBAAgB,SAAS,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAKlH;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,cAAc,GAAG,MAAM,EAAE,CAQ7G;AAED,uCAAuC;AACvC,MAAM,WAAW,YAAY;IACzB,MAAM,EAAE,YAAY,CAAC;IACrB,4DAA4D;IAC5D,GAAG,EAAE,QAAQ,GAAG,IAAI,CAAC;IACrB,wDAAwD;IACxD,WAAW,EAAE,OAAO,CAAC;CACxB;AAED,wHAAwH;AACxH,wBAAgB,aAAa,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,cAAc,GAAG,YAAY,EAAE,CAU5G"}

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

@@ -0,0 +1,98 @@
+import { PSEUDO_STATES } from '../../shared/pseudo-state.type.js';
+import { forcesAnyState, hasTarget } from '../pseudo/pseudo-targets.js';
+import { describeTarget } from '../pseudo/state-fit.js';
+/**
+ * The Overview as a matrix: a row per variant, a column for Default and one
+ * per component state.
+ *
+ * A component without variants still renders, as a variant of its own, so it
+ * gets one implicit `Default` row, like the canvas. A variant that opts out
+ * with `states: false` keeps its row but takes part in no state column.
+ */
+export function buildOverviewMatrix(config) {
+    const columns = [
+        { state: null, title: 'Default', signature: 'no state', forcesState: false },
+        ...(config.states ?? []).map((state, index) => ({
+            state: index,
+            title: state.name,
+            signature: pseudoSignature(state.pseudo),
+            forcesState: forcesAnyState(state.pseudo)
+        }))
+    ];
+    const variants = config.variants ?? [];
+    const rows = variants.length === 0
+        ? [{ variant: 0, title: 'Default', note: null, optedOut: false }]
+        : variants.map((variant, index) => ({
+            variant: index,
+            title: variant.name,
+            note: variant.states === false ? 'states: false' : variant.bg ? `bg: ${variant.bg}` : null,
+            optedOut: variant.states === false
+        }));
+    return { columns, rows };
+}
+/**
+ * What a state forces, in a line: `hover + active → .btn`.
+ *
+ * The pseudo-classes come in {@link PSEUDO_STATES} order, grouped by the target
+ * they share. Classes with different targets make one group each, joined with
+ * `; ` (`hover → .pill; focus-visible → .pill__close`). A slot that names no
+ * target forces nothing, as the marker sees it.
+ */
+export function pseudoSignature(pseudo) {
+    const groups = new Map();
+    for (const state of PSEUDO_STATES) {
+        const target = pseudo[state];
+        if (target === undefined || !hasTarget(target))
+            continue;
+        const label = describeTarget(target);
+        groups.set(label, [...(groups.get(label) ?? []), state]);
+    }
+    if (groups.size === 0)
+        return 'forces no state';
+    return Array.from(groups, ([label, states]) => `${states.join(' + ')} → ${label}`).join('; ');
+}
+/** `2/5`: the variants a state fits, of those it is combined with. */
+export function fitLabel(fits, total) {
+    return { text: `${fits}/${total}`, title: `State applies to ${fits} of ${total} ${total === 1 ? 'variant' : 'variants'}` };
+}
+/** Key of one cell's result in the map the matrix collects from the cells. */
+export function fitKey(variant, state) {
+    return `${variant}:${state}`;
+}
+/** The fits of one state column, as far as the cells have answered. */
+export function columnFit(results, matrix, state) {
+    const rows = matrix.rows.filter((row) => !row.optedOut);
+    const answers = rows.map((row) => results.get(fitKey(row.variant, state))).filter((answer) => answer !== undefined);
+    return { fits: answers.filter((answer) => answer.fits).length, eligible: rows.length, complete: answers.length === rows.length };
+}
+/**
+ * The states whose column is complete and fits nowhere, by index: almost
+ * certainly a selector with a typo.
+ *
+ * A column that is still waiting for a cell, or whose cell failed to render and
+ * so never answers, is not complete: a state is only called misplaced once every
+ * cell has had its say. A state no variant is combined with has no cell to
+ * judge it, so it is not reported either. Nor is a state that forces nothing (a
+ * slot the scanner could not use): it fits nowhere by construction, has no
+ * selector to check, and the scanner has reported it already.
+ *
+ * Stateless: the caller keeps track of what it already reported.
+ */
+export function statesFittingNowhere(results, matrix) {
+    return matrix.columns.flatMap((column) => {
+        if (column.state === null || !column.forcesState)
+            return [];
+        const { fits, eligible, complete } = columnFit(results, matrix, column.state);
+        return eligible > 0 && complete && fits === 0 ? [column.state] : [];
+    });
+}
+/** The column headers with their fit counts, and whether a state fits no variant, as far as the cells have answered. */
+export function columnHeaders(results, matrix) {
+    const nowhere = new Set(statesFittingNowhere(results, matrix));
+    return matrix.columns.map((column) => {
+        if (column.state === null)
+            return { column, fit: null, fitsNowhere: false };
+        const { fits, eligible } = columnFit(results, matrix, column.state);
+        return { column, fit: fitLabel(fits, eligible), fitsNowhere: nowhere.has(column.state) };
+    });
+}

package/dist/app/overview/overview-visibility.d.ts

@@ -1,4 +1,11 @@
+import type { ShowcaseConfig } from '../../decorator/showcase.types.js';
 import type { RuntimeComponent } from '../../plugin/plugin.types.js';
+/**
+ * How many cells the Overview would hold for this config: the matrix's rows
+ * times its columns, where a variant that opted out with `states: false` has
+ * one cell instead of a row of them.
+ */
+export declare function overviewCellCount(config: ShowcaseConfig): number;
 /**
  * Whether the Overview tab is offered for this component.
  *
@@ -8,8 +15,9 @@ import type { RuntimeComponent } from '../../plugin/plugin.types.js';
  * `PrismRendererService`. n cells side by side would all show the same state,
  * so an Overview there would be demonstrably wrong, not merely unhelpful.
  *
- * A single variant needs no contact sheet: the grid would be one cell, and the
- * Playground says the same thing better.
+ * A single cell needs no contact sheet: the Playground says the same thing
+ * better. A state counts as a cell, so one variant with one state already
+ * earns the Overview.
  */
 export declare function showsOverview(component: RuntimeComponent): boolean;
 //# sourceMappingURL=overview-visibility.d.ts.map

package/dist/app/overview/overview-visibility.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overview-visibility.d.ts","sourceRoot":"","sources":["../../../src/app/overview/overview-visibility.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAErE;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,SAAS,EAAE,gBAAgB,GAAG,OAAO,CAKlE"}
+{"version":3,"file":"overview-visibility.d.ts","sourceRoot":"","sources":["../../../src/app/overview/overview-visibility.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGrE;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,cAAc,GAAG,MAAM,CAIhE;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,SAAS,EAAE,gBAAgB,GAAG,OAAO,CAKlE"}

package/dist/app/overview/overview-visibility.js

@@ -1,3 +1,13 @@
+import { buildOverviewMatrix } from './overview-matrix.js';
+/**
+ * How many cells the Overview would hold for this config: the matrix's rows
+ * times its columns, where a variant that opted out with `states: false` has
+ * one cell instead of a row of them.
+ */
+export function overviewCellCount(config) {
+    const { columns, rows } = buildOverviewMatrix(config);
+    return rows.reduce((cells, row) => cells + (row.optedOut ? 1 : columns.length), 0);
+}
 /**
  * Whether the Overview tab is offered for this component.
  *
@@ -7,12 +17,13 @@
  * `PrismRendererService`. n cells side by side would all show the same state,
  * so an Overview there would be demonstrably wrong, not merely unhelpful.
  *
- * A single variant needs no contact sheet: the grid would be one cell, and the
- * Playground says the same thing better.
+ * A single cell needs no contact sheet: the Playground says the same thing
+ * better. A state counts as a cell, so one variant with one state already
+ * earns the Overview.
  */
 export function showsOverview(component) {
     const config = component.meta.showcaseConfig;
     if (config.renderPage)
         return false;
-    return (config.variants?.length ?? 0) >= 2;
+    return overviewCellCount(config) >= 2;
 }

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

@@ -1,4 +1,5 @@
 import type { RuntimeComponent } from '../../plugin/plugin.types.js';
+import type { StateFit } from '../pseudo/state-fit.js';
 import * as i0 from "@angular/core";
 /**
  * One frame of the contact sheet: a stage painting the variant's declared
@@ -15,21 +16,45 @@ import * as i0 from "@angular/core";
  * 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 declare class PrismOverviewCellComponent {
     readonly component: import("@angular/core").InputSignal<RuntimeComponent>;
     readonly index: import("@angular/core").InputSignal<number>;
+    /** Position of the component state in `ShowcaseConfig.states`, `null` for the variant alone. */
+    readonly state: import("@angular/core").InputSignal<number | null>;
+    /** `matrix` leaves the caption and the grid span to the matrix around the cell. */
+    readonly mode: import("@angular/core").InputSignal<"sheet" | "matrix">;
+    /** Whether the state fits the rendered variant. Only emitted while `state` is not `null`. */
+    readonly fitChange: import("@angular/core").OutputEmitterRef<StateFit>;
     private readonly injector;
     private readonly destroyRef;
+    private readonly renderer;
+    private readonly panels;
     private readonly pseudoMarker;
     private readonly outlet;
     /** Never null: `resolveVariantBg` falls back to `DEFAULT_VARIANT_BG`. */
     protected readonly bg: import("@angular/core").Signal<import("../services/prism-canvas.service.js").CanvasBg>;
     protected readonly caption: import("@angular/core").Signal<string>;
-    protected readonly isWide: import("@angular/core").Signal<boolean>;
+    /** Why the state is not shown on this cell, `null` while the component is. */
+    protected readonly unfitReason: import("@angular/core").WritableSignal<string | null>;
+    protected readonly label: import("@angular/core").Signal<string>;
+    /** The combination the Playground shows right now. */
+    protected readonly current: import("@angular/core").Signal<boolean>;
+    protected readonly stretches: import("@angular/core").Signal<boolean>;
     constructor();
+    protected open(): void;
+    protected onKeydown(event: KeyboardEvent): void;
     private mount;
+    private unfit;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismOverviewCellComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PrismOverviewCellComponent, "prism-overview-cell", never, { "component": { "alias": "component"; "required": true; "isSignal": true; }; "index": { "alias": "index"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismOverviewCellComponent, "prism-overview-cell", never, { "component": { "alias": "component"; "required": true; "isSignal": true; }; "index": { "alias": "index"; "required": true; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, { "fitChange": "fitChange"; }, never, never, true, never>;
 }
 //# sourceMappingURL=prism-overview-cell.component.d.ts.map