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

package/dist/app/controls/boolean-control.component.js

@@ -16,10 +16,10 @@ export class BooleanControlComponent {
         } if (rf & 2) {
             i0.ɵɵclassProp("on", ctx.value());
             i0.ɵɵattribute("aria-checked", ctx.value());
-        } }, styles: [".ctl-toggle[_ngcontent-%COMP%] {\n    position: relative;\n    flex-shrink: 0;\n    width: 34px;\n    height: 18px;\n    padding: 0;\n    cursor: pointer;\n    background: var(--%NS%prism-input-bg);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 9px;\n    transition: all var(--%NS%dur-fast);\n}\n\n.ctl-toggle[_ngcontent-%COMP%]::after {\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 12px;\n    height: 12px;\n    content: '';\n    background: var(--%NS%prism-text-muted);\n    border-radius: 50%;\n    transition:\n        transform var(--%NS%dur-fast),\n        background var(--%NS%dur-fast);\n}\n\n.ctl-toggle.on[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-primary);\n    border-color: var(--%NS%prism-primary);\n}\n\n.ctl-toggle.on[_ngcontent-%COMP%]::after {\n    background: white;\n    transform: translateX(16px);\n}"] });
+        } }, styles: ["\n\n\n.ctl-toggle[_ngcontent-%COMP%] {\n    position: relative;\n    box-sizing: border-box;\n    flex-shrink: 0;\n    width: 34px;\n    height: 18px;\n    padding: 0;\n    cursor: pointer;\n    background: transparent;\n    border: 1.5px solid var(--%NS%prism-border-strong);\n    border-radius: 9px;\n    transition:\n        background var(--%NS%dur-fast),\n        border-color var(--%NS%dur-fast);\n}\n\n.ctl-toggle[_ngcontent-%COMP%]::after {\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 11px;\n    height: 11px;\n    content: '';\n    background: var(--%NS%prism-border-strong);\n    border-radius: 50%;\n    transition:\n        transform var(--%NS%dur-fast),\n        background var(--%NS%dur-fast);\n}\n\n.ctl-toggle.on[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-toggle-on);\n    border-color: transparent;\n}\n\n.ctl-toggle.on[_ngcontent-%COMP%]::after {\n    background: var(--%NS%prism-on-primary);\n    transform: translateX(16px);\n}\n\n.ctl-toggle[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 2px;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BooleanControlComponent, [{
         type: Component,
-        args: [{ selector: 'prism-boolean-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    class=\"ctl-toggle\"\n    [class.on]=\"value()\"\n    (click)=\"valueChange.emit(!value())\"\n    role=\"switch\"\n    [attr.aria-checked]=\"value()\"></button>\n", styles: [".ctl-toggle {\n    position: relative;\n    flex-shrink: 0;\n    width: 34px;\n    height: 18px;\n    padding: 0;\n    cursor: pointer;\n    background: var(--prism-input-bg);\n    border: 1px solid var(--prism-border);\n    border-radius: 9px;\n    transition: all var(--dur-fast);\n}\n\n.ctl-toggle::after {\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 12px;\n    height: 12px;\n    content: '';\n    background: var(--prism-text-muted);\n    border-radius: 50%;\n    transition:\n        transform var(--dur-fast),\n        background var(--dur-fast);\n}\n\n.ctl-toggle.on {\n    background: var(--prism-primary);\n    border-color: var(--prism-primary);\n}\n\n.ctl-toggle.on::after {\n    background: white;\n    transform: translateX(16px);\n}\n"] }]
+        args: [{ selector: 'prism-boolean-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    class=\"ctl-toggle\"\n    [class.on]=\"value()\"\n    (click)=\"valueChange.emit(!value())\"\n    role=\"switch\"\n    [attr.aria-checked]=\"value()\"></button>\n", styles: ["/* Off: a contour and a knob in the control-contour colour, 3:1 on every\n   surface, instead of a tint that disappears. On: the brand-blue track with a\n   white knob. */\n.ctl-toggle {\n    position: relative;\n    box-sizing: border-box;\n    flex-shrink: 0;\n    width: 34px;\n    height: 18px;\n    padding: 0;\n    cursor: pointer;\n    background: transparent;\n    border: 1.5px solid var(--prism-border-strong);\n    border-radius: 9px;\n    transition:\n        background var(--dur-fast),\n        border-color var(--dur-fast);\n}\n\n.ctl-toggle::after {\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 11px;\n    height: 11px;\n    content: '';\n    background: var(--prism-border-strong);\n    border-radius: 50%;\n    transition:\n        transform var(--dur-fast),\n        background var(--dur-fast);\n}\n\n.ctl-toggle.on {\n    background: var(--prism-toggle-on);\n    border-color: transparent;\n}\n\n.ctl-toggle.on::after {\n    background: var(--prism-on-primary);\n    transform: translateX(16px);\n}\n\n.ctl-toggle:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 2px;\n}\n"] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], typeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeName", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BooleanControlComponent, { className: "BooleanControlComponent", filePath: "app/controls/boolean-control.component.ts", lineNumber: 10 }); })();

package/dist/app/controls/json-control.component.js

@@ -101,10 +101,10 @@ export class JsonControlComponent {
             i0.ɵɵdomProperty("value", ctx.displayText());
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.parseError() ? 7 : -1);
-        } }, styles: [".json-editor[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.json-overlay[_ngcontent-%COMP%] {\n    position: relative;\n    overflow: hidden;\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: var(--%NS%radius-sm);\n    transition: border-color var(--%NS%dur-fast);\n}\n\n.json-overlay[_ngcontent-%COMP%]:focus-within {\n    border-color: var(--%NS%prism-primary);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--%NS%prism-primary) 30%, transparent);\n}\n\n.json-pre[_ngcontent-%COMP%], \n.json-input[_ngcontent-%COMP%] {\n    padding: 4px 8px;\n    margin: 0;\n    font-family: var(--%NS%font-mono);\n    font-size: 12px;\n    line-height: 1.4;\n    overflow-wrap: break-word;\n    tab-size: 2;\n    white-space: pre-wrap;\n}\n\n.json-pre[_ngcontent-%COMP%] {\n    min-height: 56px;\n    pointer-events: none;\n}\n\n.json-pre[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    font-family: inherit;\n}\n\n[_nghost-%COMP%]     .jh-key {\n    color: var(--%NS%prism-code-attr);\n}\n\n[_nghost-%COMP%]     .jh-string {\n    color: var(--%NS%prism-code-str);\n}\n\n[_nghost-%COMP%]     .jh-number {\n    color: var(--%NS%prism-warn);\n}\n\n[_nghost-%COMP%]     .jh-bool {\n    color: var(--%NS%prism-primary);\n}\n\n[_nghost-%COMP%]     .jh-null {\n    color: var(--%NS%prism-text-ghost);\n}\n\n.json-input[_ngcontent-%COMP%] {\n    position: absolute;\n    inset: 0;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n    color: transparent;\n    caret-color: var(--%NS%prism-text);\n    resize: none;\n    background: transparent;\n    border: none;\n}\n\n.json-input[_ngcontent-%COMP%]:focus {\n    outline: none;\n}\n\n.json-input[_ngcontent-%COMP%]::selection {\n    background: rgb(99 102 241 / 30%);\n}\n\n.json-error[_ngcontent-%COMP%] {\n    display: block;\n    margin-top: 2px;\n    font-size: 11px;\n    color: var(--%NS%prism-danger);\n}"] });
+        } }, styles: [".json-editor[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.json-overlay[_ngcontent-%COMP%] {\n    position: relative;\n    overflow: hidden;\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: var(--%NS%radius-sm);\n    transition: border-color var(--%NS%dur-fast);\n}\n\n.json-overlay[_ngcontent-%COMP%]:focus-within {\n    border-color: var(--%NS%prism-primary);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--%NS%prism-primary) 30%, transparent);\n}\n\n.json-pre[_ngcontent-%COMP%], \n.json-input[_ngcontent-%COMP%] {\n    padding: 4px 8px;\n    margin: 0;\n    scrollbar-gutter: stable;\n    font-family: var(--%NS%font-mono);\n    font-size: 12px;\n    line-height: 1.4;\n    overflow-wrap: break-word;\n    tab-size: 2;\n    white-space: pre-wrap;\n    scrollbar-color: var(--%NS%prism-border-strong) transparent;\n    scrollbar-width: thin;\n}\n\n\n\n\n.json-pre[_ngcontent-%COMP%] {\n    min-height: 56px;\n    max-height: calc(10lh + 8px);\n    overflow: hidden;\n    pointer-events: none;\n}\n\n.json-pre[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    font-family: inherit;\n}\n\n[_nghost-%COMP%]     .jh-key {\n    color: var(--%NS%prism-code-attr);\n}\n\n[_nghost-%COMP%]     .jh-string {\n    color: var(--%NS%prism-code-str);\n}\n\n[_nghost-%COMP%]     .jh-number {\n    color: var(--%NS%prism-warn);\n}\n\n[_nghost-%COMP%]     .jh-bool {\n    color: var(--%NS%prism-primary);\n}\n\n[_nghost-%COMP%]     .jh-null {\n    color: var(--%NS%prism-text-muted);\n}\n\n.json-input[_ngcontent-%COMP%] {\n    position: absolute;\n    inset: 0;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n    color: transparent;\n    caret-color: var(--%NS%prism-text);\n    resize: none;\n    background: transparent;\n    border: none;\n}\n\n.json-input[_ngcontent-%COMP%]:focus {\n    outline: none;\n}\n\n.json-input[_ngcontent-%COMP%]::selection {\n    background: color-mix(in srgb, var(--%NS%prism-primary) 30%, transparent);\n}\n\n.json-error[_ngcontent-%COMP%] {\n    display: block;\n    margin-top: 2px;\n    font-size: 11px;\n    color: var(--%NS%prism-danger);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(JsonControlComponent, [{
         type: Component,
-        args: [{ selector: 'prism-json-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"json-editor\">\n    <div class=\"json-overlay\">\n        <pre\n            class=\"json-pre\"\n            #preEl><code [innerHTML]=\"highlightedHtml()\"></code></pre>\n        <textarea\n            #textareaEl\n            class=\"json-input\"\n            [value]=\"displayText()\"\n            (input)=\"onInput($any($event.target).value)\"\n            (scroll)=\"syncScroll()\"\n            spellcheck=\"false\"></textarea>\n    </div>\n    @if (parseError()) {\n        <span class=\"json-error\">Invalid JSON</span>\n    }\n</div>\n", styles: [".json-editor {\n    flex: 1;\n    min-width: 0;\n}\n\n.json-overlay {\n    position: relative;\n    overflow: hidden;\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-sm);\n    transition: border-color var(--dur-fast);\n}\n\n.json-overlay:focus-within {\n    border-color: var(--prism-primary);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n}\n\n.json-pre,\n.json-input {\n    padding: 4px 8px;\n    margin: 0;\n    font-family: var(--font-mono);\n    font-size: 12px;\n    line-height: 1.4;\n    overflow-wrap: break-word;\n    tab-size: 2;\n    white-space: pre-wrap;\n}\n\n.json-pre {\n    min-height: 56px;\n    pointer-events: none;\n}\n\n.json-pre code {\n    font-family: inherit;\n}\n\n:host ::ng-deep .jh-key {\n    color: var(--prism-code-attr);\n}\n\n:host ::ng-deep .jh-string {\n    color: var(--prism-code-str);\n}\n\n:host ::ng-deep .jh-number {\n    color: var(--prism-warn);\n}\n\n:host ::ng-deep .jh-bool {\n    color: var(--prism-primary);\n}\n\n:host ::ng-deep .jh-null {\n    color: var(--prism-text-ghost);\n}\n\n.json-input {\n    position: absolute;\n    inset: 0;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n    color: transparent;\n    caret-color: var(--prism-text);\n    resize: none;\n    background: transparent;\n    border: none;\n}\n\n.json-input:focus {\n    outline: none;\n}\n\n.json-input::selection {\n    background: rgb(99 102 241 / 30%);\n}\n\n.json-error {\n    display: block;\n    margin-top: 2px;\n    font-size: 11px;\n    color: var(--prism-danger);\n}\n"] }]
+        args: [{ selector: 'prism-json-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"json-editor\">\n    <div class=\"json-overlay\">\n        <pre\n            class=\"json-pre\"\n            #preEl><code [innerHTML]=\"highlightedHtml()\"></code></pre>\n        <textarea\n            #textareaEl\n            class=\"json-input\"\n            [value]=\"displayText()\"\n            (input)=\"onInput($any($event.target).value)\"\n            (scroll)=\"syncScroll()\"\n            spellcheck=\"false\"></textarea>\n    </div>\n    @if (parseError()) {\n        <span class=\"json-error\">Invalid JSON</span>\n    }\n</div>\n", styles: [".json-editor {\n    flex: 1;\n    min-width: 0;\n}\n\n.json-overlay {\n    position: relative;\n    overflow: hidden;\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-sm);\n    transition: border-color var(--dur-fast);\n}\n\n.json-overlay:focus-within {\n    border-color: var(--prism-primary);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n}\n\n.json-pre,\n.json-input {\n    padding: 4px 8px;\n    margin: 0;\n    scrollbar-gutter: stable;\n    font-family: var(--font-mono);\n    font-size: 12px;\n    line-height: 1.4;\n    overflow-wrap: break-word;\n    tab-size: 2;\n    white-space: pre-wrap;\n    scrollbar-color: var(--prism-border-strong) transparent;\n    scrollbar-width: thin;\n}\n\n/* The pre sizes the editor up to ten lines; past that the textarea scrolls\n   and syncScroll() moves the pre along. Both reserve the same scrollbar\n   gutter, so their text wraps at the same width. */\n.json-pre {\n    min-height: 56px;\n    max-height: calc(10lh + 8px);\n    overflow: hidden;\n    pointer-events: none;\n}\n\n.json-pre code {\n    font-family: inherit;\n}\n\n:host ::ng-deep .jh-key {\n    color: var(--prism-code-attr);\n}\n\n:host ::ng-deep .jh-string {\n    color: var(--prism-code-str);\n}\n\n:host ::ng-deep .jh-number {\n    color: var(--prism-warn);\n}\n\n:host ::ng-deep .jh-bool {\n    color: var(--prism-primary);\n}\n\n:host ::ng-deep .jh-null {\n    color: var(--prism-text-muted);\n}\n\n.json-input {\n    position: absolute;\n    inset: 0;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n    color: transparent;\n    caret-color: var(--prism-text);\n    resize: none;\n    background: transparent;\n    border: none;\n}\n\n.json-input:focus {\n    outline: none;\n}\n\n.json-input::selection {\n    background: color-mix(in srgb, var(--prism-primary) 30%, transparent);\n}\n\n.json-error {\n    display: block;\n    margin-top: 2px;\n    font-size: 11px;\n    color: var(--prism-danger);\n}\n"] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], typeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeName", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], textareaEl: [{ type: i0.ViewChild, args: ['textareaEl', { isSignal: true }] }], preEl: [{ type: i0.ViewChild, args: ['preEl', { isSignal: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(JsonControlComponent, { className: "JsonControlComponent", filePath: "app/controls/json-control.component.ts", lineNumber: 38 }); })();

package/dist/app/controls/union-control.component.js

@@ -10,6 +10,7 @@ function UnionControlComponent_For_2_Template(rf, ctx) { if (rf & 1) {
     const option_r2 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵclassProp("ctl-pill--active", option_r2 === ctx_r2.value());
+    i0.ɵɵattribute("aria-pressed", option_r2 === ctx_r2.value());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", option_r2, " ");
 } }
@@ -26,15 +27,15 @@ export class UnionControlComponent {
     static ɵfac = function UnionControlComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UnionControlComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UnionControlComponent, selectors: [["prism-union-control"]], inputs: { value: [1, "value"], label: [1, "label"], typeName: [1, "typeName"], options: [1, "options"] }, outputs: { valueChange: "valueChange" }, decls: 3, vars: 0, consts: [["role", "group", 1, "ctl-pills"], [1, "ctl-pill", 3, "ctl-pill--active"], [1, "ctl-pill", 3, "click"]], template: function UnionControlComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵdomElementStart(0, "div", 0);
-            i0.ɵɵrepeaterCreate(1, UnionControlComponent_For_2_Template, 2, 3, "button", 1, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵrepeaterCreate(1, UnionControlComponent_For_2_Template, 2, 4, "button", 1, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵdomElementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵrepeater(ctx.options());
-        } }, styles: [".ctl-pills[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n}\n\n.ctl-pill[_ngcontent-%COMP%] {\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-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 4px;\n    transition: all var(--%NS%dur-fast);\n}\n\n.ctl-pill[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text);\n    border-color: var(--%NS%prism-border-strong);\n}\n\n.ctl-pill--active[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--%NS%prism-primary);\n    background: color-mix(in srgb, var(--%NS%prism-primary) 15%, transparent);\n    border-color: color-mix(in srgb, var(--%NS%prism-primary) 40%, transparent);\n}"] });
+        } }, styles: [".ctl-pills[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n}\n\n.ctl-pill[_ngcontent-%COMP%] {\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-text-2);\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--%NS%prism-border-strong);\n    border-radius: 4px;\n    transition: all var(--%NS%dur-fast);\n}\n\n.ctl-pill[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text);\n    background: var(--%NS%prism-input-bg);\n}\n\n.ctl-pill--active[_ngcontent-%COMP%] {\n    font-weight: 600;\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}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UnionControlComponent, [{
         type: Component,
-        args: [{ selector: 'prism-union-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"ctl-pills\"\n    role=\"group\">\n    @for (option of options(); track option) {\n        <button\n            class=\"ctl-pill\"\n            [class.ctl-pill--active]=\"option === value()\"\n            (click)=\"valueChange.emit(option)\">\n            {{ option }}\n        </button>\n    }\n</div>\n", styles: [".ctl-pills {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n}\n\n.ctl-pill {\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-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--prism-border);\n    border-radius: 4px;\n    transition: all var(--dur-fast);\n}\n\n.ctl-pill:hover {\n    color: var(--prism-text);\n    border-color: var(--prism-border-strong);\n}\n\n.ctl-pill--active {\n    font-weight: 600;\n    color: var(--prism-primary);\n    background: color-mix(in srgb, var(--prism-primary) 15%, transparent);\n    border-color: color-mix(in srgb, var(--prism-primary) 40%, transparent);\n}\n"] }]
+        args: [{ selector: 'prism-union-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"ctl-pills\"\n    role=\"group\">\n    @for (option of options(); track option) {\n        <button\n            class=\"ctl-pill\"\n            [class.ctl-pill--active]=\"option === value()\"\n            [attr.aria-pressed]=\"option === value()\"\n            (click)=\"valueChange.emit(option)\">\n            {{ option }}\n        </button>\n    }\n</div>\n", styles: [".ctl-pills {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n}\n\n.ctl-pill {\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-text-2);\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--prism-border-strong);\n    border-radius: 4px;\n    transition: all var(--dur-fast);\n}\n\n.ctl-pill:hover {\n    color: var(--prism-text);\n    background: var(--prism-input-bg);\n}\n\n.ctl-pill--active {\n    font-weight: 600;\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"] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], typeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeName", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnionControlComponent, { className: "UnionControlComponent", filePath: "app/controls/union-control.component.ts", lineNumber: 10 }); })();

package/dist/app/directives/resize-value.d.ts

@@ -5,7 +5,7 @@
  * rendered inside a host component to be exercised, and this package's specs
  * run under jsdom against SWC-compiled sources, where JIT cannot instantiate
  * one. Extracted, the maths is ordinary and testable. It is the same reason
- * `known-inputs.ts` and `overlay-resolver.ts` sit beside their components.
+ * `input-bindings.ts` and `overlay-resolver.ts` sit beside their components.
  */
 /**
  * Where a drag lands.

package/dist/app/directives/resize-value.js

@@ -5,7 +5,7 @@
  * rendered inside a host component to be exercised, and this package's specs
  * run under jsdom against SWC-compiled sources, where JIT cannot instantiate
  * one. Extracted, the maths is ordinary and testable. It is the same reason
- * `known-inputs.ts` and `overlay-resolver.ts` sit beside their components.
+ * `input-bindings.ts` and `overlay-resolver.ts` sit beside their components.
  */
 /**
  * Where a drag lands.

package/dist/app/discovery-manifest.d.ts

@@ -6,8 +6,8 @@ export declare function serializableMeta(meta: Record<string, unknown> | undefin
  *
  * It is not the runtime manifest: no Angular class references, no
  * providers, no scanned input/output metadata. It carries what an external tool
- * needs to enumerate and address variants, plus the `@Showcase` metadata that
- * lets a tool decide how to treat one.
+ * needs to enumerate and address variants and component-level states, plus the
+ * `@Showcase` metadata that lets a tool decide how to treat one.
  */
 export declare function buildDiscoveryManifest(manifest: RuntimeManifest): DiscoveryManifest;
 //# sourceMappingURL=discovery-manifest.d.ts.map

package/dist/app/discovery-manifest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"discovery-manifest.d.ts","sourceRoot":"","sources":["../../src/app/discovery-manifest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAsB,iBAAiB,EAAoB,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAyD1H,6EAA6E;AAC7E,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAM/G;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,eAAe,GAAG,iBAAiB,CAyCnF"}
+{"version":3,"file":"discovery-manifest.d.ts","sourceRoot":"","sources":["../../src/app/discovery-manifest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAsB,iBAAiB,EAAoC,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAyD1I,6EAA6E;AAC7E,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAM/G;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,eAAe,GAAG,iBAAiB,CAoDnF"}

package/dist/app/discovery-manifest.js

@@ -1,5 +1,5 @@
 import { resolveVariantBg } from '../shared/variant-bg.js';
-import { forcesAnyState } from './pseudo/pseudo-state-marker.js';
+import { forcesAnyState } from './pseudo/pseudo-targets.js';
 /**
  * External tooling reads `__PRISM_MANIFEST__` through a structured-clone bridge
  * (Playwright's `page.evaluate()`, `postMessage`, devtools). `ShowcaseConfig.meta`
@@ -60,8 +60,8 @@ export function serializableMeta(meta) {
  *
  * It is not the runtime manifest: no Angular class references, no
  * providers, no scanned input/output metadata. It carries what an external tool
- * needs to enumerate and address variants, plus the `@Showcase` metadata that
- * lets a tool decide how to treat one.
+ * needs to enumerate and address variants and component-level states, plus the
+ * `@Showcase` metadata that lets a tool decide how to treat one.
  */
 export function buildDiscoveryManifest(manifest) {
     return {
@@ -82,6 +82,8 @@ export function buildDiscoveryManifest(manifest) {
                         discovered.meta = meta;
                     if (pseudo)
                         discovered.pseudo = pseudo;
+                    if (variant.states === false)
+                        discovered.states = false;
                     return discovered;
                 })
                 : [
@@ -91,12 +93,22 @@ export function buildDiscoveryManifest(manifest) {
                         bg: resolveVariantBg(showcaseConfig, 0)
                     }
                 ];
+            // Every slot is listed, the empty ones too: the scanner keeps a state it
+            // cannot use as `{ name, pseudo: {} }` so the position in the array stays
+            // the `?state=` value of the states behind it.
+            const states = (showcaseConfig.states ?? []).map((state, index) => ({
+                name: state.name,
+                index,
+                pseudo: (serializableMeta(state.pseudo) ?? {})
+            }));
             const meta = serializableMeta(showcaseConfig.meta);
             const discovered = {
                 className,
                 title: showcaseConfig.title,
                 variants
             };
+            if (states.length)
+                discovered.states = states;
             if (meta)
                 discovered.meta = meta;
             return discovered;

package/dist/app/header/header-brand.d.ts

@@ -0,0 +1,25 @@
+import type { NgPrismConfig } from '../../plugin/plugin.types.js';
+/**
+ * What the header's brand slot shows.
+ *
+ * `wordmark` is ng-prism's own: the symbol (or the configured logo) and
+ * "ng-prism" in the brand gradient. `title` is a consuming app's name, set in
+ * plain text: the gradient belongs to the ng-prism wordmark only, and ng-prism
+ * stays visible through "Powered by ng-prism" in the sidebar footer.
+ */
+export type HeaderBrand = {
+    kind: 'wordmark';
+    logoUrl: string | null;
+} | {
+    kind: 'title';
+    title: string;
+    logoUrl: string | null;
+};
+/**
+ * The brand slot for a config.
+ *
+ * The logo for dark backgrounds is preferred in both themes, because the header
+ * is a navy band in both since 22.7.
+ */
+export declare function headerBrand(config: Pick<NgPrismConfig, 'title' | 'logo'>): HeaderBrand;
+//# sourceMappingURL=header-brand.d.ts.map

package/dist/app/header/header-brand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-brand.d.ts","sourceRoot":"","sources":["../../../src/app/header/header-brand.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAElE;;;;;;;GAOG;AACH,MAAM,MAAM,WAAW,GAAG;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC;AAElI;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG,WAAW,CAItF"}

package/dist/app/header/header-brand.js

@@ -0,0 +1,10 @@
+/**
+ * The brand slot for a config.
+ *
+ * The logo for dark backgrounds is preferred in both themes, because the header
+ * is a navy band in both since 22.7.
+ */
+export function headerBrand(config) {
+    const logoUrl = config.logo?.dark ?? config.logo?.light ?? null;
+    return config.title ? { kind: 'title', title: config.title, logoUrl } : { kind: 'wordmark', logoUrl };
+}

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

@@ -8,8 +8,8 @@ export declare class PrismHeaderComponent {
     protected readonly themeService: PrismThemeService;
     protected readonly widgetsStart: import("@angular/core").Signal<import("../../plugin/plugin.types.js").HeaderWidgetDefinition[]>;
     protected readonly widgetsEnd: import("@angular/core").Signal<import("../../plugin/plugin.types.js").HeaderWidgetDefinition[]>;
-    protected readonly logoUrl: import("@angular/core").Signal<string | null>;
-    protected readonly title: import("@angular/core").Signal<string>;
+    protected readonly brand: import("@angular/core").Signal<import("./header-brand.js").HeaderBrand>;
+    protected readonly brandTitle: import("@angular/core").Signal<string | null>;
     protected readonly subtitle: import("@angular/core").Signal<string | null>;
     protected readonly buildInfoLabel: import("@angular/core").Signal<string | null>;
     protected onGlobalKey(e: KeyboardEvent): void;

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

@@ -1 +1 @@
-{"version":3,"file":"prism-header.component.d.ts","sourceRoot":"","sources":["../../../src/app/header/prism-header.component.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;;AAIvE,qBAQa,oBAAoB;IAC7B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAE5D,SAAS,CAAC,QAAQ,CAAC,YAAY,kGAE7B;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,kGAI3B;IAEF,SAAS,CAAC,QAAQ,CAAC,OAAO,gDAOvB;IAEH,SAAS,CAAC,QAAQ,CAAC,KAAK,yCAAmD;IAC3E,SAAS,CAAC,QAAQ,CAAC,QAAQ,gDAAgD;IAE3E,SAAS,CAAC,QAAQ,CAAC,cAAc,gDAS9B;IAGH,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAO7C,SAAS,CAAC,aAAa,IAAI,IAAI;yCA/CtB,oBAAoB;2CAApB,oBAAoB;CAkDhC"}
+{"version":3,"file":"prism-header.component.d.ts","sourceRoot":"","sources":["../../../src/app/header/prism-header.component.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;;AAOvE,qBAWa,oBAAoB;IAC7B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAE5D,SAAS,CAAC,QAAQ,CAAC,YAAY,kGAE7B;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,kGAI3B;IAEF,SAAS,CAAC,QAAQ,CAAC,KAAK,0EAA4C;IACpE,SAAS,CAAC,QAAQ,CAAC,UAAU,gDAI1B;IACH,SAAS,CAAC,QAAQ,CAAC,QAAQ,gDAAgD;IAE3E,SAAS,CAAC,QAAQ,CAAC,cAAc,gDAS9B;IAGH,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAO7C,SAAS,CAAC,aAAa,IAAI,IAAI;yCA3CtB,oBAAoB;2CAApB,oBAAoB;CA8ChC"}

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

@@ -5,23 +5,38 @@ import { BUILTIN_HEADER_WIDGETS } from '../panels/builtin-header-widgets.js';
 import { PrismPluginService } from '../services/prism-plugin.service.js';
 import { PrismSearchService } from '../services/prism-search.service.js';
 import { PrismThemeService } from '../services/prism-theme.service.js';
+import { PrismIconButtonComponent } from '../shared/prism-icon-button.component.js';
+import { PrismLogoComponent } from '../shared/prism-logo.component.js';
 import { PRISM_CONFIG } from '../tokens/prism-tokens.js';
+import { headerBrand } from './header-brand.js';
 import { PrismHeaderWidgetHostComponent } from './prism-header-widget-host.component.js';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.id;
-function PrismHeaderComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 2);
+function PrismHeaderComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 3);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("src", ctx_r0.logoUrl(), i0.ɵɵsanitizeUrl)("alt", ctx_r0.title());
+    i0.ɵɵproperty("src", ctx, i0.ɵɵsanitizeUrl);
 } }
-function PrismHeaderComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 3);
-    i0.ɵɵelement(1, "img", 14);
+function PrismHeaderComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-logo", 4);
+} if (rf & 2) {
+    i0.ɵɵproperty("size", 22);
+} }
+function PrismHeaderComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 6);
+    i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx);
 } }
 function PrismHeaderComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 6);
+    i0.ɵɵelementStart(0, "span", 7);
+    i0.ɵɵtext(1, "ng-prism");
+    i0.ɵɵelementEnd();
+} }
+function PrismHeaderComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 8);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -29,29 +44,29 @@ function PrismHeaderComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.subtitle());
 } }
-function PrismHeaderComponent_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-header-widget-host", 9);
+function PrismHeaderComponent_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-header-widget-host", 11);
 } if (rf & 2) {
     const w_r2 = ctx.$implicit;
     i0.ɵɵproperty("widget", w_r2);
 } }
-function PrismHeaderComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 7);
-    i0.ɵɵrepeaterCreate(1, PrismHeaderComponent_Conditional_8_For_2_Template, 1, 1, "prism-header-widget-host", 9, _forTrack0);
+function PrismHeaderComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵrepeaterCreate(1, PrismHeaderComponent_Conditional_9_For_2_Template, 1, 1, "prism-header-widget-host", 11, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.widgetsStart());
 } }
-function PrismHeaderComponent_For_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-header-widget-host", 9);
+function PrismHeaderComponent_For_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-header-widget-host", 11);
 } if (rf & 2) {
     const w_r3 = ctx.$implicit;
     i0.ɵɵproperty("widget", w_r3);
 } }
-function PrismHeaderComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 10);
+function PrismHeaderComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 12);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -59,13 +74,13 @@ function PrismHeaderComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.buildInfoLabel());
 } }
-function PrismHeaderComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-icon", 12);
+function PrismHeaderComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-icon", 14);
 } if (rf & 2) {
     i0.ɵɵproperty("size", 16);
 } }
-function PrismHeaderComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-icon", 13);
+function PrismHeaderComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-icon", 15);
 } if (rf & 2) {
     i0.ɵɵproperty("size", 16);
 } }
@@ -78,16 +93,13 @@ export class PrismHeaderComponent {
     ...(ngDevMode ? [{ debugName: "widgetsStart" }] : /* istanbul ignore next */ []));
     widgetsEnd = computed(() => [...BUILTIN_HEADER_WIDGETS.filter((w) => (w.placement ?? 'end') === 'end'), ...this.pluginService.headerWidgetsEnd()].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "widgetsEnd" }] : /* istanbul ignore next */ []));
-    logoUrl = computed(() => {
-        const logo = this.config.logo;
-        if (!logo)
-            return null;
-        const isDark = this.themeService.isDark();
-        return (isDark ? (logo.dark ?? logo.light) : (logo.light ?? logo.dark)) ?? null;
+    brand = computed(() => headerBrand(this.config), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
+    brandTitle = computed(() => {
+        const brand = this.brand();
+        return brand.kind === 'title' ? brand.title : null;
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "logoUrl" }] : /* istanbul ignore next */ []));
-    title = computed(() => this.config.title ?? 'ng-prism', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    ...(ngDevMode ? [{ debugName: "brandTitle" }] : /* istanbul ignore next */ []));
     subtitle = computed(() => this.config.subtitle ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
     buildInfoLabel = computed(() => {
@@ -112,51 +124,55 @@ export class PrismHeaderComponent {
         // Placeholder, will be wired to the command palette later
     }
     static ɵfac = function PrismHeaderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismHeaderComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismHeaderComponent, selectors: [["prism-header"]], hostBindings: function PrismHeaderComponent_HostBindings(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismHeaderComponent, selectors: [["prism-header"]], hostVars: 2, hostBindings: function PrismHeaderComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown", function PrismHeaderComponent_keydown_HostBindingHandler($event) { return ctx.onGlobalKey($event); }, i0.ɵɵresolveDocument);
-        } }, decls: 17, vars: 9, consts: [[1, "prism-header"], [1, "prism-header__brand"], [1, "prism-header__logo-img", 3, "src", "alt"], [1, "prism-header__logo-default"], [1, "prism-header__brand-text"], [1, "prism-header__brand-name"], [1, "prism-header__brand-sub"], [1, "prism-header__widgets", "prism-header__widgets--start"], [1, "prism-header__actions"], [3, "widget"], [1, "prism-header__build-pill"], [1, "prism-header__icon-btn", 3, "click", "title"], ["name", "sun", 3, "size"], ["name", "moon", 3, "size"], ["alt", "ng prism logo", "src", "data:image/png;base64,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"]], template: function PrismHeaderComponent_Template(rf, ctx) { if (rf & 1) {
+        } if (rf & 2) {
+            i0.ɵɵstyleMap(ctx.themeService.headerTokens());
+        } }, decls: 18, vars: 8, consts: [[1, "prism-header"], [1, "prism-header__brand"], ["aria-hidden", "true", 1, "prism-header__glow"], ["alt", "", 1, "prism-header__logo-img", 3, "src"], [3, "size"], [1, "prism-header__brand-text"], [1, "prism-header__brand-name"], [1, "prism-header__wordmark"], [1, "prism-header__brand-sub"], [1, "prism-header__widgets", "prism-header__widgets--start"], [1, "prism-header__actions"], [3, "widget"], [1, "prism-header__build-pill"], ["prismIconButton", "", "size", "md", 3, "click", "title"], ["name", "sun", 3, "size"], ["name", "moon", 3, "size"]], template: function PrismHeaderComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "header", 0)(1, "div", 1);
-            i0.ɵɵconditionalCreate(2, PrismHeaderComponent_Conditional_2_Template, 1, 2, "img", 2)(3, PrismHeaderComponent_Conditional_3_Template, 2, 0, "div", 3);
-            i0.ɵɵelementStart(4, "div", 4)(5, "span", 5);
-            i0.ɵɵtext(6);
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(7, PrismHeaderComponent_Conditional_7_Template, 2, 1, "span", 6);
+            i0.ɵɵelement(2, "span", 2);
+            i0.ɵɵconditionalCreate(3, PrismHeaderComponent_Conditional_3_Template, 1, 1, "img", 3)(4, PrismHeaderComponent_Conditional_4_Template, 1, 1, "prism-logo", 4);
+            i0.ɵɵelementStart(5, "div", 5);
+            i0.ɵɵconditionalCreate(6, PrismHeaderComponent_Conditional_6_Template, 2, 1, "span", 6)(7, PrismHeaderComponent_Conditional_7_Template, 2, 0, "span", 7);
+            i0.ɵɵconditionalCreate(8, PrismHeaderComponent_Conditional_8_Template, 2, 1, "span", 8);
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(8, PrismHeaderComponent_Conditional_8_Template, 3, 0, "div", 7);
-            i0.ɵɵelementStart(9, "div", 8);
-            i0.ɵɵrepeaterCreate(10, PrismHeaderComponent_For_11_Template, 1, 1, "prism-header-widget-host", 9, _forTrack0);
-            i0.ɵɵconditionalCreate(12, PrismHeaderComponent_Conditional_12_Template, 2, 1, "span", 10);
-            i0.ɵɵelementStart(13, "button", 11);
-            i0.ɵɵlistener("click", function PrismHeaderComponent_Template_button_click_13_listener() { return ctx.themeService.toggle(); });
-            i0.ɵɵconditionalCreate(14, PrismHeaderComponent_Conditional_14_Template, 1, 1, "prism-icon", 12)(15, PrismHeaderComponent_Conditional_15_Template, 1, 1, "prism-icon", 13);
+            i0.ɵɵconditionalCreate(9, PrismHeaderComponent_Conditional_9_Template, 3, 0, "div", 9);
+            i0.ɵɵelementStart(10, "div", 10);
+            i0.ɵɵrepeaterCreate(11, PrismHeaderComponent_For_12_Template, 1, 1, "prism-header-widget-host", 11, _forTrack0);
+            i0.ɵɵconditionalCreate(13, PrismHeaderComponent_Conditional_13_Template, 2, 1, "span", 12);
+            i0.ɵɵelementStart(14, "button", 13);
+            i0.ɵɵlistener("click", function PrismHeaderComponent_Template_button_click_14_listener() { return ctx.themeService.toggle(); });
+            i0.ɵɵconditionalCreate(15, PrismHeaderComponent_Conditional_15_Template, 1, 1, "prism-icon", 14)(16, PrismHeaderComponent_Conditional_16_Template, 1, 1, "prism-icon", 15);
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(16, "prism-layout-menu");
+            i0.ɵɵelement(17, "prism-layout-menu");
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
+            let tmp_0_0;
+            let tmp_1_0;
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional((tmp_0_0 = ctx.brand().logoUrl) ? 3 : 4, tmp_0_0);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional((tmp_1_0 = ctx.brandTitle()) ? 6 : 7, tmp_1_0);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.logoUrl() ? 2 : 3);
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate(ctx.title());
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.subtitle() ? 7 : -1);
+            i0.ɵɵconditional(ctx.subtitle() ? 8 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.widgetsStart().length ? 8 : -1);
+            i0.ɵɵconditional(ctx.widgetsStart().length ? 9 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵrepeater(ctx.widgetsEnd());
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.buildInfoLabel() ? 12 : -1);
+            i0.ɵɵconditional(ctx.buildInfoLabel() ? 13 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("title", ctx.themeService.isDark() ? "Switch to light mode" : "Switch to dark mode");
-            i0.ɵɵattribute("aria-label", ctx.themeService.isDark() ? "Switch to light mode" : "Switch to dark mode")("aria-pressed", ctx.themeService.isDark());
+            i0.ɵɵattribute("aria-label", ctx.themeService.isDark() ? "Switch to light mode" : "Switch to dark mode");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.themeService.isDark() ? 14 : 15);
-        } }, dependencies: [PrismIconComponent, PrismLayoutMenuComponent, PrismHeaderWidgetHostComponent], styles: [".prism-header[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: minmax(min-content, var(--%NS%sw, 264px)) 1fr auto;\n    align-items: center;\n    height: var(--%NS%band-header);\n    padding: 0 14px 0 0;\n    background: var(--%NS%prism-bg);\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.prism-header__brand[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    padding: 0 16px;\n    white-space: nowrap;\n    cursor: pointer;\n}\n\n.prism-header__logo-default[_ngcontent-%COMP%] {\n    flex: 0 0 26px;\n    width: 26px;\n    height: 26px;\n    color: var(--%NS%prism-primary);\n    filter: drop-shadow(0 0 8px var(--%NS%prism-glow-strong));\n}\n\n.prism-header__logo-default[_ngcontent-%COMP%]   img[_ngcontent-%COMP%] {\n    width: 30px;\n}\n\n.prism-header__logo-img[_ngcontent-%COMP%] {\n    width: auto;\n    height: 26px;\n    object-fit: contain;\n}\n\n.prism-header__brand-text[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    line-height: 1.1;\n}\n\n.prism-header__brand-name[_ngcontent-%COMP%] {\n    font-size: var(--%NS%fs-xl);\n    font-weight: 700;\n    color: transparent;\n    letter-spacing: -0.01em;\n    background: linear-gradient(90deg, var(--%NS%prism-primary), var(--%NS%prism-accent) 60%, var(--%NS%prism-primary-to));\n    background-clip: text;\n}\n\n.prism-header__brand-sub[_ngcontent-%COMP%] {\n    font-family: var(--%NS%font-mono);\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-ghost);\n}\n\n.prism-header__cmdbar[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    justify-self: center;\n    width: 100%;\n    max-width: 540px;\n    height: 32px;\n    padding: 0 12px;\n    font-size: var(--%NS%fs-lg);\n    color: var(--%NS%prism-text-muted);\n    cursor: pointer;\n    background: var(--%NS%prism-input-bg);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 8px;\n    transition:\n        border-color var(--%NS%dur-fast),\n        background var(--%NS%dur-fast);\n}\n\n.prism-header__cmdbar[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text-2);\n    border-color: var(--%NS%prism-border-strong);\n}\n\n.prism-header__cmdbar-text[_ngcontent-%COMP%] {\n    flex: 1;\n    text-align: left;\n}\n\n.prism-header__cmdbar-shortcut[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 3px;\n}\n\n.prism-header__cmdbar-shortcut[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n    padding: 1px 5px;\n    font-family: var(--%NS%font-mono);\n    font-size: 10.5px;\n    color: var(--%NS%prism-text-muted);\n    background: var(--%NS%prism-input-bg);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 4px;\n}\n\n.prism-header__build-pill[_ngcontent-%COMP%] {\n    padding: 2px 10px;\n    font-family: var(--%NS%font-mono);\n    font-size: var(--%NS%fs-xs);\n    line-height: 1.4;\n    color: var(--%NS%prism-text-ghost);\n    white-space: nowrap;\n    background: var(--%NS%prism-input-bg);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 9999px;\n}\n\n.prism-header__actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    justify-content: flex-end;\n}\n\n.prism-header__widgets[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    min-width: 0;\n}\n\n.prism-header__widgets--start[_ngcontent-%COMP%] {\n    justify-content: flex-start;\n    padding-left: 4px;\n}\n\n.prism-header__icon-btn[_ngcontent-%COMP%] {\n    position: relative;\n    display: grid;\n    place-items: center;\n    width: 32px;\n    height: 32px;\n    color: var(--%NS%prism-text-muted);\n    cursor: pointer;\n    background: none;\n    border: none;\n    border-radius: 8px;\n    transition: all var(--%NS%dur-fast);\n}\n\n.prism-header__icon-btn[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text);\n    background: var(--%NS%prism-input-bg);\n}\n\n[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 2px;\n}"] });
+            i0.ɵɵconditional(ctx.themeService.isDark() ? 15 : 16);
+        } }, dependencies: [PrismIconComponent, PrismLayoutMenuComponent, PrismHeaderWidgetHostComponent, PrismLogoComponent, PrismIconButtonComponent], styles: ["\n\n[_nghost-%COMP%] {\n    display: block;\n}\n\n.prism-header[_ngcontent-%COMP%] {\n    position: relative;\n    display: grid;\n    grid-template-columns: minmax(min-content, var(--%NS%sw, 264px)) 1fr auto;\n    align-items: center;\n    height: var(--%NS%band-header);\n    padding: 0 14px 0 0;\n    color: var(--%NS%prism-text);\n    background: var(--%NS%prism-bg);\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n\n.prism-header[_ngcontent-%COMP%]::before {\n    position: absolute;\n    inset: 0 0 auto;\n    height: 2px;\n    pointer-events: none;\n    content: '';\n    background: var(--%NS%prism-brand-gradient);\n}\n\n\nhtml[data-theme='light'][_nghost-%COMP%]   .prism-header[_ngcontent-%COMP%], html[data-theme='light']   [_nghost-%COMP%]   .prism-header[_ngcontent-%COMP%] {\n    border-bottom-color: transparent;\n}\n\n.prism-header__brand[_ngcontent-%COMP%] {\n    position: relative;\n    display: flex;\n    gap: 9px;\n    align-items: center;\n    padding: 0 16px;\n    white-space: nowrap;\n    cursor: pointer;\n    isolation: isolate;\n}\n\n\n.prism-header__glow[_ngcontent-%COMP%] {\n    position: absolute;\n    top: -16px;\n    left: 4px;\n    z-index: -1;\n    width: 150px;\n    height: 68px;\n    pointer-events: none;\n    background: var(--%NS%prism-brand-glow);\n    border-radius: 50%;\n    filter: blur(10px);\n}\n\n.prism-header__logo-img[_ngcontent-%COMP%] {\n    width: auto;\n    height: 24px;\n    object-fit: contain;\n}\n\n.prism-header__brand-text[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    line-height: 1.1;\n}\n\n\n.prism-header__wordmark[_ngcontent-%COMP%] {\n    font-size: 16.5px;\n    font-weight: 700;\n    color: transparent;\n    letter-spacing: -0.035em;\n    background: var(--%NS%prism-brand-gradient);\n    background-clip: text;\n}\n\n.prism-header__brand-name[_ngcontent-%COMP%] {\n    font-size: var(--%NS%fs-xl);\n    font-weight: 600;\n    color: var(--%NS%prism-text);\n    letter-spacing: -0.01em;\n}\n\n.prism-header__brand-sub[_ngcontent-%COMP%] {\n    font-family: var(--%NS%font-mono);\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-muted);\n}\n\n.prism-header__build-pill[_ngcontent-%COMP%] {\n    padding: 2px 10px;\n    font-family: var(--%NS%font-mono);\n    font-size: var(--%NS%fs-xs);\n    line-height: 1.4;\n    color: var(--%NS%prism-text-muted);\n    white-space: nowrap;\n    background: var(--%NS%prism-input-bg);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 9999px;\n}\n\n.prism-header__actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    justify-content: flex-end;\n}\n\n.prism-header__widgets[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    min-width: 0;\n}\n\n.prism-header__widgets--start[_ngcontent-%COMP%] {\n    justify-content: flex-start;\n    padding-left: 4px;\n}\n\n[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 2px;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismHeaderComponent, [{
         type: Component,
-        args: [{ selector: 'prism-header', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent, PrismLayoutMenuComponent, PrismHeaderWidgetHostComponent], template: "<header class=\"prism-header\">\n    <div class=\"prism-header__brand\">\n        @if (logoUrl()) {\n            <img\n                class=\"prism-header__logo-img\"\n                [src]=\"logoUrl()\"\n                [alt]=\"title()\" />\n        } @else {\n            <div class=\"prism-header__logo-default\">\n                <!-- @formatter:off -->\n                <!-- prettier-ignore -->\n                <img alt=\"ng prism logo\" src=\"data:image/png;base64,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\" />\n                <!-- @formatter:on -->\n            </div>\n        }\n        <div class=\"prism-header__brand-text\">\n            <span class=\"prism-header__brand-name\">{{ title() }}</span>\n            @if (subtitle()) {\n                <span class=\"prism-header__brand-sub\">{{ subtitle() }}</span>\n            }\n        </div>\n    </div>\n    @if (widgetsStart().length) {\n        <div class=\"prism-header__widgets prism-header__widgets--start\">\n            @for (w of widgetsStart(); track w.id) {\n                <prism-header-widget-host [widget]=\"w\" />\n            }\n        </div>\n    }\n    <div class=\"prism-header__actions\">\n        @for (w of widgetsEnd(); track w.id) {\n            <prism-header-widget-host [widget]=\"w\" />\n        }\n        @if (buildInfoLabel()) {\n            <span class=\"prism-header__build-pill\">{{ buildInfoLabel() }}</span>\n        }\n        <button\n            class=\"prism-header__icon-btn\"\n            (click)=\"themeService.toggle()\"\n            [title]=\"themeService.isDark() ? 'Switch to light mode' : 'Switch to dark mode'\"\n            [attr.aria-label]=\"themeService.isDark() ? 'Switch to light mode' : 'Switch to dark mode'\"\n            [attr.aria-pressed]=\"themeService.isDark()\">\n            @if (themeService.isDark()) {\n                <prism-icon\n                    name=\"sun\"\n                    [size]=\"16\" />\n            } @else {\n                <prism-icon\n                    name=\"moon\"\n                    [size]=\"16\" />\n            }\n        </button>\n        <prism-layout-menu />\n    </div>\n</header>\n", styles: [".prism-header {\n    display: grid;\n    grid-template-columns: minmax(min-content, var(--sw, 264px)) 1fr auto;\n    align-items: center;\n    height: var(--band-header);\n    padding: 0 14px 0 0;\n    background: var(--prism-bg);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.prism-header__brand {\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    padding: 0 16px;\n    white-space: nowrap;\n    cursor: pointer;\n}\n\n.prism-header__logo-default {\n    flex: 0 0 26px;\n    width: 26px;\n    height: 26px;\n    color: var(--prism-primary);\n    filter: drop-shadow(0 0 8px var(--prism-glow-strong));\n}\n\n.prism-header__logo-default img {\n    width: 30px;\n}\n\n.prism-header__logo-img {\n    width: auto;\n    height: 26px;\n    object-fit: contain;\n}\n\n.prism-header__brand-text {\n    display: flex;\n    flex-direction: column;\n    line-height: 1.1;\n}\n\n.prism-header__brand-name {\n    font-size: var(--fs-xl);\n    font-weight: 700;\n    color: transparent;\n    letter-spacing: -0.01em;\n    background: linear-gradient(90deg, var(--prism-primary), var(--prism-accent) 60%, var(--prism-primary-to));\n    background-clip: text;\n}\n\n.prism-header__brand-sub {\n    font-family: var(--font-mono);\n    font-size: var(--fs-xs);\n    color: var(--prism-text-ghost);\n}\n\n.prism-header__cmdbar {\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    justify-self: center;\n    width: 100%;\n    max-width: 540px;\n    height: 32px;\n    padding: 0 12px;\n    font-size: var(--fs-lg);\n    color: var(--prism-text-muted);\n    cursor: pointer;\n    background: var(--prism-input-bg);\n    border: 1px solid var(--prism-border);\n    border-radius: 8px;\n    transition:\n        border-color var(--dur-fast),\n        background var(--dur-fast);\n}\n\n.prism-header__cmdbar:hover {\n    color: var(--prism-text-2);\n    border-color: var(--prism-border-strong);\n}\n\n.prism-header__cmdbar-text {\n    flex: 1;\n    text-align: left;\n}\n\n.prism-header__cmdbar-shortcut {\n    display: flex;\n    gap: 3px;\n}\n\n.prism-header__cmdbar-shortcut kbd {\n    padding: 1px 5px;\n    font-family: var(--font-mono);\n    font-size: 10.5px;\n    color: var(--prism-text-muted);\n    background: var(--prism-input-bg);\n    border: 1px solid var(--prism-border);\n    border-radius: 4px;\n}\n\n.prism-header__build-pill {\n    padding: 2px 10px;\n    font-family: var(--font-mono);\n    font-size: var(--fs-xs);\n    line-height: 1.4;\n    color: var(--prism-text-ghost);\n    white-space: nowrap;\n    background: var(--prism-input-bg);\n    border: 1px solid var(--prism-border);\n    border-radius: 9999px;\n}\n\n.prism-header__actions {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    justify-content: flex-end;\n}\n\n.prism-header__widgets {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    min-width: 0;\n}\n\n.prism-header__widgets--start {\n    justify-content: flex-start;\n    padding-left: 4px;\n}\n\n.prism-header__icon-btn {\n    position: relative;\n    display: grid;\n    place-items: center;\n    width: 32px;\n    height: 32px;\n    color: var(--prism-text-muted);\n    cursor: pointer;\n    background: none;\n    border: none;\n    border-radius: 8px;\n    transition: all var(--dur-fast);\n}\n\n.prism-header__icon-btn:hover {\n    color: var(--prism-text);\n    background: var(--prism-input-bg);\n}\n\n:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 2px;\n}\n"] }]
+        args: [{ selector: 'prism-header', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent, PrismLayoutMenuComponent, PrismHeaderWidgetHostComponent, PrismLogoComponent, PrismIconButtonComponent], host: { '[style]': 'themeService.headerTokens()' }, template: "<header class=\"prism-header\">\n    <div class=\"prism-header__brand\">\n        <span\n            class=\"prism-header__glow\"\n            aria-hidden=\"true\"></span>\n        @if (brand().logoUrl; as logoUrl) {\n            <img\n                class=\"prism-header__logo-img\"\n                [src]=\"logoUrl\"\n                alt=\"\" />\n        } @else {\n            <prism-logo [size]=\"22\" />\n        }\n        <div class=\"prism-header__brand-text\">\n            @if (brandTitle(); as title) {\n                <span class=\"prism-header__brand-name\">{{ title }}</span>\n            } @else {\n                <span class=\"prism-header__wordmark\">ng-prism</span>\n            }\n            @if (subtitle()) {\n                <span class=\"prism-header__brand-sub\">{{ subtitle() }}</span>\n            }\n        </div>\n    </div>\n    @if (widgetsStart().length) {\n        <div class=\"prism-header__widgets prism-header__widgets--start\">\n            @for (w of widgetsStart(); track w.id) {\n                <prism-header-widget-host [widget]=\"w\" />\n            }\n        </div>\n    }\n    <div class=\"prism-header__actions\">\n        @for (w of widgetsEnd(); track w.id) {\n            <prism-header-widget-host [widget]=\"w\" />\n        }\n        @if (buildInfoLabel()) {\n            <span class=\"prism-header__build-pill\">{{ buildInfoLabel() }}</span>\n        }\n        <button\n            prismIconButton\n            size=\"md\"\n            (click)=\"themeService.toggle()\"\n            [title]=\"themeService.isDark() ? 'Switch to light mode' : 'Switch to dark mode'\"\n            [attr.aria-label]=\"themeService.isDark() ? 'Switch to light mode' : 'Switch to dark mode'\">\n            @if (themeService.isDark()) {\n                <prism-icon\n                    name=\"sun\"\n                    [size]=\"16\" />\n            } @else {\n                <prism-icon\n                    name=\"moon\"\n                    [size]=\"16\" />\n            }\n        </button>\n        <prism-layout-menu />\n    </div>\n</header>\n", styles: ["/* The host carries the dark token set inline (see the component), so every\n   token below resolves to the navy band in both themes. */\n:host {\n    display: block;\n}\n\n.prism-header {\n    position: relative;\n    display: grid;\n    grid-template-columns: minmax(min-content, var(--sw, 264px)) 1fr auto;\n    align-items: center;\n    height: var(--band-header);\n    padding: 0 14px 0 0;\n    color: var(--prism-text);\n    background: var(--prism-bg);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n/* The brand edge: one of the few places the gradient appears outside the logo. */\n.prism-header::before {\n    position: absolute;\n    inset: 0 0 auto;\n    height: 2px;\n    pointer-events: none;\n    content: '';\n    background: var(--prism-brand-gradient);\n}\n\n/* In the light theme the band sets itself apart; a hairline under it only adds noise. */\n:host-context(html[data-theme='light']) .prism-header {\n    border-bottom-color: transparent;\n}\n\n.prism-header__brand {\n    position: relative;\n    display: flex;\n    gap: 9px;\n    align-items: center;\n    padding: 0 16px;\n    white-space: nowrap;\n    cursor: pointer;\n    isolation: isolate;\n}\n\n/* Light through the prism: a soft refraction behind the mark, never on it. */\n.prism-header__glow {\n    position: absolute;\n    top: -16px;\n    left: 4px;\n    z-index: -1;\n    width: 150px;\n    height: 68px;\n    pointer-events: none;\n    background: var(--prism-brand-glow);\n    border-radius: 50%;\n    filter: blur(10px);\n}\n\n.prism-header__logo-img {\n    width: auto;\n    height: 24px;\n    object-fit: contain;\n}\n\n.prism-header__brand-text {\n    display: flex;\n    flex-direction: column;\n    line-height: 1.1;\n}\n\n/* The wordmark runs through the brand gradient end to end (brand guide). */\n.prism-header__wordmark {\n    font-size: 16.5px;\n    font-weight: 700;\n    color: transparent;\n    letter-spacing: -0.035em;\n    background: var(--prism-brand-gradient);\n    background-clip: text;\n}\n\n.prism-header__brand-name {\n    font-size: var(--fs-xl);\n    font-weight: 600;\n    color: var(--prism-text);\n    letter-spacing: -0.01em;\n}\n\n.prism-header__brand-sub {\n    font-family: var(--font-mono);\n    font-size: var(--fs-xs);\n    color: var(--prism-text-muted);\n}\n\n.prism-header__build-pill {\n    padding: 2px 10px;\n    font-family: var(--font-mono);\n    font-size: var(--fs-xs);\n    line-height: 1.4;\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n    background: var(--prism-input-bg);\n    border: 1px solid var(--prism-border);\n    border-radius: 9999px;\n}\n\n.prism-header__actions {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    justify-content: flex-end;\n}\n\n.prism-header__widgets {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    min-width: 0;\n}\n\n.prism-header__widgets--start {\n    justify-content: flex-start;\n    padding-left: 4px;\n}\n\n:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 2px;\n}\n"] }]
     }], null, { onGlobalKey: [{
             type: HostListener,
             args: ['document:keydown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismHeaderComponent, { className: "PrismHeaderComponent", filePath: "app/header/prism-header.component.ts", lineNumber: 20 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismHeaderComponent, { className: "PrismHeaderComponent", filePath: "app/header/prism-header.component.ts", lineNumber: 26 }); })();

package/dist/app/icons/icon-registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-registry.d.ts","sourceRoot":"","sources":["../../../src/app/icons/icon-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,QAAA,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAqCjC,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC;AAEjB,iFAAiF;AACjF,eAAO,MAAM,UAAU,EAAE,SAAS,MAAM,EAAuB,CAAC"}
+{"version":3,"file":"icon-registry.d.ts","sourceRoot":"","sources":["../../../src/app/icons/icon-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,QAAA,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAyCjC,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC;AAEjB,iFAAiF;AACjF,eAAO,MAAM,UAAU,EAAE,SAAS,MAAM,EAAuB,CAAC"}

package/dist/app/icons/icon-registry.js

@@ -15,6 +15,7 @@ const ICONS = {
     sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4.2 4.2l1.4 1.4m12.8 12.8 1.4 1.4M2 12h2m16 0h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/>',
     moon: '<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/>',
     'more-horizontal': '<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>',
+    'more-vertical': '<circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/>',
     'chevron-down': '<path d="m6 9 6 6 6-6"/>',
     'chevron-right': '<path d="m9 18 6-6-6-6"/>',
     pin: '<path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/>',
@@ -39,7 +40,9 @@ const ICONS = {
     x: '<path d="M18 6 6 18M6 6l12 12"/>',
     check: '<path d="M20 6 9 17l-5-5"/>',
     info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
-    'circle-dashed': '<path d="M10.1 2.18a9.93 9.93 0 0 1 3.8 0"/><path d="M17.6 3.71a9.95 9.95 0 0 1 2.69 2.7"/><path d="M21.82 10.1a9.93 9.93 0 0 1 0 3.8"/><path d="M20.29 17.6a9.95 9.95 0 0 1-2.7 2.69"/><path d="M13.9 21.82a9.94 9.94 0 0 1-3.8 0"/><path d="M6.4 20.29a9.95 9.95 0 0 1-2.69-2.7"/><path d="M2.18 13.9a9.93 9.93 0 0 1 0-3.8"/><path d="M3.71 6.4a9.95 9.95 0 0 1 2.7-2.69"/>'
+    'circle-dashed': '<path d="M10.1 2.18a9.93 9.93 0 0 1 3.8 0"/><path d="M17.6 3.71a9.95 9.95 0 0 1 2.69 2.7"/><path d="M21.82 10.1a9.93 9.93 0 0 1 0 3.8"/><path d="M20.29 17.6a9.95 9.95 0 0 1-2.7 2.69"/><path d="M13.9 21.82a9.94 9.94 0 0 1-3.8 0"/><path d="M6.4 20.29a9.95 9.95 0 0 1-2.69-2.7"/><path d="M2.18 13.9a9.93 9.93 0 0 1 0-3.8"/><path d="M3.71 6.4a9.95 9.95 0 0 1 2.7-2.69"/>',
+    plug: '<path d="M12 22v-5"/><path d="M9 8V2"/><path d="M15 8V2"/><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"/>',
+    pipette: '<path d="m12 9-8.414 8.414A2 2 0 0 0 3 18.828v1.344a2 2 0 0 1-.586 1.414A2 2 0 0 1 3.828 21h1.344a2 2 0 0 0 1.414-.586L15 12"/><path d="m18 9 .4.4a1 1 0 1 1-3 3l-3.8-3.8a1 1 0 1 1 3-3l.4.4 3.4-3.4a1 1 0 1 1 3 3z"/><path d="m2 22 .414-.414"/>'
 };
 export { ICONS };
 /** Every name the registry can draw. A panel's `icon` has to pick from these. */

package/dist/app/index.d.ts

@@ -18,4 +18,16 @@ export type { ProvidePrismOptions } from './provide-prism.js';
 export { enablePrismHmr } from './hmr.js';
 export { PrismMetricBadgeComponent } from './shared/prism-metric-badge.component.js';
 export { PrismIconComponent } from './icons/prism-icon.component.js';
+export { PrismBadgeComponent } from './shared/prism-badge.component.js';
+export { toneForStatus } from './shared/badge.types.js';
+export type { BadgeTone, StatusTone } from './shared/badge.types.js';
+export { PrismTabsComponent } from './shared/prism-tabs.component.js';
+export type { PrismTabBadge, PrismTabItem } from './shared/prism-tabs.component.js';
+export { PrismSegmentedComponent } from './shared/prism-segmented.component.js';
+export type { PrismSegmentOption } from './shared/prism-segmented.component.js';
+export { PrismPanelToolbarComponent } from './shared/prism-panel-toolbar.component.js';
+export { PrismListRowComponent } from './shared/prism-list-row.component.js';
+export { PrismIconButtonComponent } from './shared/prism-icon-button.component.js';
+export { PrismButtonComponent } from './shared/prism-button.component.js';
+export { PrismMetricCardComponent } from './shared/prism-metric-card.component.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/app/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/app/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAGxE,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC7H,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAGtE,YAAY,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAG1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAChF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,KAAK,aAAa,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AACjG,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAGlF,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,0BAA0B,EAAE,MAAM,kDAAkD,CAAC;AAG9F,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAG9D,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAkB1C,OAAO,EAAE,yBAAyB,EAAE,MAAM,0CAA0C,CAAC;AACrF,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/app/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAGxE,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC7H,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAGtE,YAAY,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAG1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAChF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,KAAK,aAAa,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AACjG,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAGlF,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,0BAA0B,EAAE,MAAM,kDAAkD,CAAC;AAG9F,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAG9D,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAoB1C,OAAO,EAAE,yBAAyB,EAAE,MAAM,0CAA0C,CAAC;AACrF,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AACpF,OAAO,EAAE,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAChF,YAAY,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAChF,OAAO,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAC;AACvF,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAC;AACnF,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAC"}