@ng-prism/core 21.4.5 → 21.5.0

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

@@ -1,141 +1,70 @@
-import { ChangeDetectionStrategy, Component, computed, inject, input, signal, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input, } from '@angular/core';
 import { A11ySrService } from './a11y-sr.service.js';
-import { A11yPerspectiveService } from './a11y-perspective.service.js';
 import { PrismRendererService } from '../../services/prism-renderer.service.js';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.index;
-function A11ySrComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 4);
-    i0.ɵɵtext(1, "Select a component to simulate screen reader output.");
+function A11ySrComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 0);
+    i0.ɵɵtext(1, " Select a component to simulate screen reader output. ");
     i0.ɵɵdomElementEnd();
 } }
-function A11ySrComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 4);
+function A11ySrComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 0);
     i0.ɵɵtext(1, "No announced elements found.");
     i0.ɵɵdomElementEnd();
 } }
-function A11ySrComponent_Conditional_8_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtext(0);
-} if (rf & 2) {
-    let tmp_2_0;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵtextInterpolate1(" \"", (tmp_2_0 = ctx_r1.active()) == null ? null : tmp_2_0.name, "\" ");
-} }
-function A11ySrComponent_Conditional_8_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "span");
-    i0.ɵɵtext(1);
-    i0.ɵɵdomElementEnd();
-} if (rf & 2) {
-    const s_r3 = ctx.$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(s_r3);
-} }
-function A11ySrComponent_Conditional_8_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 10);
-    i0.ɵɵrepeaterCreate(1, A11ySrComponent_Conditional_8_Conditional_8_For_2_Template, 2, 1, "span", null, i0.ɵɵrepeaterTrackByIdentity);
+function A11ySrComponent_Conditional_2_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " \"");
+    i0.ɵɵdomElementStart(1, "span", 5);
+    i0.ɵɵtext(2);
     i0.ɵɵdomElementEnd();
+    i0.ɵɵtext(3, "\", ");
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.activeStates());
+    const a_r1 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(a_r1.name);
 } }
-function A11ySrComponent_Conditional_8_For_16_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵdomElementStart(0, "div", 15);
-    i0.ɵɵdomListener("click", function A11ySrComponent_Conditional_8_For_16_Template_div_click_0_listener() { const ɵ$index_51_r5 = i0.ɵɵrestoreView(_r4).$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.activeIndex.set(ɵ$index_51_r5)); });
-    i0.ɵɵdomElementEnd();
+function A11ySrComponent_Conditional_2_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
 } if (rf & 2) {
-    const ɵ$index_51_r5 = ctx.$index;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("prism-a11y-sr__dot--active", ɵ$index_51_r5 === ctx_r1.activeIndex());
+    const a_r1 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵtextInterpolate1(" \u00B7 ", a_r1.states.join(", "), " ");
 } }
-function A11ySrComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵdomElementStart(0, "div", 5)(1, "div", 6)(2, "div", 7);
-    i0.ɵɵtext(3);
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(4, "div", 8);
-    i0.ɵɵconditionalCreate(5, A11ySrComponent_Conditional_8_Conditional_5_Template, 1, 1);
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(6, "div", 9);
-    i0.ɵɵtext(7);
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵconditionalCreate(8, A11ySrComponent_Conditional_8_Conditional_8_Template, 3, 0, "div", 10);
+function A11ySrComponent_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 2)(1, "div", 3);
+    i0.ɵɵtext(2);
     i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(9, "div", 11)(10, "button", 12);
-    i0.ɵɵdomListener("click", function A11ySrComponent_Conditional_8_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.prev()); });
-    i0.ɵɵtext(11, "\u25C0");
+    i0.ɵɵdomElementStart(3, "div", 4);
+    i0.ɵɵconditionalCreate(4, A11ySrComponent_Conditional_2_For_2_Conditional_4_Template, 4, 1);
+    i0.ɵɵdomElementStart(5, "code");
+    i0.ɵɵtext(6);
     i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(12, "button", 12);
-    i0.ɵɵdomListener("click", function A11ySrComponent_Conditional_8_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.next()); });
-    i0.ɵɵtext(13, "\u25B6");
-    i0.ɵɵdomElementEnd()();
-    i0.ɵɵdomElementStart(14, "div", 13);
-    i0.ɵɵrepeaterCreate(15, A11ySrComponent_Conditional_8_For_16_Template, 1, 2, "div", 14, _forTrack0);
+    i0.ɵɵconditionalCreate(7, A11ySrComponent_Conditional_2_For_2_Conditional_7_Template, 1, 1);
     i0.ɵɵdomElementEnd()();
 } if (rf & 2) {
-    let tmp_2_0;
-    let tmp_3_0;
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate2(" ", ctx_r1.activeIndex() + 1, " / ", ctx_r1.announcements().length, " ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(((tmp_2_0 = ctx_r1.active()) == null ? null : tmp_2_0.name) ? 5 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate((tmp_3_0 = ctx_r1.active()) == null ? null : tmp_3_0.role);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.activeStates().length ? 8 : -1);
+    const a_r1 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵdomProperty("disabled", ctx_r1.activeIndex() === 0);
+    i0.ɵɵtextInterpolate1("VO \u00B7 ", a_r1.index);
     i0.ɵɵadvance(2);
-    i0.ɵɵdomProperty("disabled", ctx_r1.activeIndex() === ctx_r1.announcements().length - 1);
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r1.announcements());
-} }
-function A11ySrComponent_Conditional_9_For_5_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵdomElementStart(0, "div", 19);
-    i0.ɵɵdomListener("click", function A11ySrComponent_Conditional_9_For_5_Template_div_click_0_listener() { const a_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.activeIndex.set(a_r7.index - 1)); });
-    i0.ɵɵdomElementStart(1, "div", 20);
-    i0.ɵɵtext(2);
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(3, "div", 21)(4, "span", 22);
-    i0.ɵɵtext(5);
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(6, "span", 23);
-    i0.ɵɵtext(7);
-    i0.ɵɵdomElementEnd()()();
-} if (rf & 2) {
-    const a_r7 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("prism-a11y-sr__item--active", a_r7.index === ctx_r1.activeIndex() + 1);
+    i0.ɵɵconditional(a_r1.name ? 4 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(a_r7.index);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(a_r7.text);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(a_r7.role);
+    i0.ɵɵtextInterpolate(a_r1.role);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(a_r1.states.length ? 7 : -1);
 } }
-function A11ySrComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 16)(1, "span");
-    i0.ɵɵtext(2);
-    i0.ɵɵdomElementEnd()();
-    i0.ɵɵdomElementStart(3, "div", 17);
-    i0.ɵɵrepeaterCreate(4, A11ySrComponent_Conditional_9_For_5_Template, 8, 5, "div", 18, _forTrack0);
+function A11ySrComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 1);
+    i0.ɵɵrepeaterCreate(1, A11ySrComponent_Conditional_2_For_2_Template, 8, 4, "div", 2, _forTrack0);
     i0.ɵɵdomElementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", ctx_r1.announcements().length, " Announcements");
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.announcements());
 } }
 export class A11ySrComponent {
     rendererService = inject(PrismRendererService);
     srService = inject(A11ySrService);
-    perspective = inject(A11yPerspectiveService);
     activeComponent = input(null, ...(ngDevMode ? [{ debugName: "activeComponent" }] : []));
-    activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
     announcements = computed(() => {
         const root = this.rendererService.renderedElement();
         if (!root)
@@ -143,115 +72,38 @@ export class A11ySrComponent {
         const doc = root.ownerDocument;
         return this.srService.buildAnnouncementList(root, doc ? (id) => doc.getElementById(id) : undefined);
     }, ...(ngDevMode ? [{ debugName: "announcements" }] : []));
-    active = computed(() => {
-        const list = this.announcements();
-        const idx = this.activeIndex();
-        return list[idx] ?? null;
-    }, ...(ngDevMode ? [{ debugName: "active" }] : []));
-    activeStates = computed(() => this.active()?.states.filter((s) => !s.startsWith('level')) ?? [], ...(ngDevMode ? [{ debugName: "activeStates" }] : []));
-    next() {
-        this.activeIndex.update((i) => Math.min(i + 1, this.announcements().length - 1));
-    }
-    prev() {
-        this.activeIndex.update((i) => Math.max(i - 1, 0));
-    }
     static ɵfac = function A11ySrComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11ySrComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11ySrComponent, selectors: [["prism-a11y-sr"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 10, vars: 5, consts: [[1, "prism-a11y-sr"], [1, "prism-a11y-sr__perspective"], [1, "prism-a11y-sr__persp-btn", 3, "click"], [1, "prism-a11y-sr__persp-btn", "prism-a11y-sr__persp-btn--sr", 3, "click"], [1, "prism-a11y-sr__empty"], [1, "prism-a11y-sr__player"], [1, "prism-a11y-sr__player-card"], [1, "prism-a11y-sr__player-counter"], [1, "prism-a11y-sr__player-name"], [1, "prism-a11y-sr__player-role"], [1, "prism-a11y-sr__player-states"], [1, "prism-a11y-sr__nav-btns"], [1, "prism-a11y-sr__nav-btn", 3, "click", "disabled"], [1, "prism-a11y-sr__dots"], [1, "prism-a11y-sr__dot", 3, "prism-a11y-sr__dot--active"], [1, "prism-a11y-sr__dot", 3, "click"], [1, "prism-a11y-sr__header"], [1, "prism-a11y-sr__list"], [1, "prism-a11y-sr__item", 3, "prism-a11y-sr__item--active"], [1, "prism-a11y-sr__item", 3, "click"], [1, "prism-a11y-sr__idx"], [1, "prism-a11y-sr__text-wrap"], [1, "prism-a11y-sr__announcement"], [1, "prism-a11y-sr__role-label"]], template: function A11ySrComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1)(2, "button", 2);
-            i0.ɵɵdomListener("click", function A11ySrComponent_Template_button_click_2_listener() { return ctx.perspective.mode.set("visual"); });
-            i0.ɵɵtext(3, " \uD83D\uDC41 Visual ");
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(4, "button", 3);
-            i0.ɵɵdomListener("click", function A11ySrComponent_Template_button_click_4_listener() { return ctx.perspective.mode.set("screen-reader"); });
-            i0.ɵɵtext(5, " \uD83C\uDFA7 Screen Reader ");
-            i0.ɵɵdomElementEnd()();
-            i0.ɵɵconditionalCreate(6, A11ySrComponent_Conditional_6_Template, 2, 0, "div", 4)(7, A11ySrComponent_Conditional_7_Template, 2, 0, "div", 4)(8, A11ySrComponent_Conditional_8_Template, 17, 7, "div", 5)(9, A11ySrComponent_Conditional_9_Template, 6, 1);
-            i0.ɵɵdomElementEnd();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11ySrComponent, selectors: [["prism-a11y-sr"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 3, vars: 1, consts: [[1, "sr-empty"], [1, "sr-body"], [1, "sr-line"], [1, "sr-step"], [1, "sr-text"], [1, "sr-name"]], template: function A11ySrComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, A11ySrComponent_Conditional_0_Template, 2, 0, "div", 0)(1, A11ySrComponent_Conditional_1_Template, 2, 0, "div", 0)(2, A11ySrComponent_Conditional_2_Template, 3, 0, "div", 1);
         } if (rf & 2) {
-            i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("prism-a11y-sr__persp-btn--active", ctx.perspective.mode() === "visual");
-            i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("prism-a11y-sr__persp-btn--active", ctx.perspective.mode() === "screen-reader");
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(!ctx.rendererService.renderedElement() ? 6 : !ctx.announcements().length ? 7 : ctx.perspective.mode() === "screen-reader" ? 8 : 9);
-        } }, styles: ["[_nghost-%COMP%] { display: flex; flex-direction: column; height: 100%; }\n\n    .prism-a11y-sr[_ngcontent-%COMP%] { display: flex; flex-direction: column; height: 100%; }\n\n    .prism-a11y-sr__perspective[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 2px;\n      padding: 8px 12px;\n      border-bottom: 1px solid var(--prism-border);\n      flex-shrink: 0;\n    }\n    .prism-a11y-sr__persp-btn[_ngcontent-%COMP%] {\n      padding: 4px 12px;\n      font-size: 12px;\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n      border: 1px solid var(--prism-border);\n      background: none;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      border-radius: 5px;\n      transition: all 0.12s;\n    }\n    .prism-a11y-sr__persp-btn[_ngcontent-%COMP%]:hover { color: var(--prism-text-2); }\n    .prism-a11y-sr__persp-btn--active[_ngcontent-%COMP%] {\n      background: rgba(124, 159, 236, 0.1);\n      border-color: rgba(124, 159, 236, 0.3);\n      color: var(--prism-primary);\n    }\n    .prism-a11y-sr__persp-btn--sr.prism-a11y-sr__persp-btn--active[_ngcontent-%COMP%] {\n      background: rgba(167, 139, 250, 0.1);\n      border-color: rgba(167, 139, 250, 0.3);\n      color: #a78bfa;\n    }\n\n    .prism-a11y-sr__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    \n\n    .prism-a11y-sr__header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\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-sr__hint[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #a78bfa;\n      cursor: default;\n    }\n\n    .prism-a11y-sr__list[_ngcontent-%COMP%] { flex: 1; overflow: auto; }\n\n    .prism-a11y-sr__item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: flex-start;\n      gap: 10px;\n      padding: 8px 16px;\n      border-bottom: 1px solid var(--prism-border);\n      cursor: pointer;\n      transition: background 0.1s;\n    }\n    .prism-a11y-sr__item[_ngcontent-%COMP%]:hover { background: rgba(167, 139, 250, 0.04); }\n    .prism-a11y-sr__item--active[_ngcontent-%COMP%] { background: rgba(167, 139, 250, 0.08); }\n\n    .prism-a11y-sr__idx[_ngcontent-%COMP%] {\n      width: 18px; height: 18px;\n      background: #a78bfa;\n      color: white;\n      border-radius: 9px;\n      font-size: 10px; font-weight: 700;\n      display: flex; align-items: center; justify-content: center;\n      flex-shrink: 0; margin-top: 2px;\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n    }\n    .prism-a11y-sr__item--active[_ngcontent-%COMP%]   .prism-a11y-sr__idx[_ngcontent-%COMP%] {\n      box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.3);\n    }\n\n    .prism-a11y-sr__text-wrap[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 1px;\n    }\n    .prism-a11y-sr__announcement[_ngcontent-%COMP%] {\n      font-size: 12.5px;\n      color: var(--prism-text);\n      font-style: italic;\n      line-height: 1.4;\n    }\n    .prism-a11y-sr__role-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-text-muted);\n    }\n\n    \n\n    .prism-a11y-sr__player[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 16px;\n      flex: 1;\n      padding: 20px;\n    }\n\n    .prism-a11y-sr__player-card[_ngcontent-%COMP%] {\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-top: 2px solid #a78bfa;\n      border-radius: 10px;\n      padding: 20px 28px;\n      text-align: center;\n      min-width: 180px;\n    }\n    .prism-a11y-sr__player-counter[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--prism-text-muted);\n      margin-bottom: 8px;\n      font-family: var(--prism-font-mono, monospace);\n    }\n    .prism-a11y-sr__player-name[_ngcontent-%COMP%] {\n      font-size: 17px;\n      font-weight: 600;\n      color: var(--prism-text);\n      margin-bottom: 4px;\n      min-height: 24px;\n    }\n    .prism-a11y-sr__player-role[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: #a78bfa;\n    }\n    .prism-a11y-sr__player-states[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 5px;\n      justify-content: center;\n      flex-wrap: wrap;\n      margin-top: 6px;\n    }\n    .prism-a11y-sr__player-states[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      padding: 1px 6px;\n      border-radius: 3px;\n      font-size: 11px;\n      font-weight: 600;\n      background: color-mix(in srgb, #fbbf24 12%, transparent);\n      color: #fbbf24;\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n    }\n\n    .prism-a11y-sr__nav-btns[_ngcontent-%COMP%] { display: flex; gap: 8px; }\n    .prism-a11y-sr__nav-btn[_ngcontent-%COMP%] {\n      width: 36px; height: 36px;\n      background: rgba(167, 139, 250, 0.1);\n      border: 1px solid rgba(167, 139, 250, 0.2);\n      border-radius: 6px;\n      color: #a78bfa;\n      cursor: pointer;\n      font-size: 14px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: background 0.1s;\n    }\n    .prism-a11y-sr__nav-btn[_ngcontent-%COMP%]:hover:not(:disabled) { background: rgba(167, 139, 250, 0.18); }\n    .prism-a11y-sr__nav-btn[_ngcontent-%COMP%]:disabled { opacity: 0.3; cursor: default; }\n\n    .prism-a11y-sr__dots[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 5px;\n      flex-wrap: wrap;\n      justify-content: center;\n      max-width: 200px;\n    }\n    .prism-a11y-sr__dot[_ngcontent-%COMP%] {\n      width: 6px; height: 6px;\n      border-radius: 50%;\n      background: var(--prism-text-muted);\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n    .prism-a11y-sr__dot--active[_ngcontent-%COMP%] {\n      background: #a78bfa;\n      width: 14px;\n      border-radius: 3px;\n    }"], changeDetection: 0 });
+            i0.ɵɵconditional(!ctx.rendererService.renderedElement() ? 0 : !ctx.announcements().length ? 1 : 2);
+        } }, styles: ["[_nghost-%COMP%] { display: block; height: 100%; overflow: auto; }\n\n    .sr-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    .sr-body[_ngcontent-%COMP%] {\n      padding: 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n    }\n\n    .sr-line[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 56px 1fr;\n      gap: 12px;\n      padding: 10px 12px;\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-radius: 8px;\n    }\n\n    .sr-step[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 11px;\n      color: var(--prism-text-ghost);\n      font-weight: 600;\n    }\n\n    .sr-text[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: var(--prism-text);\n      line-height: 1.5;\n    }\n\n    .sr-name[_ngcontent-%COMP%] {\n      color: var(--prism-primary);\n      font-weight: 600;\n      font-style: normal;\n    }\n\n    .sr-text[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 11.5px;\n      color: var(--prism-text-muted);\n      padding: 1px 5px;\n      background: var(--prism-input-bg);\n      border-radius: var(--radius-xs);\n    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11ySrComponent, [{
         type: Component,
         args: [{ selector: 'prism-a11y-sr', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="prism-a11y-sr">
-      <div class="prism-a11y-sr__perspective">
-        <button
-          class="prism-a11y-sr__persp-btn"
-          [class.prism-a11y-sr__persp-btn--active]="perspective.mode() === 'visual'"
-          (click)="perspective.mode.set('visual')"
-        >
-          👁 Visual
-        </button>
-        <button
-          class="prism-a11y-sr__persp-btn prism-a11y-sr__persp-btn--sr"
-          [class.prism-a11y-sr__persp-btn--active]="perspective.mode() === 'screen-reader'"
-          (click)="perspective.mode.set('screen-reader')"
-        >
-          🎧 Screen Reader
-        </button>
-      </div>
-
-      @if (!rendererService.renderedElement()) {
-        <div class="prism-a11y-sr__empty">Select a component to simulate screen reader output.</div>
-      } @else if (!announcements().length) {
-        <div class="prism-a11y-sr__empty">No announced elements found.</div>
-      } @else if (perspective.mode() === 'screen-reader') {
-        <div class="prism-a11y-sr__player">
-          <div class="prism-a11y-sr__player-card">
-            <div class="prism-a11y-sr__player-counter">
-              {{ activeIndex() + 1 }} / {{ announcements().length }}
-            </div>
-            <div class="prism-a11y-sr__player-name">
-              @if (active()?.name) { "{{ active()?.name }}" }
-            </div>
-            <div class="prism-a11y-sr__player-role">{{ active()?.role }}</div>
-            @if (activeStates().length) {
-              <div class="prism-a11y-sr__player-states">
-                @for (s of activeStates(); track s) { <span>{{ s }}</span> }
-              </div>
-            }
-          </div>
-          <div class="prism-a11y-sr__nav-btns">
-            <button class="prism-a11y-sr__nav-btn" (click)="prev()" [disabled]="activeIndex() === 0">◀</button>
-            <button class="prism-a11y-sr__nav-btn" (click)="next()" [disabled]="activeIndex() === announcements().length - 1">▶</button>
-          </div>
-          <div class="prism-a11y-sr__dots">
-            @for (a of announcements(); track a.index; let i = $index) {
-              <div
-                class="prism-a11y-sr__dot"
-                [class.prism-a11y-sr__dot--active]="i === activeIndex()"
-                (click)="activeIndex.set(i)"
-              ></div>
-            }
-          </div>
-        </div>
-      } @else {
-        <div class="prism-a11y-sr__header">
-          <span>{{ announcements().length }} Announcements</span>
-        </div>
-        <div class="prism-a11y-sr__list">
-          @for (a of announcements(); track a.index) {
-            <div
-              class="prism-a11y-sr__item"
-              [class.prism-a11y-sr__item--active]="a.index === activeIndex() + 1"
-              (click)="activeIndex.set(a.index - 1)"
-            >
-              <div class="prism-a11y-sr__idx">{{ a.index }}</div>
-              <div class="prism-a11y-sr__text-wrap">
-                <span class="prism-a11y-sr__announcement">{{ a.text }}</span>
-                <span class="prism-a11y-sr__role-label">{{ a.role }}</span>
-              </div>
-            </div>
+    @if (!rendererService.renderedElement()) {
+    <div class="sr-empty">
+      Select a component to simulate screen reader output.
+    </div>
+    } @else if (!announcements().length) {
+    <div class="sr-empty">No announced elements found.</div>
+    } @else {
+    <div class="sr-body">
+      @for (a of announcements(); track a.index) {
+      <div class="sr-line">
+        <div class="sr-step">VO · {{ a.index }}</div>
+        <div class="sr-text">
+          @if (a.name) { "<span class="sr-name">{{ a.name }}</span
+          >", }
+          <code>{{ a.role }}</code>
+          @if (a.states.length) { · {{ a.states.join(', ') }}
           }
         </div>
+      </div>
       }
     </div>
-  `, styles: ["\n    :host { display: flex; flex-direction: column; height: 100%; }\n\n    .prism-a11y-sr { display: flex; flex-direction: column; height: 100%; }\n\n    .prism-a11y-sr__perspective {\n      display: flex;\n      gap: 2px;\n      padding: 8px 12px;\n      border-bottom: 1px solid var(--prism-border);\n      flex-shrink: 0;\n    }\n    .prism-a11y-sr__persp-btn {\n      padding: 4px 12px;\n      font-size: 12px;\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n      border: 1px solid var(--prism-border);\n      background: none;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      border-radius: 5px;\n      transition: all 0.12s;\n    }\n    .prism-a11y-sr__persp-btn:hover { color: var(--prism-text-2); }\n    .prism-a11y-sr__persp-btn--active {\n      background: rgba(124, 159, 236, 0.1);\n      border-color: rgba(124, 159, 236, 0.3);\n      color: var(--prism-primary);\n    }\n    .prism-a11y-sr__persp-btn--sr.prism-a11y-sr__persp-btn--active {\n      background: rgba(167, 139, 250, 0.1);\n      border-color: rgba(167, 139, 250, 0.3);\n      color: #a78bfa;\n    }\n\n    .prism-a11y-sr__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    /* \u2500\u2500 List mode \u2500\u2500 */\n    .prism-a11y-sr__header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\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-sr__hint {\n      font-size: 11px;\n      color: #a78bfa;\n      cursor: default;\n    }\n\n    .prism-a11y-sr__list { flex: 1; overflow: auto; }\n\n    .prism-a11y-sr__item {\n      display: flex;\n      align-items: flex-start;\n      gap: 10px;\n      padding: 8px 16px;\n      border-bottom: 1px solid var(--prism-border);\n      cursor: pointer;\n      transition: background 0.1s;\n    }\n    .prism-a11y-sr__item:hover { background: rgba(167, 139, 250, 0.04); }\n    .prism-a11y-sr__item--active { background: rgba(167, 139, 250, 0.08); }\n\n    .prism-a11y-sr__idx {\n      width: 18px; height: 18px;\n      background: #a78bfa;\n      color: white;\n      border-radius: 9px;\n      font-size: 10px; font-weight: 700;\n      display: flex; align-items: center; justify-content: center;\n      flex-shrink: 0; margin-top: 2px;\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n    }\n    .prism-a11y-sr__item--active .prism-a11y-sr__idx {\n      box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.3);\n    }\n\n    .prism-a11y-sr__text-wrap {\n      display: flex;\n      flex-direction: column;\n      gap: 1px;\n    }\n    .prism-a11y-sr__announcement {\n      font-size: 12.5px;\n      color: var(--prism-text);\n      font-style: italic;\n      line-height: 1.4;\n    }\n    .prism-a11y-sr__role-label {\n      font-size: 11px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-text-muted);\n    }\n\n    /* \u2500\u2500 Player mode \u2500\u2500 */\n    .prism-a11y-sr__player {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 16px;\n      flex: 1;\n      padding: 20px;\n    }\n\n    .prism-a11y-sr__player-card {\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-top: 2px solid #a78bfa;\n      border-radius: 10px;\n      padding: 20px 28px;\n      text-align: center;\n      min-width: 180px;\n    }\n    .prism-a11y-sr__player-counter {\n      font-size: 11px;\n      color: var(--prism-text-muted);\n      margin-bottom: 8px;\n      font-family: var(--prism-font-mono, monospace);\n    }\n    .prism-a11y-sr__player-name {\n      font-size: 17px;\n      font-weight: 600;\n      color: var(--prism-text);\n      margin-bottom: 4px;\n      min-height: 24px;\n    }\n    .prism-a11y-sr__player-role {\n      font-size: 13px;\n      color: #a78bfa;\n    }\n    .prism-a11y-sr__player-states {\n      display: flex;\n      gap: 5px;\n      justify-content: center;\n      flex-wrap: wrap;\n      margin-top: 6px;\n    }\n    .prism-a11y-sr__player-states span {\n      padding: 1px 6px;\n      border-radius: 3px;\n      font-size: 11px;\n      font-weight: 600;\n      background: color-mix(in srgb, #fbbf24 12%, transparent);\n      color: #fbbf24;\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n    }\n\n    .prism-a11y-sr__nav-btns { display: flex; gap: 8px; }\n    .prism-a11y-sr__nav-btn {\n      width: 36px; height: 36px;\n      background: rgba(167, 139, 250, 0.1);\n      border: 1px solid rgba(167, 139, 250, 0.2);\n      border-radius: 6px;\n      color: #a78bfa;\n      cursor: pointer;\n      font-size: 14px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: background 0.1s;\n    }\n    .prism-a11y-sr__nav-btn:hover:not(:disabled) { background: rgba(167, 139, 250, 0.18); }\n    .prism-a11y-sr__nav-btn:disabled { opacity: 0.3; cursor: default; }\n\n    .prism-a11y-sr__dots {\n      display: flex;\n      gap: 5px;\n      flex-wrap: wrap;\n      justify-content: center;\n      max-width: 200px;\n    }\n    .prism-a11y-sr__dot {\n      width: 6px; height: 6px;\n      border-radius: 50%;\n      background: var(--prism-text-muted);\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n    .prism-a11y-sr__dot--active {\n      background: #a78bfa;\n      width: 14px;\n      border-radius: 3px;\n    }\n  "] }]
+    }
+  `, styles: ["\n    :host { display: block; height: 100%; overflow: auto; }\n\n    .sr-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    .sr-body {\n      padding: 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n    }\n\n    .sr-line {\n      display: grid;\n      grid-template-columns: 56px 1fr;\n      gap: 12px;\n      padding: 10px 12px;\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-radius: 8px;\n    }\n\n    .sr-step {\n      font-family: var(--font-mono);\n      font-size: 11px;\n      color: var(--prism-text-ghost);\n      font-weight: 600;\n    }\n\n    .sr-text {\n      font-size: 13px;\n      color: var(--prism-text);\n      line-height: 1.5;\n    }\n\n    .sr-name {\n      color: var(--prism-primary);\n      font-weight: 600;\n      font-style: normal;\n    }\n\n    .sr-text code {\n      font-family: var(--font-mono);\n      font-size: 11.5px;\n      color: var(--prism-text-muted);\n      padding: 1px 5px;\n      background: var(--prism-input-bg);\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(A11ySrComponent, { className: "A11ySrComponent", filePath: "app/panels/a11y/a11y-sr.component.ts", lineNumber: 288 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11ySrComponent, { className: "A11ySrComponent", filePath: "app/panels/a11y/a11y-sr.component.ts", lineNumber: 93 }); })();

package/dist/app/panels/a11y/a11y-tree.component.d.ts

@@ -4,22 +4,20 @@ import * as i0 from "@angular/core";
 export declare class A11yTreeNodeComponent {
     readonly node: import("@angular/core").InputSignal<A11yNode>;
     readonly depth: import("@angular/core").InputSignal<number>;
+    readonly isLast: import("@angular/core").InputSignal<boolean>;
     protected readonly expanded: import("@angular/core").WritableSignal<boolean>;
-    protected readonly visibleChildren: import("@angular/core").Signal<A11yNode[]>;
-    protected readonly hiddenChildren: import("@angular/core").Signal<A11yNode[]>;
     protected readonly stateEntries: import("@angular/core").Signal<{
         key: string;
         label: string;
     }[]>;
     protected toggleExpanded(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<A11yTreeNodeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<A11yTreeNodeComponent, "prism-a11y-tree-node", never, { "node": { "alias": "node"; "required": true; "isSignal": true; }; "depth": { "alias": "depth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<A11yTreeNodeComponent, "prism-a11y-tree-node", never, { "node": { "alias": "node"; "required": true; "isSignal": true; }; "depth": { "alias": "depth"; "required": false; "isSignal": true; }; "isLast": { "alias": "isLast"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 export declare class A11yTreeComponent {
     protected readonly rendererService: PrismRendererService;
     private readonly treeService;
     readonly activeComponent: import("@angular/core").InputSignal<unknown>;
-    protected readonly expandAll: import("@angular/core").WritableSignal<boolean>;
     protected readonly tree: import("@angular/core").Signal<A11yNode | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<A11yTreeComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<A11yTreeComponent, "prism-a11y-tree", never, { "activeComponent": { "alias": "activeComponent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;

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

@@ -1 +1 @@
-{"version":3,"file":"a11y-tree.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-tree.component.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAChF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;;AAEhD,qBAmHa,qBAAqB;IAChC,QAAQ,CAAC,IAAI,gDAA8B;IAC3C,QAAQ,CAAC,KAAK,8CAAY;IAE1B,SAAS,CAAC,QAAQ,CAAC,QAAQ,kDAAgB;IAE3C,SAAS,CAAC,QAAQ,CAAC,eAAe,6CAEhC;IAEF,SAAS,CAAC,QAAQ,CAAC,cAAc,6CAE/B;IAEF,SAAS,CAAC,QAAQ,CAAC,YAAY;;;SAQ5B;IAEH,SAAS,CAAC,cAAc,IAAI,IAAI;yCAxBrB,qBAAqB;2CAArB,qBAAqB;CA6BjC;AAED,qBAuEa,iBAAiB;IAC5B,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA2B;IAEvD,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,SAAS,CAAC,QAAQ,CAAC,SAAS,kDAAgB;IAE5C,SAAS,CAAC,QAAQ,CAAC,IAAI,kDAQpB;yCAhBQ,iBAAiB;2CAAjB,iBAAiB;CAiB7B"}
+{"version":3,"file":"a11y-tree.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-tree.component.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAChF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;;AAEhD,qBAyEa,qBAAqB;IAChC,QAAQ,CAAC,IAAI,gDAA8B;IAC3C,QAAQ,CAAC,KAAK,8CAAY;IAC1B,QAAQ,CAAC,MAAM,+CAAgB;IAE/B,SAAS,CAAC,QAAQ,CAAC,QAAQ,kDAAgB;IAE3C,SAAS,CAAC,QAAQ,CAAC,YAAY;;;SAQ5B;IAEH,SAAS,CAAC,cAAc,IAAI,IAAI;yCAjBrB,qBAAqB;2CAArB,qBAAqB;CAsBjC;AAED,qBA6Ba,iBAAiB;IAC5B,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA2B;IAEvD,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,SAAS,CAAC,QAAQ,CAAC,IAAI,kDAQpB;yCAdQ,iBAAiB;2CAAjB,iBAAiB;CAe7B"}