@ng-prism/core 21.4.5 → 21.5.0

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

@@ -3,107 +3,82 @@ import { A11yTreeService } from './a11y-tree.service.js';
 import { PrismRendererService } from '../../services/prism-renderer.service.js';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.key;
+function A11yTreeNodeComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.isLast() ? "\u2514\u2500" : "\u251C\u2500", " ");
+} }
 function A11yTreeNodeComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 3);
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 6);
+    i0.ɵɵlistener("click", function A11yTreeNodeComponent_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleExpanded()); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.expanded() ? "\u25BE" : "\u25B8");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.expanded() ? "\u25BE" : "\u25B8", " ");
 } }
-function A11yTreeNodeComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function A11yTreeNodeComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 4);
-    i0.ɵɵtext(1, "\u00B7");
-    i0.ɵɵelementEnd();
-} }
-function A11yTreeNodeComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 6);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" \"", ctx_r0.node().name, "\"");
+    i0.ɵɵtextInterpolate1("\"", ctx_r0.node().name, "\"");
 } }
-function A11yTreeNodeComponent_For_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 7);
+function A11yTreeNodeComponent_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 5);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const entry_r2 = ctx.$implicit;
+    const entry_r3 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(entry_r2.label);
-} }
-function A11yTreeNodeComponent_Conditional_10_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-a11y-tree-node", 8);
-} if (rf & 2) {
-    const child_r3 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("node", child_r3)("depth", ctx_r0.depth() + 1);
+    i0.ɵɵtextInterpolate1("[", entry_r3.label, "]");
 } }
-function A11yTreeNodeComponent_Conditional_10_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 10)(1, "span", 11);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd()();
+function A11yTreeNodeComponent_Conditional_9_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-a11y-tree-node", 7);
 } if (rf & 2) {
+    const child_r4 = ctx.$implicit;
+    const ɵ$index_23_r5 = ctx.$index;
+    const ɵ$count_23_r6 = ctx.$count;
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleProp("padding-left", (ctx_r0.depth() + 1) * 16 + 24, "px");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2(" ", ctx_r0.hiddenChildren().length, " hidden element", ctx_r0.hiddenChildren().length > 1 ? "s" : "", " (aria-hidden) ");
+    i0.ɵɵproperty("node", child_r4)("depth", ctx_r0.depth() + 1)("isLast", ɵ$index_23_r5 === ɵ$count_23_r6 - 1);
 } }
-function A11yTreeNodeComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, A11yTreeNodeComponent_Conditional_10_For_1_Template, 1, 2, "prism-a11y-tree-node", 8, i0.ɵɵrepeaterTrackByIndex);
-    i0.ɵɵconditionalCreate(2, A11yTreeNodeComponent_Conditional_10_Conditional_2_Template, 3, 4, "div", 9);
+function A11yTreeNodeComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, A11yTreeNodeComponent_Conditional_9_For_1_Template, 1, 3, "prism-a11y-tree-node", 7, i0.ɵɵrepeaterTrackByIndex);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵrepeater(ctx_r0.visibleChildren());
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.hiddenChildren().length ? 2 : -1);
+    i0.ɵɵrepeater(ctx_r0.node().children);
 } }
-function A11yTreeComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵtext(1, "Select a component to inspect the accessibility tree.");
+function A11yTreeComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 0);
+    i0.ɵɵtext(1, " Select a component to inspect the accessibility tree. ");
     i0.ɵɵelementEnd();
 } }
-function A11yTreeComponent_Conditional_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-a11y-tree-node", 5);
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("node", ctx_r1.tree())("depth", 0);
-} }
-function A11yTreeComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 2)(1, "span");
-    i0.ɵɵtext(2, "Accessibility tree");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 3);
-    i0.ɵɵlistener("click", function A11yTreeComponent_Conditional_2_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.expandAll.update(v => !v)); });
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 4);
-    i0.ɵɵconditionalCreate(6, A11yTreeComponent_Conditional_2_Conditional_6_Template, 1, 2, "prism-a11y-tree-node", 5);
+function A11yTreeComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵelement(1, "prism-a11y-tree-node", 2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.expandAll() ? "Collapse all" : "Expand all", " ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.tree() ? 6 : -1);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("node", ctx_r0.tree())("depth", 0)("isLast", true);
 } }
 export class A11yTreeNodeComponent {
     node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
     depth = input(0, ...(ngDevMode ? [{ debugName: "depth" }] : []));
+    isLast = input(false, ...(ngDevMode ? [{ debugName: "isLast" }] : []));
     expanded = signal(true, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
-    visibleChildren = computed(() => this.node().children.filter((c) => !c.hidden), ...(ngDevMode ? [{ debugName: "visibleChildren" }] : []));
-    hiddenChildren = computed(() => this.node().children.filter((c) => c.hidden), ...(ngDevMode ? [{ debugName: "hiddenChildren" }] : []));
     stateEntries = computed(() => {
         const states = this.node().states;
         return Object.entries(states)
             .filter(([key]) => key !== 'hidden')
             .map(([key, value]) => ({
             key,
-            label: value === true ? key : `${key}:${value}`,
+            label: value === true ? key : `${key}=${value}`,
         }));
     }, ...(ngDevMode ? [{ debugName: "stateEntries" }] : []));
     toggleExpanded() {
@@ -112,81 +87,72 @@ export class A11yTreeNodeComponent {
         }
     }
     static ɵfac = function A11yTreeNodeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11yTreeNodeComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yTreeNodeComponent, selectors: [["prism-a11y-tree-node"]], inputs: { node: [1, "node"], depth: [1, "depth"] }, decls: 11, vars: 8, consts: [[1, "prism-a11y-tn"], [1, "prism-a11y-tn__row", 3, "click"], [1, "prism-a11y-tn__indent"], [1, "prism-a11y-tn__chevron"], [1, "prism-a11y-tn__chevron", "prism-a11y-tn__chevron--leaf"], [1, "prism-a11y-tn__role"], [1, "prism-a11y-tn__name"], [1, "prism-a11y-tn__state"], [3, "node", "depth"], [1, "prism-a11y-tn__hidden-group", 3, "padding-left"], [1, "prism-a11y-tn__hidden-group"], [1, "prism-a11y-tn__hidden-label"]], template: function A11yTreeNodeComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "button", 1);
-            i0.ɵɵlistener("click", function A11yTreeNodeComponent_Template_button_click_1_listener() { return ctx.toggleExpanded(); });
-            i0.ɵɵelement(2, "span", 2);
-            i0.ɵɵconditionalCreate(3, A11yTreeNodeComponent_Conditional_3_Template, 2, 1, "span", 3)(4, A11yTreeNodeComponent_Conditional_4_Template, 2, 0, "span", 4);
-            i0.ɵɵelementStart(5, "span", 5);
-            i0.ɵɵtext(6);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yTreeNodeComponent, selectors: [["prism-a11y-tree-node"]], inputs: { node: [1, "node"], depth: [1, "depth"], isLast: [1, "isLast"] }, decls: 10, vars: 9, consts: [[1, "aria-tree-line"], [1, "indent"], [1, "tree-toggle"], [1, "role"], [1, "name"], [1, "attr"], [1, "tree-toggle", 3, "click"], [3, "node", "depth", "isLast"]], template: function A11yTreeNodeComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "span", 1);
+            i0.ɵɵconditionalCreate(2, A11yTreeNodeComponent_Conditional_2_Template, 1, 1);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(7, A11yTreeNodeComponent_Conditional_7_Template, 2, 1, "span", 6);
-            i0.ɵɵrepeaterCreate(8, A11yTreeNodeComponent_For_9_Template, 2, 1, "span", 7, _forTrack0);
+            i0.ɵɵconditionalCreate(3, A11yTreeNodeComponent_Conditional_3_Template, 2, 1, "button", 2);
+            i0.ɵɵelementStart(4, "span", 3);
+            i0.ɵɵtext(5);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(10, A11yTreeNodeComponent_Conditional_10_Template, 3, 1);
+            i0.ɵɵconditionalCreate(6, A11yTreeNodeComponent_Conditional_6_Template, 2, 1, "span", 4);
+            i0.ɵɵrepeaterCreate(7, A11yTreeNodeComponent_For_8_Template, 2, 1, "span", 5, _forTrack0);
             i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(9, A11yTreeNodeComponent_Conditional_9_Template, 2, 0);
         } if (rf & 2) {
+            i0.ɵɵclassProp("aria-tree-line--hidden", ctx.node().hidden);
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("prism-a11y-tn__row--hidden", ctx.node().hidden);
+            i0.ɵɵstyleProp("width", ctx.depth() * 20, "px");
             i0.ɵɵadvance();
-            i0.ɵɵstyleProp("width", ctx.depth() * 16, "px");
+            i0.ɵɵconditional(ctx.depth() > 0 ? 2 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.node().children.length ? 3 : 4);
-            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.node().children.length ? 3 : -1);
+            i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(ctx.node().role);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.node().name ? 7 : -1);
+            i0.ɵɵconditional(ctx.node().name ? 6 : -1);
             i0.ɵɵadvance();
             i0.ɵɵrepeater(ctx.stateEntries());
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.expanded() && ctx.node().children.length ? 10 : -1);
-        } }, dependencies: [A11yTreeNodeComponent], styles: ["[_nghost-%COMP%] { display: block; }\n\n    .prism-a11y-tn__row[_ngcontent-%COMP%] {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      padding: 3px 12px 3px 4px;\n      gap: 0;\n      background: none;\n      border: none;\n      cursor: pointer;\n      text-align: left;\n      font-family: var(--prism-font-mono, monospace);\n      font-size: 12px;\n      line-height: 1.5;\n      border-radius: 3px;\n      transition: background 0.1s;\n      white-space: nowrap;\n    }\n    .prism-a11y-tn__row[_ngcontent-%COMP%]:hover { background: rgba(255, 255, 255, 0.04); }\n    .prism-a11y-tn__row--hidden[_ngcontent-%COMP%] { opacity: 0.4; }\n\n    .prism-a11y-tn__indent[_ngcontent-%COMP%] { display: inline-block; flex-shrink: 0; }\n\n    .prism-a11y-tn__chevron[_ngcontent-%COMP%] {\n      display: inline-flex;\n      width: 16px;\n      justify-content: center;\n      font-size: 10px;\n      color: var(--prism-text-muted);\n      flex-shrink: 0;\n    }\n    .prism-a11y-tn__chevron--leaf[_ngcontent-%COMP%] { opacity: 0.3; }\n\n    .prism-a11y-tn__role[_ngcontent-%COMP%] {\n      color: var(--prism-primary);\n      font-weight: 600;\n    }\n\n    .prism-a11y-tn__name[_ngcontent-%COMP%] {\n      color: var(--prism-text-2);\n      margin-left: 4px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 240px;\n    }\n\n    .prism-a11y-tn__state[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      margin-left: 6px;\n      padding: 0 5px;\n      border-radius: 3px;\n      font-size: 10px;\n      font-weight: 600;\n      letter-spacing: 0.04em;\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-tn__hidden-group[_ngcontent-%COMP%] {\n      padding-top: 2px;\n      padding-bottom: 2px;\n    }\n\n    .prism-a11y-tn__hidden-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--prism-text-muted);\n      font-style: italic;\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n    }"], changeDetection: 0 });
+            i0.ɵɵconditional(ctx.expanded() && ctx.node().children.length ? 9 : -1);
+        } }, dependencies: [A11yTreeNodeComponent], styles: ["[_nghost-%COMP%] { display: block; }\n\n    .aria-tree-line[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 2px 0;\n      font-family: var(--font-mono);\n      font-size: 12.5px;\n      line-height: 1.8;\n      color: var(--prism-text-2);\n    }\n    .aria-tree-line--hidden[_ngcontent-%COMP%] { opacity: 0.4; }\n\n    .indent[_ngcontent-%COMP%] {\n      color: var(--prism-text-ghost);\n      opacity: 0.5;\n      user-select: none;\n      flex-shrink: 0;\n      white-space: pre;\n      font-size: 12px;\n      text-align: right;\n    }\n\n    .tree-toggle[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-size: 10px;\n      color: var(--prism-text-muted);\n      padding: 0;\n      width: 12px;\n      flex-shrink: 0;\n    }\n\n    .role[_ngcontent-%COMP%] { color: var(--prism-primary); font-weight: 600; }\n    .name[_ngcontent-%COMP%] { color: var(--prism-text); }\n    .attr[_ngcontent-%COMP%] { color: var(--prism-text-ghost); }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yTreeNodeComponent, [{
         type: Component,
         args: [{ selector: 'prism-a11y-tree-node', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="prism-a11y-tn">
-      <button
-        class="prism-a11y-tn__row"
-        [class.prism-a11y-tn__row--hidden]="node().hidden"
-        (click)="toggleExpanded()"
-      >
-        <span class="prism-a11y-tn__indent" [style.width.px]="depth() * 16"></span>
-        @if (node().children.length) {
-          <span class="prism-a11y-tn__chevron">{{ expanded() ? '▾' : '▸' }}</span>
-        } @else {
-          <span class="prism-a11y-tn__chevron prism-a11y-tn__chevron--leaf">·</span>
-        }
-        <span class="prism-a11y-tn__role">{{ node().role }}</span>
-        @if (node().name) {
-          <span class="prism-a11y-tn__name"> "{{ node().name }}"</span>
-        }
-        @for (entry of stateEntries(); track entry.key) {
-          <span class="prism-a11y-tn__state">{{ entry.label }}</span>
+    <div class="aria-tree-line" [class.aria-tree-line--hidden]="node().hidden">
+      <span class="indent" [style.width.px]="depth() * 20">
+        @if (depth() > 0) {
+        {{ isLast() ? '└─' : '├─' }}
         }
+      </span>
+      @if (node().children.length) {
+      <button class="tree-toggle" (click)="toggleExpanded()">
+        {{ expanded() ? '▾' : '▸' }}
       </button>
-
-      @if (expanded() && node().children.length) {
-        @for (child of visibleChildren(); track $index) {
-          <prism-a11y-tree-node [node]="child" [depth]="depth() + 1" />
-        }
-        @if (hiddenChildren().length) {
-          <div class="prism-a11y-tn__hidden-group" [style.padding-left.px]="(depth() + 1) * 16 + 24">
-            <span class="prism-a11y-tn__hidden-label">
-              {{ hiddenChildren().length }} hidden element{{ hiddenChildren().length > 1 ? 's' : '' }} (aria-hidden)
-            </span>
-          </div>
-        }
+      }
+      <span class="role">{{ node().role }}</span>
+      @if (node().name) {
+      <span class="name">"{{ node().name }}"</span>
+      } @for (entry of stateEntries(); track entry.key) {
+      <span class="attr">[{{ entry.label }}]</span>
       }
     </div>
-  `, styles: ["\n    :host { display: block; }\n\n    .prism-a11y-tn__row {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      padding: 3px 12px 3px 4px;\n      gap: 0;\n      background: none;\n      border: none;\n      cursor: pointer;\n      text-align: left;\n      font-family: var(--prism-font-mono, monospace);\n      font-size: 12px;\n      line-height: 1.5;\n      border-radius: 3px;\n      transition: background 0.1s;\n      white-space: nowrap;\n    }\n    .prism-a11y-tn__row:hover { background: rgba(255, 255, 255, 0.04); }\n    .prism-a11y-tn__row--hidden { opacity: 0.4; }\n\n    .prism-a11y-tn__indent { display: inline-block; flex-shrink: 0; }\n\n    .prism-a11y-tn__chevron {\n      display: inline-flex;\n      width: 16px;\n      justify-content: center;\n      font-size: 10px;\n      color: var(--prism-text-muted);\n      flex-shrink: 0;\n    }\n    .prism-a11y-tn__chevron--leaf { opacity: 0.3; }\n\n    .prism-a11y-tn__role {\n      color: var(--prism-primary);\n      font-weight: 600;\n    }\n\n    .prism-a11y-tn__name {\n      color: var(--prism-text-2);\n      margin-left: 4px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 240px;\n    }\n\n    .prism-a11y-tn__state {\n      display: inline-flex;\n      align-items: center;\n      margin-left: 6px;\n      padding: 0 5px;\n      border-radius: 3px;\n      font-size: 10px;\n      font-weight: 600;\n      letter-spacing: 0.04em;\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-tn__hidden-group {\n      padding-top: 2px;\n      padding-bottom: 2px;\n    }\n\n    .prism-a11y-tn__hidden-label {\n      font-size: 11px;\n      color: var(--prism-text-muted);\n      font-style: italic;\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n    }\n  "] }]
-    }], null, { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yTreeNodeComponent, { className: "A11yTreeNodeComponent", filePath: "app/panels/a11y/a11y-tree.component.ts", lineNumber: 128 }); })();
+    @if (expanded() && node().children.length) { @for (child of node().children;
+    track $index; let last = $last) {
+    <prism-a11y-tree-node
+      [node]="child"
+      [depth]="depth() + 1"
+      [isLast]="last"
+    />
+    } }
+  `, styles: ["\n    :host { display: block; }\n\n    .aria-tree-line {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 2px 0;\n      font-family: var(--font-mono);\n      font-size: 12.5px;\n      line-height: 1.8;\n      color: var(--prism-text-2);\n    }\n    .aria-tree-line--hidden { opacity: 0.4; }\n\n    .indent {\n      color: var(--prism-text-ghost);\n      opacity: 0.5;\n      user-select: none;\n      flex-shrink: 0;\n      white-space: pre;\n      font-size: 12px;\n      text-align: right;\n    }\n\n    .tree-toggle {\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-size: 10px;\n      color: var(--prism-text-muted);\n      padding: 0;\n      width: 12px;\n      flex-shrink: 0;\n    }\n\n    .role { color: var(--prism-primary); font-weight: 600; }\n    .name { color: var(--prism-text); }\n    .attr { color: var(--prism-text-ghost); }\n  "] }]
+    }], null, { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], isLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLast", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yTreeNodeComponent, { className: "A11yTreeNodeComponent", filePath: "app/panels/a11y/a11y-tree.component.ts", lineNumber: 86 }); })();
 export class A11yTreeComponent {
     rendererService = inject(PrismRendererService);
     treeService = inject(A11yTreeService);
     activeComponent = input(null, ...(ngDevMode ? [{ debugName: "activeComponent" }] : []));
-    expandAll = signal(true, ...(ngDevMode ? [{ debugName: "expandAll" }] : []));
     tree = computed(() => {
         const root = this.rendererService.renderedElement();
         if (!root)
@@ -195,35 +161,24 @@ export class A11yTreeComponent {
         return this.treeService.buildTree(root, doc ? (id) => doc.getElementById(id) : undefined);
     }, ...(ngDevMode ? [{ debugName: "tree" }] : []));
     static ɵfac = function A11yTreeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11yTreeComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yTreeComponent, selectors: [["prism-a11y-tree"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 3, vars: 1, consts: [[1, "prism-a11y-tree"], [1, "prism-a11y-tree__empty"], [1, "prism-a11y-tree__header"], [1, "prism-a11y-tree__expand-btn", 3, "click"], [1, "prism-a11y-tree__content"], [3, "node", "depth"]], template: function A11yTreeComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵconditionalCreate(1, A11yTreeComponent_Conditional_1_Template, 2, 0, "div", 1)(2, A11yTreeComponent_Conditional_2_Template, 7, 2);
-            i0.ɵɵelementEnd();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yTreeComponent, selectors: [["prism-a11y-tree"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 2, vars: 1, consts: [[1, "tree-empty"], [1, "aria-tree"], [3, "node", "depth", "isLast"]], template: function A11yTreeComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, A11yTreeComponent_Conditional_0_Template, 2, 0, "div", 0)(1, A11yTreeComponent_Conditional_1_Template, 2, 3, "div", 1);
         } if (rf & 2) {
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.rendererService.renderedElement() ? 1 : 2);
-        } }, dependencies: [A11yTreeNodeComponent], styles: ["[_nghost-%COMP%] { display: flex; flex-direction: column; height: 100%; }\n\n    .prism-a11y-tree[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    .prism-a11y-tree__empty[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 100px;\n      color: var(--prism-text-muted);\n      font-size: 13px;\n    }\n\n    .prism-a11y-tree__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-tree__expand-btn[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-size: 11px;\n      color: var(--prism-primary);\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n      padding: 2px 6px;\n    }\n    .prism-a11y-tree__expand-btn[_ngcontent-%COMP%]:hover { text-decoration: underline; }\n\n    .prism-a11y-tree__content[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: auto;\n      padding: 8px 4px;\n    }"], changeDetection: 0 });
+            i0.ɵɵconditional(!ctx.rendererService.renderedElement() ? 0 : ctx.tree() ? 1 : -1);
+        } }, dependencies: [A11yTreeNodeComponent], styles: ["[_nghost-%COMP%] { display: block; height: 100%; overflow: auto; }\n\n    .aria-tree[_ngcontent-%COMP%] {\n      padding: 14px 20px;\n    }\n\n    .tree-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    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yTreeComponent, [{
         type: Component,
         args: [{ selector: 'prism-a11y-tree', standalone: true, imports: [A11yTreeNodeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="prism-a11y-tree">
-      @if (!rendererService.renderedElement()) {
-        <div class="prism-a11y-tree__empty">Select a component to inspect the accessibility tree.</div>
-      } @else {
-        <div class="prism-a11y-tree__header">
-          <span>Accessibility tree</span>
-          <button class="prism-a11y-tree__expand-btn" (click)="expandAll.update(v => !v)">
-            {{ expandAll() ? 'Collapse all' : 'Expand all' }}
-          </button>
-        </div>
-        <div class="prism-a11y-tree__content">
-          @if (tree()) {
-            <prism-a11y-tree-node [node]="tree()!" [depth]="0" />
-          }
-        </div>
-      }
+    @if (!rendererService.renderedElement()) {
+    <div class="tree-empty">
+      Select a component to inspect the accessibility tree.
+    </div>
+    } @else if (tree()) {
+    <div class="aria-tree">
+      <prism-a11y-tree-node [node]="tree()!" [depth]="0" [isLast]="true" />
     </div>
-  `, styles: ["\n    :host { display: flex; flex-direction: column; height: 100%; }\n\n    .prism-a11y-tree {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    .prism-a11y-tree__empty {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 100px;\n      color: var(--prism-text-muted);\n      font-size: 13px;\n    }\n\n    .prism-a11y-tree__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-tree__expand-btn {\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-size: 11px;\n      color: var(--prism-primary);\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n      padding: 2px 6px;\n    }\n    .prism-a11y-tree__expand-btn:hover { text-decoration: underline; }\n\n    .prism-a11y-tree__content {\n      flex: 1;\n      overflow: auto;\n      padding: 8px 4px;\n    }\n  "] }]
+    }
+  `, styles: ["\n    :host { display: block; height: 100%; overflow: auto; }\n\n    .aria-tree {\n      padding: 14px 20px;\n    }\n\n    .tree-empty {\n      display: flex; align-items: center; justify-content: center;\n      min-height: 100px; color: var(--prism-text-muted); font-size: 13px;\n    }\n  "] }]
     }], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yTreeComponent, { className: "A11yTreeComponent", filePath: "app/panels/a11y/a11y-tree.component.ts", lineNumber: 230 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yTreeComponent, { className: "A11yTreeComponent", filePath: "app/panels/a11y/a11y-tree.component.ts", lineNumber: 139 }); })();

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

@@ -1,14 +1,10 @@
-import type { Result } from 'axe-core';
 import { A11yAuditService } from './a11y-audit.service.js';
 import * as i0 from "@angular/core";
 export declare class A11yViolationsComponent {
     protected readonly auditService: A11yAuditService;
     protected readonly scoreResult: import("@angular/core").Signal<import("./a11y.types.js").A11yScoreResult | null>;
-    protected readonly violations: import("@angular/core").Signal<Result[]>;
-    protected readonly incomplete: import("@angular/core").Signal<import("axe-core").IncompleteResult[]>;
-    protected readonly passes: import("@angular/core").Signal<Result[]>;
-    protected readonly openSections: import("@angular/core").WritableSignal<Set<string>>;
-    protected toggle(section: string): void;
+    protected readonly allResults: import("@angular/core").Signal<import("axe-core").Result[]>;
+    protected sevColor(impact: string | undefined): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<A11yViolationsComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<A11yViolationsComponent, "prism-a11y-violations", never, {}, {}, never, never, true, never>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"a11y-violations.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-violations.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAgB3D,qBAwWa,uBAAuB;IAClC,SAAS,CAAC,QAAQ,CAAC,YAAY,mBAA4B;IAE3D,SAAS,CAAC,QAAQ,CAAC,WAAW,mFAAmD;IACjF,SAAS,CAAC,QAAQ,CAAC,UAAU,2CAE3B;IACF,SAAS,CAAC,QAAQ,CAAC,UAAU,wEAAiE;IAC9F,SAAS,CAAC,QAAQ,CAAC,MAAM,2CAA6D;IACtF,SAAS,CAAC,QAAQ,CAAC,YAAY,sDAAgD;IAE/E,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;yCAX5B,uBAAuB;2CAAvB,uBAAuB;CAmBnC"}
+{"version":3,"file":"a11y-violations.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-violations.component.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAqB3D,qBA0Ka,uBAAuB;IAClC,SAAS,CAAC,QAAQ,CAAC,YAAY,mBAA4B;IAE3D,SAAS,CAAC,QAAQ,CAAC,WAAW,mFAE5B;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,8DAU1B;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM;yCAnB3C,uBAAuB;2CAAvB,uBAAuB;CAsBnC"}