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

package/dist/app/canvas/prism-canvas-toolbar.component.js

@@ -9,37 +9,30 @@ import { PrismNavigationService } from '../services/prism-navigation.service.js'
 import { PrismPseudoStateService } from '../services/prism-pseudo-state.service.js';
 import { PrismRendererService } from '../services/prism-renderer.service.js';
 import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
+import { PrismIconButtonComponent } from '../shared/prism-icon-button.component.js';
+import { railToggleTitle, zoomTitle } from './canvas-overlay-tokens.js';
 import { buildStateChips, chipFits, toggleTitle } from './state-chips.js';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.value;
 const _forTrack1 = ($index, $item) => $item.index;
-function PrismCanvasToolbarComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 2);
+function PrismCanvasToolbarComponent_For_21_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 20);
+    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_21_Template_button_click_0_listener() { const bg_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setBg(bg_r2)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const bg_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("is-on", ctx_r2.variantBg.effective() === bg_r2)("is-rec", ctx_r2.variantBg.recommended() === bg_r2);
+    i0.ɵɵattribute("title", ctx_r2.bgTitle(bg_r2));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("", ctx_r0.canvas.viewportWidth(), "px");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.capitalize(bg_r2), " ");
 } }
-function PrismCanvasToolbarComponent_For_22_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 21);
-    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_22_Template_button_click_0_listener() { const bg_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setBg(bg_r3)); });
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const bg_r3 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("is-on", ctx_r0.variantBg.effective() === bg_r3)("is-rec", ctx_r0.variantBg.recommended() === bg_r3);
-    i0.ɵɵattribute("title", ctx_r0.bgTitle(bg_r3));
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.capitalize(bg_r3), " ");
-} }
-function PrismCanvasToolbarComponent_Conditional_25_For_2_Template(rf, ctx) { if (rf & 1) {
+function PrismCanvasToolbarComponent_Conditional_24_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 23);
-    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Conditional_25_For_2_Template_button_click_0_listener() { const chip_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.pickState(chip_r5)); });
+    i0.ɵɵelementStart(0, "button", 22);
+    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Conditional_24_For_2_Template_button_click_0_listener() { const chip_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.pickState(chip_r5)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -49,52 +42,52 @@ function PrismCanvasToolbarComponent_Conditional_25_For_2_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", chip_r5.name, " ");
 } }
-function PrismCanvasToolbarComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18);
-    i0.ɵɵrepeaterCreate(1, PrismCanvasToolbarComponent_Conditional_25_For_2_Template, 2, 7, "button", 22, _forTrack1);
+function PrismCanvasToolbarComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵrepeaterCreate(1, PrismCanvasToolbarComponent_Conditional_24_For_2_Template, 2, 7, "button", 21, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r0.chips());
+    i0.ɵɵrepeater(ctx_r2.chips());
 } }
-function PrismCanvasToolbarComponent_For_28_Template(rf, ctx) { if (rf & 1) {
+function PrismCanvasToolbarComponent_For_27_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 21);
-    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_28_Template_button_click_0_listener() { const state_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.pseudoState.toggle(state_r7)); });
+    i0.ɵɵelementStart(0, "button", 20);
+    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_27_Template_button_click_0_listener() { const state_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.pseudoState.toggle(state_r7)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const state_r7 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("is-on", ctx_r0.pseudoState.isForced(state_r7))("is-rec", ctx_r0.pseudoState.isDeclared(state_r7));
-    i0.ɵɵattribute("aria-pressed", ctx_r0.pseudoState.isForced(state_r7))("title", ctx_r0.stateTitle(state_r7));
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("is-on", ctx_r2.pseudoState.isForced(state_r7))("is-rec", ctx_r2.pseudoState.isDeclared(state_r7));
+    i0.ɵɵattribute("aria-pressed", ctx_r2.pseudoState.isForced(state_r7))("title", ctx_r2.stateTitle(state_r7));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" :", state_r7, " ");
 } }
-function PrismCanvasToolbarComponent_For_33_Template(rf, ctx) { if (rf & 1) {
+function PrismCanvasToolbarComponent_For_32_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 21);
-    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_33_Template_button_click_0_listener() { const z_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.canvas.setZoom(z_r9.value)); });
+    i0.ɵɵelementStart(0, "button", 20);
+    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_32_Template_button_click_0_listener() { const z_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.canvas.setZoom(z_r9.value)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const z_r9 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("is-on", ctx_r0.canvas.zoom() === z_r9.value);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("is-on", ctx_r2.canvas.zoom() === z_r9.value);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", z_r9.label, " ");
 } }
-function PrismCanvasToolbarComponent_For_40_Template(rf, ctx) { if (rf & 1) {
+function PrismCanvasToolbarComponent_For_39_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 21);
-    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_40_Template_button_click_0_listener() { const w_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.canvas.setViewportWidth(w_r11)); });
+    i0.ɵɵelementStart(0, "button", 20);
+    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_39_Template_button_click_0_listener() { const w_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.canvas.setViewportWidth(w_r11)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const w_r11 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("is-on", ctx_r0.canvas.viewportWidth() === w_r11);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("is-on", ctx_r2.canvas.viewportWidth() === w_r11);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", w_r11, " ");
 } }
@@ -104,8 +97,7 @@ function PrismCanvasToolbarComponent_For_40_Template(rf, ctx) { if (rf & 1) {
  * Things you toggle constantly (guides, rulers, the viewport constraint) get
  * their own button; things you set once (background, forced state, zoom,
  * viewport width) live in the menu. The template is a view rather than a setting and keeps its own
- * button. Zoom and the active viewport width are shown as readouts; the width
- * only appears while the viewport constraint is on.
+ * button. Zoom is shown as a readout, with the viewport width in its tooltip.
  *
  * The host generates no box. The rail must be a direct child of
  * `.prism-canvas-wrap` outside the stage, because that is what capture mode's
@@ -171,6 +163,11 @@ export class PrismCanvasToolbarComponent {
     }
     /** Angular templates resolve names against the component, not the global scope. */
     Math = Math;
+    zoomTitle = computed(() => zoomTitle(this.canvas.zoom(), this.canvas.viewportWidth()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoomTitle" }] : /* istanbul ignore next */ []));
+    railTitle(label, on) {
+        return railToggleTitle(label, on);
+    }
     setBg(bg) {
         if (this.variantBg.recommended() !== null) {
             this.variantBg.setOverride(bg);
@@ -228,86 +225,81 @@ export class PrismCanvasToolbarComponent {
         return s.charAt(0).toUpperCase() + s.slice(1);
     }
     static ɵfac = function PrismCanvasToolbarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismCanvasToolbarComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismCanvasToolbarComponent, selectors: [["prism-canvas-toolbar"]], decls: 41, vars: 25, consts: [[1, "prism-toolrail"], [1, "prism-toolrail__zoom"], [1, "prism-toolrail__vp"], ["type", "button", "title", "Toggle guides", "aria-label", "Toggle guides", 1, "prism-toolrail__btn", 3, "click"], ["name", "crosshair", 3, "size"], ["type", "button", "title", "Toggle rulers", "aria-label", "Toggle rulers", 1, "prism-toolrail__btn", 3, "click"], ["name", "move", 3, "size"], ["type", "button", "title", "Toggle viewport width", "aria-label", "Toggle viewport width", 1, "prism-toolrail__btn", 3, "click"], ["name", "ruler-dimension", 3, "size"], ["type", "button", "title", "Toggle measure tool", "aria-label", "Toggle measure tool", 1, "prism-toolrail__btn", 3, "click"], ["name", "ruler", 3, "size"], ["type", "button", "popovertarget", "prism-tools", "title", "Canvas, state, zoom and width", "aria-label", "Canvas, state, zoom and width", 1, "prism-toolrail__btn"], ["name", "sliders-horizontal", 3, "size"], [1, "prism-toolrail__sep"], ["type", "button", "popovertarget", "prism-template", "title", "Toggle Angular template", "aria-label", "Toggle Angular template", 1, "prism-toolrail__btn"], ["name", "code", 3, "size"], ["popover", "", "id", "prism-tools", "role", "dialog", "aria-label", "Canvas, state, zoom and width", 1, "prism-toolmenu"], [1, "prism-toolmenu__lbl"], [1, "prism-toolmenu__row"], ["type", "button", 3, "is-on", "is-rec"], ["type", "button", 3, "is-on"], ["type", "button", 3, "click"], ["type", "button", 1, "is-rec", 3, "is-on", "is-na"], ["type", "button", 1, "is-rec", 3, "click"]], template: function PrismCanvasToolbarComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismCanvasToolbarComponent, selectors: [["prism-canvas-toolbar"]], decls: 40, vars: 21, consts: [[1, "prism-toolrail"], [1, "prism-toolrail__zoom"], ["prismIconButton", "", "size", "xs", "aria-label", "Guides", 3, "click", "pressed", "title"], ["name", "crosshair", 3, "size"], ["prismIconButton", "", "size", "xs", "aria-label", "Rulers", 3, "click", "pressed", "title"], ["name", "move", 3, "size"], ["prismIconButton", "", "size", "xs", "aria-label", "Viewport width", 3, "click", "pressed", "title"], ["name", "ruler-dimension", 3, "size"], ["prismIconButton", "", "size", "xs", "aria-label", "Measure", 3, "click", "pressed", "title"], ["name", "ruler", 3, "size"], ["prismIconButton", "", "size", "xs", "popovertarget", "prism-tools", "title", "Canvas, state, zoom and width", "aria-label", "Canvas, state, zoom and width"], ["name", "sliders-horizontal", 3, "size"], [1, "prism-toolrail__sep"], ["prismIconButton", "", "size", "xs", "popovertarget", "prism-template", "title", "Angular template", "aria-label", "Angular template"], ["name", "code", 3, "size"], ["popover", "", "id", "prism-tools", "role", "dialog", "aria-label", "Canvas, state, zoom and width", 1, "prism-toolmenu"], [1, "prism-toolmenu__lbl"], [1, "prism-toolmenu__row"], ["type", "button", 3, "is-on", "is-rec"], ["type", "button", 3, "is-on"], ["type", "button", 3, "click"], ["type", "button", 1, "is-rec", 3, "is-on", "is-na"], ["type", "button", 1, "is-rec", 3, "click"]], template: function PrismCanvasToolbarComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "span", 1);
             i0.ɵɵtext(2);
-            i0.ɵɵconditionalCreate(3, PrismCanvasToolbarComponent_Conditional_3_Template, 2, 1, "span", 2);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "button", 3);
-            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_4_listener() { return ctx.canvas.toggleGuides(); });
-            i0.ɵɵelement(5, "prism-icon", 4);
+            i0.ɵɵelementStart(3, "button", 2);
+            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_3_listener() { return ctx.canvas.toggleGuides(); });
+            i0.ɵɵelement(4, "prism-icon", 3);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "button", 5);
-            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_6_listener() { return ctx.canvas.toggleRulers(); });
-            i0.ɵɵelement(7, "prism-icon", 6);
+            i0.ɵɵelementStart(5, "button", 4);
+            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_5_listener() { return ctx.canvas.toggleRulers(); });
+            i0.ɵɵelement(6, "prism-icon", 5);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(8, "button", 7);
-            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_8_listener() { return ctx.canvas.toggleViewport(); });
-            i0.ɵɵelement(9, "prism-icon", 8);
+            i0.ɵɵelementStart(7, "button", 6);
+            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_7_listener() { return ctx.canvas.toggleViewport(); });
+            i0.ɵɵelement(8, "prism-icon", 7);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(10, "button", 9);
-            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_10_listener() { return ctx.canvas.toggleMeasure(); });
-            i0.ɵɵelement(11, "prism-icon", 10);
+            i0.ɵɵelementStart(9, "button", 8);
+            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_9_listener() { return ctx.canvas.toggleMeasure(); });
+            i0.ɵɵelement(10, "prism-icon", 9);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(12, "button", 11);
-            i0.ɵɵelement(13, "prism-icon", 12);
+            i0.ɵɵelementStart(11, "button", 10);
+            i0.ɵɵelement(12, "prism-icon", 11);
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(14, "span", 13);
-            i0.ɵɵelementStart(15, "button", 14);
-            i0.ɵɵelement(16, "prism-icon", 15);
+            i0.ɵɵelement(13, "span", 12);
+            i0.ɵɵelementStart(14, "button", 13);
+            i0.ɵɵelement(15, "prism-icon", 14);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(17, "div", 16)(18, "span", 17);
-            i0.ɵɵtext(19, "Canvas");
+            i0.ɵɵelementStart(16, "div", 15)(17, "span", 16);
+            i0.ɵɵtext(18, "Canvas");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(20, "div", 18);
-            i0.ɵɵrepeaterCreate(21, PrismCanvasToolbarComponent_For_22_Template, 2, 6, "button", 19, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵelementStart(19, "div", 17);
+            i0.ɵɵrepeaterCreate(20, PrismCanvasToolbarComponent_For_21_Template, 2, 6, "button", 18, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(23, "span", 17);
-            i0.ɵɵtext(24, "State");
+            i0.ɵɵelementStart(22, "span", 16);
+            i0.ɵɵtext(23, "State");
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(25, PrismCanvasToolbarComponent_Conditional_25_Template, 3, 0, "div", 18);
-            i0.ɵɵelementStart(26, "div", 18);
-            i0.ɵɵrepeaterCreate(27, PrismCanvasToolbarComponent_For_28_Template, 2, 7, "button", 19, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵconditionalCreate(24, PrismCanvasToolbarComponent_Conditional_24_Template, 3, 0, "div", 17);
+            i0.ɵɵelementStart(25, "div", 17);
+            i0.ɵɵrepeaterCreate(26, PrismCanvasToolbarComponent_For_27_Template, 2, 7, "button", 18, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(29, "span", 17);
-            i0.ɵɵtext(30, "Zoom");
+            i0.ɵɵelementStart(28, "span", 16);
+            i0.ɵɵtext(29, "Zoom");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(31, "div", 18);
-            i0.ɵɵrepeaterCreate(32, PrismCanvasToolbarComponent_For_33_Template, 2, 3, "button", 20, _forTrack0);
+            i0.ɵɵelementStart(30, "div", 17);
+            i0.ɵɵrepeaterCreate(31, PrismCanvasToolbarComponent_For_32_Template, 2, 3, "button", 19, _forTrack0);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(34, "span", 17);
-            i0.ɵɵtext(35, "Width");
+            i0.ɵɵelementStart(33, "span", 16);
+            i0.ɵɵtext(34, "Width");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(36, "div", 18)(37, "button", 21);
-            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_37_listener() { return ctx.canvas.setViewportWidth(null); });
-            i0.ɵɵtext(38, " Auto ");
+            i0.ɵɵelementStart(35, "div", 17)(36, "button", 20);
+            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_36_listener() { return ctx.canvas.setViewportWidth(null); });
+            i0.ɵɵtext(37, " Auto ");
             i0.ɵɵelementEnd();
-            i0.ɵɵrepeaterCreate(39, PrismCanvasToolbarComponent_For_40_Template, 2, 3, "button", 20, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵrepeaterCreate(38, PrismCanvasToolbarComponent_For_39_Template, 2, 3, "button", 19, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵclassProp("has-rulers", ctx.canvas.rulers());
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", ctx.Math.round(ctx.canvas.zoom() * 100), "% ");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.canvas.viewportWidth() !== null ? 3 : -1);
+            i0.ɵɵattribute("title", ctx.zoomTitle());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1("", ctx.Math.round(ctx.canvas.zoom() * 100), "%");
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("is-on", ctx.canvas.guides());
-            i0.ɵɵattribute("aria-pressed", ctx.canvas.guides());
+            i0.ɵɵproperty("pressed", ctx.canvas.guides())("title", ctx.railTitle("Guides", ctx.canvas.guides()));
             i0.ɵɵadvance();
             i0.ɵɵproperty("size", 14);
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("is-on", ctx.canvas.rulers());
-            i0.ɵɵattribute("aria-pressed", ctx.canvas.rulers());
+            i0.ɵɵproperty("pressed", ctx.canvas.rulers())("title", ctx.railTitle("Rulers", ctx.canvas.rulers()));
             i0.ɵɵadvance();
             i0.ɵɵproperty("size", 14);
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("is-on", ctx.canvas.viewportWidth() !== null);
-            i0.ɵɵattribute("aria-pressed", ctx.canvas.viewportWidth() !== null);
+            i0.ɵɵproperty("pressed", ctx.canvas.viewportWidth() !== null)("title", ctx.railTitle("Viewport width", ctx.canvas.viewportWidth() !== null));
             i0.ɵɵadvance();
             i0.ɵɵproperty("size", 14);
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("is-on", ctx.canvas.measure());
-            i0.ɵɵattribute("aria-pressed", ctx.canvas.measure());
+            i0.ɵɵproperty("pressed", ctx.canvas.measure())("title", ctx.railTitle("Measure", ctx.canvas.measure()));
             i0.ɵɵadvance();
             i0.ɵɵproperty("size", 14);
             i0.ɵɵadvance(2);
@@ -317,7 +309,7 @@ export class PrismCanvasToolbarComponent {
             i0.ɵɵadvance(5);
             i0.ɵɵrepeater(ctx.bgs);
             i0.ɵɵadvance(4);
-            i0.ɵɵconditional(ctx.chips().length > 0 ? 25 : -1);
+            i0.ɵɵconditional(ctx.chips().length > 0 ? 24 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵrepeater(ctx.states);
             i0.ɵɵadvance(5);
@@ -326,10 +318,10 @@ export class PrismCanvasToolbarComponent {
             i0.ɵɵclassProp("is-on", ctx.canvas.viewportWidth() === null);
             i0.ɵɵadvance(2);
             i0.ɵɵrepeater(ctx.viewports);
-        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] {\n    display: contents;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n.prism-toolrail[_ngcontent-%COMP%] {\n    position: absolute;\n    top: var(--%NS%prism-canvas-overlay-top, 12px);\n    right: var(--%NS%prism-canvas-overlay-inline, 20px);\n    z-index: 5;\n    display: flex;\n    flex-direction: column;\n    gap: var(--%NS%sp-1);\n    align-items: center;\n    padding: var(--%NS%sp-2);\n    anchor-name: --prism-toolrail;\n    background: var(--%NS%prism-bg-elevated);\n    border: 1px solid var(--%NS%prism-border-strong);\n    border-radius: var(--%NS%radius-md);\n    box-shadow: 0 4px 16px -6px rgb(0 0 0 / 40%);\n}\n\n.prism-toolrail.has-rulers[_ngcontent-%COMP%] {\n    --%NS%prism-canvas-overlay-top: 28px;\n    --%NS%prism-canvas-overlay-inline: 28px;\n}\n\n.prism-toolrail__zoom[_ngcontent-%COMP%] {\n    width: 100%;\n    padding-bottom: var(--%NS%sp-1);\n    font-family: var(--%NS%font-mono);\n    font-size: 9px;\n    color: var(--%NS%prism-text-ghost);\n    text-align: center;\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n\n\n\n.prism-toolrail__vp[_ngcontent-%COMP%] {\n    display: block;\n    color: var(--%NS%prism-measure);\n}\n\n.prism-toolrail__btn[_ngcontent-%COMP%] {\n    display: grid;\n    place-items: center;\n    width: 26px;\n    height: 26px;\n    padding: 0;\n    color: var(--%NS%prism-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--%NS%radius-xs);\n}\n\n.prism-toolrail__btn[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text);\n}\n\n.prism-toolrail__btn[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 1px;\n}\n\n.prism-toolrail__btn.is-on[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text);\n    background: color-mix(in srgb, var(--%NS%prism-primary) 18%, transparent);\n}\n\n.prism-toolrail__sep[_ngcontent-%COMP%] {\n    width: 14px;\n    height: 1px;\n    margin: var(--%NS%sp-1) 0;\n    background: var(--%NS%prism-border);\n}\n\n.prism-toolmenu[_ngcontent-%COMP%] {\n    inset: auto;\n    gap: var(--%NS%sp-2);\n    padding: var(--%NS%sp-3);\n    margin: 0;\n    margin-inline-end: var(--%NS%sp-2);\n    position-area: inline-start;\n    position-anchor: --prism-toolrail;\n    position-try-fallbacks: flip-inline;\n    background: var(--%NS%prism-bg-elevated);\n    border: 1px solid var(--%NS%prism-border-strong);\n    border-radius: var(--%NS%radius-md);\n    box-shadow: 0 8px 28px -10px rgb(0 0 0 / 45%);\n}\n\n\n\n\n\n.prism-toolmenu[_ngcontent-%COMP%]:popover-open {\n    display: flex;\n    flex-direction: column;\n}\n\n.prism-toolmenu__lbl[_ngcontent-%COMP%] {\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n}\n\n.prism-toolmenu__row[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--%NS%sp-1);\n}\n\n.prism-toolmenu__row[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n    padding: 2px var(--%NS%sp-3);\n    font-size: var(--%NS%fs-md);\n    color: var(--%NS%prism-text-2);\n    white-space: nowrap;\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: var(--%NS%radius-xs);\n}\n\n.prism-toolmenu__row[_ngcontent-%COMP%]   button.is-on[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text);\n    background: color-mix(in srgb, var(--%NS%prism-primary) 16%, transparent);\n    border-color: color-mix(in srgb, var(--%NS%prism-primary) 38%, transparent);\n}\n\n.prism-toolmenu__row[_ngcontent-%COMP%]   button.is-rec[_ngcontent-%COMP%] {\n    border-color: color-mix(in srgb, var(--%NS%prism-primary) 30%, transparent);\n}\n\n\n.prism-toolmenu__row[_ngcontent-%COMP%]   button.is-na[_ngcontent-%COMP%] {\n    border-style: dashed;\n}\n\n.prism-toolmenu__row[_ngcontent-%COMP%]   button.is-na[_ngcontent-%COMP%]:not(.is-on) {\n    color: var(--%NS%prism-text-ghost);\n}"] });
+        } }, dependencies: [PrismIconComponent, PrismIconButtonComponent], styles: ["[_nghost-%COMP%] {\n    display: contents;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n.prism-toolrail[_ngcontent-%COMP%] {\n    \n    --%NS%prism-icon-button-fg: var(--%NS%prism-canvas-overlay-muted);\n    --%NS%prism-icon-button-fg-hover: var(--%NS%prism-canvas-overlay-fg);\n    --%NS%prism-icon-button-bg-hover: color-mix(in srgb, var(--%NS%prism-canvas-overlay-fg) 8%, transparent);\n    --%NS%prism-icon-button-active-fg: var(--%NS%prism-canvas-overlay-primary);\n    --%NS%prism-icon-button-active-bg: var(--%NS%prism-canvas-overlay-active);\n    --%NS%prism-icon-button-focus: var(--%NS%prism-canvas-overlay-primary);\n\n    position: absolute;\n    top: var(--%NS%prism-canvas-overlay-top, 12px);\n    right: var(--%NS%prism-canvas-overlay-inline, 20px);\n    z-index: 5;\n    display: flex;\n    flex-direction: column;\n    gap: var(--%NS%sp-1);\n    align-items: center;\n    padding: var(--%NS%sp-2);\n    anchor-name: --prism-toolrail;\n    background: var(--%NS%prism-canvas-overlay-bg);\n    border: 1px solid var(--%NS%prism-canvas-overlay-border);\n    border-radius: var(--%NS%radius-md);\n    box-shadow: var(--%NS%prism-shadow-md);\n}\n\n.prism-toolrail.has-rulers[_ngcontent-%COMP%] {\n    --%NS%prism-canvas-overlay-top: 28px;\n    --%NS%prism-canvas-overlay-inline: 28px;\n}\n\n.prism-toolrail__zoom[_ngcontent-%COMP%] {\n    width: 100%;\n    padding-bottom: var(--%NS%sp-1);\n    font-family: var(--%NS%font-mono);\n    font-size: 11px;\n    color: var(--%NS%prism-canvas-overlay-muted);\n    text-align: center;\n    cursor: default;\n    border-bottom: 1px solid var(--%NS%prism-canvas-overlay-border);\n}\n\n\n.prism-toolrail[_ngcontent-%COMP%]   .prism-icon-button--pressed[_ngcontent-%COMP%] {\n    box-shadow: inset 0 -1.5px 0 0 var(--%NS%prism-canvas-overlay-primary);\n}\n\n.prism-toolrail__sep[_ngcontent-%COMP%] {\n    width: 14px;\n    height: 1px;\n    margin: var(--%NS%sp-1) 0;\n    background: var(--%NS%prism-canvas-overlay-border);\n}\n\n.prism-toolmenu[_ngcontent-%COMP%] {\n    inset: auto;\n    gap: var(--%NS%sp-2);\n    padding: var(--%NS%sp-3);\n    margin: 0;\n    margin-inline-end: var(--%NS%sp-2);\n    position-area: inline-start;\n    position-anchor: --prism-toolrail;\n    position-try-fallbacks: flip-inline;\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\n\n\n\n.prism-toolmenu[_ngcontent-%COMP%]:popover-open {\n    display: flex;\n    flex-direction: column;\n}\n\n.prism-toolmenu__lbl[_ngcontent-%COMP%] {\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n}\n\n.prism-toolmenu__row[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--%NS%sp-1);\n}\n\n.prism-toolmenu__row[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n    padding: 2px var(--%NS%sp-3);\n    font-size: var(--%NS%fs-md);\n    color: var(--%NS%prism-text-2);\n    white-space: nowrap;\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--%NS%prism-border-strong);\n    border-radius: var(--%NS%radius-xs);\n}\n\n.prism-toolmenu__row[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text);\n    background: var(--%NS%prism-input-bg);\n}\n\n.prism-toolmenu__row[_ngcontent-%COMP%]   button.is-on[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-primary);\n    background: var(--%NS%prism-primary-bg);\n    border-color: color-mix(in srgb, var(--%NS%prism-primary) 55%, transparent);\n}\n\n\n.prism-toolmenu__row[_ngcontent-%COMP%]   button.is-rec[_ngcontent-%COMP%] {\n    border-color: var(--%NS%prism-primary);\n}\n\n\n.prism-toolmenu__row[_ngcontent-%COMP%]   button.is-na[_ngcontent-%COMP%] {\n    border-style: dashed;\n}\n\n.prism-toolmenu__row[_ngcontent-%COMP%]   button.is-na[_ngcontent-%COMP%]:not(.is-on) {\n    color: var(--%NS%prism-text-muted);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismCanvasToolbarComponent, [{
         type: Component,
-        args: [{ selector: 'prism-canvas-toolbar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: "<!-- Anchored in .prism-canvas-wrap, absolute, not fixed:\n     a viewport-fixed rail would float over the sidebar and the panel, stay\n     put while those are resized, and sit on top of running text in the API\n     view where it has no business being. -->\n<div\n    class=\"prism-toolrail\"\n    [class.has-rulers]=\"canvas.rulers()\">\n    <span class=\"prism-toolrail__zoom\">\n        {{ Math.round(canvas.zoom() * 100) }}%\n        @if (canvas.viewportWidth() !== null) {\n            <span class=\"prism-toolrail__vp\">{{ canvas.viewportWidth() }}px</span>\n        }\n    </span>\n\n    <button\n        type=\"button\"\n        class=\"prism-toolrail__btn\"\n        [class.is-on]=\"canvas.guides()\"\n        (click)=\"canvas.toggleGuides()\"\n        title=\"Toggle guides\"\n        aria-label=\"Toggle guides\"\n        [attr.aria-pressed]=\"canvas.guides()\">\n        <prism-icon\n            name=\"crosshair\"\n            [size]=\"14\" />\n    </button>\n\n    <button\n        type=\"button\"\n        class=\"prism-toolrail__btn\"\n        [class.is-on]=\"canvas.rulers()\"\n        (click)=\"canvas.toggleRulers()\"\n        title=\"Toggle rulers\"\n        aria-label=\"Toggle rulers\"\n        [attr.aria-pressed]=\"canvas.rulers()\">\n        <prism-icon\n            name=\"move\"\n            [size]=\"14\" />\n    </button>\n\n    <button\n        type=\"button\"\n        class=\"prism-toolrail__btn\"\n        [class.is-on]=\"canvas.viewportWidth() !== null\"\n        (click)=\"canvas.toggleViewport()\"\n        title=\"Toggle viewport width\"\n        aria-label=\"Toggle viewport width\"\n        [attr.aria-pressed]=\"canvas.viewportWidth() !== null\">\n        <prism-icon\n            name=\"ruler-dimension\"\n            [size]=\"14\" />\n    </button>\n\n    <button\n        type=\"button\"\n        class=\"prism-toolrail__btn\"\n        [class.is-on]=\"canvas.measure()\"\n        (click)=\"canvas.toggleMeasure()\"\n        title=\"Toggle measure tool\"\n        aria-label=\"Toggle measure tool\"\n        [attr.aria-pressed]=\"canvas.measure()\">\n        <prism-icon\n            name=\"ruler\"\n            [size]=\"14\" />\n    </button>\n\n    <button\n        type=\"button\"\n        class=\"prism-toolrail__btn\"\n        popovertarget=\"prism-tools\"\n        title=\"Canvas, state, zoom and width\"\n        aria-label=\"Canvas, state, zoom and width\">\n        <prism-icon\n            name=\"sliders-horizontal\"\n            [size]=\"14\" />\n    </button>\n\n    <span class=\"prism-toolrail__sep\"></span>\n\n    <button\n        type=\"button\"\n        class=\"prism-toolrail__btn\"\n        popovertarget=\"prism-template\"\n        title=\"Toggle Angular template\"\n        aria-label=\"Toggle Angular template\">\n        <prism-icon\n            name=\"code\"\n            [size]=\"14\" />\n    </button>\n</div>\n\n<!-- Only the choosers. The toggles stay outside: you flip guides,\n     rulers and the viewport constraint constantly while working, and a\n     toggle two clicks deep is the classic mistake. What you only ever\n     set may live in a menu. The states are toggles too, but set once per\n     variant and dropped with it, like the background. -->\n<div\n    popover\n    id=\"prism-tools\"\n    class=\"prism-toolmenu\"\n    role=\"dialog\"\n    aria-label=\"Canvas, state, zoom and width\">\n    <span class=\"prism-toolmenu__lbl\">Canvas</span>\n    <div class=\"prism-toolmenu__row\">\n        @for (bg of bgs; track bg) {\n            <button\n                type=\"button\"\n                [class.is-on]=\"variantBg.effective() === bg\"\n                [class.is-rec]=\"variantBg.recommended() === bg\"\n                [attr.title]=\"bgTitle(bg)\"\n                (click)=\"setBg(bg)\">\n                {{ capitalize(bg) }}\n            </button>\n        }\n    </div>\n\n    <span class=\"prism-toolmenu__lbl\">State</span>\n    @if (chips().length > 0) {\n        <div class=\"prism-toolmenu__row\">\n            @for (chip of chips(); track chip.index) {\n                <button\n                    type=\"button\"\n                    class=\"is-rec\"\n                    [class.is-on]=\"chip.active\"\n                    [class.is-na]=\"!chip.fits\"\n                    [attr.aria-pressed]=\"chip.active\"\n                    [attr.title]=\"chip.title\"\n                    (click)=\"pickState(chip)\">\n                    {{ chip.name }}\n                </button>\n            }\n        </div>\n    }\n    <div class=\"prism-toolmenu__row\">\n        @for (state of states; track state) {\n            <button\n                type=\"button\"\n                [class.is-on]=\"pseudoState.isForced(state)\"\n                [class.is-rec]=\"pseudoState.isDeclared(state)\"\n                [attr.aria-pressed]=\"pseudoState.isForced(state)\"\n                [attr.title]=\"stateTitle(state)\"\n                (click)=\"pseudoState.toggle(state)\">\n                :{{ state }}\n            </button>\n        }\n    </div>\n\n    <span class=\"prism-toolmenu__lbl\">Zoom</span>\n    <div class=\"prism-toolmenu__row\">\n        @for (z of zooms; track z.value) {\n            <button\n                type=\"button\"\n                [class.is-on]=\"canvas.zoom() === z.value\"\n                (click)=\"canvas.setZoom(z.value)\">\n                {{ z.label }}\n            </button>\n        }\n    </div>\n\n    <span class=\"prism-toolmenu__lbl\">Width</span>\n    <div class=\"prism-toolmenu__row\">\n        <button\n            type=\"button\"\n            [class.is-on]=\"canvas.viewportWidth() === null\"\n            (click)=\"canvas.setViewportWidth(null)\">\n            Auto\n        </button>\n        @for (w of viewports; track w) {\n            <button\n                type=\"button\"\n                [class.is-on]=\"canvas.viewportWidth() === w\"\n                (click)=\"canvas.setViewportWidth(w)\">\n                {{ w }}\n            </button>\n        }\n    </div>\n</div>\n", styles: [":host {\n    display: contents;\n}\n\n/* Canvas overlays sit at --prism-canvas-overlay-*, which the stage grows\n   when the rulers claim its top and left edges (see the\n   .prism-canvas-stage[data-rulers] rule in prism-renderer.component.ts).\n   prism-canvas-bg-pill simply inherits those; this rail cannot, because\n   capture mode requires it to be a direct child of .prism-canvas-wrap\n   outside the stage. So it mirrors the same values off canvas.rulers()\n   instead, so keep the two in step.\n\n   z-index outranks the rulers' 4 rather than matching it: the rail is a\n   control and they are chrome, and the toolbar renders before the\n   renderer in the shell, so an equal z-index let the rulers paint over\n   the buttons. */\n.prism-toolrail {\n    position: absolute;\n    top: var(--prism-canvas-overlay-top, 12px);\n    right: var(--prism-canvas-overlay-inline, 20px);\n    z-index: 5;\n    display: flex;\n    flex-direction: column;\n    gap: var(--sp-1);\n    align-items: center;\n    padding: var(--sp-2);\n    anchor-name: --prism-toolrail;\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border-strong);\n    border-radius: var(--radius-md);\n    box-shadow: 0 4px 16px -6px rgb(0 0 0 / 40%);\n}\n\n.prism-toolrail.has-rulers {\n    --prism-canvas-overlay-top: 28px;\n    --prism-canvas-overlay-inline: 28px;\n}\n\n.prism-toolrail__zoom {\n    width: 100%;\n    padding-bottom: var(--sp-1);\n    font-family: var(--font-mono);\n    font-size: 9px;\n    color: var(--prism-text-ghost);\n    text-align: center;\n    border-bottom: 1px solid var(--prism-border);\n}\n\n/* The one number on this rail that is not a percentage, so it takes the\n   measurement colour the theme already reserves for rulers and guides\n   rather than a second neutral that would read as a second zoom. */\n.prism-toolrail__vp {\n    display: block;\n    color: var(--prism-measure);\n}\n\n.prism-toolrail__btn {\n    display: grid;\n    place-items: center;\n    width: 26px;\n    height: 26px;\n    padding: 0;\n    color: var(--prism-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--radius-xs);\n}\n\n.prism-toolrail__btn:hover {\n    color: var(--prism-text);\n}\n\n.prism-toolrail__btn:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 1px;\n}\n\n.prism-toolrail__btn.is-on {\n    color: var(--prism-text);\n    background: color-mix(in srgb, var(--prism-primary) 18%, transparent);\n}\n\n.prism-toolrail__sep {\n    width: 14px;\n    height: 1px;\n    margin: var(--sp-1) 0;\n    background: var(--prism-border);\n}\n\n.prism-toolmenu {\n    inset: auto;\n    gap: var(--sp-2);\n    padding: var(--sp-3);\n    margin: 0;\n    margin-inline-end: var(--sp-2);\n    position-area: inline-start;\n    position-anchor: --prism-toolrail;\n    position-try-fallbacks: flip-inline;\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border-strong);\n    border-radius: var(--radius-md);\n    box-shadow: 0 8px 28px -10px rgb(0 0 0 / 45%);\n}\n\n/* display belongs on :popover-open and nowhere else (see the note in\n   prism-template-popover.component.ts). An author display on the base\n   rule outranks the UA's [popover]:not(:popover-open) { display: none }\n   and pins the menu open. */\n.prism-toolmenu:popover-open {\n    display: flex;\n    flex-direction: column;\n}\n\n.prism-toolmenu__lbl {\n    font-size: var(--fs-xs);\n    color: var(--prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n}\n\n.prism-toolmenu__row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--sp-1);\n}\n\n.prism-toolmenu__row button {\n    padding: 2px var(--sp-3);\n    font-size: var(--fs-md);\n    color: var(--prism-text-2);\n    white-space: nowrap;\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-xs);\n}\n\n.prism-toolmenu__row button.is-on {\n    color: var(--prism-text);\n    background: color-mix(in srgb, var(--prism-primary) 16%, transparent);\n    border-color: color-mix(in srgb, var(--prism-primary) 38%, transparent);\n}\n\n.prism-toolmenu__row button.is-rec {\n    border-color: color-mix(in srgb, var(--prism-primary) 30%, transparent);\n}\n\n/* A state that does not fit the shown variant: still selectable, but nothing shows. The tooltip names why. */\n.prism-toolmenu__row button.is-na {\n    border-style: dashed;\n}\n\n.prism-toolmenu__row button.is-na:not(.is-on) {\n    color: var(--prism-text-ghost);\n}\n"] }]
+        args: [{ selector: 'prism-canvas-toolbar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent, PrismIconButtonComponent], template: "<!-- Anchored in .prism-canvas-wrap, absolute, not fixed:\n     a viewport-fixed rail would float over the sidebar and the panel, stay\n     put while those are resized, and sit on top of running text in the API\n     view where it has no business being. -->\n<div\n    class=\"prism-toolrail\"\n    [class.has-rulers]=\"canvas.rulers()\">\n    <span\n        class=\"prism-toolrail__zoom\"\n        [attr.title]=\"zoomTitle()\"\n        >{{ Math.round(canvas.zoom() * 100) }}%</span\n    >\n\n    <button\n        prismIconButton\n        size=\"xs\"\n        [pressed]=\"canvas.guides()\"\n        (click)=\"canvas.toggleGuides()\"\n        [title]=\"railTitle('Guides', canvas.guides())\"\n        aria-label=\"Guides\">\n        <prism-icon\n            name=\"crosshair\"\n            [size]=\"14\" />\n    </button>\n\n    <button\n        prismIconButton\n        size=\"xs\"\n        [pressed]=\"canvas.rulers()\"\n        (click)=\"canvas.toggleRulers()\"\n        [title]=\"railTitle('Rulers', canvas.rulers())\"\n        aria-label=\"Rulers\">\n        <prism-icon\n            name=\"move\"\n            [size]=\"14\" />\n    </button>\n\n    <button\n        prismIconButton\n        size=\"xs\"\n        [pressed]=\"canvas.viewportWidth() !== null\"\n        (click)=\"canvas.toggleViewport()\"\n        [title]=\"railTitle('Viewport width', canvas.viewportWidth() !== null)\"\n        aria-label=\"Viewport width\">\n        <prism-icon\n            name=\"ruler-dimension\"\n            [size]=\"14\" />\n    </button>\n\n    <button\n        prismIconButton\n        size=\"xs\"\n        [pressed]=\"canvas.measure()\"\n        (click)=\"canvas.toggleMeasure()\"\n        [title]=\"railTitle('Measure', canvas.measure())\"\n        aria-label=\"Measure\">\n        <prism-icon\n            name=\"ruler\"\n            [size]=\"14\" />\n    </button>\n\n    <button\n        prismIconButton\n        size=\"xs\"\n        popovertarget=\"prism-tools\"\n        title=\"Canvas, state, zoom and width\"\n        aria-label=\"Canvas, state, zoom and width\">\n        <prism-icon\n            name=\"sliders-horizontal\"\n            [size]=\"14\" />\n    </button>\n\n    <span class=\"prism-toolrail__sep\"></span>\n\n    <button\n        prismIconButton\n        size=\"xs\"\n        popovertarget=\"prism-template\"\n        title=\"Angular template\"\n        aria-label=\"Angular template\">\n        <prism-icon\n            name=\"code\"\n            [size]=\"14\" />\n    </button>\n</div>\n\n<!-- Only the choosers. The toggles stay outside: you flip guides,\n     rulers and the viewport constraint constantly while working, and a\n     toggle two clicks deep is the classic mistake. What you only ever\n     set may live in a menu. The states are toggles too, but set once per\n     variant and dropped with it, like the background. -->\n<div\n    popover\n    id=\"prism-tools\"\n    class=\"prism-toolmenu\"\n    role=\"dialog\"\n    aria-label=\"Canvas, state, zoom and width\">\n    <span class=\"prism-toolmenu__lbl\">Canvas</span>\n    <div class=\"prism-toolmenu__row\">\n        @for (bg of bgs; track bg) {\n            <button\n                type=\"button\"\n                [class.is-on]=\"variantBg.effective() === bg\"\n                [class.is-rec]=\"variantBg.recommended() === bg\"\n                [attr.title]=\"bgTitle(bg)\"\n                (click)=\"setBg(bg)\">\n                {{ capitalize(bg) }}\n            </button>\n        }\n    </div>\n\n    <span class=\"prism-toolmenu__lbl\">State</span>\n    @if (chips().length > 0) {\n        <div class=\"prism-toolmenu__row\">\n            @for (chip of chips(); track chip.index) {\n                <button\n                    type=\"button\"\n                    class=\"is-rec\"\n                    [class.is-on]=\"chip.active\"\n                    [class.is-na]=\"!chip.fits\"\n                    [attr.aria-pressed]=\"chip.active\"\n                    [attr.title]=\"chip.title\"\n                    (click)=\"pickState(chip)\">\n                    {{ chip.name }}\n                </button>\n            }\n        </div>\n    }\n    <div class=\"prism-toolmenu__row\">\n        @for (state of states; track state) {\n            <button\n                type=\"button\"\n                [class.is-on]=\"pseudoState.isForced(state)\"\n                [class.is-rec]=\"pseudoState.isDeclared(state)\"\n                [attr.aria-pressed]=\"pseudoState.isForced(state)\"\n                [attr.title]=\"stateTitle(state)\"\n                (click)=\"pseudoState.toggle(state)\">\n                :{{ state }}\n            </button>\n        }\n    </div>\n\n    <span class=\"prism-toolmenu__lbl\">Zoom</span>\n    <div class=\"prism-toolmenu__row\">\n        @for (z of zooms; track z.value) {\n            <button\n                type=\"button\"\n                [class.is-on]=\"canvas.zoom() === z.value\"\n                (click)=\"canvas.setZoom(z.value)\">\n                {{ z.label }}\n            </button>\n        }\n    </div>\n\n    <span class=\"prism-toolmenu__lbl\">Width</span>\n    <div class=\"prism-toolmenu__row\">\n        <button\n            type=\"button\"\n            [class.is-on]=\"canvas.viewportWidth() === null\"\n            (click)=\"canvas.setViewportWidth(null)\">\n            Auto\n        </button>\n        @for (w of viewports; track w) {\n            <button\n                type=\"button\"\n                [class.is-on]=\"canvas.viewportWidth() === w\"\n                (click)=\"canvas.setViewportWidth(w)\">\n                {{ w }}\n            </button>\n        }\n    </div>\n</div>\n", styles: [":host {\n    display: contents;\n}\n\n/* Canvas overlays sit at --prism-canvas-overlay-*, which the stage grows\n   when the rulers claim its top and left edges (see the\n   .prism-canvas-stage[data-rulers] rule in prism-renderer.component.ts).\n   prism-canvas-bg-pill simply inherits those; this rail cannot, because\n   capture mode requires it to be a direct child of .prism-canvas-wrap\n   outside the stage. So it mirrors the same values off canvas.rulers()\n   instead, so keep the two in step.\n\n   z-index outranks the rulers' 4 rather than matching it: the rail is a\n   control and they are chrome, and the toolbar renders before the\n   renderer in the shell, so an equal z-index let the rulers paint over\n   the buttons. */\n.prism-toolrail {\n    /* The rail's buttons take the overlay colours of the canvas ground. */\n    --prism-icon-button-fg: var(--prism-canvas-overlay-muted);\n    --prism-icon-button-fg-hover: var(--prism-canvas-overlay-fg);\n    --prism-icon-button-bg-hover: color-mix(in srgb, var(--prism-canvas-overlay-fg) 8%, transparent);\n    --prism-icon-button-active-fg: var(--prism-canvas-overlay-primary);\n    --prism-icon-button-active-bg: var(--prism-canvas-overlay-active);\n    --prism-icon-button-focus: var(--prism-canvas-overlay-primary);\n\n    position: absolute;\n    top: var(--prism-canvas-overlay-top, 12px);\n    right: var(--prism-canvas-overlay-inline, 20px);\n    z-index: 5;\n    display: flex;\n    flex-direction: column;\n    gap: var(--sp-1);\n    align-items: center;\n    padding: var(--sp-2);\n    anchor-name: --prism-toolrail;\n    background: var(--prism-canvas-overlay-bg);\n    border: 1px solid var(--prism-canvas-overlay-border);\n    border-radius: var(--radius-md);\n    box-shadow: var(--prism-shadow-md);\n}\n\n.prism-toolrail.has-rulers {\n    --prism-canvas-overlay-top: 28px;\n    --prism-canvas-overlay-inline: 28px;\n}\n\n.prism-toolrail__zoom {\n    width: 100%;\n    padding-bottom: var(--sp-1);\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--prism-canvas-overlay-muted);\n    text-align: center;\n    cursor: default;\n    border-bottom: 1px solid var(--prism-canvas-overlay-border);\n}\n\n/* A pressed tool also gets an edge, so \"on\" never rests on the tint alone. */\n.prism-toolrail .prism-icon-button--pressed {\n    box-shadow: inset 0 -1.5px 0 0 var(--prism-canvas-overlay-primary);\n}\n\n.prism-toolrail__sep {\n    width: 14px;\n    height: 1px;\n    margin: var(--sp-1) 0;\n    background: var(--prism-canvas-overlay-border);\n}\n\n.prism-toolmenu {\n    inset: auto;\n    gap: var(--sp-2);\n    padding: var(--sp-3);\n    margin: 0;\n    margin-inline-end: var(--sp-2);\n    position-area: inline-start;\n    position-anchor: --prism-toolrail;\n    position-try-fallbacks: flip-inline;\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/* display belongs on :popover-open and nowhere else (see the note in\n   prism-template-popover.component.ts). An author display on the base\n   rule outranks the UA's [popover]:not(:popover-open) { display: none }\n   and pins the menu open. */\n.prism-toolmenu:popover-open {\n    display: flex;\n    flex-direction: column;\n}\n\n.prism-toolmenu__lbl {\n    font-size: var(--fs-xs);\n    color: var(--prism-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n}\n\n.prism-toolmenu__row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--sp-1);\n}\n\n.prism-toolmenu__row button {\n    padding: 2px var(--sp-3);\n    font-size: var(--fs-md);\n    color: var(--prism-text-2);\n    white-space: nowrap;\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--prism-border-strong);\n    border-radius: var(--radius-xs);\n}\n\n.prism-toolmenu__row button:hover {\n    color: var(--prism-text);\n    background: var(--prism-input-bg);\n}\n\n.prism-toolmenu__row button.is-on {\n    color: var(--prism-primary);\n    background: var(--prism-primary-bg);\n    border-color: color-mix(in srgb, var(--prism-primary) 55%, transparent);\n}\n\n/* The variant's own recommendation: a primary contour, so it reads without the tooltip. */\n.prism-toolmenu__row button.is-rec {\n    border-color: var(--prism-primary);\n}\n\n/* A state that does not fit the shown variant: still selectable, but nothing shows. The tooltip names why. */\n.prism-toolmenu__row button.is-na {\n    border-style: dashed;\n}\n\n.prism-toolmenu__row button.is-na:not(.is-on) {\n    color: var(--prism-text-muted);\n}\n"] }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasToolbarComponent, { className: "PrismCanvasToolbarComponent", filePath: "app/canvas/prism-canvas-toolbar.component.ts", lineNumber: 38 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasToolbarComponent, { className: "PrismCanvasToolbarComponent", filePath: "app/canvas/prism-canvas-toolbar.component.ts", lineNumber: 39 }); })();

package/dist/app/canvas/prism-template-popover.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-template-popover.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-template-popover.component.ts"],"names":[],"mappings":";AAmCA,qBAQa,6BAA6B;IACtC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAEhE,SAAS,CAAC,QAAQ,CAAC,MAAM,kDAAiB;IAC1C,OAAO,CAAC,gBAAgB,CAA8C;IAEtE,SAAS,CAAC,QAAQ,CAAC,OAAO,yCAgBvB;IAEH,SAAS,CAAC,QAAQ,CAAC,WAAW,yCAK3B;IAEH,SAAS,CAAC,IAAI,IAAI,IAAI;yCAhCb,6BAA6B;2CAA7B,6BAA6B;CAyCzC"}
+{"version":3,"file":"prism-template-popover.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-template-popover.component.ts"],"names":[],"mappings":";AAqCA,qBAQa,6BAA6B;IACtC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAEhE,SAAS,CAAC,QAAQ,CAAC,MAAM,kDAAiB;IAC1C,OAAO,CAAC,gBAAgB,CAA8C;IAEtE,SAAS,CAAC,QAAQ,CAAC,OAAO,yCAiBvB;IAEH,SAAS,CAAC,QAAQ,CAAC,WAAW,yCAK3B;IAEH,SAAS,CAAC,IAAI,IAAI,IAAI;yCAjCb,6BAA6B;2CAA7B,6BAA6B;CA0CzC"}

package/dist/app/canvas/prism-template-popover.component.js

@@ -1,6 +1,8 @@
 import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
 import { PrismIconComponent } from '../icons/prism-icon.component.js';
-import { generateSnippet } from '../renderer/snippet-generator.js';
+import { activeCase } from '../renderer/composition.js';
+import { unboundInputs } from '../renderer/input-bindings.js';
+import { generateCompositionSnippet, generateSnippet, subjectAttributes } from '../renderer/snippet-generator.js';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import { PrismRendererService } from '../services/prism-renderer.service.js';
 import * as i0 from "@angular/core";
@@ -8,7 +10,7 @@ function esc(s) {
     return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
 function tokenizeXml(code) {
-    const re = /(\/\/[^\n]*)|(<\/?[\w-]+)|(\[[\w.]+\]|[\w-]+)=|"([^"]*)"|(\/>|>)|(\n)|([^<["\n/>=]+|[/=])/g;
+    const re = /(\/\/[^\n]*)|(<\/?[\w-]+)|(\[[\w.]+\]|[\w-]+)=|"([^"]*)"|(\/>|>)|(\n)|([^<["\n/>=]+|[\s\S])/g;
     let out = '';
     let m;
     while ((m = re.exec(code)) !== null) {
@@ -46,10 +48,17 @@ export class PrismTemplatePopoverComponent {
         const comp = this.navigationService.activeComponent();
         if (!comp)
             return '';
-        const variant = comp.meta.showcaseConfig.variants?.[this.rendererService.activeVariantIndex()];
+        const variantIndex = this.rendererService.activeVariantIndex();
+        const variant = comp.meta.showcaseConfig.variants?.[variantIndex];
         const explicitKeys = variant?.inputs ? new Set(Object.keys(variant.inputs)) : undefined;
+        const values = this.rendererService.inputValues();
+        const composed = activeCase(comp, variantIndex);
+        // A composed variant shows the composition as written, with the subject's current values where it stands.
+        if (composed) {
+            return generateCompositionSnippet(composed.template, subjectAttributes(comp.meta.inputs, values, explicitKeys, unboundInputs(comp, variantIndex)));
+        }
         const directiveOptions = comp.meta.componentMeta.isDirective ? { host: comp.meta.showcaseConfig.host } : undefined;
-        return generateSnippet(comp.meta.componentMeta.selector, comp.meta.inputs, this.rendererService.inputValues(), explicitKeys, this.rendererService.activeContent(), directiveOptions);
+        return generateSnippet(comp.meta.componentMeta.selector, comp.meta.inputs, values, explicitKeys, this.rendererService.activeContent(), directiveOptions);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "snippet" }] : /* istanbul ignore next */ []));
     highlighted = computed(() => {
@@ -99,10 +108,10 @@ export class PrismTemplatePopoverComponent {
             i0.ɵɵproperty("size", 13);
             i0.ɵɵadvance();
             i0.ɵɵproperty("innerHTML", ctx.highlighted(), i0.ɵɵsanitizeHtml);
-        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] {\n    display: contents;\n}\n\n\n\n\n\n\n\n.tpl-popover[_ngcontent-%COMP%] {\n    inset: auto;\n    width: 520px;\n    max-width: calc(100vw - var(--%NS%sp-6));\n    max-height: min(420px, calc(100vh - var(--%NS%sp-7)));\n    margin: var(--%NS%sp-2) 0 0 0;\n    position-area: block-end span-inline-start;\n    position-anchor: --prism-toolrail;\n    position-try-fallbacks: flip-block, flip-inline;\n    overflow: hidden;\n    background: var(--%NS%prism-bg-elevated);\n    border: 1px solid var(--%NS%prism-border-strong);\n    border-radius: var(--%NS%radius-lg, 10px);\n    box-shadow:\n        0 20px 60px rgb(0 0 0 / 45%),\n        0 0 0 1px color-mix(in srgb, var(--%NS%prism-primary) 10%, transparent);\n    animation: _ngcontent-%COMP%_tpl-fade-in var(--%NS%dur-fast, 0.15s) var(--%NS%ease-default, ease-out);\n}\n\n\n\n\n\n\n\n.tpl-popover[_ngcontent-%COMP%]:popover-open {\n    display: flex;\n    flex-direction: column;\n}\n\n@keyframes _ngcontent-%COMP%_tpl-fade-in {\n    from {\n        opacity: 0;\n        transform: translateY(-8px);\n    }\n\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.tpl-popover-head[_ngcontent-%COMP%] {\n    display: flex;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n    height: 40px;\n    padding: 0 12px 0 16px;\n    background: linear-gradient(180deg, var(--%NS%prism-bg-surface), var(--%NS%prism-bg-elevated));\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.tpl-popover-head[_ngcontent-%COMP%]    > prism-icon[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text-muted);\n}\n\n.tpl-popover-head[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: var(--%NS%fs-xs);\n    font-weight: 700;\n    color: var(--%NS%prism-text-2);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n}\n\n.tpl-popover-copy[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 5px;\n    align-items: center;\n    height: 26px;\n    padding: 0 10px;\n    font-family: var(--%NS%font-sans);\n    font-size: var(--%NS%fs-sm);\n    font-weight: 500;\n    color: var(--%NS%prism-primary);\n    cursor: pointer;\n    background: color-mix(in srgb, var(--%NS%prism-primary) 12%, transparent);\n    border: 1px solid color-mix(in srgb, var(--%NS%prism-primary) 25%, transparent);\n    border-radius: var(--%NS%radius-sm, 5px);\n    transition: background var(--%NS%dur-fast);\n}\n\n.tpl-popover-copy[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--%NS%prism-primary) 20%, transparent);\n}\n\n.tpl-popover-close[_ngcontent-%COMP%] {\n    display: grid;\n    place-items: center;\n    width: 26px;\n    height: 26px;\n    color: var(--%NS%prism-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--%NS%radius-sm, 5px);\n    transition:\n        background var(--%NS%dur-fast),\n        color var(--%NS%dur-fast);\n}\n\n.tpl-popover-close[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text);\n    background: var(--%NS%prism-input-bg);\n}\n\n.tpl-popover-body[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    padding: 14px 18px;\n    margin: 0;\n    overflow: auto;\n    font-family: var(--%NS%font-mono);\n    font-size: var(--%NS%fs-md);\n    line-height: 1.7;\n    color: var(--%NS%prism-text-2);\n    white-space: pre;\n    background: var(--%NS%prism-bg);\n}\n\n.tpl-popover-body[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 6px;\n    height: 6px;\n}\n\n.tpl-popover-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: var(--%NS%prism-border-strong);\n    border-radius: 3px;\n}\n\n[_nghost-%COMP%]     .tok-tag {\n    color: var(--%NS%prism-code-tag);\n}\n\n[_nghost-%COMP%]     .tok-attr {\n    color: var(--%NS%prism-code-attr);\n}\n\n[_nghost-%COMP%]     .tok-str {\n    color: var(--%NS%prism-code-str);\n}\n\n[_nghost-%COMP%]     .tok-com {\n    font-style: italic;\n    color: var(--%NS%prism-code-com);\n}"] });
+        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] {\n    display: contents;\n}\n\n\n\n\n\n\n\n.tpl-popover[_ngcontent-%COMP%] {\n    inset: auto;\n    width: 520px;\n    max-width: calc(100vw - var(--%NS%sp-6));\n    max-height: min(420px, calc(100vh - var(--%NS%sp-7)));\n    margin: var(--%NS%sp-2) 0 0 0;\n    position-area: block-end span-inline-start;\n    position-anchor: --prism-toolrail;\n    position-try-fallbacks: flip-block, flip-inline;\n    overflow: hidden;\n    background: var(--%NS%prism-bg-elevated);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: var(--%NS%radius-lg, 10px);\n    box-shadow: var(--%NS%prism-shadow-md);\n    animation: _ngcontent-%COMP%_tpl-fade-in var(--%NS%dur-fast, 0.15s) var(--%NS%ease-default, ease-out);\n}\n\n\n\n\n\n\n\n.tpl-popover[_ngcontent-%COMP%]:popover-open {\n    display: flex;\n    flex-direction: column;\n}\n\n@keyframes _ngcontent-%COMP%_tpl-fade-in {\n    from {\n        opacity: 0;\n        transform: translateY(-8px);\n    }\n\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.tpl-popover-head[_ngcontent-%COMP%] {\n    display: flex;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n    height: 40px;\n    padding: 0 12px 0 16px;\n    background: linear-gradient(180deg, var(--%NS%prism-bg-surface), var(--%NS%prism-bg-elevated));\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.tpl-popover-head[_ngcontent-%COMP%]    > prism-icon[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text-muted);\n}\n\n.tpl-popover-head[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: var(--%NS%fs-xs);\n    font-weight: 700;\n    color: var(--%NS%prism-text-2);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n}\n\n.tpl-popover-copy[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 5px;\n    align-items: center;\n    height: 26px;\n    padding: 0 10px;\n    font-family: var(--%NS%font-sans);\n    font-size: var(--%NS%fs-sm);\n    font-weight: 500;\n    color: var(--%NS%prism-primary);\n    cursor: pointer;\n    background: color-mix(in srgb, var(--%NS%prism-primary) 12%, transparent);\n    border: 1px solid color-mix(in srgb, var(--%NS%prism-primary) 25%, transparent);\n    border-radius: var(--%NS%radius-sm, 5px);\n    transition: background var(--%NS%dur-fast);\n}\n\n.tpl-popover-copy[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--%NS%prism-primary) 20%, transparent);\n}\n\n.tpl-popover-close[_ngcontent-%COMP%] {\n    display: grid;\n    place-items: center;\n    width: 26px;\n    height: 26px;\n    color: var(--%NS%prism-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--%NS%radius-sm, 5px);\n    transition:\n        background var(--%NS%dur-fast),\n        color var(--%NS%dur-fast);\n}\n\n.tpl-popover-close[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text);\n    background: var(--%NS%prism-input-bg);\n}\n\n.tpl-popover-body[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    padding: 14px 18px;\n    margin: 0;\n    overflow: auto;\n    font-family: var(--%NS%font-mono);\n    font-size: var(--%NS%fs-md);\n    line-height: 1.7;\n    color: var(--%NS%prism-text-2);\n    white-space: pre;\n    background: var(--%NS%prism-bg);\n}\n\n.tpl-popover-body[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 6px;\n    height: 6px;\n}\n\n.tpl-popover-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: var(--%NS%prism-border-strong);\n    border-radius: 3px;\n}\n\n[_nghost-%COMP%]     .tok-tag {\n    color: var(--%NS%prism-code-tag);\n}\n\n[_nghost-%COMP%]     .tok-attr {\n    color: var(--%NS%prism-code-attr);\n}\n\n[_nghost-%COMP%]     .tok-str {\n    color: var(--%NS%prism-code-str);\n}\n\n[_nghost-%COMP%]     .tok-com {\n    font-style: italic;\n    color: var(--%NS%prism-code-com);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismTemplatePopoverComponent, [{
         type: Component,
-        args: [{ selector: 'prism-template-popover', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: "<!-- A native popover: the platform owns open, light-dismiss and Escape, so\n     there is no visibility signal, no document click listener and no key\n     handler here. The id is what the rail's button names in its\n     popovertarget. -->\n<div\n    popover\n    id=\"prism-template\"\n    class=\"tpl-popover\"\n    role=\"dialog\"\n    aria-label=\"Angular template\">\n    <div class=\"tpl-popover-head\">\n        <prism-icon\n            name=\"code\"\n            [size]=\"13\" />\n        <span>Angular Template</span>\n        <button\n            type=\"button\"\n            class=\"tpl-popover-copy\"\n            (click)=\"copy()\"\n            [title]=\"copied() ? 'Copied!' : 'Copy to clipboard'\">\n            <prism-icon\n                [name]=\"copied() ? 'shield-check' : 'copy'\"\n                [size]=\"12\" />\n            {{ copied() ? 'Copied' : 'Copy' }}\n        </button>\n        <button\n            type=\"button\"\n            class=\"tpl-popover-close\"\n            popovertarget=\"prism-template\"\n            popovertargetaction=\"hide\"\n            aria-label=\"Close\"\n            title=\"Close (Esc)\">\n            <prism-icon\n                name=\"x\"\n                [size]=\"13\" />\n        </button>\n    </div>\n    <pre\n        class=\"tpl-popover-body\"\n        [innerHTML]=\"highlighted()\"></pre>\n</div>\n", styles: [":host {\n    display: contents;\n}\n\n/* No position of its own: a popover is in the top layer, where the\n   containing block is the viewport, so the old right/top pair against the\n   canvas would have parked this in the corner of the *window* and over the\n   header. It hangs off the rail instead, the same way the head popovers\n   hang off their triggers. Viewport units, not percentages, because a\n   percentage here resolves against the position area, not the canvas. */\n.tpl-popover {\n    inset: auto;\n    width: 520px;\n    max-width: calc(100vw - var(--sp-6));\n    max-height: min(420px, calc(100vh - var(--sp-7)));\n    margin: var(--sp-2) 0 0 0;\n    position-area: block-end span-inline-start;\n    position-anchor: --prism-toolrail;\n    position-try-fallbacks: flip-block, flip-inline;\n    overflow: hidden;\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border-strong);\n    border-radius: var(--radius-lg, 10px);\n    box-shadow:\n        0 20px 60px rgb(0 0 0 / 45%),\n        0 0 0 1px color-mix(in srgb, var(--prism-primary) 10%, transparent);\n    animation: tpl-fade-in var(--dur-fast, 0.15s) var(--ease-default, ease-out);\n}\n\n/* display belongs on :popover-open and nowhere else. The UA stylesheet\n   hides a closed popover with [popover]:not(:popover-open) { display: none },\n   and any author display on the base rule outranks it. The panel then\n   shows permanently and neither Escape nor light-dismiss can hide it,\n   because closing only drops :popover-open and leaves the author rule\n   standing. */\n.tpl-popover:popover-open {\n    display: flex;\n    flex-direction: column;\n}\n\n@keyframes tpl-fade-in {\n    from {\n        opacity: 0;\n        transform: translateY(-8px);\n    }\n\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.tpl-popover-head {\n    display: flex;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n    height: 40px;\n    padding: 0 12px 0 16px;\n    background: linear-gradient(180deg, var(--prism-bg-surface), var(--prism-bg-elevated));\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.tpl-popover-head > prism-icon {\n    color: var(--prism-text-muted);\n}\n\n.tpl-popover-head > span {\n    flex: 1;\n    font-size: var(--fs-xs);\n    font-weight: 700;\n    color: var(--prism-text-2);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n}\n\n.tpl-popover-copy {\n    display: flex;\n    gap: 5px;\n    align-items: center;\n    height: 26px;\n    padding: 0 10px;\n    font-family: var(--font-sans);\n    font-size: var(--fs-sm);\n    font-weight: 500;\n    color: var(--prism-primary);\n    cursor: pointer;\n    background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n    border: 1px solid color-mix(in srgb, var(--prism-primary) 25%, transparent);\n    border-radius: var(--radius-sm, 5px);\n    transition: background var(--dur-fast);\n}\n\n.tpl-popover-copy:hover {\n    background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n}\n\n.tpl-popover-close {\n    display: grid;\n    place-items: center;\n    width: 26px;\n    height: 26px;\n    color: var(--prism-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--radius-sm, 5px);\n    transition:\n        background var(--dur-fast),\n        color var(--dur-fast);\n}\n\n.tpl-popover-close:hover {\n    color: var(--prism-text);\n    background: var(--prism-input-bg);\n}\n\n.tpl-popover-body {\n    flex: 1;\n    min-height: 0;\n    padding: 14px 18px;\n    margin: 0;\n    overflow: auto;\n    font-family: var(--font-mono);\n    font-size: var(--fs-md);\n    line-height: 1.7;\n    color: var(--prism-text-2);\n    white-space: pre;\n    background: var(--prism-bg);\n}\n\n.tpl-popover-body::-webkit-scrollbar {\n    width: 6px;\n    height: 6px;\n}\n\n.tpl-popover-body::-webkit-scrollbar-thumb {\n    background: var(--prism-border-strong);\n    border-radius: 3px;\n}\n\n:host ::ng-deep .tok-tag {\n    color: var(--prism-code-tag);\n}\n\n:host ::ng-deep .tok-attr {\n    color: var(--prism-code-attr);\n}\n\n:host ::ng-deep .tok-str {\n    color: var(--prism-code-str);\n}\n\n:host ::ng-deep .tok-com {\n    font-style: italic;\n    color: var(--prism-code-com);\n}\n"] }]
+        args: [{ selector: 'prism-template-popover', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: "<!-- A native popover: the platform owns open, light-dismiss and Escape, so\n     there is no visibility signal, no document click listener and no key\n     handler here. The id is what the rail's button names in its\n     popovertarget. -->\n<div\n    popover\n    id=\"prism-template\"\n    class=\"tpl-popover\"\n    role=\"dialog\"\n    aria-label=\"Angular template\">\n    <div class=\"tpl-popover-head\">\n        <prism-icon\n            name=\"code\"\n            [size]=\"13\" />\n        <span>Angular Template</span>\n        <button\n            type=\"button\"\n            class=\"tpl-popover-copy\"\n            (click)=\"copy()\"\n            [title]=\"copied() ? 'Copied!' : 'Copy to clipboard'\">\n            <prism-icon\n                [name]=\"copied() ? 'shield-check' : 'copy'\"\n                [size]=\"12\" />\n            {{ copied() ? 'Copied' : 'Copy' }}\n        </button>\n        <button\n            type=\"button\"\n            class=\"tpl-popover-close\"\n            popovertarget=\"prism-template\"\n            popovertargetaction=\"hide\"\n            aria-label=\"Close\"\n            title=\"Close (Esc)\">\n            <prism-icon\n                name=\"x\"\n                [size]=\"13\" />\n        </button>\n    </div>\n    <pre\n        class=\"tpl-popover-body\"\n        [innerHTML]=\"highlighted()\"></pre>\n</div>\n", styles: [":host {\n    display: contents;\n}\n\n/* No position of its own: a popover is in the top layer, where the\n   containing block is the viewport, so the old right/top pair against the\n   canvas would have parked this in the corner of the *window* and over the\n   header. It hangs off the rail instead, the same way the head popovers\n   hang off their triggers. Viewport units, not percentages, because a\n   percentage here resolves against the position area, not the canvas. */\n.tpl-popover {\n    inset: auto;\n    width: 520px;\n    max-width: calc(100vw - var(--sp-6));\n    max-height: min(420px, calc(100vh - var(--sp-7)));\n    margin: var(--sp-2) 0 0 0;\n    position-area: block-end span-inline-start;\n    position-anchor: --prism-toolrail;\n    position-try-fallbacks: flip-block, flip-inline;\n    overflow: hidden;\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-lg, 10px);\n    box-shadow: var(--prism-shadow-md);\n    animation: tpl-fade-in var(--dur-fast, 0.15s) var(--ease-default, ease-out);\n}\n\n/* display belongs on :popover-open and nowhere else. The UA stylesheet\n   hides a closed popover with [popover]:not(:popover-open) { display: none },\n   and any author display on the base rule outranks it. The panel then\n   shows permanently and neither Escape nor light-dismiss can hide it,\n   because closing only drops :popover-open and leaves the author rule\n   standing. */\n.tpl-popover:popover-open {\n    display: flex;\n    flex-direction: column;\n}\n\n@keyframes tpl-fade-in {\n    from {\n        opacity: 0;\n        transform: translateY(-8px);\n    }\n\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.tpl-popover-head {\n    display: flex;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n    height: 40px;\n    padding: 0 12px 0 16px;\n    background: linear-gradient(180deg, var(--prism-bg-surface), var(--prism-bg-elevated));\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.tpl-popover-head > prism-icon {\n    color: var(--prism-text-muted);\n}\n\n.tpl-popover-head > span {\n    flex: 1;\n    font-size: var(--fs-xs);\n    font-weight: 700;\n    color: var(--prism-text-2);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n}\n\n.tpl-popover-copy {\n    display: flex;\n    gap: 5px;\n    align-items: center;\n    height: 26px;\n    padding: 0 10px;\n    font-family: var(--font-sans);\n    font-size: var(--fs-sm);\n    font-weight: 500;\n    color: var(--prism-primary);\n    cursor: pointer;\n    background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n    border: 1px solid color-mix(in srgb, var(--prism-primary) 25%, transparent);\n    border-radius: var(--radius-sm, 5px);\n    transition: background var(--dur-fast);\n}\n\n.tpl-popover-copy:hover {\n    background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n}\n\n.tpl-popover-close {\n    display: grid;\n    place-items: center;\n    width: 26px;\n    height: 26px;\n    color: var(--prism-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--radius-sm, 5px);\n    transition:\n        background var(--dur-fast),\n        color var(--dur-fast);\n}\n\n.tpl-popover-close:hover {\n    color: var(--prism-text);\n    background: var(--prism-input-bg);\n}\n\n.tpl-popover-body {\n    flex: 1;\n    min-height: 0;\n    padding: 14px 18px;\n    margin: 0;\n    overflow: auto;\n    font-family: var(--font-mono);\n    font-size: var(--fs-md);\n    line-height: 1.7;\n    color: var(--prism-text-2);\n    white-space: pre;\n    background: var(--prism-bg);\n}\n\n.tpl-popover-body::-webkit-scrollbar {\n    width: 6px;\n    height: 6px;\n}\n\n.tpl-popover-body::-webkit-scrollbar-thumb {\n    background: var(--prism-border-strong);\n    border-radius: 3px;\n}\n\n:host ::ng-deep .tok-tag {\n    color: var(--prism-code-tag);\n}\n\n:host ::ng-deep .tok-attr {\n    color: var(--prism-code-attr);\n}\n\n:host ::ng-deep .tok-str {\n    color: var(--prism-code-str);\n}\n\n:host ::ng-deep .tok-com {\n    font-style: italic;\n    color: var(--prism-code-com);\n}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismTemplatePopoverComponent, { className: "PrismTemplatePopoverComponent", filePath: "app/canvas/prism-template-popover.component.ts", lineNumber: 44 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismTemplatePopoverComponent, { className: "PrismTemplatePopoverComponent", filePath: "app/canvas/prism-template-popover.component.ts", lineNumber: 46 }); })();

package/dist/app/component-head/head-metrics.d.ts

@@ -1,3 +1,5 @@
+import type { StatusTone } from '../../plugin/status.js';
+import type { A11yScoreResult, A11yThresholds } from '../panels/a11y/a11y.types.js';
 /**
  * How a metric compares to its threshold.
  *
@@ -12,30 +14,44 @@ export interface HeadMetric {
     id: string;
     label: string;
     value: string;
+    /** What the value is graded against, for the readout's Threshold column. */
+    threshold: string;
     variant: MetricVariant;
 }
-/** What the gauge chip renders, derived from the full metric list. */
-export interface GaugeSummary {
-    /** Metrics that actually carry data. `none` does not count. */
-    measured: number;
-    /** The worst-ranked deviating metric, or null when nothing deviates. */
-    worst: HeadMetric | null;
-    /** How many further metrics deviate besides `worst`. */
-    others: number;
-    /** Colour role for the chip. */
-    variant: 'ok' | 'warn' | 'danger';
+/** What the head knows about the component it introduces. */
+export interface HeadMetricInput {
+    /** The component's `showcaseConfig.meta`, where plugins leave their verdicts. */
+    meta: Record<string, unknown> | null;
+    /** The live audit of the current variant, or `null` before it ran. */
+    a11y: A11yScoreResult | null;
+    a11yThresholds: A11yThresholds;
 }
 /**
- * Folds the head's metrics into what one chip can say.
+ * The head's metrics, in source order: coverage, the a11y score, the visual
+ * regression headline.
  *
- * A pure function instead of a computed inside the component:
- * components using signal inputs cannot be rendered through TestBed in this
- * repo's Jest setup, so any logic left in a template is logic that never gets
- * a test. This mirrors `decorateItem` in the sidebar, which resolves the same
- * kind of question for navigation marks.
+ * It reads verdicts rather than computing them. Coverage and visual regression
+ * take what their plugins derived at build time from their own thresholds; the
+ * a11y score is the live audit graded by `deriveA11ySummary`, the rule the tab,
+ * the sidebar and the header use. A figure without a verdict stays `none`
+ * instead of being graded on a scale of the head's own.
+ */
+export declare function headMetrics(input: HeadMetricInput): HeadMetric[];
+/** What the gauge chip shows: one metric and the tone of the chip. */
+export interface GaugeChip {
+    metric: HeadMetric;
+    variant: StatusTone;
+    /** Metrics that carry a verdict, for the tooltip. */
+    measured: number;
+}
+/**
+ * The one metric the chip shows: the worst, ties resolved by source order so
+ * the chip does not flicker between two equally bad ones; when everything is
+ * fine, the first measured one in the ok tone. `null` when nothing is
+ * measured, and the head shows no gauge.
  *
- * Ties resolve by source order so the chip shows a stable metric across
- * renders rather than flickering between two equally bad ones.
+ * A pure function instead of a computed inside the component: components using
+ * signal inputs cannot be rendered through TestBed in this repo's Jest setup.
  */
-export declare function summarizeMetrics(metrics: readonly HeadMetric[]): GaugeSummary;
+export declare function gaugeChip(metrics: readonly HeadMetric[]): GaugeChip | null;
 //# sourceMappingURL=head-metrics.d.ts.map

package/dist/app/component-head/head-metrics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"head-metrics.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/head-metrics.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE9D,yDAAyD;AACzD,MAAM,WAAW,UAAU;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,aAAa,CAAC;CAC1B;AAED,sEAAsE;AACtE,MAAM,WAAW,YAAY;IACzB,+DAA+D;IAC/D,QAAQ,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,wDAAwD;IACxD,MAAM,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,OAAO,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAC;CACrC;AASD;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,SAAS,UAAU,EAAE,GAAG,YAAY,CAoB7E"}
+{"version":3,"file":"head-metrics.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/head-metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAEpF;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE9D,yDAAyD;AACzD,MAAM,WAAW,UAAU;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,aAAa,CAAC;CAC1B;AAED,6DAA6D;AAC7D,MAAM,WAAW,eAAe;IAC5B,iFAAiF;IACjF,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IACrC,sEAAsE;IACtE,IAAI,EAAE,eAAe,GAAG,IAAI,CAAC;IAC7B,cAAc,EAAE,cAAc,CAAC;CAClC;AAgBD;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,eAAe,GAAG,UAAU,EAAE,CA+BhE;AAED,sEAAsE;AACtE,MAAM,WAAW,SAAS;IACtB,MAAM,EAAE,UAAU,CAAC;IACnB,OAAO,EAAE,UAAU,CAAC;IACpB,qDAAqD;IACrD,QAAQ,EAAE,MAAM,CAAC;CACpB;AASD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,SAAS,UAAU,EAAE,GAAG,SAAS,GAAG,IAAI,CAY1E"}