@ng-prism/core 22.4.1 → 22.6.0

package/README.md

@@ -72,6 +72,8 @@ ng run my-lib:prism
 
 Open `http://localhost:4400`. Your component appears in the sidebar with live controls, code snippets, and variant tabs.
 
+Using Claude Code? The [ng-prism plugin](https://ng-prism.github.io/ng-prism/#/guide/ai-agents) teaches it to write showcases, check them in the browser and set up ng-prism.
+
 ## Configuration
 
 ```typescript

package/dist/app/canvas/prism-canvas-toolbar.component.d.ts

@@ -1,13 +1,16 @@
 import { type CanvasBg } from '../../shared/canvas-bg.type.js';
+import { type PseudoState } from '../../shared/pseudo-state.type.js';
 import { PrismCanvasService } from '../services/prism-canvas.service.js';
+import { PrismPseudoStateService } from '../services/prism-pseudo-state.service.js';
 import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
+import { type StateChip } from './state-chips.js';
 import * as i0 from "@angular/core";
 /**
  * The canvas tools, as a rail floating over the canvas.
  *
  * Things you toggle constantly (guides, rulers, the viewport constraint) get
- * their own button; things you set once (background, zoom, viewport width) live
- * in the menu. The template is a view rather than a setting and keeps its own
+ * 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.
  *
@@ -20,6 +23,34 @@ import * as i0 from "@angular/core";
 export declare class PrismCanvasToolbarComponent {
     protected readonly canvas: PrismCanvasService;
     protected readonly variantBg: PrismVariantBgService;
+    protected readonly pseudoState: PrismPseudoStateService;
+    private readonly navigation;
+    private readonly renderer;
+    /**
+     * The pseudo states the canvas can force, as toggles. Several can be on at
+     * once (`:hover` with `:focus-visible`). The active ones carry `is-on`, the
+     * ones the variant or the active state declares the `is-rec` edge, as in the
+     * Canvas group.
+     */
+    protected readonly states: readonly PseudoState[];
+    protected stateTitle(state: PseudoState): string;
+    /** The variant first. Otherwise the active state, which {@link PrismPseudoStateService.isDeclared} only counts while it fits. */
+    private declaredBy;
+    /** The component's declared states, as chips above the toggles. Empty for a component without any, which then shows no row. */
+    private readonly declaredStates;
+    /** Whether the shown variant has `states: false`. `stateExclusion` says so only while a state is active, the chips need it before. */
+    private readonly variantOptsOut;
+    /**
+     * Whether each declared state fits the rendered component. Measured after
+     * the render because the fit depends on the DOM, which a control or a
+     * variant change rewrites: a state can lose its target to a toggled input.
+     * Equal results keep the old array, so typing into a text control does not
+     * re-render the menu for nothing.
+     */
+    private readonly fits;
+    protected readonly chips: import("@angular/core").Signal<StateChip[]>;
+    constructor();
+    protected pickState(chip: StateChip): void;
     /** Angular templates resolve names against the component, not the global scope. */
     protected readonly Math: Math;
     protected setBg(bg: CanvasBg): void;

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

@@ -1 +1 @@
-{"version":3,"file":"prism-canvas-toolbar.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-toolbar.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAEhF;;;;;;;;;;;;;;GAcG;AACH,qBAQa,2BAA2B;IACpC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAE7D,mFAAmF;IACnF,SAAS,CAAC,QAAQ,CAAC,IAAI,OAAQ;IAE/B,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAQnC;;;;;;;;;;OAUG;IACH,SAAS,CAAC,QAAQ,CAAC,GAAG,sBAAc;IAEpC;;;;;;;OAOG;IACH,SAAS,CAAC,OAAO,CAAC,EAAE,EAAE,QAAQ,GAAG,MAAM,GAAG,IAAI;IAY9C,SAAS,CAAC,QAAQ,CAAC,KAAK;;;QAKtB;IAEF;;;;;OAKG;IACH,SAAS,CAAC,QAAQ,CAAC,SAAS,oBAAkB;IAE9C,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;yCA/D9B,2BAA2B;2CAA3B,2BAA2B;CAkEvC"}
+{"version":3,"file":"prism-canvas-toolbar.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-toolbar.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAIpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAEzE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AAEpF,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAChF,OAAO,EAAgD,KAAK,SAAS,EAAe,MAAM,kBAAkB,CAAC;;AAE7G;;;;;;;;;;;;;;GAcG;AACH,qBAQa,2BAA2B;IACpC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAC7D,SAAS,CAAC,QAAQ,CAAC,WAAW,0BAAmC;IACjE,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAkC;IAC7D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAgC;IAEzD;;;;;OAKG;IACH,SAAS,CAAC,QAAQ,CAAC,MAAM,yBAAiB;IAE1C,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM;IAIhD,iIAAiI;IACjI,OAAO,CAAC,UAAU;IAQlB,+HAA+H;IAC/H,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAiH;IAEhJ,sIAAsI;IACtI,OAAO,CAAC,QAAQ,CAAC,cAAc,CAE7B;IAEF;;;;;;OAMG;IACH,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAwF;IAE7G,SAAS,CAAC,QAAQ,CAAC,KAAK,8CAAsH;;IAwB9I,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI;IAI1C,mFAAmF;IACnF,SAAS,CAAC,QAAQ,CAAC,IAAI,OAAQ;IAE/B,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAQnC;;;;;;;;;;OAUG;IACH,SAAS,CAAC,QAAQ,CAAC,GAAG,sBAAc;IAEpC;;;;;;;OAOG;IACH,SAAS,CAAC,OAAO,CAAC,EAAE,EAAE,QAAQ,GAAG,MAAM,GAAG,IAAI;IAY9C,SAAS,CAAC,QAAQ,CAAC,KAAK;;;QAKtB;IAEF;;;;;OAKG;IACH,SAAS,CAAC,QAAQ,CAAC,SAAS,oBAAkB;IAE9C,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;yCApI9B,2BAA2B;2CAA3B,2BAA2B;CAuIvC"}

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

@@ -1,11 +1,18 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { afterRenderEffect, ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
 import { CANVAS_BGS } from '../../shared/canvas-bg.type.js';
+import { PSEUDO_STATES } from '../../shared/pseudo-state.type.js';
 import { VIEWPORT_SNAPS } from '../../shared/viewport.type.js';
 import { PrismIconComponent } from '../icons/prism-icon.component.js';
+import { evaluateStateFit } from '../pseudo/state-fit.js';
 import { PrismCanvasService } from '../services/prism-canvas.service.js';
+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 { 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);
     i0.ɵɵtext(1);
@@ -29,38 +36,74 @@ function PrismCanvasToolbarComponent_For_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.capitalize(bg_r3), " ");
 } }
-function PrismCanvasToolbarComponent_For_27_Template(rf, ctx) { if (rf & 1) {
+function PrismCanvasToolbarComponent_Conditional_25_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 21);
-    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_27_Template_button_click_0_listener() { const z_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.canvas.setZoom(z_r5.value)); });
+    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.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const z_r5 = ctx.$implicit;
+    const chip_r5 = ctx.$implicit;
+    i0.ɵɵclassProp("is-on", chip_r5.active)("is-na", !chip_r5.fits);
+    i0.ɵɵattribute("aria-pressed", chip_r5.active)("title", chip_r5.title);
+    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);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("is-on", ctx_r0.canvas.zoom() === z_r5.value);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", z_r5.label, " ");
+    i0.ɵɵrepeater(ctx_r0.chips());
 } }
-function PrismCanvasToolbarComponent_For_34_Template(rf, ctx) { if (rf & 1) {
+function PrismCanvasToolbarComponent_For_28_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 21);
-    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_34_Template_button_click_0_listener() { const w_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.canvas.setViewportWidth(w_r7)); });
+    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.ɵɵ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));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" :", state_r7, " ");
+} }
+function PrismCanvasToolbarComponent_For_33_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.ɵɵ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);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", z_r9.label, " ");
+} }
+function PrismCanvasToolbarComponent_For_40_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.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const w_r7 = ctx.$implicit;
+    const w_r11 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("is-on", ctx_r0.canvas.viewportWidth() === w_r7);
+    i0.ɵɵclassProp("is-on", ctx_r0.canvas.viewportWidth() === w_r11);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", w_r7, " ");
+    i0.ɵɵtextInterpolate1(" ", w_r11, " ");
 } }
 /**
  * The canvas tools, as a rail floating over the canvas.
  *
  * Things you toggle constantly (guides, rulers, the viewport constraint) get
- * their own button; things you set once (background, zoom, viewport width) live
- * in the menu. The template is a view rather than a setting and keeps its own
+ * 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.
  *
@@ -73,6 +116,59 @@ function PrismCanvasToolbarComponent_For_34_Template(rf, ctx) { if (rf & 1) {
 export class PrismCanvasToolbarComponent {
     canvas = inject(PrismCanvasService);
     variantBg = inject(PrismVariantBgService);
+    pseudoState = inject(PrismPseudoStateService);
+    navigation = inject(PrismNavigationService);
+    renderer = inject(PrismRendererService);
+    /**
+     * The pseudo states the canvas can force, as toggles. Several can be on at
+     * once (`:hover` with `:focus-visible`). The active ones carry `is-on`, the
+     * ones the variant or the active state declares the `is-rec` edge, as in the
+     * Canvas group.
+     */
+    states = PSEUDO_STATES;
+    stateTitle(state) {
+        return toggleTitle(state, this.declaredBy(state));
+    }
+    /** The variant first. Otherwise the active state, which {@link PrismPseudoStateService.isDeclared} only counts while it fits. */
+    declaredBy(state) {
+        if (this.pseudoState.declared()?.[state] !== undefined)
+            return { by: 'variant' };
+        const active = this.pseudoState.activeState();
+        return active !== null && this.pseudoState.isDeclared(state) ? { by: 'state', name: active.name } : null;
+    }
+    /** The component's declared states, as chips above the toggles. Empty for a component without any, which then shows no row. */
+    declaredStates = computed(() => this.navigation.activeComponent()?.meta.showcaseConfig.states ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "declaredStates" }] : /* istanbul ignore next */ []));
+    /** Whether the shown variant has `states: false`. `stateExclusion` says so only while a state is active, the chips need it before. */
+    variantOptsOut = computed(() => this.navigation.activeComponent()?.meta.showcaseConfig.variants?.[this.renderer.activeVariantIndex()]?.states === false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variantOptsOut" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether each declared state fits the rendered component. Measured after
+     * the render because the fit depends on the DOM, which a control or a
+     * variant change rewrites: a state can lose its target to a toggled input.
+     * Equal results keep the old array, so typing into a text control does not
+     * re-render the menu for nothing.
+     */
+    fits = signal([], { ...(ngDevMode ? { debugName: "fits" } : /* istanbul ignore next */ {}), equal: (a, b) => JSON.stringify(a) === JSON.stringify(b) });
+    chips = computed(() => buildStateChips(this.declaredStates(), this.renderer.activeStateIndex(), this.fits()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chips" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterRenderEffect({
+            read: () => {
+                // Not a value of the fit, but what rewrites the DOM it is measured on.
+                this.renderer.inputValues();
+                this.fits.set(chipFits(this.declaredStates(), {
+                    element: this.renderer.renderedElement(),
+                    optedOut: this.variantOptsOut(),
+                    activeIndex: this.renderer.activeStateIndex(),
+                    canvasFit: this.pseudoState.canvasFit()
+                }, evaluateStateFit));
+            }
+        });
+    }
+    pickState(chip) {
+        this.renderer.selectState(chip.active ? null : chip.index);
+    }
     /** Angular templates resolve names against the component, not the global scope. */
     Math = Math;
     setBg(bg) {
@@ -132,7 +228,7 @@ 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: 35, vars: 24, 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, zoom and width", "aria-label", "Canvas, 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, 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"]], template: function PrismCanvasToolbarComponent_Template(rf, ctx) { if (rf & 1) {
+    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) {
             i0.ɵɵelementStart(0, "div", 0)(1, "span", 1);
             i0.ɵɵtext(2);
             i0.ɵɵconditionalCreate(3, PrismCanvasToolbarComponent_Conditional_3_Template, 2, 1, "span", 2);
@@ -167,19 +263,26 @@ export class PrismCanvasToolbarComponent {
             i0.ɵɵrepeaterCreate(21, PrismCanvasToolbarComponent_For_22_Template, 2, 6, "button", 19, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(23, "span", 17);
-            i0.ɵɵtext(24, "Zoom");
+            i0.ɵɵtext(24, "State");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(25, "div", 18);
-            i0.ɵɵrepeaterCreate(26, PrismCanvasToolbarComponent_For_27_Template, 2, 3, "button", 20, _forTrack0);
+            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.ɵɵelementEnd();
-            i0.ɵɵelementStart(28, "span", 17);
-            i0.ɵɵtext(29, "Width");
+            i0.ɵɵelementStart(29, "span", 17);
+            i0.ɵɵtext(30, "Zoom");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(30, "div", 18)(31, "button", 21);
-            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_31_listener() { return ctx.canvas.setViewportWidth(null); });
-            i0.ɵɵtext(32, " Auto ");
+            i0.ɵɵelementStart(31, "div", 18);
+            i0.ɵɵrepeaterCreate(32, PrismCanvasToolbarComponent_For_33_Template, 2, 3, "button", 20, _forTrack0);
             i0.ɵɵelementEnd();
-            i0.ɵɵrepeaterCreate(33, PrismCanvasToolbarComponent_For_34_Template, 2, 3, "button", 20, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵelementStart(34, "span", 17);
+            i0.ɵɵtext(35, "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.ɵɵelementEnd();
+            i0.ɵɵrepeaterCreate(39, PrismCanvasToolbarComponent_For_40_Template, 2, 3, "button", 20, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵclassProp("has-rulers", ctx.canvas.rulers());
@@ -213,16 +316,20 @@ export class PrismCanvasToolbarComponent {
             i0.ɵɵproperty("size", 14);
             i0.ɵɵadvance(5);
             i0.ɵɵrepeater(ctx.bgs);
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(ctx.chips().length > 0 ? 25 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.states);
             i0.ɵɵadvance(5);
             i0.ɵɵrepeater(ctx.zooms);
             i0.ɵɵadvance(5);
             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}"] });
+        } }, 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}"] });
 }
 (() => { (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, zoom and width\"\n        aria-label=\"Canvas, 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 three 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. -->\n<div\n    popover\n    id=\"prism-tools\"\n    class=\"prism-toolmenu\"\n    role=\"dialog\"\n    aria-label=\"Canvas, 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\">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"] }]
-    }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasToolbarComponent, { className: "PrismCanvasToolbarComponent", filePath: "app/canvas/prism-canvas-toolbar.component.ts", lineNumber: 31 }); })();
+        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"] }]
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasToolbarComponent, { className: "PrismCanvasToolbarComponent", filePath: "app/canvas/prism-canvas-toolbar.component.ts", lineNumber: 38 }); })();

package/dist/app/canvas/state-chips.d.ts

@@ -0,0 +1,50 @@
+import type { ShowcaseState } from '../../decorator/showcase.types.js';
+import type { ForcedPseudoStates, PseudoState } from '../../shared/pseudo-state.type.js';
+import type { StateFit } from '../pseudo/state-fit.js';
+/** One chip of the tools menu's State group: a component-level state to put on the canvas. */
+export interface StateChip {
+    /** Position in `ShowcaseConfig.states`, which is what identifies a state. */
+    index: number;
+    name: string;
+    /** On the canvas, or selected and waiting for a target if it does not fit. */
+    active: boolean;
+    fits: boolean;
+    title: string;
+}
+/**
+ * One chip per state in declaration order. `fits` is parallel to `states`; a
+ * state without an entry yet (nothing evaluated) counts as fitting.
+ *
+ * A chip that does not fit says why, even while it is the active one: it is
+ * selected, but what the title would otherwise promise ("is shown") is not true.
+ */
+export declare function buildStateChips(states: readonly ShowcaseState[], activeIndex: number | null, fits: readonly StateFit[]): StateChip[];
+/** What {@link chipFits} needs to know about the canvas. */
+export interface ChipFitContext {
+    /** The rendered component, `null` before the first render. */
+    element: Element | null;
+    /** The active variant has `states: false`. */
+    optedOut: boolean;
+    activeIndex: number | null;
+    /** The fit the canvas measured for the active state, `null` while it applies none. */
+    canvasFit: StateFit | null;
+}
+/**
+ * Whether each of `states` fits what is on the canvas, in the order of `states`.
+ *
+ * The active state takes the fit the canvas measured, so a chip and the canvas
+ * cannot disagree; the others are evaluated against the same element. Without an
+ * element there is nothing to measure and everything counts as fitting, as it
+ * does on the canvas before the first render.
+ */
+export declare function chipFits(states: readonly ShowcaseState[], { element, optedOut, activeIndex, canvasFit }: ChipFitContext, evaluate: (root: Element, pseudo: ForcedPseudoStates) => StateFit): StateFit[];
+/** Who declares a pseudo-class that is on without the user toggling it. */
+export type PseudoSource = {
+    by: 'variant';
+} | {
+    by: 'state';
+    name: string;
+};
+/** Tooltip of a `:hover`… toggle: where its default comes from, or what switching it on does. */
+export declare function toggleTitle(state: PseudoState, source: PseudoSource | null): string;
+//# sourceMappingURL=state-chips.d.ts.map

package/dist/app/canvas/state-chips.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state-chips.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/state-chips.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AACzF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAEvD,8FAA8F;AAC9F,MAAM,WAAW,SAAS;IACtB,6EAA6E;IAC7E,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,8EAA8E;IAC9E,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,SAAS,aAAa,EAAE,EAAE,WAAW,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,EAAE,SAAS,QAAQ,EAAE,GAAG,SAAS,EAAE,CAUpI;AAED,4DAA4D;AAC5D,MAAM,WAAW,cAAc;IAC3B,8DAA8D;IAC9D,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACxB,8CAA8C;IAC9C,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,sFAAsF;IACtF,SAAS,EAAE,QAAQ,GAAG,IAAI,CAAC;CAC9B;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CACpB,MAAM,EAAE,SAAS,aAAa,EAAE,EAChC,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,cAAc,EAC7D,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,kBAAkB,KAAK,QAAQ,GAClE,QAAQ,EAAE,CAIZ;AAED,2EAA2E;AAC3E,MAAM,MAAM,YAAY,GAAG;IAAE,EAAE,EAAE,SAAS,CAAA;CAAE,GAAG;IAAE,EAAE,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAE7E,iGAAiG;AACjG,wBAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,GAAG,IAAI,GAAG,MAAM,CAGnF"}

package/dist/app/canvas/state-chips.js

@@ -0,0 +1,40 @@
+/**
+ * One chip per state in declaration order. `fits` is parallel to `states`; a
+ * state without an entry yet (nothing evaluated) counts as fitting.
+ *
+ * A chip that does not fit says why, even while it is the active one: it is
+ * selected, but what the title would otherwise promise ("is shown") is not true.
+ */
+export function buildStateChips(states, activeIndex, fits) {
+    return states.map((state, index) => {
+        const fit = fits[index] ?? { fits: true };
+        const active = index === activeIndex;
+        let title = `Show ${state.name} on this variant`;
+        if (!fit.fits)
+            title = `${state.name} does not fit this variant: ${fit.reason}`;
+        else if (active)
+            title = `${state.name} is shown; click to turn it off`;
+        return { index, name: state.name, active, fits: fit.fits, title };
+    });
+}
+/**
+ * Whether each of `states` fits what is on the canvas, in the order of `states`.
+ *
+ * The active state takes the fit the canvas measured, so a chip and the canvas
+ * cannot disagree; the others are evaluated against the same element. Without an
+ * element there is nothing to measure and everything counts as fitting, as it
+ * does on the canvas before the first render.
+ */
+export function chipFits(states, { element, optedOut, activeIndex, canvasFit }, evaluate) {
+    if (optedOut)
+        return states.map(() => ({ fits: false, reason: 'states: false' }));
+    if (element === null)
+        return states.map(() => ({ fits: true }));
+    return states.map((state, index) => (index === activeIndex && canvasFit !== null ? canvasFit : evaluate(element, state.pseudo)));
+}
+/** Tooltip of a `:hover`… toggle: where its default comes from, or what switching it on does. */
+export function toggleTitle(state, source) {
+    if (source === null)
+        return `Force :${state} on the whole component`;
+    return source.by === 'variant' ? `:${state} is forced by this variant` : `:${state} is forced by the state "${source.name}"`;
+}

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

@@ -11,6 +11,7 @@ export declare class PrismComponentHeadComponent {
     protected readonly comp: import("@angular/core").Signal<import("../../index.js").RuntimeComponent | null>;
     protected readonly category: import("@angular/core").Signal<string>;
     protected readonly variantCount: import("@angular/core").Signal<number>;
+    protected readonly stateCount: import("@angular/core").Signal<number>;
     protected readonly status: import("@angular/core").Signal<ComponentStatus | undefined>;
     protected readonly statusBadge: import("@angular/core").Signal<StatusBadge | null>;
     protected readonly coveragePercent: import("@angular/core").Signal<number | null>;

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

@@ -1 +1 @@
-{"version":3,"file":"prism-component-head.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-component-head.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAGzE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;;AAIpD,UAAU,WAAW;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACnB;AAqBD,qBAQa,2BAA2B;IACpC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IAEzD,SAAS,CAAC,QAAQ,CAAC,IAAI,mFAA4D;IAEnF,SAAS,CAAC,QAAQ,CAAC,QAAQ,yCAIxB;IAEH,SAAS,CAAC,QAAQ,CAAC,YAAY,yCAI5B;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,8DAAwF;IAEjH,SAAS,CAAC,QAAQ,CAAC,WAAW,qDAI3B;IAEH,SAAS,CAAC,QAAQ,CAAC,eAAe,gDAM/B;IAWH,SAAS,CAAC,QAAQ,CAAC,SAAS,gDAEzB;IAEH;;;;;;;OAOG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO;eACf,MAAM;iBACJ,IAAI,GAAG,MAAM,GAAG,QAAQ;cAQlC;IAEH;;;;;;OAMG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO,+CAyBvB;IAEH,OAAO,CAAC,QAAQ,CAAC,aAAa,CAK3B;yCA1GM,2BAA2B;2CAA3B,2BAA2B;CA2GvC"}
+{"version":3,"file":"prism-component-head.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-component-head.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAGzE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;;AAIpD,UAAU,WAAW;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACnB;AAqBD,qBAQa,2BAA2B;IACpC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IAEzD,SAAS,CAAC,QAAQ,CAAC,IAAI,mFAA4D;IAEnF,SAAS,CAAC,QAAQ,CAAC,QAAQ,yCAIxB;IAEH,SAAS,CAAC,QAAQ,CAAC,YAAY,yCAI5B;IAEH,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAI1B;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,8DAAwF;IAEjH,SAAS,CAAC,QAAQ,CAAC,WAAW,qDAI3B;IAEH,SAAS,CAAC,QAAQ,CAAC,eAAe,gDAM/B;IAWH,SAAS,CAAC,QAAQ,CAAC,SAAS,gDAEzB;IAEH;;;;;;;OAOG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO;eACf,MAAM;iBACJ,IAAI,GAAG,MAAM,GAAG,QAAQ;cAQlC;IAEH;;;;;;OAMG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO,+CAyBvB;IAEH,OAAO,CAAC,QAAQ,CAAC,aAAa,CAK3B;yCAhHM,2BAA2B;2CAA3B,2BAA2B;CAiHvC"}

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

@@ -34,7 +34,7 @@ function PrismComponentHeadComponent_Conditional_0_Template(rf, ctx) { if (rf &
     i0.ɵɵprojection(10);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    let tmp_8_0;
+    let tmp_9_0;
     const c_r3 = ctx;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
@@ -42,9 +42,9 @@ function PrismComponentHeadComponent_Conditional_0_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(c_r3.meta.showcaseConfig.title);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("selector", c_r3.meta.componentMeta.selector)("description", c_r3.meta.showcaseConfig.description)("tags", c_r3.meta.showcaseConfig.tags ?? i0.ɵɵpureFunction0(8, _c2))("variantCount", ctx_r1.variantCount());
+    i0.ɵɵproperty("selector", c_r3.meta.componentMeta.selector)("description", c_r3.meta.showcaseConfig.description)("tags", c_r3.meta.showcaseConfig.tags ?? i0.ɵɵpureFunction0(9, _c2))("variantCount", ctx_r1.variantCount())("stateCount", ctx_r1.stateCount());
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_8_0 = ctx_r1.statusBadge()) ? 6 : -1, tmp_8_0);
+    i0.ɵɵconditional((tmp_9_0 = ctx_r1.statusBadge()) ? 6 : -1, tmp_9_0);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("metrics", ctx_r1.metrics());
 } }
@@ -81,6 +81,11 @@ export class PrismComponentHeadComponent {
         return c?.meta.showcaseConfig.variants?.length ?? 0;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variantCount" }] : /* istanbul ignore next */ []));
+    stateCount = computed(() => {
+        const c = this.comp();
+        return c?.meta.showcaseConfig.states?.length ?? 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stateCount" }] : /* istanbul ignore next */ []));
     status = computed(() => this.comp()?.meta.showcaseConfig.status, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
     statusBadge = computed(() => {
@@ -164,9 +169,9 @@ export class PrismComponentHeadComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "componentMeta" }] : /* istanbul ignore next */ []));
     static ɵfac = function PrismComponentHeadComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismComponentHeadComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismComponentHeadComponent, selectors: [["prism-component-head"]], ngContentSelectors: _c1, decls: 1, vars: 1, consts: [[1, "comp-head"], [1, "comp-crumb"], [1, "comp-title"], [3, "selector", "description", "tags", "variantCount"], [3, "class"], [1, "comp-spacer"], [3, "metrics"], [1, "comp-head-end"], ["aria-hidden", "true", 1, "comp-status-mark"]], template: function PrismComponentHeadComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismComponentHeadComponent, selectors: [["prism-component-head"]], ngContentSelectors: _c1, decls: 1, vars: 1, consts: [[1, "comp-head"], [1, "comp-crumb"], [1, "comp-title"], [3, "selector", "description", "tags", "variantCount", "stateCount"], [3, "class"], [1, "comp-spacer"], [3, "metrics"], [1, "comp-head-end"], ["aria-hidden", "true", 1, "comp-status-mark"]], template: function PrismComponentHeadComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c0);
-            i0.ɵɵconditionalCreate(0, PrismComponentHeadComponent_Conditional_0_Template, 11, 9, "section", 0);
+            i0.ɵɵconditionalCreate(0, PrismComponentHeadComponent_Conditional_0_Template, 11, 10, "section", 0);
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.comp()) ? 0 : -1, tmp_0_0);
@@ -174,6 +179,6 @@ export class PrismComponentHeadComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismComponentHeadComponent, [{
         type: Component,
-        args: [{ selector: 'prism-component-head', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismHeadInfoComponent, PrismHeadGaugeComponent], template: "@if (comp(); as c) {\n    <section class=\"comp-head\">\n        <span class=\"comp-crumb\">{{ category() }}</span>\n        <h1 class=\"comp-title\">{{ c.meta.showcaseConfig.title }}</h1>\n\n        <prism-head-info\n            [selector]=\"c.meta.componentMeta.selector\"\n            [description]=\"c.meta.showcaseConfig.description\"\n            [tags]=\"c.meta.showcaseConfig.tags ?? []\"\n            [variantCount]=\"variantCount()\" />\n\n        @if (statusBadge(); as badge) {\n            <span\n                class=\"comp-status comp-status--{{ status() }}\"\n                [attr.title]=\"badge.tooltip\">\n                <span\n                    class=\"comp-status-mark\"\n                    aria-hidden=\"true\"></span>\n                {{ badge.label }}\n            </span>\n        }\n\n        <span class=\"comp-spacer\"></span>\n\n        <prism-head-gauge [metrics]=\"metrics()\" />\n        <span class=\"comp-head-end\"><ng-content select=\"[headEnd]\" /></span>\n    </section>\n}\n", styles: [":host {\n    display: block;\n    flex-shrink: 0;\n}\n\n.comp-head {\n    display: flex;\n    gap: var(--sp-3);\n    align-items: center;\n    height: var(--band-head);\n    padding: 0 var(--sp-5);\n    background: var(--prism-bg);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n/* The text yields, the controls never do. A long category and a long title\n   would otherwise push the gauge out of a fixed-height row whose ancestors\n   clip, making the measurement unreachable when you most want to read it,\n   and costing the gauge the fixed position it was designed around. So the\n   title truncates with an ellipsis and the chip stays at the right edge. The crumb gives way\n   first, being the least important text in the row. */\n.comp-crumb {\n    flex: 0 8 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--fs-xs);\n    color: var(--prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    white-space: nowrap;\n}\n\n.comp-crumb::after {\n    content: ' /';\n}\n\n.comp-title {\n    flex: 0 1 auto;\n    min-width: 0;\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--fs-xl);\n    font-weight: 600;\n    color: var(--prism-text);\n    letter-spacing: -0.015em;\n    white-space: nowrap;\n}\n\n.comp-spacer {\n    flex: 1;\n}\n\n.comp-status,\nprism-head-info,\nprism-head-gauge,\n.comp-head-end {\n    flex: none;\n}\n\n/* Wraps the slot rather than styling the projected element, which this\n   stylesheet cannot reach. :empty keeps the row's trailing gap from\n   appearing when nothing is projected; comment anchors do not count. */\n.comp-head-end {\n    display: inline-flex;\n    align-items: center;\n}\n\n.comp-head-end:empty {\n    display: none;\n}\n\n/* Always an outline, never a filled surface. Deprecated separates itself\n   by hue, not by weight. A filled alarm-coloured chip in a permanently\n   visible band is the \"red as background texture\" problem this\n   redesign exists to fix. */\n.comp-status {\n    display: inline-flex;\n    gap: var(--sp-2);\n    align-items: center;\n    height: 18px;\n    padding: 0 var(--sp-3) 0 var(--sp-2);\n    font-size: var(--fs-xs);\n    font-weight: 600;\n    color: var(--prism-text-muted);\n    letter-spacing: 0.03em;\n    white-space: nowrap;\n    border: 1px solid currentcolor;\n    border-radius: var(--radius-xs);\n}\n\n.comp-status-mark {\n    width: 6px;\n    height: 6px;\n    background: currentcolor;\n    border-radius: 50%;\n}\n\n.comp-status--stable {\n    color: var(--prism-mark-nominal);\n    background: color-mix(in srgb, var(--prism-mark-nominal) 10%, transparent);\n}\n\n.comp-status--beta,\n.comp-status--wip {\n    color: var(--prism-mark-attention);\n    background: color-mix(in srgb, var(--prism-mark-attention) 10%, transparent);\n}\n\n.comp-status--wip .comp-status-mark {\n    box-sizing: border-box;\n    width: 7px;\n    height: 7px;\n    background: transparent;\n    border: 1.5px solid currentcolor;\n}\n\n.comp-status--deprecated {\n    color: var(--prism-mark-critical);\n    background: color-mix(in srgb, var(--prism-mark-critical) 12%, transparent);\n    border-color: color-mix(in srgb, var(--prism-mark-critical) 55%, transparent);\n}\n"] }]
+        args: [{ selector: 'prism-component-head', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismHeadInfoComponent, PrismHeadGaugeComponent], template: "@if (comp(); as c) {\n    <section class=\"comp-head\">\n        <span class=\"comp-crumb\">{{ category() }}</span>\n        <h1 class=\"comp-title\">{{ c.meta.showcaseConfig.title }}</h1>\n\n        <prism-head-info\n            [selector]=\"c.meta.componentMeta.selector\"\n            [description]=\"c.meta.showcaseConfig.description\"\n            [tags]=\"c.meta.showcaseConfig.tags ?? []\"\n            [variantCount]=\"variantCount()\"\n            [stateCount]=\"stateCount()\" />\n\n        @if (statusBadge(); as badge) {\n            <span\n                class=\"comp-status comp-status--{{ status() }}\"\n                [attr.title]=\"badge.tooltip\">\n                <span\n                    class=\"comp-status-mark\"\n                    aria-hidden=\"true\"></span>\n                {{ badge.label }}\n            </span>\n        }\n\n        <span class=\"comp-spacer\"></span>\n\n        <prism-head-gauge [metrics]=\"metrics()\" />\n        <span class=\"comp-head-end\"><ng-content select=\"[headEnd]\" /></span>\n    </section>\n}\n", styles: [":host {\n    display: block;\n    flex-shrink: 0;\n}\n\n.comp-head {\n    display: flex;\n    gap: var(--sp-3);\n    align-items: center;\n    height: var(--band-head);\n    padding: 0 var(--sp-5);\n    background: var(--prism-bg);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n/* The text yields, the controls never do. A long category and a long title\n   would otherwise push the gauge out of a fixed-height row whose ancestors\n   clip, making the measurement unreachable when you most want to read it,\n   and costing the gauge the fixed position it was designed around. So the\n   title truncates with an ellipsis and the chip stays at the right edge. The crumb gives way\n   first, being the least important text in the row. */\n.comp-crumb {\n    flex: 0 8 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--fs-xs);\n    color: var(--prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    white-space: nowrap;\n}\n\n.comp-crumb::after {\n    content: ' /';\n}\n\n.comp-title {\n    flex: 0 1 auto;\n    min-width: 0;\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--fs-xl);\n    font-weight: 600;\n    color: var(--prism-text);\n    letter-spacing: -0.015em;\n    white-space: nowrap;\n}\n\n.comp-spacer {\n    flex: 1;\n}\n\n.comp-status,\nprism-head-info,\nprism-head-gauge,\n.comp-head-end {\n    flex: none;\n}\n\n/* Wraps the slot rather than styling the projected element, which this\n   stylesheet cannot reach. :empty keeps the row's trailing gap from\n   appearing when nothing is projected; comment anchors do not count. */\n.comp-head-end {\n    display: inline-flex;\n    align-items: center;\n}\n\n.comp-head-end:empty {\n    display: none;\n}\n\n/* Always an outline, never a filled surface. Deprecated separates itself\n   by hue, not by weight. A filled alarm-coloured chip in a permanently\n   visible band is the \"red as background texture\" problem this\n   redesign exists to fix. */\n.comp-status {\n    display: inline-flex;\n    gap: var(--sp-2);\n    align-items: center;\n    height: 18px;\n    padding: 0 var(--sp-3) 0 var(--sp-2);\n    font-size: var(--fs-xs);\n    font-weight: 600;\n    color: var(--prism-text-muted);\n    letter-spacing: 0.03em;\n    white-space: nowrap;\n    border: 1px solid currentcolor;\n    border-radius: var(--radius-xs);\n}\n\n.comp-status-mark {\n    width: 6px;\n    height: 6px;\n    background: currentcolor;\n    border-radius: 50%;\n}\n\n.comp-status--stable {\n    color: var(--prism-mark-nominal);\n    background: color-mix(in srgb, var(--prism-mark-nominal) 10%, transparent);\n}\n\n.comp-status--beta,\n.comp-status--wip {\n    color: var(--prism-mark-attention);\n    background: color-mix(in srgb, var(--prism-mark-attention) 10%, transparent);\n}\n\n.comp-status--wip .comp-status-mark {\n    box-sizing: border-box;\n    width: 7px;\n    height: 7px;\n    background: transparent;\n    border: 1.5px solid currentcolor;\n}\n\n.comp-status--deprecated {\n    color: var(--prism-mark-critical);\n    background: color-mix(in srgb, var(--prism-mark-critical) 12%, transparent);\n    border-color: color-mix(in srgb, var(--prism-mark-critical) 55%, transparent);\n}\n"] }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismComponentHeadComponent, { className: "PrismComponentHeadComponent", filePath: "app/component-head/prism-component-head.component.ts", lineNumber: 41 }); })();

package/dist/app/component-head/prism-head-info.component.d.ts

@@ -17,7 +17,8 @@ export declare class PrismHeadInfoComponent {
     readonly description: import("@angular/core").InputSignal<string | undefined>;
     readonly tags: import("@angular/core").InputSignal<readonly string[]>;
     readonly variantCount: import("@angular/core").InputSignal<number>;
+    readonly stateCount: import("@angular/core").InputSignal<number>;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismHeadInfoComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PrismHeadInfoComponent, "prism-head-info", never, { "selector": { "alias": "selector"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "tags": { "alias": "tags"; "required": false; "isSignal": true; }; "variantCount": { "alias": "variantCount"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismHeadInfoComponent, "prism-head-info", never, { "selector": { "alias": "selector"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "tags": { "alias": "tags"; "required": false; "isSignal": true; }; "variantCount": { "alias": "variantCount"; "required": false; "isSignal": true; }; "stateCount": { "alias": "stateCount"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 //# sourceMappingURL=prism-head-info.component.d.ts.map

package/dist/app/component-head/prism-head-info.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-head-info.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-head-info.component.ts"],"names":[],"mappings":";AAGA;;;;;;;;;;;;GAYG;AACH,qBAQa,sBAAsB;IAC/B,QAAQ,CAAC,QAAQ,8CAA4B;IAC7C,QAAQ,CAAC,WAAW,0DAAwC;IAC5D,QAAQ,CAAC,IAAI,yDAAgC;IAC7C,QAAQ,CAAC,YAAY,8CAAoB;yCAJhC,sBAAsB;2CAAtB,sBAAsB;CAKlC"}
+{"version":3,"file":"prism-head-info.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-head-info.component.ts"],"names":[],"mappings":";AAGA;;;;;;;;;;;;GAYG;AACH,qBAQa,sBAAsB;IAC/B,QAAQ,CAAC,QAAQ,8CAA4B;IAC7C,QAAQ,CAAC,WAAW,0DAAwC;IAC5D,QAAQ,CAAC,IAAI,yDAAgC;IAC7C,QAAQ,CAAC,YAAY,8CAAoB;IACzC,QAAQ,CAAC,UAAU,8CAAoB;yCAL9B,sBAAsB;2CAAtB,sBAAsB;CAMlC"}