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

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

@@ -8,4 +8,12 @@ import type { PrismRendererService } from '../services/prism-renderer.service.js
  * 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

@@ -1 +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"}
+{"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

@@ -10,3 +10,16 @@ export function openInPlayground(renderer, panels, variantIndex, stateIndex) {
     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

@@ -13,6 +13,7 @@ export interface MatrixColumn {
 export interface MatrixRow {
     variant: number;
     title: string;
+    /** `bg: dark` or `states: false`: the row header's tooltip. */
     note: string | null;
     optedOut: boolean;
 }
@@ -38,8 +39,13 @@ export declare function buildOverviewMatrix(config: ShowcaseConfig): OverviewMat
  * target forces nothing, as the marker sees it.
  */
 export declare function pseudoSignature(pseudo: ForcedPseudoStates): string;
-/** `fits 2 of 5`: the variants a state fits, of those it is combined with. */
-export declare function fitLabel(fits: number, eligible: number): 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 {
@@ -69,8 +75,8 @@ export declare function statesFittingNowhere(results: ReadonlyMap<string, StateF
 /** One column header of the matrix. */
 export interface ColumnHeader {
     column: MatrixColumn;
-    /** `fits x of y`, `null` for the Default column. */
-    fit: string | null;
+    /** `x/y` and its tooltip, `null` for the Default column. */
+    fit: FitLabel | null;
     /** The state is one of {@link statesFittingNowhere}. */
     fitsNowhere: boolean;
 }

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

@@ -1 +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,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,8EAA8E;AAC9E,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAE/D;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,oDAAoD;IACpD,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,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"}
+{"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

@@ -51,9 +51,9 @@ export function pseudoSignature(pseudo) {
         return 'forces no state';
     return Array.from(groups, ([label, states]) => `${states.join(' + ')} → ${label}`).join('; ');
 }
-/** `fits 2 of 5`: the variants a state fits, of those it is combined with. */
-export function fitLabel(fits, eligible) {
-    return `fits ${fits} of ${eligible}`;
+/** `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) {

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

@@ -20,8 +20,10 @@ import * as i0 from "@angular/core";
  * 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.
+ * 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>;
@@ -44,6 +46,8 @@ export declare class PrismOverviewCellComponent {
     /** 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;

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

@@ -1 +1 @@
-{"version":3,"file":"prism-overview-cell.component.d.ts","sourceRoot":"","sources":["../../../src/app/overview/prism-overview-cell.component.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAIrE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;;AAQvD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAmBa,0BAA0B;IACnC,QAAQ,CAAC,SAAS,wDAAsC;IACxD,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,gGAAgG;IAChG,QAAQ,CAAC,KAAK,qDAA8B;IAC5C,mFAAmF;IACnF,QAAQ,CAAC,IAAI,0DAAsC;IACnD,6FAA6F;IAC7F,QAAQ,CAAC,SAAS,qDAAsB;IAExC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAgC;IACzD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA6B;IACpD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAkD;IAC/E,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IAEH,yEAAyE;IACzE,SAAS,CAAC,QAAQ,CAAC,EAAE,yFAAwF;IAE7G,SAAS,CAAC,QAAQ,CAAC,OAAO,yCAUvB;IAEH,8EAA8E;IAC9E,SAAS,CAAC,QAAQ,CAAC,WAAW,wDAA+B;IAE7D,SAAS,CAAC,QAAQ,CAAC,KAAK,yCAOrB;IAEH,SAAS,CAAC,QAAQ,CAAC,SAAS,0CAKzB;;IAuBH,SAAS,CAAC,IAAI,IAAI,IAAI;IAItB,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAkB/C,OAAO,CAAC,KAAK;IAsEb,OAAO,CAAC,KAAK;yCAtKJ,0BAA0B;2CAA1B,0BAA0B;CA0KtC"}
+{"version":3,"file":"prism-overview-cell.component.d.ts","sourceRoot":"","sources":["../../../src/app/overview/prism-overview-cell.component.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAKrE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;;AASvD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAsBa,0BAA0B;IACnC,QAAQ,CAAC,SAAS,wDAAsC;IACxD,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,gGAAgG;IAChG,QAAQ,CAAC,KAAK,qDAA8B;IAC5C,mFAAmF;IACnF,QAAQ,CAAC,IAAI,0DAAsC;IACnD,6FAA6F;IAC7F,QAAQ,CAAC,SAAS,qDAAsB;IAExC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAgC;IACzD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA6B;IACpD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAkD;IAC/E,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IAEH,yEAAyE;IACzE,SAAS,CAAC,QAAQ,CAAC,EAAE,yFAAwF;IAE7G,SAAS,CAAC,QAAQ,CAAC,OAAO,yCAUvB;IAEH,8EAA8E;IAC9E,SAAS,CAAC,QAAQ,CAAC,WAAW,wDAA+B;IAE7D,SAAS,CAAC,QAAQ,CAAC,KAAK,yCAOrB;IAEH,sDAAsD;IACtD,SAAS,CAAC,QAAQ,CAAC,OAAO,0CAIvB;IAEH,SAAS,CAAC,QAAQ,CAAC,SAAS,0CAKzB;;IAuBH,SAAS,CAAC,IAAI,IAAI,IAAI;IAItB,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAkB/C,OAAO,CAAC,KAAK;IA0Eb,OAAO,CAAC,KAAK;yCAjLJ,0BAA0B;2CAA1B,0BAA0B;CAqLtC"}

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

@@ -1,24 +1,20 @@
 import { ChangeDetectionStrategy, Component, computed, DestroyRef, effect, inject, Injector, input, output, reflectComponentType, signal, untracked, viewChild, ViewContainerRef } from '@angular/core';
+import { PRISM_VARIANT_INPUT } from '../../shared/composition.js';
 import { resolveVariantBg } from '../../shared/variant-bg.js';
 import { CANVAS_BG_STYLES } from '../canvas/canvas-bg.styles.js';
+import { activeCase, renderTypeFor } from '../renderer/composition.js';
 import { buildInputBindings } from '../renderer/input-bindings.js';
 import { parseContentToNodes } from '../renderer/projectable-content.js';
 import { PrismPanelService } from '../services/prism-panel.service.js';
 import { PrismPseudoStateService } from '../services/prism-pseudo-state.service.js';
 import { computeVariantState, PrismRendererService } from '../services/prism-renderer.service.js';
-import { openInPlayground } from './open-in-playground.js';
+import { isPlaygroundCombination, openInPlayground, playgroundLabel } from './open-in-playground.js';
 import * as i0 from "@angular/core";
 const _c0 = ["outlet"];
 function PrismOverviewCellComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 3)(1, "span", 5);
-    i0.ɵɵtext(2, "\u2013");
+    i0.ɵɵdomElementStart(0, "span", 3);
+    i0.ɵɵtext(1, "\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);
@@ -48,8 +44,10 @@ function PrismOverviewCellComponent_Conditional_5_Template(rf, ctx) { if (rf & 1
  * 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.
+ * a dash in place of the component, with the reason as its tooltip and in its
+ * label. Every cell, with or without a state, opens its exact combination in
+ * the Playground on click, Enter or Space, and the one the Playground shows is
+ * outlined.
  */
 export class PrismOverviewCellComponent {
     component = input.required(/* @ts-ignore */
@@ -92,9 +90,15 @@ export class PrismOverviewCellComponent {
         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`;
+        return playgroundLabel(variant, state?.name, this.unfitReason());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** The combination the Playground shows right now. */
+    current = computed(() => {
+        const optedOut = this.component().meta.showcaseConfig.variants?.[this.index()]?.states === false;
+        return isPlaygroundCombination(this.renderer, this.index(), this.state(), optedOut);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
     stretches = computed(() => {
         const config = this.component().meta.showcaseConfig;
         const variant = config.variants?.[this.index()];
@@ -158,14 +162,19 @@ export class PrismOverviewCellComponent {
                 providers: component.meta.showcaseConfig.providers ?? [],
                 parent: this.injector
             });
-            const projectableNodes = activeContent ? parseContentToNodes(activeContent, reflectComponentType(component.type)?.ngContentSelectors ?? []) : undefined;
-            const ref = this.outlet().createComponent(component.type, {
+            const composed = activeCase(component, index) !== null;
+            const type = renderTypeFor(component, index);
+            const projectableNodes = activeContent && !composed ? parseContentToNodes(activeContent, reflectComponentType(type)?.ngContentSelectors ?? []) : undefined;
+            const ref = this.outlet().createComponent(type, {
                 injector,
                 projectableNodes
             });
-            const inputBindings = buildInputBindings(component);
+            if (composed)
+                ref.setInput(PRISM_VARIANT_INPUT, index);
+            const inputBindings = buildInputBindings(component, index);
             for (const [key, value] of Object.entries(values)) {
                 const binding = inputBindings.get(key);
+                // None for an unknown input, and none for one the composition of the variant leaves unbound.
                 if (binding !== undefined)
                     ref.setInput(binding, value);
             }
@@ -207,25 +216,24 @@ export class PrismOverviewCellComponent {
             i0.ɵɵviewQuerySignal(ctx.outlet, _c0, 5, ViewContainerRef);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, hostAttrs: ["role", "listitem", "tabindex", "0"], hostVars: 3, hostBindings: function PrismOverviewCellComponent_HostBindings(rf, ctx) { if (rf & 1) {
+        } }, hostAttrs: ["role", "listitem", "tabindex", "0"], hostVars: 6, hostBindings: function PrismOverviewCellComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("click", function PrismOverviewCellComponent_click_HostBindingHandler() { return ctx.open(); })("keydown", function PrismOverviewCellComponent_keydown_HostBindingHandler($event) { return ctx.onKeydown($event); });
         } if (rf & 2) {
-            i0.ɵɵattribute("aria-label", ctx.label())("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.ɵɵattribute("aria-label", ctx.label())("title", ctx.unfitReason())("data-matrix", ctx.mode() === "matrix" ? "" : null)("data-current", ctx.current() ? "" : null)("data-wide", ctx.mode() === "sheet" && ctx.stretches() ? "" : null)("data-stretch", ctx.mode() === "matrix" && ctx.stretches() ? "" : null);
+        } }, inputs: { component: [1, "component"], index: [1, "index"], state: [1, "state"], mode: [1, "mode"] }, outputs: { fitChange: "fitChange" }, decls: 6, vars: 4, consts: [["outlet", ""], [1, "cell__stage"], [1, "cell__mount"], ["aria-hidden", "true", 1, "cell__unfit"], [1, "cell__caption"]], template: function PrismOverviewCellComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵdomElementStart(0, "div", 1)(1, "div", 2);
             i0.ɵɵdomElementContainer(2, null, 0);
             i0.ɵɵdomElementEnd();
-            i0.ɵɵconditionalCreate(4, PrismOverviewCellComponent_Conditional_4_Template, 5, 1, "div", 3);
+            i0.ɵɵconditionalCreate(4, PrismOverviewCellComponent_Conditional_4_Template, 2, 0, "span", 3);
             i0.ɵɵdomElementEnd();
             i0.ɵɵconditionalCreate(5, PrismOverviewCellComponent_Conditional_5_Template, 2, 1, "span", 4);
         } if (rf & 2) {
-            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.ɵɵconditional(ctx.unfitReason() !== null ? 4 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.mode() === "sheet" ? 5 : -1);
-        } }, styles: ["[_nghost-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: var(--%NS%sp-2);\n    min-width: 0;\n    cursor: pointer;\n}\n\n[_nghost-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 2px;\n    border-radius: var(--%NS%radius-sm);\n}\n\n\n\n[data-wide][_nghost-%COMP%] {\n    grid-column: 1 / -1;\n}\n\n.cell__stage[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    padding: var(--%NS%sp-5);\n    overflow: hidden;\n    outline: 1px solid var(--%NS%prism-stage-edge);\n    outline-offset: -1px;\n    background-color: var(--%NS%prism-stage);\n    border-radius: var(--%NS%radius-sm);\n}\n\n.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  }"] });
+        } }, styles: ["[_nghost-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: var(--%NS%sp-2);\n    min-width: 0;\n    cursor: pointer;\n}\n\n[_nghost-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 2px;\n    border-radius: var(--%NS%radius-sm);\n}\n\n\n\n[data-wide][_nghost-%COMP%] {\n    grid-column: 1 / -1;\n}\n\n.cell__stage[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    padding: var(--%NS%sp-5);\n    overflow: hidden;\n    outline: 1px solid var(--%NS%prism-stage-edge);\n    outline-offset: -1px;\n    background-color: var(--%NS%prism-stage);\n    border-radius: var(--%NS%radius-sm);\n}\n\n\n\n[data-matrix][_nghost-%COMP%]   .cell__stage[_ngcontent-%COMP%] {\n    min-height: 72px;\n    padding: var(--%NS%sp-3);\n}\n\n\n\n\n[_nghost-%COMP%]:hover   .cell__stage[_ngcontent-%COMP%], \n[data-current][_nghost-%COMP%]   .cell__stage[_ngcontent-%COMP%] {\n    outline-width: 1.5px;\n    outline-color: var(--%NS%prism-primary);\n    outline-offset: 1px;\n}\n\n.cell__mount[_ngcontent-%COMP%] {\n    display: inline-block;\n    max-width: 100%;\n}\n\n[data-wide][_nghost-%COMP%]   .cell__mount[_ngcontent-%COMP%], \n[data-stretch][_nghost-%COMP%]   .cell__mount[_ngcontent-%COMP%] {\n    display: block;\n    width: 100%;\n}\n\n\n\n.cell__stage[data-unfit][_ngcontent-%COMP%] {\n    outline-style: dashed;\n    background: none;\n}\n\n.cell__stage[data-unfit][_ngcontent-%COMP%]   .cell__mount[_ngcontent-%COMP%] {\n    display: none;\n}\n\n\n.cell__unfit[_ngcontent-%COMP%] {\n    font-family: var(--%NS%prism-font-mono);\n    font-size: var(--%NS%fs-md);\n    line-height: 1;\n    color: var(--%NS%prism-text-muted);\n}\n\n\n\n\n\n.cell__caption[_ngcontent-%COMP%] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--%NS%prism-font-mono);\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-muted);\n    white-space: nowrap;\n}", "[data-bg=\"dots\"][_ngcontent-%COMP%] {\n    background-image: radial-gradient(circle, var(--%NS%prism-dot) 1px, transparent 1px);\n    background-size: 20px 20px;\n  }\n\n  [data-bg=\"plain\"][_ngcontent-%COMP%] {\n    background-image: none;\n  }\n\n  \n\n\n\n  \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  [data-bg=\"light\"][_ngcontent-%COMP%] {\n    background-color: var(--%NS%prism-void-light, #f7f5fc);\n    background-image: none;\n    --%NS%prism-measure: #ca00c1;\n    --%NS%prism-measure-plate: var(--%NS%prism-void-light, #f7f5fc);\n  }\n  [data-bg=\"dark\"][_ngcontent-%COMP%] {\n    background-color: var(--%NS%prism-void-dark, #07050f);\n    background-image: none;\n    --%NS%prism-measure: #f632ff;\n    --%NS%prism-measure-plate: var(--%NS%prism-void-dark, #07050f);\n  }\n\n  \n\n\n  [data-bg=\"checker\"][_ngcontent-%COMP%], \n   [data-bg=\"transparent\"][_ngcontent-%COMP%] {\n    background-image:\n      linear-gradient(45deg, var(--%NS%prism-border) 25%, transparent 25%),\n      linear-gradient(-45deg, var(--%NS%prism-border) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, var(--%NS%prism-border) 75%),\n      linear-gradient(-45deg, transparent 75%, var(--%NS%prism-border) 75%);\n    background-size: 16px 16px;\n    background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n  }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismOverviewCellComponent, [{
         type: Component,
@@ -233,14 +241,17 @@ export class PrismOverviewCellComponent {
                     role: 'listitem',
                     tabindex: '0',
                     '[attr.aria-label]': 'label()',
+                    '[attr.title]': 'unfitReason()',
+                    '[attr.data-matrix]': "mode() === 'matrix' ? '' : null",
+                    '[attr.data-current]': "current() ? '' : null",
                     // In the matrix the grid spans are the matrix's own. A stretch variant still
                     // fills its cell, so `canvasLayout` holds for the whole row.
                     '[attr.data-wide]': "mode() === 'sheet' && stretches() ? '' : null",
                     '[attr.data-stretch]': "mode() === 'matrix' && stretches() ? '' : null",
                     '(click)': 'open()',
                     '(keydown)': 'onKeydown($event)'
-                }, template: "<div\n    class=\"cell__stage\"\n    [attr.data-bg]=\"unfitReason() === null ? bg() : null\"\n    [attr.data-unfit]=\"unfitReason() === null ? null : ''\">\n    <div class=\"cell__mount\"><ng-container #outlet /></div>\n    @if (unfitReason(); 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"] }]
+                }, template: "<div\n    class=\"cell__stage\"\n    [attr.data-bg]=\"unfitReason() === null ? bg() : null\"\n    [attr.data-unfit]=\"unfitReason() === null ? null : ''\">\n    <div class=\"cell__mount\"><ng-container #outlet /></div>\n    @if (unfitReason() !== null) {\n        <span\n            class=\"cell__unfit\"\n            aria-hidden=\"true\"\n            >\u2013</span\n        >\n    }\n</div>\n@if (mode() === 'sheet') {\n    <span class=\"cell__caption\">{{ caption() }}</span>\n}\n", styles: [":host {\n    display: flex;\n    flex-direction: column;\n    gap: var(--sp-2);\n    min-width: 0;\n    cursor: pointer;\n}\n\n:host(:focus-visible) {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 2px;\n    border-radius: var(--radius-sm);\n}\n\n/* A stretch variant has no intrinsic width to compare against its\n   neighbours, so it takes the row rather than a column. */\n:host([data-wide]) {\n    grid-column: 1 / -1;\n}\n\n.cell__stage {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    padding: var(--sp-5);\n    overflow: hidden;\n    outline: 1px solid var(--prism-stage-edge);\n    outline-offset: -1px;\n    background-color: var(--prism-stage);\n    border-radius: var(--radius-sm);\n}\n\n/* The matrix is denser than the sheet: a row of five states has to fit the\n   panel. The component keeps its own size; only the frame around it shrinks. */\n:host([data-matrix]) .cell__stage {\n    min-height: 72px;\n    padding: var(--sp-3);\n}\n\n/* What the click opens, and what the Playground shows right now. Outside the\n   stage, on the panel surface, where the primary holds its contrast whatever\n   ground the cell paints. Longhands, so a dashed n/a frame stays dashed. */\n:host(:hover) .cell__stage,\n:host([data-current]) .cell__stage {\n    outline-width: 1.5px;\n    outline-color: var(--prism-primary);\n    outline-offset: 1px;\n}\n\n.cell__mount {\n    display: inline-block;\n    max-width: 100%;\n}\n\n:host([data-wide]) .cell__mount,\n:host([data-stretch]) .cell__mount {\n    display: block;\n    width: 100%;\n}\n\n/* A state that does not fit shows no component and paints no ground: an\n   empty, dashed frame, so it cannot pass for a rendering. */\n.cell__stage[data-unfit] {\n    outline-style: dashed;\n    background: none;\n}\n\n.cell__stage[data-unfit] .cell__mount {\n    display: none;\n}\n\n/* Only the dash: the reason is the cell's tooltip and part of its label. */\n.cell__unfit {\n    font-family: var(--prism-font-mono);\n    font-size: var(--fs-md);\n    line-height: 1;\n    color: var(--prism-text-muted);\n}\n\n/* The caption sits below the frame, not on it. Inside, it would have to\n   invert against every background the cell can paint, and gaining a new\n   contrast rule per CanvasBg value is the cost the sheet exists to\n   avoid. */\n.cell__caption {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--prism-font-mono);\n    font-size: var(--fs-xs);\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n}\n", "\n  [data-bg=\"dots\"] {\n    background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n    background-size: 20px 20px;\n  }\n\n  [data-bg=\"plain\"] {\n    background-image: none;\n  }\n\n  /* Flat, not dotted. \"light\" and \"dark\" name the surface a component was\n     designed against, and their colour is absolute rather than a theme token,\n     which makes them the values to declare for a screenshot baseline. Use\n     \"dots\" for the grid. */\n  /* These two also re-point --prism-measure. Other overlays use theme colours\n     on theme surfaces, but these grounds ignore the theme: \"light\" stays\n     near-white in the dark theme and \"dark\" stays near-black in the light one.\n     The dark theme's magenta reaches only 2.85:1 on the light ground, under the\n     4.5:1 its 9px readout needs, so the measurement colour has to follow the\n     ground, not the theme.\n\n     --prism-measure-plate follows it for the same reason. It is the surface\n     the measuring tool's value label paints itself on, so the label reads as a\n     gap in the measurement line rather than a badge on top of it. At its\n     --prism-stage fallback it would be the theme's stage under a re-pointed\n     foreground: the light theme's magenta on the dark theme's stage reads\n     3.71:1, the dark theme's on white 3.08:1. Pinned to the ground the same way,\n     the pairs reach 4.54:1 and 6.57:1. A color-mix against the ground would\n     work too, but this file already states both grounds literally, and one\n     mechanism per decision is enough.\n\n     Literal values because this file is theme-independent, like the two\n     grounds below. Keep them in step with --prism-measure in canvas-overlay-tokens.ts and\n     prism-default-theme.ts; semantic-colours.spec.ts fails if they drift. */\n  [data-bg=\"light\"] {\n    background-color: var(--prism-void-light, #f7f5fc);\n    background-image: none;\n    --prism-measure: #ca00c1;\n    --prism-measure-plate: var(--prism-void-light, #f7f5fc);\n  }\n  [data-bg=\"dark\"] {\n    background-color: var(--prism-void-dark, #07050f);\n    background-image: none;\n    --prism-measure: #f632ff;\n    --prism-measure-plate: var(--prism-void-dark, #07050f);\n  }\n\n  /* \"transparent\" shares the checkerboard. In the app the checkerboard is\n     already the UI's sign for \"no surface\", and a see-through stage would only\n     show the shell behind it. Only CAPTURE_STYLES tells the two apart. */\n  [data-bg=\"checker\"],\n  [data-bg=\"transparent\"] {\n    background-image:\n      linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n      linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n      linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n    background-size: 16px 16px;\n    background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n  }\n"] }]
     }], () => [], { component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], fitChange: [{ type: i0.Output, args: ["fitChange"] }], outlet: [{ type: i0.ViewChild, args: ['outlet', { ...{
                         read: ViewContainerRef
                     }, isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismOverviewCellComponent, { className: "PrismOverviewCellComponent", filePath: "app/overview/prism-overview-cell.component.ts", lineNumber: 70 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismOverviewCellComponent, { className: "PrismOverviewCellComponent", filePath: "app/overview/prism-overview-cell.component.ts", lineNumber: 77 }); })();