@ng-prism/core 21.4.5 → 21.5.1

package/dist/app/panels/a11y/a11y-overlay-host.component.js

@@ -1,18 +1,94 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { A11yKeyboardOverlayComponent } from './a11y-keyboard-overlay.component.js';
-import { A11ySrOverlayComponent } from './a11y-sr-overlay.component.js';
+import { ChangeDetectionStrategy, Component, computed, inject, } from '@angular/core';
+import { A11yKeyboardService } from './a11y-keyboard.service.js';
+import { PrismRendererService } from '../../services/prism-renderer.service.js';
 import * as i0 from "@angular/core";
+function A11yOverlayHostComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 1)(1, "span", 3);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.roleLabel());
+} }
+function A11yOverlayHostComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 2)(1, "span", 3);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.tabLabel());
+} }
 export class A11yOverlayHostComponent {
+    rendererService = inject(PrismRendererService);
+    keyboardService = inject(A11yKeyboardService);
+    roleLabel = computed(() => {
+        const el = this.rendererService.renderedElement();
+        if (!el)
+            return null;
+        const role = el.getAttribute('role') ?? implicitRole(el);
+        return role ? `role="${role}"` : null;
+    }, ...(ngDevMode ? [{ debugName: "roleLabel" }] : []));
+    tabLabel = computed(() => {
+        const el = this.rendererService.renderedElement();
+        if (!el)
+            return null;
+        const doc = el.ownerDocument;
+        const items = this.keyboardService.extractTabOrder(el, doc ? (id) => doc.getElementById(id) : undefined);
+        if (items.length === 0)
+            return null;
+        return `Tab ${items[0].index}`;
+    }, ...(ngDevMode ? [{ debugName: "tabLabel" }] : []));
     static ɵfac = function A11yOverlayHostComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11yOverlayHostComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yOverlayHostComponent, selectors: [["prism-a11y-overlay-host"]], decls: 2, vars: 0, template: function A11yOverlayHostComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelement(0, "prism-a11y-kbd-overlay")(1, "prism-a11y-sr-overlay");
-        } }, dependencies: [A11yKeyboardOverlayComponent, A11ySrOverlayComponent], styles: ["[_nghost-%COMP%] {\n      display: contents;\n    }"], changeDetection: 0 });
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yOverlayHostComponent, selectors: [["prism-a11y-overlay-host"]], decls: 3, vars: 2, consts: [[1, "a11y-mark", "outline", 2, "inset", "0"], [1, "a11y-mark", 2, "top", "-22px", "left", "-2px"], [1, "a11y-mark", "kb", 2, "bottom", "-24px", "right", "-2px"], [1, "tag"]], template: function A11yOverlayHostComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElement(0, "div", 0);
+            i0.ɵɵconditionalCreate(1, A11yOverlayHostComponent_Conditional_1_Template, 3, 1, "div", 1);
+            i0.ɵɵconditionalCreate(2, A11yOverlayHostComponent_Conditional_2_Template, 3, 1, "div", 2);
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.roleLabel() ? 1 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.tabLabel() ? 2 : -1);
+        } }, styles: ["[_nghost-%COMP%] { display: contents; }\n    .a11y-mark[_ngcontent-%COMP%] {\n      position: absolute;\n      pointer-events: none;\n      z-index: 1;\n    }\n    .outline[_ngcontent-%COMP%] {\n      border: 2px solid rgba(59, 130, 246, 0.95);\n      border-radius: 4px;\n      background: rgba(59, 130, 246, 0.08);\n    }\n    .tag[_ngcontent-%COMP%] {\n      display: inline-block;\n      padding: 2px 6px;\n      border-radius: 4px;\n      background: rgba(17, 24, 39, 0.92);\n      color: #fff;\n      font: 11px/1.4 var(--font-mono);\n      white-space: nowrap;\n      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);\n    }\n    .kb[_ngcontent-%COMP%]   .tag[_ngcontent-%COMP%] { background: rgba(5, 150, 105, 0.95); }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yOverlayHostComponent, [{
         type: Component,
-        args: [{ selector: 'prism-a11y-overlay-host', standalone: true, imports: [A11yKeyboardOverlayComponent, A11ySrOverlayComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <prism-a11y-kbd-overlay />
-    <prism-a11y-sr-overlay />
-  `, styles: ["\n    :host {\n      display: contents;\n    }\n  "] }]
+        args: [{ selector: 'prism-a11y-overlay-host', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="a11y-mark outline" style="inset: 0"></div>
+    @if (roleLabel()) {
+    <div class="a11y-mark" style="top: -22px; left: -2px">
+      <span class="tag">{{ roleLabel() }}</span>
+    </div>
+    } @if (tabLabel()) {
+    <div class="a11y-mark kb" style="bottom: -24px; right: -2px">
+      <span class="tag">{{ tabLabel() }}</span>
+    </div>
+    }
+  `, styles: ["\n    :host { display: contents; }\n    .a11y-mark {\n      position: absolute;\n      pointer-events: none;\n      z-index: 1;\n    }\n    .outline {\n      border: 2px solid rgba(59, 130, 246, 0.95);\n      border-radius: 4px;\n      background: rgba(59, 130, 246, 0.08);\n    }\n    .tag {\n      display: inline-block;\n      padding: 2px 6px;\n      border-radius: 4px;\n      background: rgba(17, 24, 39, 0.92);\n      color: #fff;\n      font: 11px/1.4 var(--font-mono);\n      white-space: nowrap;\n      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);\n    }\n    .kb .tag { background: rgba(5, 150, 105, 0.95); }\n  "] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yOverlayHostComponent, { className: "A11yOverlayHostComponent", filePath: "app/panels/a11y/a11y-overlay-host.component.ts", lineNumber: 20 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yOverlayHostComponent, { className: "A11yOverlayHostComponent", filePath: "app/panels/a11y/a11y-overlay-host.component.ts", lineNumber: 51 }); })();
+function implicitRole(el) {
+    const tag = el.tagName.toLowerCase();
+    if (tag === 'button')
+        return 'button';
+    if (tag === 'a' && el.hasAttribute('href'))
+        return 'link';
+    if (tag === 'input') {
+        const type = el.getAttribute('type') ?? 'text';
+        if (type === 'checkbox')
+            return 'checkbox';
+        if (type === 'radio')
+            return 'radio';
+        if (type === 'range')
+            return 'slider';
+        return 'textbox';
+    }
+    if (tag === 'select')
+        return 'combobox';
+    if (tag === 'textarea')
+        return 'textbox';
+    if (tag === 'img')
+        return 'img';
+    return null;
+}

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

@@ -2,12 +2,10 @@ import { A11yPanelStateService } from './a11y-panel-state.service.js';
 import * as i0 from "@angular/core";
 export declare class A11yPanelComponent {
     private readonly auditService;
-    private readonly rendererService;
     protected readonly state: A11yPanelStateService;
     readonly activeComponent: import("@angular/core").InputSignal<unknown>;
     protected readonly disabled: import("@angular/core").Signal<boolean>;
     protected readonly violationCount: import("@angular/core").Signal<number | null>;
-    protected readonly focusableCount: import("@angular/core").Signal<number | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<A11yPanelComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<A11yPanelComponent, "prism-a11y-panel", never, { "activeComponent": { "alias": "activeComponent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"a11y-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-panel.component.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;;AAItE,qBAqIa,kBAAkB;IAC7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IACzD,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,SAAS,CAAC,QAAQ,CAAC,KAAK,wBAAiC;IAEzD,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,SAAS,CAAC,QAAQ,CAAC,QAAQ,0CAIxB;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,gDAG9B;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,gDAM9B;yCAxBQ,kBAAkB;2CAAlB,kBAAkB;CAyB9B"}
+{"version":3,"file":"a11y-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-panel.component.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;;AAGtE,qBAgJa,kBAAkB;IAC7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IACzD,SAAS,CAAC,QAAQ,CAAC,KAAK,wBAAiC;IAEzD,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,SAAS,CAAC,QAAQ,CAAC,QAAQ,0CAKxB;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,gDAG9B;yCAhBQ,kBAAkB;2CAAlB,kBAAkB;CAiB9B"}

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

@@ -5,55 +5,45 @@ import { A11yKeyboardComponent } from './a11y-keyboard.component.js';
 import { A11yTreeComponent } from './a11y-tree.component.js';
 import { A11ySrComponent } from './a11y-sr.component.js';
 import { A11yPanelStateService } from './a11y-panel-state.service.js';
-import { PrismRendererService } from '../../services/prism-renderer.service.js';
 import * as i0 from "@angular/core";
 function A11yPanelComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 7);
+    i0.ɵɵelementStart(0, "span", 6);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("prism-a11y-panel__sub-badge--ok", ctx_r0.violationCount() === 0);
+    i0.ɵɵclassProp("st-badge--ok", ctx_r0.violationCount() === 0)("st-badge--warn", ctx_r0.violationCount() > 0);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.violationCount());
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.violationCount(), " ");
 } }
-function A11yPanelComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 4);
-    i0.ɵɵtext(1);
+function A11yPanelComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵtext(1, " Accessibility audit disabled for this component. ");
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.focusableCount(), " ");
 } }
-function A11yPanelComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 6);
-    i0.ɵɵtext(1, "Accessibility audit disabled for this component.");
-    i0.ɵɵelementEnd();
-} }
-function A11yPanelComponent_Conditional_14_Case_0_Template(rf, ctx) { if (rf & 1) {
+function A11yPanelComponent_Conditional_13_Case_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "prism-a11y-violations");
 } }
-function A11yPanelComponent_Conditional_14_Case_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-a11y-keyboard", 8);
+function A11yPanelComponent_Conditional_13_Case_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-a11y-keyboard", 7);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("activeComponent", ctx_r0.activeComponent());
 } }
-function A11yPanelComponent_Conditional_14_Case_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-a11y-tree", 8);
+function A11yPanelComponent_Conditional_13_Case_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-a11y-tree", 7);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("activeComponent", ctx_r0.activeComponent());
 } }
-function A11yPanelComponent_Conditional_14_Case_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-a11y-sr", 8);
+function A11yPanelComponent_Conditional_13_Case_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-a11y-sr", 7);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("activeComponent", ctx_r0.activeComponent());
 } }
-function A11yPanelComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, A11yPanelComponent_Conditional_14_Case_0_Template, 1, 0, "prism-a11y-violations")(1, A11yPanelComponent_Conditional_14_Case_1_Template, 1, 1, "prism-a11y-keyboard", 8)(2, A11yPanelComponent_Conditional_14_Case_2_Template, 1, 1, "prism-a11y-tree", 8)(3, A11yPanelComponent_Conditional_14_Case_3_Template, 1, 1, "prism-a11y-sr", 8);
+function A11yPanelComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, A11yPanelComponent_Conditional_13_Case_0_Template, 1, 0, "prism-a11y-violations")(1, A11yPanelComponent_Conditional_13_Case_1_Template, 1, 1, "prism-a11y-keyboard", 7)(2, A11yPanelComponent_Conditional_13_Case_2_Template, 1, 1, "prism-a11y-tree", 7)(3, A11yPanelComponent_Conditional_13_Case_3_Template, 1, 1, "prism-a11y-sr", 7);
 } if (rf & 2) {
     let tmp_1_0;
     const ctx_r0 = i0.ɵɵnextContext();
@@ -61,7 +51,6 @@ function A11yPanelComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
 } }
 export class A11yPanelComponent {
     auditService = inject(A11yAuditService);
-    rendererService = inject(PrismRendererService);
     state = inject(A11yPanelStateService);
     activeComponent = input(null, ...(ngDevMode ? [{ debugName: "activeComponent" }] : []));
     disabled = computed(() => {
@@ -73,111 +62,107 @@ export class A11yPanelComponent {
         const r = this.auditService.results();
         return r ? r.violations.length : null;
     }, ...(ngDevMode ? [{ debugName: "violationCount" }] : []));
-    focusableCount = computed(() => {
-        const el = this.rendererService.renderedElement();
-        if (!el)
-            return null;
-        return el.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]').length;
-    }, ...(ngDevMode ? [{ debugName: "focusableCount" }] : []));
     static ɵfac = function A11yPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11yPanelComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yPanelComponent, selectors: [["prism-a11y-panel"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 15, vars: 11, consts: [[1, "prism-a11y-panel"], [1, "prism-a11y-panel__sub-tabs"], [1, "prism-a11y-panel__sub-tab", 3, "click"], [1, "prism-a11y-panel__sub-badge", 3, "prism-a11y-panel__sub-badge--ok"], [1, "prism-a11y-panel__sub-badge", "prism-a11y-panel__sub-badge--kbd"], [1, "prism-a11y-panel__content"], [1, "prism-a11y-panel__disabled"], [1, "prism-a11y-panel__sub-badge"], [3, "activeComponent"]], template: function A11yPanelComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yPanelComponent, selectors: [["prism-a11y-panel"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 14, vars: 10, consts: [[1, "a11y-panel"], [1, "subtabs"], [1, "st-tab", 3, "click"], [1, "st-badge", 3, "st-badge--ok", "st-badge--warn"], [1, "a11y-content"], [1, "a11y-disabled"], [1, "st-badge"], [3, "activeComponent"]], template: function A11yPanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "button", 2);
             i0.ɵɵlistener("click", function A11yPanelComponent_Template_button_click_2_listener() { return ctx.state.activeTab.set("violations"); });
             i0.ɵɵtext(3, " Violations ");
-            i0.ɵɵconditionalCreate(4, A11yPanelComponent_Conditional_4_Template, 2, 3, "span", 3);
+            i0.ɵɵconditionalCreate(4, A11yPanelComponent_Conditional_4_Template, 2, 5, "span", 3);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(5, "button", 2);
             i0.ɵɵlistener("click", function A11yPanelComponent_Template_button_click_5_listener() { return ctx.state.activeTab.set("keyboard"); });
             i0.ɵɵtext(6, " Keyboard ");
-            i0.ɵɵconditionalCreate(7, A11yPanelComponent_Conditional_7_Template, 2, 1, "span", 4);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(8, "button", 2);
-            i0.ɵɵlistener("click", function A11yPanelComponent_Template_button_click_8_listener() { return ctx.state.activeTab.set("tree"); });
-            i0.ɵɵtext(9, " ARIA Tree ");
+            i0.ɵɵelementStart(7, "button", 2);
+            i0.ɵɵlistener("click", function A11yPanelComponent_Template_button_click_7_listener() { return ctx.state.activeTab.set("tree"); });
+            i0.ɵɵtext(8, " ARIA Tree ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(10, "button", 2);
-            i0.ɵɵlistener("click", function A11yPanelComponent_Template_button_click_10_listener() { return ctx.state.activeTab.set("sr"); });
-            i0.ɵɵtext(11, " Screen Reader ");
+            i0.ɵɵelementStart(9, "button", 2);
+            i0.ɵɵlistener("click", function A11yPanelComponent_Template_button_click_9_listener() { return ctx.state.activeTab.set("sr"); });
+            i0.ɵɵtext(10, " Screen Reader ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(12, "div", 5);
-            i0.ɵɵconditionalCreate(13, A11yPanelComponent_Conditional_13_Template, 2, 0, "div", 6)(14, A11yPanelComponent_Conditional_14_Template, 4, 1);
+            i0.ɵɵelementStart(11, "div", 4);
+            i0.ɵɵconditionalCreate(12, A11yPanelComponent_Conditional_12_Template, 2, 0, "div", 5)(13, A11yPanelComponent_Conditional_13_Template, 4, 1);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("prism-a11y-panel__sub-tab--active", ctx.state.activeTab() === "violations");
+            i0.ɵɵclassProp("st-tab--active", ctx.state.activeTab() === "violations");
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.violationCount() !== null ? 4 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("prism-a11y-panel__sub-tab--active", ctx.state.activeTab() === "keyboard");
+            i0.ɵɵclassProp("st-tab--active", ctx.state.activeTab() === "keyboard");
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.focusableCount() !== null ? 7 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("prism-a11y-panel__sub-tab--active", ctx.state.activeTab() === "tree");
+            i0.ɵɵclassProp("st-tab--active", ctx.state.activeTab() === "tree");
             i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("prism-a11y-panel__sub-tab--active", ctx.state.activeTab() === "sr");
+            i0.ɵɵclassProp("st-tab--active", ctx.state.activeTab() === "sr");
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.disabled() ? 13 : 14);
-        } }, dependencies: [A11yViolationsComponent, A11yKeyboardComponent, A11yTreeComponent, A11ySrComponent], styles: ["[_nghost-%COMP%] { display: flex; flex-direction: column; height: 100%; }\n\n    .prism-a11y-panel[_ngcontent-%COMP%] { display: flex; flex-direction: column; height: 100%; }\n\n    .prism-a11y-panel__sub-tabs[_ngcontent-%COMP%] {\n      display: flex;\n      border-bottom: 1px solid var(--prism-border);\n      padding: 0 8px;\n      flex-shrink: 0;\n      background: var(--prism-bg-elevated);\n    }\n\n    .prism-a11y-panel__sub-tab[_ngcontent-%COMP%] {\n      padding: 8px 12px;\n      font-size: 12px;\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n      border: none;\n      background: none;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      transition: color 0.12s;\n    }\n    .prism-a11y-panel__sub-tab[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      bottom: -1px; left: 6px; right: 6px;\n      height: 2px;\n      background: var(--prism-primary);\n      opacity: 0;\n    }\n    .prism-a11y-panel__sub-tab[_ngcontent-%COMP%]:hover { color: var(--prism-text-2); }\n    .prism-a11y-panel__sub-tab--active[_ngcontent-%COMP%] { color: var(--prism-primary); font-weight: 500; }\n    .prism-a11y-panel__sub-tab--active[_ngcontent-%COMP%]::after { opacity: 1; }\n    .prism-a11y-panel__sub-tab--soon[_ngcontent-%COMP%] { opacity: 0.45; cursor: default; }\n\n    .prism-a11y-panel__sub-badge[_ngcontent-%COMP%] {\n      padding: 0 5px;\n      border-radius: 8px;\n      font-size: 10px;\n      font-weight: 700;\n      background: color-mix(in srgb, #f87171 18%, transparent);\n      color: #f87171;\n    }\n    .prism-a11y-panel__sub-badge--ok[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, #4ade80 12%, transparent);\n      color: #4ade80;\n    }\n    .prism-a11y-panel__sub-badge--kbd[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, #818cf8 15%, transparent);\n      color: #818cf8;\n    }\n\n    .prism-a11y-panel__content[_ngcontent-%COMP%] { flex: 1; overflow: auto; min-height: 0; }\n\n    .prism-a11y-panel__soon[_ngcontent-%COMP%], \n   .prism-a11y-panel__disabled[_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    }"], changeDetection: 0 });
+            i0.ɵɵconditional(ctx.disabled() ? 12 : 13);
+        } }, dependencies: [A11yViolationsComponent,
+            A11yKeyboardComponent,
+            A11yTreeComponent,
+            A11ySrComponent], styles: ["[_nghost-%COMP%] { display: flex; flex-direction: column; height: 100%; }\n\n    .a11y-panel[_ngcontent-%COMP%] { display: flex; flex-direction: column; height: 100%; }\n\n    .subtabs[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 2px;\n      padding: 10px 20px 0;\n      border-bottom: 1px solid var(--prism-border);\n      background: var(--prism-bg-elevated);\n      position: sticky;\n      top: 0;\n      z-index: 2;\n    }\n\n    .st-tab[_ngcontent-%COMP%] {\n      padding: 7px 12px;\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--prism-text-muted);\n      border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--font-sans);\n      transition: color var(--dur-fast);\n    }\n    .st-tab[_ngcontent-%COMP%]:hover { color: var(--prism-text-2); }\n    .st-tab--active[_ngcontent-%COMP%] { color: var(--prism-text); }\n    .st-tab--active[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      left: 8px;\n      right: 8px;\n      bottom: -1px;\n      height: 2px;\n      background: var(--prism-primary);\n      border-radius: 1px;\n    }\n\n    .st-badge[_ngcontent-%COMP%] {\n      min-width: 16px;\n      height: 16px;\n      padding: 0 5px;\n      border-radius: 8px;\n      font-family: var(--font-mono);\n      font-size: 10px;\n      font-weight: 700;\n      display: grid;\n      place-items: center;\n      background: color-mix(in srgb, var(--prism-primary) 18%, transparent);\n      color: var(--prism-primary);\n    }\n    .st-badge--ok[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--prism-success) 18%, transparent);\n      color: var(--prism-success);\n    }\n    .st-badge--warn[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--prism-warn) 18%, transparent);\n      color: var(--prism-warn);\n    }\n\n    .a11y-content[_ngcontent-%COMP%] { flex: 1; overflow: auto; min-height: 0; }\n\n    .a11y-disabled[_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    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yPanelComponent, [{
         type: Component,
-        args: [{ selector: 'prism-a11y-panel', standalone: true, imports: [A11yViolationsComponent, A11yKeyboardComponent, A11yTreeComponent, A11ySrComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="prism-a11y-panel">
-      <div class="prism-a11y-panel__sub-tabs">
+        args: [{ selector: 'prism-a11y-panel', standalone: true, imports: [
+                    A11yViolationsComponent,
+                    A11yKeyboardComponent,
+                    A11yTreeComponent,
+                    A11ySrComponent,
+                ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="a11y-panel">
+      <div class="subtabs">
         <button
-          class="prism-a11y-panel__sub-tab"
-          [class.prism-a11y-panel__sub-tab--active]="state.activeTab() === 'violations'"
+          class="st-tab"
+          [class.st-tab--active]="state.activeTab() === 'violations'"
           (click)="state.activeTab.set('violations')"
         >
-          Violations
-          @if (violationCount() !== null) {
-            <span
-              class="prism-a11y-panel__sub-badge"
-              [class.prism-a11y-panel__sub-badge--ok]="violationCount() === 0"
-            >{{ violationCount() }}</span>
+          Violations @if (violationCount() !== null) {
+          <span
+            class="st-badge"
+            [class.st-badge--ok]="violationCount() === 0"
+            [class.st-badge--warn]="violationCount()! > 0"
+          >
+            {{ violationCount() }}
+          </span>
           }
         </button>
         <button
-          class="prism-a11y-panel__sub-tab"
-          [class.prism-a11y-panel__sub-tab--active]="state.activeTab() === 'keyboard'"
+          class="st-tab"
+          [class.st-tab--active]="state.activeTab() === 'keyboard'"
           (click)="state.activeTab.set('keyboard')"
         >
           Keyboard
-          @if (focusableCount() !== null) {
-            <span class="prism-a11y-panel__sub-badge prism-a11y-panel__sub-badge--kbd">
-              {{ focusableCount() }}
-            </span>
-          }
         </button>
         <button
-          class="prism-a11y-panel__sub-tab"
-          [class.prism-a11y-panel__sub-tab--active]="state.activeTab() === 'tree'"
+          class="st-tab"
+          [class.st-tab--active]="state.activeTab() === 'tree'"
           (click)="state.activeTab.set('tree')"
         >
           ARIA Tree
         </button>
         <button
-          class="prism-a11y-panel__sub-tab"
-          [class.prism-a11y-panel__sub-tab--active]="state.activeTab() === 'sr'"
+          class="st-tab"
+          [class.st-tab--active]="state.activeTab() === 'sr'"
           (click)="state.activeTab.set('sr')"
         >
           Screen Reader
         </button>
       </div>
 
-      <div class="prism-a11y-panel__content">
+      <div class="a11y-content">
         @if (disabled()) {
-          <div class="prism-a11y-panel__disabled">Accessibility audit disabled for this component.</div>
-        } @else {
-          @switch (state.activeTab()) {
-            @case ('violations') { <prism-a11y-violations /> }
-            @case ('keyboard')   { <prism-a11y-keyboard [activeComponent]="activeComponent()" /> }
-            @case ('tree')       { <prism-a11y-tree [activeComponent]="activeComponent()" /> }
-            @case ('sr')         { <prism-a11y-sr [activeComponent]="activeComponent()" /> }
-          }
-        }
+        <div class="a11y-disabled">
+          Accessibility audit disabled for this component.
+        </div>
+        } @else { @switch (state.activeTab()) { @case ('violations') {
+        <prism-a11y-violations /> } @case ('keyboard') {
+        <prism-a11y-keyboard [activeComponent]="activeComponent()" /> } @case
+        ('tree') { <prism-a11y-tree [activeComponent]="activeComponent()" /> }
+        @case ('sr') { <prism-a11y-sr [activeComponent]="activeComponent()" /> }
+        } }
       </div>
     </div>
-  `, styles: ["\n    :host { display: flex; flex-direction: column; height: 100%; }\n\n    .prism-a11y-panel { display: flex; flex-direction: column; height: 100%; }\n\n    .prism-a11y-panel__sub-tabs {\n      display: flex;\n      border-bottom: 1px solid var(--prism-border);\n      padding: 0 8px;\n      flex-shrink: 0;\n      background: var(--prism-bg-elevated);\n    }\n\n    .prism-a11y-panel__sub-tab {\n      padding: 8px 12px;\n      font-size: 12px;\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n      border: none;\n      background: none;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      transition: color 0.12s;\n    }\n    .prism-a11y-panel__sub-tab::after {\n      content: '';\n      position: absolute;\n      bottom: -1px; left: 6px; right: 6px;\n      height: 2px;\n      background: var(--prism-primary);\n      opacity: 0;\n    }\n    .prism-a11y-panel__sub-tab:hover { color: var(--prism-text-2); }\n    .prism-a11y-panel__sub-tab--active { color: var(--prism-primary); font-weight: 500; }\n    .prism-a11y-panel__sub-tab--active::after { opacity: 1; }\n    .prism-a11y-panel__sub-tab--soon { opacity: 0.45; cursor: default; }\n\n    .prism-a11y-panel__sub-badge {\n      padding: 0 5px;\n      border-radius: 8px;\n      font-size: 10px;\n      font-weight: 700;\n      background: color-mix(in srgb, #f87171 18%, transparent);\n      color: #f87171;\n    }\n    .prism-a11y-panel__sub-badge--ok {\n      background: color-mix(in srgb, #4ade80 12%, transparent);\n      color: #4ade80;\n    }\n    .prism-a11y-panel__sub-badge--kbd {\n      background: color-mix(in srgb, #818cf8 15%, transparent);\n      color: #818cf8;\n    }\n\n    .prism-a11y-panel__content { flex: 1; overflow: auto; min-height: 0; }\n\n    .prism-a11y-panel__soon,\n    .prism-a11y-panel__disabled {\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  "] }]
+  `, styles: ["\n    :host { display: flex; flex-direction: column; height: 100%; }\n\n    .a11y-panel { display: flex; flex-direction: column; height: 100%; }\n\n    .subtabs {\n      display: flex;\n      gap: 2px;\n      padding: 10px 20px 0;\n      border-bottom: 1px solid var(--prism-border);\n      background: var(--prism-bg-elevated);\n      position: sticky;\n      top: 0;\n      z-index: 2;\n    }\n\n    .st-tab {\n      padding: 7px 12px;\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--prism-text-muted);\n      border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--font-sans);\n      transition: color var(--dur-fast);\n    }\n    .st-tab:hover { color: var(--prism-text-2); }\n    .st-tab--active { color: var(--prism-text); }\n    .st-tab--active::after {\n      content: '';\n      position: absolute;\n      left: 8px;\n      right: 8px;\n      bottom: -1px;\n      height: 2px;\n      background: var(--prism-primary);\n      border-radius: 1px;\n    }\n\n    .st-badge {\n      min-width: 16px;\n      height: 16px;\n      padding: 0 5px;\n      border-radius: 8px;\n      font-family: var(--font-mono);\n      font-size: 10px;\n      font-weight: 700;\n      display: grid;\n      place-items: center;\n      background: color-mix(in srgb, var(--prism-primary) 18%, transparent);\n      color: var(--prism-primary);\n    }\n    .st-badge--ok {\n      background: color-mix(in srgb, var(--prism-success) 18%, transparent);\n      color: var(--prism-success);\n    }\n    .st-badge--warn {\n      background: color-mix(in srgb, var(--prism-warn) 18%, transparent);\n      color: var(--prism-warn);\n    }\n\n    .a11y-content { flex: 1; overflow: auto; min-height: 0; }\n\n    .a11y-disabled {\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  "] }]
     }], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yPanelComponent, { className: "A11yPanelComponent", filePath: "app/panels/a11y/a11y-panel.component.ts", lineNumber: 150 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yPanelComponent, { className: "A11yPanelComponent", filePath: "app/panels/a11y/a11y-panel.component.ts", lineNumber: 160 }); })();

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

@@ -2,9 +2,10 @@ import * as i0 from "@angular/core";
 export declare class A11yScoreComponent {
     readonly score: import("@angular/core").InputSignal<number>;
     readonly compact: import("@angular/core").InputSignal<boolean>;
+    protected readonly gradientId: string;
+    protected readonly R = 54;
     protected readonly CIRC: number;
     protected readonly dashOffset: import("@angular/core").Signal<number>;
-    protected readonly level: import("@angular/core").Signal<"good" | "warn" | "bad">;
     static ɵfac: i0.ɵɵFactoryDeclaration<A11yScoreComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<A11yScoreComponent, "prism-a11y-score", never, { "score": { "alias": "score"; "required": true; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"a11y-score.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-score.component.ts"],"names":[],"mappings":";AAIA,qBAwDa,kBAAkB;IAC7B,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,QAAQ,CAAC,OAAO,+CAAgB;IAEhC,SAAS,CAAC,QAAQ,CAAC,IAAI,SAAiB;IAExC,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAE3B;IAEF,SAAS,CAAC,QAAQ,CAAC,KAAK,0DAKrB;yCAfQ,kBAAkB;2CAAlB,kBAAkB;CAgB9B"}
+{"version":3,"file":"a11y-score.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-score.component.ts"],"names":[],"mappings":";AAWA,qBAwFa,kBAAkB;IAC7B,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,QAAQ,CAAC,OAAO,+CAAgB;IAEhC,SAAS,CAAC,QAAQ,CAAC,UAAU,SAA0B;IACvD,SAAS,CAAC,QAAQ,CAAC,CAAC,MAAK;IACzB,SAAS,CAAC,QAAQ,CAAC,IAAI,SAAiB;IAExC,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAE3B;yCAVS,kBAAkB;2CAAlB,kBAAkB;CAW9B"}

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

@@ -1,72 +1,78 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input, } from '@angular/core';
 import * as i0 from "@angular/core";
-function A11yScoreComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵdomElementStart(0, "text", 3);
-    i0.ɵɵtext(1);
+function A11yScoreComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 7)(1, "div", 8);
+    i0.ɵɵtext(2);
     i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "div", 9);
+    i0.ɵɵtext(4, "/ 100");
+    i0.ɵɵdomElementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
+    i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r0.score());
 } }
-const CIRCUMFERENCE = 2 * Math.PI * 14;
+const R = 54;
+const CIRCUMFERENCE = 2 * Math.PI * R;
+let nextId = 0;
 export class A11yScoreComponent {
     score = input.required(...(ngDevMode ? [{ debugName: "score" }] : []));
     compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : []));
+    gradientId = `prism-sg-${nextId++}`;
+    R = R;
     CIRC = CIRCUMFERENCE;
     dashOffset = computed(() => CIRCUMFERENCE - (this.score() / 100) * CIRCUMFERENCE, ...(ngDevMode ? [{ debugName: "dashOffset" }] : []));
-    level = computed(() => {
-        const s = this.score();
-        if (s >= 80)
-            return 'good';
-        if (s >= 50)
-            return 'warn';
-        return 'bad';
-    }, ...(ngDevMode ? [{ debugName: "level" }] : []));
     static ɵfac = function A11yScoreComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11yScoreComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yScoreComponent, selectors: [["prism-a11y-score"]], inputs: { score: [1, "score"], compact: [1, "compact"] }, decls: 4, vars: 5, consts: [["viewBox", "0 0 36 36", "role", "img", 1, "prism-score-ring"], ["cx", "18", "cy", "18", "r", "14", "fill", "none", "stroke-width", "3.5", 1, "prism-score-ring__track"], ["cx", "18", "cy", "18", "r", "14", "fill", "none", "stroke-width", "3.5", "stroke-linecap", "round", "transform", "rotate(-90 18 18)", 1, "prism-score-ring__arc"], ["x", "18", "y", "23", "text-anchor", "middle", 1, "prism-score-ring__label"]], template: function A11yScoreComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yScoreComponent, selectors: [["prism-a11y-score"]], inputs: { score: [1, "score"], compact: [1, "compact"] }, decls: 9, vars: 7, consts: [[1, "score-ring"], ["viewBox", "0 0 128 128"], ["x1", "0", "y1", "0", "x2", "1", "y2", "1", 3, "id"], ["offset", "0%", "stop-color", "#a78bfa"], ["offset", "100%", "stop-color", "#3b82f6"], ["cx", "64", "cy", "64", 1, "track"], ["cx", "64", "cy", "64", 1, "fill"], [1, "score-val"], [1, "score-num"], [1, "score-max"]], template: function A11yScoreComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0);
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵdomElementStart(0, "svg", 0);
-            i0.ɵɵdomElement(1, "circle", 1)(2, "circle", 2);
-            i0.ɵɵconditionalCreate(3, A11yScoreComponent_Conditional_3_Template, 2, 1, ":svg:text", 3);
+            i0.ɵɵdomElementStart(1, "svg", 1)(2, "defs")(3, "linearGradient", 2);
+            i0.ɵɵdomElement(4, "stop", 3)(5, "stop", 4);
+            i0.ɵɵdomElementEnd()();
+            i0.ɵɵdomElement(6, "circle", 5)(7, "circle", 6);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵconditionalCreate(8, A11yScoreComponent_Conditional_8_Template, 5, 1, "div", 7);
             i0.ɵɵdomElementEnd();
         } if (rf & 2) {
-            i0.ɵɵattribute("data-level", ctx.level())("aria-label", "Accessibility score: " + ctx.score() + " out of 100");
-            i0.ɵɵadvance(2);
-            i0.ɵɵattribute("stroke-dasharray", ctx.CIRC + " " + ctx.CIRC)("stroke-dashoffset", ctx.dashOffset());
+            i0.ɵɵadvance(3);
+            i0.ɵɵdomProperty("id", ctx.gradientId);
+            i0.ɵɵadvance(3);
+            i0.ɵɵattribute("r", ctx.R);
+            i0.ɵɵadvance();
+            i0.ɵɵattribute("r", ctx.R)("stroke-dasharray", ctx.CIRC)("stroke-dashoffset", ctx.dashOffset())("stroke", "url(#" + ctx.gradientId + ")");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.compact() ? 3 : -1);
-        } }, styles: ["[_nghost-%COMP%] { display: inline-flex; }\n\n    .prism-score-ring[_ngcontent-%COMP%] { overflow: visible; }\n\n    .prism-score-ring__track[_ngcontent-%COMP%] {\n      stroke: rgba(255, 255, 255, 0.08);\n    }\n\n    .prism-score-ring__arc[_ngcontent-%COMP%] {\n      transition: stroke-dashoffset 0.4s ease, stroke 0.3s ease;\n    }\n\n    [data-level=\"good\"][_ngcontent-%COMP%]   .prism-score-ring__arc[_ngcontent-%COMP%] { stroke: #4ade80; }\n    [data-level=\"warn\"][_ngcontent-%COMP%]   .prism-score-ring__arc[_ngcontent-%COMP%] { stroke: #fbbf24; }\n    [data-level=\"bad\"][_ngcontent-%COMP%]   .prism-score-ring__arc[_ngcontent-%COMP%] { stroke: #f87171; }\n\n    .prism-score-ring__label[_ngcontent-%COMP%] {\n      fill: var(--prism-text, #e2e4e9);\n      font-size: 9px;\n      font-weight: 700;\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n    }"], changeDetection: 0 });
+            i0.ɵɵconditional(!ctx.compact() ? 8 : -1);
+        } }, styles: ["[_nghost-%COMP%] { display: inline-flex; }\n\n    .score-ring[_ngcontent-%COMP%] {\n      position: relative;\n      width: 128px;\n      height: 128px;\n    }\n    .compact[_nghost-%COMP%]   .score-ring[_ngcontent-%COMP%], .compact   [_nghost-%COMP%]   .score-ring[_ngcontent-%COMP%], \n   [style*=\"width:18px\"][_nghost-%COMP%]   .score-ring[_ngcontent-%COMP%] {\n      width: 100%;\n      height: 100%;\n    }\n\n    .score-ring[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {\n      transform: rotate(-90deg);\n      width: 100%;\n      height: 100%;\n    }\n\n    .score-ring[_ngcontent-%COMP%]   circle[_ngcontent-%COMP%] {\n      fill: none;\n      stroke-width: 10;\n    }\n    .track[_ngcontent-%COMP%] { stroke: var(--prism-input-bg); }\n    .fill[_ngcontent-%COMP%] {\n      stroke-linecap: round;\n      transition: stroke-dashoffset 0.5s ease;\n    }\n\n    .score-val[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 0;\n    }\n    .score-num[_ngcontent-%COMP%] {\n      font-size: 30px;\n      font-weight: 700;\n      letter-spacing: -0.02em;\n      background: linear-gradient(135deg, #a78bfa, #ec4899);\n      -webkit-background-clip: text;\n      background-clip: text;\n      color: transparent;\n      font-family: var(--font-mono);\n    }\n    .score-max[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--prism-text-ghost);\n      font-weight: 500;\n    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yScoreComponent, [{
         type: Component,
         args: [{ selector: 'prism-a11y-score', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <svg
-      class="prism-score-ring"
-      viewBox="0 0 36 36"
-      [attr.data-level]="level()"
-      [attr.aria-label]="'Accessibility score: ' + score() + ' out of 100'"
-      role="img"
-    >
-      <circle
-        class="prism-score-ring__track"
-        cx="18" cy="18" r="14"
-        fill="none" stroke-width="3.5"
-      />
-      <circle
-        class="prism-score-ring__arc"
-        cx="18" cy="18" r="14"
-        fill="none" stroke-width="3.5"
-        stroke-linecap="round"
-        transform="rotate(-90 18 18)"
-        [attr.stroke-dasharray]="CIRC + ' ' + CIRC"
-        [attr.stroke-dashoffset]="dashOffset()"
-      />
+    <div class="score-ring">
+      <svg viewBox="0 0 128 128">
+        <defs>
+          <linearGradient [id]="gradientId" x1="0" y1="0" x2="1" y2="1">
+            <stop offset="0%" stop-color="#a78bfa" />
+            <stop offset="100%" stop-color="#3b82f6" />
+          </linearGradient>
+        </defs>
+        <circle class="track" cx="64" cy="64" [attr.r]="R" />
+        <circle
+          class="fill"
+          cx="64"
+          cy="64"
+          [attr.r]="R"
+          [attr.stroke-dasharray]="CIRC"
+          [attr.stroke-dashoffset]="dashOffset()"
+          [attr.stroke]="'url(#' + gradientId + ')'"
+        />
+      </svg>
       @if (!compact()) {
-        <text x="18" y="23" class="prism-score-ring__label" text-anchor="middle">{{ score() }}</text>
+      <div class="score-val">
+        <div class="score-num">{{ score() }}</div>
+        <div class="score-max">/ 100</div>
+      </div>
       }
-    </svg>
-  `, styles: ["\n    :host { display: inline-flex; }\n\n    .prism-score-ring { overflow: visible; }\n\n    .prism-score-ring__track {\n      stroke: rgba(255, 255, 255, 0.08);\n    }\n\n    .prism-score-ring__arc {\n      transition: stroke-dashoffset 0.4s ease, stroke 0.3s ease;\n    }\n\n    [data-level=\"good\"]  .prism-score-ring__arc { stroke: #4ade80; }\n    [data-level=\"warn\"]  .prism-score-ring__arc { stroke: #fbbf24; }\n    [data-level=\"bad\"]   .prism-score-ring__arc { stroke: #f87171; }\n\n    .prism-score-ring__label {\n      fill: var(--prism-text, #e2e4e9);\n      font-size: 9px;\n      font-weight: 700;\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n    }\n  "] }]
+    </div>
+  `, styles: ["\n    :host { display: inline-flex; }\n\n    .score-ring {\n      position: relative;\n      width: 128px;\n      height: 128px;\n    }\n    :host-context(.compact) .score-ring,\n    :host([style*=\"width:18px\"]) .score-ring {\n      width: 100%;\n      height: 100%;\n    }\n\n    .score-ring svg {\n      transform: rotate(-90deg);\n      width: 100%;\n      height: 100%;\n    }\n\n    .score-ring circle {\n      fill: none;\n      stroke-width: 10;\n    }\n    .track { stroke: var(--prism-input-bg); }\n    .fill {\n      stroke-linecap: round;\n      transition: stroke-dashoffset 0.5s ease;\n    }\n\n    .score-val {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 0;\n    }\n    .score-num {\n      font-size: 30px;\n      font-weight: 700;\n      letter-spacing: -0.02em;\n      background: linear-gradient(135deg, #a78bfa, #ec4899);\n      -webkit-background-clip: text;\n      background-clip: text;\n      color: transparent;\n      font-family: var(--font-mono);\n    }\n    .score-max {\n      font-size: 11px;\n      color: var(--prism-text-ghost);\n      font-weight: 500;\n    }\n  "] }]
     }], null, { score: [{ type: i0.Input, args: [{ isSignal: true, alias: "score", required: true }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yScoreComponent, { className: "A11yScoreComponent", filePath: "app/panels/a11y/a11y-score.component.ts", lineNumber: 61 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yScoreComponent, { className: "A11yScoreComponent", filePath: "app/panels/a11y/a11y-score.component.ts", lineNumber: 100 }); })();

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

@@ -1,18 +1,10 @@
-import { A11yPerspectiveService } from './a11y-perspective.service.js';
 import { PrismRendererService } from '../../services/prism-renderer.service.js';
-import type { SrAnnouncement } from './a11y.types.js';
 import * as i0 from "@angular/core";
 export declare class A11ySrComponent {
     protected readonly rendererService: PrismRendererService;
     private readonly srService;
-    protected readonly perspective: A11yPerspectiveService;
     readonly activeComponent: import("@angular/core").InputSignal<unknown>;
-    protected readonly activeIndex: import("@angular/core").WritableSignal<number>;
-    protected readonly announcements: import("@angular/core").Signal<SrAnnouncement[]>;
-    protected readonly active: import("@angular/core").Signal<SrAnnouncement | null>;
-    protected readonly activeStates: import("@angular/core").Signal<string[]>;
-    protected next(): void;
-    protected prev(): void;
+    protected readonly announcements: import("@angular/core").Signal<import("./a11y.types.js").SrAnnouncement[]>;
     static ɵfac: i0.ɵɵFactoryDeclaration<A11ySrComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<A11ySrComponent, "prism-a11y-sr", never, { "activeComponent": { "alias": "activeComponent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"a11y-sr.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-sr.component.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAChF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;;AAEtD,qBAkRa,eAAe;IAC1B,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IACnD,SAAS,CAAC,QAAQ,CAAC,WAAW,yBAAkC;IAEhE,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,SAAS,CAAC,QAAQ,CAAC,WAAW,iDAAa;IAE3C,SAAS,CAAC,QAAQ,CAAC,aAAa,mDAQ7B;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,wDAItB;IAEH,SAAS,CAAC,QAAQ,CAAC,YAAY,2CAE7B;IAEF,SAAS,CAAC,IAAI,IAAI,IAAI;IAItB,SAAS,CAAC,IAAI,IAAI,IAAI;yCAjCX,eAAe;2CAAf,eAAe;CAoC3B"}
+{"version":3,"file":"a11y-sr.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-sr.component.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAEhF,qBAkFa,eAAe;IAC1B,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IAEnD,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,SAAS,CAAC,QAAQ,CAAC,aAAa,6EAQ7B;yCAdQ,eAAe;2CAAf,eAAe;CAe3B"}