@ng-prism/core 21.4.5 → 21.5.1

package/dist/app/icons/prism-icon.component.js

@@ -0,0 +1,64 @@
+import { Component, ChangeDetectionStrategy, input, effect, ElementRef, inject, } from '@angular/core';
+import * as i0 from "@angular/core";
+const ICONS = {
+    search: '<circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>',
+    'refresh-cw': '<path d="M21 12a9 9 0 0 1-15.5 6.3L3 16m0 0v5m0-5h5M3 12a9 9 0 0 1 15.5-6.3L21 8m0 0V3m0 5h-5"/>',
+    bell: '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>',
+    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"/>',
+    '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"/>',
+    box: '<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5M12 22V12"/>',
+    'sliders-horizontal': '<path d="M21 4h-7M10 4H3m18 8h-9M6 12H3m18 8h-5M10 20H3"/><circle cx="8" cy="4" r="2"/><circle cx="14" cy="12" r="2"/><circle cx="18" cy="20" r="2"/>',
+    zap: '<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/>',
+    accessibility: '<circle cx="16" cy="4" r="1"/><path d="m18 19 1-7-6 1"/><path d="m5 8 3-3 5.5 3-2.36 3.5"/><path d="M4.24 14.5a5 5 0 0 0 6.88 6"/><path d="M13.76 17.5a5 5 0 0 0-6.88-6"/>',
+    'file-text': '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8m8 4H8m4 4H8"/>',
+    figma: '<path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5Z"/><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12Z"/><path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0Z"/><path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0Z"/><path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5Z"/>',
+    'box-select': '<path d="M5 3a2 2 0 0 0-2 2"/><path d="M19 3a2 2 0 0 1 2 2"/><path d="M21 19a2 2 0 0 1-2 2"/><path d="M5 21a2 2 0 0 1-2-2"/><path d="M9 3h1m4 0h1M9 21h1m4 0h1M3 9v1m0 4v1M21 9v1m0 4v1"/>',
+    activity: '<path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"/>',
+    'shield-check': '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/>',
+    move: '<path d="M12 2v20M2 12h20m-16-4-4 4 4 4m12-8 4 4-4 4M8 8l-4 4 4 4"/>',
+    crosshair: '<circle cx="12" cy="12" r="10"/><path d="M22 12h-4M6 12H2m10-6V2m0 20v-4"/>',
+    copy: '<rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>',
+    'maximize-2': '<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3m8 0h3a2 2 0 0 0 2-2v-3"/>',
+    eye: '<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>',
+};
+const SVG_NS = 'http://www.w3.org/2000/svg';
+export class PrismIconComponent {
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+    size = input(16, ...(ngDevMode ? [{ debugName: "size" }] : []));
+    el = inject((ElementRef));
+    constructor() {
+        effect(() => {
+            const iconName = this.name();
+            const iconSize = this.size();
+            const content = ICONS[iconName] ?? '';
+            const host = this.el.nativeElement;
+            host.innerHTML = '';
+            const svg = document.createElementNS(SVG_NS, 'svg');
+            svg.setAttribute('width', String(iconSize));
+            svg.setAttribute('height', String(iconSize));
+            svg.setAttribute('viewBox', '0 0 24 24');
+            svg.setAttribute('fill', 'none');
+            svg.setAttribute('stroke', 'currentColor');
+            svg.setAttribute('stroke-width', '2');
+            svg.setAttribute('stroke-linecap', 'round');
+            svg.setAttribute('stroke-linejoin', 'round');
+            const temp = document.createElementNS(SVG_NS, 'svg');
+            temp.innerHTML = content;
+            while (temp.firstChild) {
+                svg.appendChild(temp.firstChild);
+            }
+            host.appendChild(svg);
+        });
+    }
+    static ɵfac = function PrismIconComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismIconComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismIconComponent, selectors: [["prism-icon"]], inputs: { name: [1, "name"], size: [1, "size"] }, decls: 0, vars: 0, template: function PrismIconComponent_Template(rf, ctx) { }, styles: ["[_nghost-%COMP%] { display: inline-flex; align-items: center; justify-content: center; }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismIconComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-icon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: ``, styles: [":host { display: inline-flex; align-items: center; justify-content: center; }"] }]
+    }], () => [], { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismIconComponent, { className: "PrismIconComponent", filePath: "app/icons/prism-icon.component.ts", lineNumber: 56 }); })();

package/dist/app/index.d.ts

@@ -1,12 +1,13 @@
-export { PRISM_MANIFEST, PRISM_CONFIG, PRISM_RENDERER_HOOKS } from './tokens/prism-tokens.js';
+export { PRISM_MANIFEST, PRISM_CONFIG, PRISM_RENDERER_HOOKS, } from './tokens/prism-tokens.js';
 export type { PrismRendererHooks } from './tokens/prism-tokens.js';
-export { PRISM_DEFAULT_THEME } from './theme/prism-default-theme.js';
+export { PRISM_DEFAULT_THEME, PRISM_DARK_THEME, PRISM_LIGHT_THEME, PRISM_BASE_TOKENS, } from './theme/prism-default-theme.js';
+export { PrismThemeService } from './services/prism-theme.service.js';
 export type { NavigationItem } from './services/navigation-item.types.js';
 export { PrismManifestService } from './services/prism-manifest.service.js';
 export { PrismSearchService } from './services/prism-search.service.js';
 export { PrismNavigationService } from './services/prism-navigation.service.js';
 export { PrismRendererService } from './services/prism-renderer.service.js';
-export { PrismEventLogService, type EventLogEntry } from './services/prism-event-log.service.js';
+export { PrismEventLogService, type EventLogEntry, } from './services/prism-event-log.service.js';
 export { PrismPluginService } from './services/prism-plugin.service.js';
 export { PrismLayoutService } from './services/prism-layout.service.js';
 export { PrismUrlStateService } from './services/prism-url-state.service.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/app/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAC9F,YAAY,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAGnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAGrE,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,oBAAoB,EAAE,KAAK,aAAa,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;AAG7E,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/app/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,cAAc,EACd,YAAY,EACZ,oBAAoB,GACrB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAGnE,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,gCAAgC,CAAC;AACxC,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,EACL,oBAAoB,EACpB,KAAK,aAAa,GACnB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAG7E,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"}

package/dist/app/index.js

@@ -1,13 +1,14 @@
 // Tokens
-export { PRISM_MANIFEST, PRISM_CONFIG, PRISM_RENDERER_HOOKS } from './tokens/prism-tokens.js';
+export { PRISM_MANIFEST, PRISM_CONFIG, PRISM_RENDERER_HOOKS, } from './tokens/prism-tokens.js';
 // Theme
-export { PRISM_DEFAULT_THEME } from './theme/prism-default-theme.js';
+export { PRISM_DEFAULT_THEME, PRISM_DARK_THEME, PRISM_LIGHT_THEME, PRISM_BASE_TOKENS, } from './theme/prism-default-theme.js';
+export { PrismThemeService } from './services/prism-theme.service.js';
 // Services
 export { PrismManifestService } from './services/prism-manifest.service.js';
 export { PrismSearchService } from './services/prism-search.service.js';
 export { PrismNavigationService } from './services/prism-navigation.service.js';
 export { PrismRendererService } from './services/prism-renderer.service.js';
-export { PrismEventLogService } from './services/prism-event-log.service.js';
+export { PrismEventLogService, } from './services/prism-event-log.service.js';
 export { PrismPluginService } from './services/prism-plugin.service.js';
 export { PrismLayoutService } from './services/prism-layout.service.js';
 export { PrismUrlStateService } from './services/prism-url-state.service.js';

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

@@ -1 +1 @@
-{"version":3,"file":"prism-layout-menu.component.d.ts","sourceRoot":"","sources":["../../../src/app/layout-menu/prism-layout-menu.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAEzE,qBA+Ka,wBAAwB;IACnC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,IAAI,kDAAiB;IAExC,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,GAAG,IAAI;yCAJrE,wBAAwB;2CAAxB,wBAAwB;CAapC"}
+{"version":3,"file":"prism-layout-menu.component.d.ts","sourceRoot":"","sources":["../../../src/app/layout-menu/prism-layout-menu.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAEzE,qBA6La,wBAAwB;IACnC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,IAAI,kDAAiB;IAExC,SAAS,CAAC,MAAM,CACd,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,GACvD,IAAI;yCANI,wBAAwB;2CAAxB,wBAAwB;CAuBpC"}

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

@@ -56,24 +56,6 @@ function PrismLayoutMenuComponent_Conditional_6_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵdomElementEnd();
     i0.ɵɵdomElementStart(33, "kbd");
     i0.ɵɵtext(34, "A");
-    i0.ɵɵdomElementEnd()()();
-    i0.ɵɵdomElement(35, "div", 14);
-    i0.ɵɵdomElementStart(36, "button", 8);
-    i0.ɵɵdomListener("click", function PrismLayoutMenuComponent_Conditional_6_Template_button_click_36_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggle("orientation")); });
-    i0.ɵɵdomElementStart(37, "span", 15);
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵdomElementStart(38, "svg", 10);
-    i0.ɵɵdomElement(39, "rect", 16)(40, "line", 17);
-    i0.ɵɵdomElementEnd()();
-    i0.ɵɵnamespaceHTML();
-    i0.ɵɵdomElementStart(41, "span", 12);
-    i0.ɵɵtext(42);
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(43, "span", 13)(44, "kbd");
-    i0.ɵɵtext(45, "\u2325");
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(46, "kbd");
-    i0.ɵɵtext(47, "D");
     i0.ɵɵdomElementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -83,8 +65,6 @@ function PrismLayoutMenuComponent_Conditional_6_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵclassProp("layout-menu__check--on", ctx_r1.layout.toolbarVisible());
     i0.ɵɵadvance(11);
     i0.ɵɵclassProp("layout-menu__check--on", ctx_r1.layout.addonsVisible());
-    i0.ɵɵadvance(17);
-    i0.ɵɵtextInterpolate1(" Panel: ", ctx_r1.layout.addonsOrientation() === "bottom" ? "bottom \u2192 right" : "right \u2192 bottom", " ");
 } }
 export class PrismLayoutMenuComponent {
     layout = inject(PrismLayoutService);
@@ -107,14 +87,14 @@ export class PrismLayoutMenuComponent {
         }
     }
     static ɵfac = function PrismLayoutMenuComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismLayoutMenuComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismLayoutMenuComponent, selectors: [["prism-layout-menu"]], decls: 7, vars: 3, consts: [[1, "layout-menu"], ["title", "Layout options", 1, "layout-menu__trigger", 3, "click"], ["width", "16", "height", "16", "viewBox", "0 0 16 16", "fill", "none"], ["cx", "8", "cy", "3", "r", "1.25", "fill", "currentColor"], ["cx", "8", "cy", "8", "r", "1.25", "fill", "currentColor"], ["cx", "8", "cy", "13", "r", "1.25", "fill", "currentColor"], [1, "layout-menu__backdrop", 3, "click"], [1, "layout-menu__dropdown"], [1, "layout-menu__item", 3, "click"], [1, "layout-menu__check"], ["width", "12", "height", "12", "viewBox", "0 0 12 12", "fill", "none"], ["d", "M2 6l3 3 5-5", "stroke", "currentColor", "stroke-width", "1.5", "stroke-linecap", "round", "stroke-linejoin", "round"], [1, "layout-menu__label"], [1, "layout-menu__kbd"], [1, "layout-menu__divider"], [1, "layout-menu__icon"], ["x", "1", "y", "1", "width", "10", "height", "10", "rx", "1", "stroke", "currentColor", "stroke-width", "1.2"], ["x1", "6", "y1", "1", "x2", "6", "y2", "11", "stroke", "currentColor", "stroke-width", "1.2"]], template: function PrismLayoutMenuComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismLayoutMenuComponent, selectors: [["prism-layout-menu"]], decls: 7, vars: 3, consts: [[1, "layout-menu"], ["title", "Layout options", 1, "layout-menu__trigger", 3, "click"], ["width", "16", "height", "16", "viewBox", "0 0 16 16", "fill", "none"], ["cx", "8", "cy", "3", "r", "1.25", "fill", "currentColor"], ["cx", "8", "cy", "8", "r", "1.25", "fill", "currentColor"], ["cx", "8", "cy", "13", "r", "1.25", "fill", "currentColor"], [1, "layout-menu__backdrop", 3, "click"], [1, "layout-menu__dropdown"], [1, "layout-menu__item", 3, "click"], [1, "layout-menu__check"], ["width", "12", "height", "12", "viewBox", "0 0 12 12", "fill", "none"], ["d", "M2 6l3 3 5-5", "stroke", "currentColor", "stroke-width", "1.5", "stroke-linecap", "round", "stroke-linejoin", "round"], [1, "layout-menu__label"], [1, "layout-menu__kbd"]], template: function PrismLayoutMenuComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵdomElementStart(0, "div", 0)(1, "button", 1);
             i0.ɵɵdomListener("click", function PrismLayoutMenuComponent_Template_button_click_1_listener() { return ctx.open.set(!ctx.open()); });
             i0.ɵɵnamespaceSVG();
             i0.ɵɵdomElementStart(2, "svg", 2);
             i0.ɵɵdomElement(3, "circle", 3)(4, "circle", 4)(5, "circle", 5);
             i0.ɵɵdomElementEnd()();
-            i0.ɵɵconditionalCreate(6, PrismLayoutMenuComponent_Conditional_6_Template, 48, 7);
+            i0.ɵɵconditionalCreate(6, PrismLayoutMenuComponent_Conditional_6_Template, 35, 6);
             i0.ɵɵdomElementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
@@ -134,57 +114,71 @@ export class PrismLayoutMenuComponent {
         title="Layout options"
       >
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-          <circle cx="8" cy="3" r="1.25" fill="currentColor"/>
-          <circle cx="8" cy="8" r="1.25" fill="currentColor"/>
-          <circle cx="8" cy="13" r="1.25" fill="currentColor"/>
+          <circle cx="8" cy="3" r="1.25" fill="currentColor" />
+          <circle cx="8" cy="8" r="1.25" fill="currentColor" />
+          <circle cx="8" cy="13" r="1.25" fill="currentColor" />
         </svg>
       </button>
       @if (open()) {
-        <div class="layout-menu__backdrop" (click)="open.set(false)"></div>
-        <div class="layout-menu__dropdown">
-          <button class="layout-menu__item" (click)="toggle('sidebar')">
-            <span class="layout-menu__check" [class.layout-menu__check--on]="layout.sidebarVisible()">
-              <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-                <path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-            </span>
-            <span class="layout-menu__label">Show sidebar</span>
-            <span class="layout-menu__kbd"><kbd>⌥</kbd><kbd>S</kbd></span>
-          </button>
-          <button class="layout-menu__item" (click)="toggle('toolbar')">
-            <span class="layout-menu__check" [class.layout-menu__check--on]="layout.toolbarVisible()">
-              <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-                <path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-            </span>
-            <span class="layout-menu__label">Show toolbar</span>
-            <span class="layout-menu__kbd"><kbd>⌥</kbd><kbd>T</kbd></span>
-          </button>
-          <button class="layout-menu__item" (click)="toggle('addons')">
-            <span class="layout-menu__check" [class.layout-menu__check--on]="layout.addonsVisible()">
-              <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-                <path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-            </span>
-            <span class="layout-menu__label">Show addons panel</span>
-            <span class="layout-menu__kbd"><kbd>⌥</kbd><kbd>A</kbd></span>
-          </button>
-          <div class="layout-menu__divider"></div>
-          <button class="layout-menu__item" (click)="toggle('orientation')">
-            <span class="layout-menu__icon">
-              <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-                <rect x="1" y="1" width="10" height="10" rx="1" stroke="currentColor" stroke-width="1.2"/>
-                <line x1="6" y1="1" x2="6" y2="11" stroke="currentColor" stroke-width="1.2"/>
-              </svg>
-            </span>
-            <span class="layout-menu__label">
-              Panel: {{ layout.addonsOrientation() === 'bottom' ? 'bottom → right' : 'right → bottom' }}
-            </span>
-            <span class="layout-menu__kbd"><kbd>⌥</kbd><kbd>D</kbd></span>
-          </button>
-        </div>
+      <div class="layout-menu__backdrop" (click)="open.set(false)"></div>
+      <div class="layout-menu__dropdown">
+        <button class="layout-menu__item" (click)="toggle('sidebar')">
+          <span
+            class="layout-menu__check"
+            [class.layout-menu__check--on]="layout.sidebarVisible()"
+          >
+            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+              <path
+                d="M2 6l3 3 5-5"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </span>
+          <span class="layout-menu__label">Show sidebar</span>
+          <span class="layout-menu__kbd"><kbd>⌥</kbd><kbd>S</kbd></span>
+        </button>
+        <button class="layout-menu__item" (click)="toggle('toolbar')">
+          <span
+            class="layout-menu__check"
+            [class.layout-menu__check--on]="layout.toolbarVisible()"
+          >
+            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+              <path
+                d="M2 6l3 3 5-5"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </span>
+          <span class="layout-menu__label">Show toolbar</span>
+          <span class="layout-menu__kbd"><kbd>⌥</kbd><kbd>T</kbd></span>
+        </button>
+        <button class="layout-menu__item" (click)="toggle('addons')">
+          <span
+            class="layout-menu__check"
+            [class.layout-menu__check--on]="layout.addonsVisible()"
+          >
+            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+              <path
+                d="M2 6l3 3 5-5"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </span>
+          <span class="layout-menu__label">Show addons panel</span>
+          <span class="layout-menu__kbd"><kbd>⌥</kbd><kbd>A</kbd></span>
+        </button>
+      </div>
       }
     </div>
   `, styles: ["\n    .layout-menu { position: relative; }\n\n    .layout-menu__trigger {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 30px;\n      height: 30px;\n      border: 1px solid var(--prism-border);\n      border-radius: var(--prism-radius-sm);\n      background: transparent;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      transition: border-color 0.15s, color 0.15s, background 0.15s;\n    }\n    .layout-menu__trigger:hover,\n    .layout-menu__trigger--active {\n      border-color: var(--prism-border-strong);\n      color: var(--prism-text);\n      background: var(--prism-bg-surface);\n    }\n\n    .layout-menu__backdrop {\n      position: fixed;\n      inset: 0;\n      z-index: 40;\n    }\n\n    .layout-menu__dropdown {\n      position: absolute;\n      top: calc(100% + 6px);\n      right: 0;\n      z-index: 50;\n      min-width: 240px;\n      background: var(--prism-bg-elevated);\n      border: 1px solid var(--prism-border-strong);\n      border-radius: var(--prism-radius);\n      box-shadow: 0 8px 32px rgba(0,0,0,0.4);\n      padding: 4px;\n    }\n\n    .layout-menu__item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      width: 100%;\n      padding: 7px 10px;\n      border: none;\n      background: none;\n      color: var(--prism-text);\n      font-family: var(--prism-font-sans);\n      font-size: 13px;\n      cursor: pointer;\n      border-radius: var(--prism-radius-sm);\n      text-align: left;\n      transition: background 0.1s;\n    }\n    .layout-menu__item:hover { background: var(--prism-bg-surface); }\n\n    .layout-menu__check {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 16px;\n      height: 16px;\n      border: 1px solid var(--prism-border-strong);\n      border-radius: 3px;\n      flex-shrink: 0;\n      color: transparent;\n    }\n    .layout-menu__check--on {\n      background: var(--prism-primary);\n      border-color: var(--prism-primary);\n      color: white;\n    }\n\n    .layout-menu__icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 16px;\n      height: 16px;\n      color: var(--prism-text-muted);\n      flex-shrink: 0;\n    }\n\n    .layout-menu__label { flex: 1; }\n\n    .layout-menu__kbd {\n      display: flex;\n      gap: 2px;\n      opacity: 0.6;\n    }\n    kbd {\n      font-family: var(--prism-font-sans);\n      font-size: 11px;\n      padding: 1px 4px;\n      border: 1px solid var(--prism-border-strong);\n      border-radius: 3px;\n      background: var(--prism-bg-surface);\n      color: var(--prism-text-muted);\n    }\n\n    .layout-menu__divider {\n      height: 1px;\n      background: var(--prism-border);\n      margin: 4px 0;\n    }\n  "] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismLayoutMenuComponent, { className: "PrismLayoutMenuComponent", filePath: "app/layout-menu/prism-layout-menu.component.ts", lineNumber: 179 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismLayoutMenuComponent, { className: "PrismLayoutMenuComponent", filePath: "app/layout-menu/prism-layout-menu.component.ts", lineNumber: 193 }); })();

package/dist/app/panels/a11y/a11y-core.plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y-core.plugin.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-core.plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAEvE,eAAO,MAAM,eAAe,EAAE,eAS7B,CAAC"}
+{"version":3,"file":"a11y-core.plugin.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-core.plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAEvE,eAAO,MAAM,eAAe,EAAE,eAY7B,CAAC"}

package/dist/app/panels/a11y/a11y-core.plugin.js

@@ -1,6 +1,7 @@
 export const A11Y_CORE_PANEL = {
     id: 'a11y',
     label: 'A11y',
+    icon: 'accessibility',
     position: 'bottom',
     placement: 'addon',
     loadComponent: () => import('./a11y-panel.component.js').then((m) => m.A11yPanelComponent),

package/dist/app/panels/a11y/a11y-keyboard.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y-keyboard.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-keyboard.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAEhF,qBAsIa,qBAAqB;IAChC,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA+B;IAE/D,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,SAAS,CAAC,QAAQ,CAAC,KAAK,+EAQrB;IAEH,SAAS,CAAC,QAAQ,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM;yCAhB5B,qBAAqB;2CAArB,qBAAqB;CAoBjC"}
+{"version":3,"file":"a11y-keyboard.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-keyboard.component.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAEhF,qBAwFa,qBAAqB;IAChC,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA+B;IAE/D,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,SAAS,CAAC,QAAQ,CAAC,KAAK,+EAQrB;IAEH,SAAS,CAAC,QAAQ,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM;yCAhB5B,qBAAqB;2CAArB,qBAAqB;CAoBjC"}

package/dist/app/panels/a11y/a11y-keyboard.component.js

@@ -1,88 +1,55 @@
-import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input, } from '@angular/core';
 import { A11yKeyboardService } from './a11y-keyboard.service.js';
 import { PrismRendererService } from '../../services/prism-renderer.service.js';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.index;
-function A11yKeyboardComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 1);
-    i0.ɵɵtext(1, "Select a component to inspect keyboard navigation.");
+function A11yKeyboardComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 0);
+    i0.ɵɵtext(1, " Select a component to inspect keyboard navigation. ");
     i0.ɵɵdomElementEnd();
 } }
-function A11yKeyboardComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 1);
+function A11yKeyboardComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 0);
     i0.ɵɵtext(1, "No focusable elements found.");
     i0.ɵɵdomElementEnd();
 } }
-function A11yKeyboardComponent_Conditional_3_For_7_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "span", 10);
-    i0.ɵɵtext(1);
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(2, "span", 11);
-    i0.ɵɵtext(3);
-    i0.ɵɵdomElementEnd();
-} if (rf & 2) {
-    const item_r1 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("\"", item_r1.name, "\"");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("via ", item_r1.nameSource);
-} }
-function A11yKeyboardComponent_Conditional_3_For_7_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "span", 12);
-    i0.ɵɵtext(1);
-    i0.ɵɵdomElementEnd();
-} if (rf & 2) {
-    const s_r2 = ctx.$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(s_r2);
-} }
-function A11yKeyboardComponent_Conditional_3_For_7_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 9);
-    i0.ɵɵrepeaterCreate(1, A11yKeyboardComponent_Conditional_3_For_7_Conditional_7_For_2_Template, 2, 1, "span", 12, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵdomElementEnd();
+function A11yKeyboardComponent_Conditional_2_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
 } if (rf & 2) {
     const item_r1 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(item_r1.states);
+    i0.ɵɵtextInterpolate1(" \u00B7 ", item_r1.states.join(", "), " ");
 } }
-function A11yKeyboardComponent_Conditional_3_For_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 5)(1, "div", 6);
-    i0.ɵɵtext(2);
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(3, "div", 7)(4, "span", 8);
+function A11yKeyboardComponent_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 2)(1, "div", 3)(2, "kbd");
+    i0.ɵɵtext(3);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(4, "div", 4);
     i0.ɵɵtext(5);
+    i0.ɵɵconditionalCreate(6, A11yKeyboardComponent_Conditional_2_For_2_Conditional_6_Template, 1, 1);
     i0.ɵɵdomElementEnd();
-    i0.ɵɵconditionalCreate(6, A11yKeyboardComponent_Conditional_3_For_7_Conditional_6_Template, 4, 2);
-    i0.ɵɵconditionalCreate(7, A11yKeyboardComponent_Conditional_3_For_7_Conditional_7_Template, 3, 0, "div", 9);
+    i0.ɵɵdomElementStart(7, "span", 5);
+    i0.ɵɵtext(8);
     i0.ɵɵdomElementEnd()();
 } if (rf & 2) {
     const item_r1 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r1.index);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate2("", item_r1.element.tagName.toLowerCase(), "", ctx_r2.typeAttr(item_r1.element));
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r1.name ? 6 : -1);
+    i0.ɵɵtextInterpolate1("Tab ", item_r1.index);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", item_r1.name ? "\"" + item_r1.name + "\"" : item_r1.element.tagName.toLowerCase() + ctx_r1.typeAttr(item_r1.element), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r1.states.length ? 7 : -1);
+    i0.ɵɵconditional(item_r1.states.length ? 6 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2("", item_r1.element.tagName.toLowerCase(), "", ctx_r1.typeAttr(item_r1.element));
 } }
-function A11yKeyboardComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 2)(1, "span");
-    i0.ɵɵtext(2);
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(3, "span", 3);
-    i0.ɵɵtext(4, "\u25CF Overlay aktiv");
-    i0.ɵɵdomElementEnd()();
-    i0.ɵɵdomElementStart(5, "div", 4);
-    i0.ɵɵrepeaterCreate(6, A11yKeyboardComponent_Conditional_3_For_7_Template, 8, 5, "div", 5, _forTrack0);
+function A11yKeyboardComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 1);
+    i0.ɵɵrepeaterCreate(1, A11yKeyboardComponent_Conditional_2_For_2_Template, 9, 5, "div", 2, _forTrack0);
     i0.ɵɵdomElementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", ctx_r2.items().length, " fokussierbare Elemente");
-    i0.ɵɵadvance(4);
-    i0.ɵɵrepeater(ctx_r2.items());
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.items());
 } }
 export class A11yKeyboardComponent {
     rendererService = inject(PrismRendererService);
@@ -100,51 +67,45 @@ export class A11yKeyboardComponent {
         return type ? `[type=${type}]` : '';
     }
     static ɵfac = function A11yKeyboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11yKeyboardComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yKeyboardComponent, selectors: [["prism-a11y-keyboard"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 4, vars: 1, consts: [[1, "prism-a11y-kbd"], [1, "prism-a11y-kbd__empty"], [1, "prism-a11y-kbd__header"], [1, "prism-a11y-kbd__overlay-badge"], [1, "prism-a11y-kbd__list"], [1, "prism-a11y-kbd__item"], [1, "prism-a11y-kbd__num"], [1, "prism-a11y-kbd__info"], [1, "prism-a11y-kbd__tag"], [1, "prism-a11y-kbd__states"], [1, "prism-a11y-kbd__name"], [1, "prism-a11y-kbd__source"], [1, "prism-a11y-kbd__state"]], template: function A11yKeyboardComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵdomElementStart(0, "div", 0);
-            i0.ɵɵconditionalCreate(1, A11yKeyboardComponent_Conditional_1_Template, 2, 0, "div", 1)(2, A11yKeyboardComponent_Conditional_2_Template, 2, 0, "div", 1)(3, A11yKeyboardComponent_Conditional_3_Template, 8, 1);
-            i0.ɵɵdomElementEnd();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yKeyboardComponent, selectors: [["prism-a11y-keyboard"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 3, vars: 1, consts: [[1, "kb-empty"], [1, "kb-body"], [1, "kb-row"], [1, "kb-keys"], [1, "kb-desc"], [1, "kb-tgt"]], template: function A11yKeyboardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, A11yKeyboardComponent_Conditional_0_Template, 2, 0, "div", 0)(1, A11yKeyboardComponent_Conditional_1_Template, 2, 0, "div", 0)(2, A11yKeyboardComponent_Conditional_2_Template, 3, 0, "div", 1);
         } if (rf & 2) {
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.rendererService.renderedElement() ? 1 : !ctx.items().length ? 2 : 3);
-        } }, styles: ["[_nghost-%COMP%] { display: flex; flex-direction: column; height: 100%; }\n\n    .prism-a11y-kbd[_ngcontent-%COMP%] { height: 100%; display: flex; flex-direction: column; }\n\n    .prism-a11y-kbd__empty[_ngcontent-%COMP%] {\n      display: flex; align-items: center; justify-content: center;\n      min-height: 100px; color: var(--prism-text-muted); font-size: 13px;\n    }\n\n    .prism-a11y-kbd__header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 16px;\n      border-bottom: 1px solid var(--prism-border);\n      font-size: 12px;\n      color: var(--prism-text-muted);\n      flex-shrink: 0;\n    }\n\n    .prism-a11y-kbd__overlay-badge[_ngcontent-%COMP%] {\n      margin-left: auto;\n      padding: 2px 8px;\n      border-radius: 10px;\n      font-size: 11px;\n      font-weight: 600;\n      background: color-mix(in srgb, #818cf8 12%, transparent);\n      color: #818cf8;\n      border: 1px solid color-mix(in srgb, #818cf8 22%, transparent);\n    }\n\n    .prism-a11y-kbd__list[_ngcontent-%COMP%] { flex: 1; overflow: auto; }\n\n    .prism-a11y-kbd__item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: flex-start;\n      gap: 12px;\n      padding: 10px 16px;\n      border-bottom: 1px solid var(--prism-border);\n    }\n    .prism-a11y-kbd__item[_ngcontent-%COMP%]:hover { background: rgba(129, 140, 248, 0.04); }\n\n    .prism-a11y-kbd__num[_ngcontent-%COMP%] {\n      width: 20px; height: 20px;\n      background: #818cf8;\n      color: white;\n      border-radius: 50%;\n      font-size: 10px; font-weight: 700;\n      display: flex; align-items: center; justify-content: center;\n      flex-shrink: 0; margin-top: 1px;\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n    }\n\n    .prism-a11y-kbd__info[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .prism-a11y-kbd__tag[_ngcontent-%COMP%] {\n      font-family: var(--prism-font-mono, monospace);\n      font-size: 12px;\n      color: var(--prism-primary);\n    }\n\n    .prism-a11y-kbd__name[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: var(--prism-text-2);\n    }\n\n    .prism-a11y-kbd__source[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--prism-text-muted);\n    }\n\n    .prism-a11y-kbd__states[_ngcontent-%COMP%] {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 4px;\n      margin-top: 2px;\n    }\n\n    .prism-a11y-kbd__state[_ngcontent-%COMP%] {\n      padding: 0 5px;\n      border-radius: 3px;\n      font-size: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      background: color-mix(in srgb, #fbbf24 12%, transparent);\n      color: #fbbf24;\n    }"], changeDetection: 0 });
+            i0.ɵɵconditional(!ctx.rendererService.renderedElement() ? 0 : !ctx.items().length ? 1 : 2);
+        } }, styles: ["[_nghost-%COMP%] { display: block; height: 100%; overflow: auto; }\n\n    .kb-empty[_ngcontent-%COMP%] {\n      display: flex; align-items: center; justify-content: center;\n      min-height: 100px; color: var(--prism-text-muted); font-size: 13px;\n    }\n\n    .kb-body[_ngcontent-%COMP%] {\n      padding: 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .kb-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 110px 1fr auto;\n      align-items: center;\n      gap: 12px;\n      padding: 9px 14px;\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-radius: 8px;\n    }\n\n    .kb-keys[_ngcontent-%COMP%] { display: flex; gap: 4px; }\n    .kb-keys[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 10.5px;\n      padding: 1px 5px;\n      border-radius: 4px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n    }\n\n    .kb-desc[_ngcontent-%COMP%] {\n      font-size: 12.5px;\n      color: var(--prism-text-2);\n    }\n\n    .kb-tgt[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 11px;\n      color: var(--prism-primary);\n      padding: 2px 7px;\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      border-radius: var(--radius-xs);\n    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yKeyboardComponent, [{
         type: Component,
         args: [{ selector: 'prism-a11y-keyboard', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="prism-a11y-kbd">
-      @if (!rendererService.renderedElement()) {
-        <div class="prism-a11y-kbd__empty">Select a component to inspect keyboard navigation.</div>
-      } @else if (!items().length) {
-        <div class="prism-a11y-kbd__empty">No focusable elements found.</div>
-      } @else {
-        <div class="prism-a11y-kbd__header">
-          <span>{{ items().length }} fokussierbare Elemente</span>
-          <span class="prism-a11y-kbd__overlay-badge">● Overlay aktiv</span>
+    @if (!rendererService.renderedElement()) {
+    <div class="kb-empty">
+      Select a component to inspect keyboard navigation.
+    </div>
+    } @else if (!items().length) {
+    <div class="kb-empty">No focusable elements found.</div>
+    } @else {
+    <div class="kb-body">
+      @for (item of items(); track item.index) {
+      <div class="kb-row">
+        <div class="kb-keys">
+          <kbd>Tab {{ item.index }}</kbd>
         </div>
-        <div class="prism-a11y-kbd__list">
-          @for (item of items(); track item.index) {
-            <div class="prism-a11y-kbd__item">
-              <div class="prism-a11y-kbd__num">{{ item.index }}</div>
-              <div class="prism-a11y-kbd__info">
-                <span class="prism-a11y-kbd__tag">{{ item.element.tagName.toLowerCase() }}{{ typeAttr(item.element) }}</span>
-                @if (item.name) {
-                  <span class="prism-a11y-kbd__name">"{{ item.name }}"</span>
-                  <span class="prism-a11y-kbd__source">via {{ item.nameSource }}</span>
-                }
-                @if (item.states.length) {
-                  <div class="prism-a11y-kbd__states">
-                    @for (s of item.states; track s) {
-                      <span class="prism-a11y-kbd__state">{{ s }}</span>
-                    }
-                  </div>
-                }
-              </div>
-            </div>
+        <div class="kb-desc">
+          {{
+            item.name
+              ? '"' + item.name + '"'
+              : item.element.tagName.toLowerCase() + typeAttr(item.element)
+          }}
+          @if (item.states.length) { · {{ item.states.join(', ') }}
           }
         </div>
+        <span class="kb-tgt"
+          >{{ item.element.tagName.toLowerCase()
+          }}{{ typeAttr(item.element) }}</span
+        >
+      </div>
       }
     </div>
-  `, styles: ["\n    :host { display: flex; flex-direction: column; height: 100%; }\n\n    .prism-a11y-kbd { height: 100%; display: flex; flex-direction: column; }\n\n    .prism-a11y-kbd__empty {\n      display: flex; align-items: center; justify-content: center;\n      min-height: 100px; color: var(--prism-text-muted); font-size: 13px;\n    }\n\n    .prism-a11y-kbd__header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 16px;\n      border-bottom: 1px solid var(--prism-border);\n      font-size: 12px;\n      color: var(--prism-text-muted);\n      flex-shrink: 0;\n    }\n\n    .prism-a11y-kbd__overlay-badge {\n      margin-left: auto;\n      padding: 2px 8px;\n      border-radius: 10px;\n      font-size: 11px;\n      font-weight: 600;\n      background: color-mix(in srgb, #818cf8 12%, transparent);\n      color: #818cf8;\n      border: 1px solid color-mix(in srgb, #818cf8 22%, transparent);\n    }\n\n    .prism-a11y-kbd__list { flex: 1; overflow: auto; }\n\n    .prism-a11y-kbd__item {\n      display: flex;\n      align-items: flex-start;\n      gap: 12px;\n      padding: 10px 16px;\n      border-bottom: 1px solid var(--prism-border);\n    }\n    .prism-a11y-kbd__item:hover { background: rgba(129, 140, 248, 0.04); }\n\n    .prism-a11y-kbd__num {\n      width: 20px; height: 20px;\n      background: #818cf8;\n      color: white;\n      border-radius: 50%;\n      font-size: 10px; font-weight: 700;\n      display: flex; align-items: center; justify-content: center;\n      flex-shrink: 0; margin-top: 1px;\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n    }\n\n    .prism-a11y-kbd__info {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .prism-a11y-kbd__tag {\n      font-family: var(--prism-font-mono, monospace);\n      font-size: 12px;\n      color: var(--prism-primary);\n    }\n\n    .prism-a11y-kbd__name {\n      font-size: 12px;\n      color: var(--prism-text-2);\n    }\n\n    .prism-a11y-kbd__source {\n      font-size: 11px;\n      color: var(--prism-text-muted);\n    }\n\n    .prism-a11y-kbd__states {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 4px;\n      margin-top: 2px;\n    }\n\n    .prism-a11y-kbd__state {\n      padding: 0 5px;\n      border-radius: 3px;\n      font-size: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      background: color-mix(in srgb, #fbbf24 12%, transparent);\n      color: #fbbf24;\n    }\n  "] }]
+    }
+  `, styles: ["\n    :host { display: block; height: 100%; overflow: auto; }\n\n    .kb-empty {\n      display: flex; align-items: center; justify-content: center;\n      min-height: 100px; color: var(--prism-text-muted); font-size: 13px;\n    }\n\n    .kb-body {\n      padding: 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .kb-row {\n      display: grid;\n      grid-template-columns: 110px 1fr auto;\n      align-items: center;\n      gap: 12px;\n      padding: 9px 14px;\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-radius: 8px;\n    }\n\n    .kb-keys { display: flex; gap: 4px; }\n    .kb-keys kbd {\n      font-family: var(--font-mono);\n      font-size: 10.5px;\n      padding: 1px 5px;\n      border-radius: 4px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n    }\n\n    .kb-desc {\n      font-size: 12.5px;\n      color: var(--prism-text-2);\n    }\n\n    .kb-tgt {\n      font-family: var(--font-mono);\n      font-size: 11px;\n      color: var(--prism-primary);\n      padding: 2px 7px;\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      border-radius: var(--radius-xs);\n    }\n  "] }]
     }], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yKeyboardComponent, { className: "A11yKeyboardComponent", filePath: "app/panels/a11y/a11y-keyboard.component.ts", lineNumber: 139 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yKeyboardComponent, { className: "A11yKeyboardComponent", filePath: "app/panels/a11y/a11y-keyboard.component.ts", lineNumber: 99 }); })();

package/dist/app/panels/a11y/a11y-overlay-host.component.d.ts

@@ -1,5 +1,9 @@
 import * as i0 from "@angular/core";
 export declare class A11yOverlayHostComponent {
+    private readonly rendererService;
+    private readonly keyboardService;
+    protected readonly roleLabel: import("@angular/core").Signal<string | null>;
+    protected readonly tabLabel: import("@angular/core").Signal<string | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<A11yOverlayHostComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<A11yOverlayHostComponent, "prism-a11y-overlay-host", never, {}, {}, never, never, true, never>;
 }

package/dist/app/panels/a11y/a11y-overlay-host.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y-overlay-host.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-overlay-host.component.ts"],"names":[],"mappings":";AAIA,qBAea,wBAAwB;yCAAxB,wBAAwB;2CAAxB,wBAAwB;CAAG"}
+{"version":3,"file":"a11y-overlay-host.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-overlay-host.component.ts"],"names":[],"mappings":";AASA,qBAyCa,wBAAwB;IACnC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA+B;IAE/D,SAAS,CAAC,QAAQ,CAAC,SAAS,gDAKzB;IAEH,SAAS,CAAC,QAAQ,CAAC,QAAQ,gDAUxB;yCArBQ,wBAAwB;2CAAxB,wBAAwB;CAsBpC"}