@cognivo/components 0.8.0

package/dist/components/ai-ab-test/ai-ab-test.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+export declare class AiAbTest extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    variantA: string;
+    variantB: string;
+    labelA: string;
+    labelB: string;
+    title: string;
+    private _winner;
+    private _swapped;
+    private _vote;
+    private _swap;
+    private _compare;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-ab-test': AiAbTest;
+    }
+}
+//# sourceMappingURL=ai-ab-test.d.ts.map

package/dist/components/ai-ab-test/ai-ab-test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-ab-test.d.ts","sourceRoot":"","sources":["../../../src/components/ai-ab-test/ai-ab-test.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BAmEnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC7C,QAAQ,SAAM;IACd,QAAQ,SAAM;IACd,MAAM,SAAO;IACb,MAAM,SAAO;IACJ,KAAK,SAAoB;IAErD,OAAO,CAAC,OAAO,CAAkC;IACjD,OAAO,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,QAAQ;IAMP,MAAM;CAoDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,QAAQ,CAAC;KACxB;CACF"}

package/dist/components/ai-ab-test/ai-ab-test.js

@@ -0,0 +1,173 @@
+import { css as g, LitElement as p, html as v } from "lit";
+import { property as c, state as l, customElement as b } from "lit/decorators.js";
+import { h as u, r as h } from "../../chunks/premium.css-9I4kHrsl.js";
+var w = Object.defineProperty, m = Object.getOwnPropertyDescriptor, a = (e, s, n, i) => {
+  for (var t = i > 1 ? void 0 : i ? m(s, n) : s, o = e.length - 1, d; o >= 0; o--)
+    (d = e[o]) && (t = (i ? d(s, n, t) : d(t)) || t);
+  return i && t && w(s, n, t), t;
+};
+let r = class extends p {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.variantA = "", this.variantB = "", this.labelA = "A", this.labelB = "B", this.title = "A/B Comparison", this._winner = null, this._swapped = !1;
+  }
+  _vote(e) {
+    this._winner = e, this.dispatchEvent(new CustomEvent("ai-ab-vote", {
+      detail: { winner: e },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _swap() {
+    this._swapped = !this._swapped, this._winner = null;
+  }
+  _compare() {
+    this.dispatchEvent(new CustomEvent("ai-ab-compare", {
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    const e = this._swapped ? this.variantB : this.variantA, s = this._swapped ? this.variantA : this.variantB, n = this._swapped ? this.labelB : this.labelA, i = this._swapped ? this.labelA : this.labelB, t = !this._swapped && this._winner === "a" || this._swapped && this._winner === "b", o = !this._swapped && this._winner === "b" || this._swapped && this._winner === "a";
+    return v`
+      <div class="container" role="group" aria-label="${this.title}">
+        <div class="header">
+          <span class="title">${this.title}</span>
+          <cg-button variant="tertiary" size="sm" @click=${this._swap} label="Swap variants">
+            <cg-icon slot="prefix" name="refresh" size="xs"></cg-icon> Swap
+          </cg-button>
+        </div>
+
+        <div class="variants">
+          <div class="variant ${t ? "winner" : ""}" role="region" aria-label="Variant ${n}">
+            <cg-badge variant=${t ? "accent" : "neutral"} label=${n} size="sm" rounded="full"></cg-badge>
+            <div class="variant-content">${e}</div>
+          </div>
+          <div class="variant ${o ? "winner" : ""}" role="region" aria-label="Variant ${i}">
+            <cg-badge variant=${o ? "accent" : "neutral"} label=${i} size="sm" rounded="full"></cg-badge>
+            <div class="variant-content">${s}</div>
+          </div>
+        </div>
+
+        <div class="actions" role="group" aria-label="Vote for best variant">
+          <cg-button
+            variant=${this._winner === "a" ? "primary" : "secondary"}
+            size="sm"
+            @click=${() => this._vote("a")}
+            aria-pressed=${this._winner === "a" ? "true" : "false"}
+          >${this.labelA} Wins</cg-button>
+          <cg-button
+            variant=${this._winner === "tie" ? "primary" : "secondary"}
+            size="sm"
+            @click=${() => this._vote("tie")}
+            aria-pressed=${this._winner === "tie" ? "true" : "false"}
+          >Tie</cg-button>
+          <cg-button
+            variant=${this._winner === "b" ? "primary" : "secondary"}
+            size="sm"
+            @click=${() => this._vote("b")}
+            aria-pressed=${this._winner === "b" ? "true" : "false"}
+          >${this.labelB} Wins</cg-button>
+        </div>
+      </div>
+    `;
+  }
+};
+r.styles = [u, h, g`
+    .container {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-200);
+      padding: var(--cg-spacing-20);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: var(--cg-spacing-16);
+      padding-bottom: var(--cg-spacing-12);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+    }
+    .title {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-bold);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    .variants {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: var(--cg-spacing-12);
+      margin-bottom: var(--cg-spacing-16);
+    }
+
+    .variant {
+      background: var(--cg-color-surface-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-100);
+      padding: var(--cg-spacing-16);
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      min-height: var(--cg-spacing-80);
+    }
+    .variant.winner {
+      border-color: var(--cg-color-action-primary-background-default);
+      background: var(--cg-overlay-accent-subtle);
+    }
+
+    .variant cg-badge { margin-bottom: var(--cg-spacing-8); }
+
+    .variant-content {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-base-text);
+      line-height: var(--cg-line-height-relaxed);
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    .actions {
+      display: flex;
+      gap: var(--cg-spacing-8);
+      justify-content: center;
+      align-items: center;
+      padding-top: var(--cg-spacing-12);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+    }
+
+    /* ── Rounded variants ── */
+    :host([rounded="none"]) .container { border-radius: 0; }
+    :host([rounded="sm"]) .container { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .container { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .container { border-radius: var(--cg-border-radius-200); }
+  `];
+a([
+  c({ reflect: !0 })
+], r.prototype, "rounded", 2);
+a([
+  c({ type: String })
+], r.prototype, "variantA", 2);
+a([
+  c({ type: String })
+], r.prototype, "variantB", 2);
+a([
+  c({ type: String })
+], r.prototype, "labelA", 2);
+a([
+  c({ type: String })
+], r.prototype, "labelB", 2);
+a([
+  c({ type: String })
+], r.prototype, "title", 2);
+a([
+  l()
+], r.prototype, "_winner", 2);
+a([
+  l()
+], r.prototype, "_swapped", 2);
+r = a([
+  b("ai-ab-test")
+], r);
+export {
+  r as AiAbTest
+};
+//# sourceMappingURL=ai-ab-test.js.map

package/dist/components/ai-ab-test/ai-ab-test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-ab-test.js","sources":["../../../src/components/ai-ab-test/ai-ab-test.ts"],"sourcesContent":["/**\n * @element ai-ab-test\n * Side-by-side A/B comparison card with cg-button vote controls and swap.\n *\n * @example\n * ```html\n * <ai-ab-test\n *   variantA=\"Response using GPT-4\"\n *   variantB=\"Response using Claude\"\n *   labelA=\"GPT-4\" labelB=\"Claude\"\n *   title=\"Model Comparison\"\n * ></ai-ab-test>\n * ```\n *\n * @fires {CustomEvent<{winner: 'a'|'b'|'tie'}>} ai-ab-vote - User voted\n * @fires {CustomEvent} ai-ab-compare - Compare clicked\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n@customElement('ai-ab-test')\nexport class AiAbTest extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .container {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-200);\n      padding: var(--cg-spacing-20);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: var(--cg-spacing-16);\n      padding-bottom: var(--cg-spacing-12);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    .title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .variants {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: var(--cg-spacing-12);\n      margin-bottom: var(--cg-spacing-16);\n    }\n\n    .variant {\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-100);\n      padding: var(--cg-spacing-16);\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      min-height: var(--cg-spacing-80);\n    }\n    .variant.winner {\n      border-color: var(--cg-color-action-primary-background-default);\n      background: var(--cg-overlay-accent-subtle);\n    }\n\n    .variant cg-badge { margin-bottom: var(--cg-spacing-8); }\n\n    .variant-content {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-relaxed);\n      white-space: pre-wrap;\n      word-break: break-word;\n    }\n\n    .actions {\n      display: flex;\n      gap: var(--cg-spacing-8);\n      justify-content: center;\n      align-items: center;\n      padding-top: var(--cg-spacing-12);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) .container { border-radius: 0; }\n    :host([rounded=\"sm\"]) .container { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .container { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .container { border-radius: var(--cg-border-radius-200); }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property({ type: String }) variantA = '';\n  @property({ type: String }) variantB = '';\n  @property({ type: String }) labelA = 'A';\n  @property({ type: String }) labelB = 'B';\n  @property({ type: String }) override title = 'A/B Comparison';\n\n  @state() private _winner: 'a' | 'b' | 'tie' | null = null;\n  @state() private _swapped = false;\n\n  private _vote(winner: 'a' | 'b' | 'tie') {\n    this._winner = winner;\n    this.dispatchEvent(new CustomEvent('ai-ab-vote', {\n      detail: { winner },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  private _swap() {\n    this._swapped = !this._swapped;\n    this._winner = null;\n  }\n\n  private _compare() {\n    this.dispatchEvent(new CustomEvent('ai-ab-compare', {\n      bubbles: true, composed: true,\n    }));\n  }\n\n  override render() {\n    const leftContent = this._swapped ? this.variantB : this.variantA;\n    const rightContent = this._swapped ? this.variantA : this.variantB;\n    const leftLabel = this._swapped ? this.labelB : this.labelA;\n    const rightLabel = this._swapped ? this.labelA : this.labelB;\n\n    const leftWin = (!this._swapped && this._winner === 'a') || (this._swapped && this._winner === 'b');\n    const rightWin = (!this._swapped && this._winner === 'b') || (this._swapped && this._winner === 'a');\n\n    return html`\n      <div class=\"container\" role=\"group\" aria-label=\"${this.title}\">\n        <div class=\"header\">\n          <span class=\"title\">${this.title}</span>\n          <cg-button variant=\"tertiary\" size=\"sm\" @click=${this._swap} label=\"Swap variants\">\n            <cg-icon slot=\"prefix\" name=\"refresh\" size=\"xs\"></cg-icon> Swap\n          </cg-button>\n        </div>\n\n        <div class=\"variants\">\n          <div class=\"variant ${leftWin ? 'winner' : ''}\" role=\"region\" aria-label=\"Variant ${leftLabel}\">\n            <cg-badge variant=${leftWin ? 'accent' : 'neutral'} label=${leftLabel} size=\"sm\" rounded=\"full\"></cg-badge>\n            <div class=\"variant-content\">${leftContent}</div>\n          </div>\n          <div class=\"variant ${rightWin ? 'winner' : ''}\" role=\"region\" aria-label=\"Variant ${rightLabel}\">\n            <cg-badge variant=${rightWin ? 'accent' : 'neutral'} label=${rightLabel} size=\"sm\" rounded=\"full\"></cg-badge>\n            <div class=\"variant-content\">${rightContent}</div>\n          </div>\n        </div>\n\n        <div class=\"actions\" role=\"group\" aria-label=\"Vote for best variant\">\n          <cg-button\n            variant=${this._winner === 'a' ? 'primary' : 'secondary'}\n            size=\"sm\"\n            @click=${() => this._vote('a')}\n            aria-pressed=${this._winner === 'a' ? 'true' : 'false'}\n          >${this.labelA} Wins</cg-button>\n          <cg-button\n            variant=${this._winner === 'tie' ? 'primary' : 'secondary'}\n            size=\"sm\"\n            @click=${() => this._vote('tie')}\n            aria-pressed=${this._winner === 'tie' ? 'true' : 'false'}\n          >Tie</cg-button>\n          <cg-button\n            variant=${this._winner === 'b' ? 'primary' : 'secondary'}\n            size=\"sm\"\n            @click=${() => this._vote('b')}\n            aria-pressed=${this._winner === 'b' ? 'true' : 'false'}\n          >${this.labelB} Wins</cg-button>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-ab-test': AiAbTest;\n  }\n}\n"],"names":["AiAbTest","LitElement","winner","leftContent","rightContent","leftLabel","rightLabel","leftWin","rightWin","html","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-accessibility-report/ai-accessibility-report.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+export interface A11yIssue {
+    rule: string;
+    level: 'A' | 'AA' | 'AAA';
+    severity: 'error' | 'warning' | 'info';
+    element?: string;
+    description: string;
+    /** Optional fix suggestion (axe DevTools / Lighthouse pattern) */
+    fix?: string;
+}
+export declare class AiAccessibilityReport extends LitElement {
+    static styles: import('lit').CSSResult[];
+    issues: A11yIssue[];
+    score: number;
+    title: string;
+    /** Total checks run (for "X of Y passed" display). Defaults to issues.length when 0. */
+    totalChecks: number;
+    private _expanded;
+    private get _errorCount();
+    private get _warningCount();
+    private get _infoCount();
+    private _getScoreColor;
+    private _toggle;
+    private _onClick;
+    private _sevIcon;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-accessibility-report': AiAccessibilityReport;
+    }
+}
+//# sourceMappingURL=ai-accessibility-report.d.ts.map

package/dist/components/ai-accessibility-report/ai-accessibility-report.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-accessibility-report.d.ts","sourceRoot":"","sources":["../../../src/components/ai-accessibility-report/ai-accessibility-report.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAE/B,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,GAAG,IAAI,GAAG,KAAK,CAAC;IAC1B,QAAQ,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,qBACa,qBAAsB,SAAQ,UAAU;IACnD,OAAgB,MAAM,4BA+OnB;IAEwB,MAAM,EAAE,SAAS,EAAE,CAAM;IACxB,KAAK,SAAK;IACD,KAAK,SAA0B;IACpE,wFAAwF;IACjC,WAAW,SAAK;IAE9D,OAAO,CAAC,SAAS,CAAqB;IAE/C,OAAO,KAAK,WAAW,GAAqE;IAC5F,OAAO,KAAK,aAAa,GAAuE;IAChG,OAAO,KAAK,UAAU,GAAoE;IAE1F,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,QAAQ;IAUP,MAAM;CA6EhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,qBAAqB,CAAC;KAClD;CACF"}

package/dist/components/ai-accessibility-report/ai-accessibility-report.js

@@ -0,0 +1,380 @@
+import { css as v, LitElement as u, html as t, nothing as g } from "lit";
+import { property as d, state as f, customElement as p } from "lit/decorators.js";
+import { h, r as b, f as m } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../cg-card/cg-card.js";
+import "../cg-icon/cg-icon.js";
+var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (e, r, o, i) => {
+  for (var a = i > 1 ? void 0 : i ? w(r, o) : r, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (a = (i ? n(r, o, a) : n(a)) || a);
+  return i && a && x(r, o, a), a;
+};
+let c = class extends u {
+  constructor() {
+    super(...arguments), this.issues = [], this.score = 0, this.title = "Accessibility Report", this.totalChecks = 0, this._expanded = /* @__PURE__ */ new Set();
+  }
+  get _errorCount() {
+    return this.issues.filter((e) => e.severity === "error").length;
+  }
+  get _warningCount() {
+    return this.issues.filter((e) => e.severity === "warning").length;
+  }
+  get _infoCount() {
+    return this.issues.filter((e) => e.severity === "info").length;
+  }
+  _getScoreColor() {
+    return this.score >= 90 ? "var(--cg-color-status-success-text-default)" : this.score >= 70 || this.score >= 50 ? "var(--cg-color-status-warning-text-default)" : "var(--cg-color-status-error-text-default)";
+  }
+  _toggle(e) {
+    const r = new Set(this._expanded);
+    r.has(e) ? r.delete(e) : r.add(e), this._expanded = r;
+  }
+  _onClick(e, r) {
+    this._toggle(r), this.dispatchEvent(new CustomEvent("ai-a11y-issue-click", {
+      bubbles: !0,
+      composed: !0,
+      detail: { issue: e, index: r }
+    }));
+  }
+  _sevIcon(e) {
+    const r = {
+      error: "error",
+      warning: "warning",
+      info: "info"
+    }, o = `sev-icon sev-icon-${e}`;
+    return t`<span class=${o} aria-hidden="true"><cg-icon name="${r[e] ?? "info"}" size="sm"></cg-icon></span>`;
+  }
+  render() {
+    const e = 2 * Math.PI * 27, r = e - this.score / 100 * e, o = this._getScoreColor(), i = this.totalChecks > 0 ? this.totalChecks : this.issues.length, a = Math.max(0, i - this.issues.length);
+    return t`
+      <cg-card>
+        <div class="header">
+          <div class="score-circle" role="meter" aria-valuenow=${this.score}
+               aria-valuemin="0" aria-valuemax="100" aria-label="Accessibility score ${this.score} out of 100">
+            <svg viewBox="0 0 64 64" aria-hidden="true">
+              <circle class="score-bg" cx="32" cy="32" r="27" />
+              <circle class="score-fg" cx="32" cy="32" r="27"
+                      stroke="${o}"
+                      stroke-dasharray="${e}"
+                      stroke-dashoffset="${r}" />
+            </svg>
+            <div class="score-text" style="color:${o}">${this.score}</div>
+          </div>
+          <div class="header-info">
+            <h3 class="title">${this.title}</h3>
+            ${i > 0 ? t`
+              <p class="pass-count">${a} of ${i} checks passed</p>
+            ` : g}
+            <div class="breakdown">
+              <span class="breakdown-item">
+                <span class="sev-dot sev-error"></span> ${this._errorCount} ${this._errorCount === 1 ? "error" : "errors"}
+              </span>
+              <span class="breakdown-item">
+                <span class="sev-dot sev-warning"></span> ${this._warningCount} ${this._warningCount === 1 ? "warning" : "warnings"}
+              </span>
+              <span class="breakdown-item">
+                <span class="sev-dot sev-info"></span> ${this._infoCount} info
+              </span>
+            </div>
+          </div>
+        </div>
+        ${this.issues.length === 0 ? t`
+          <div class="empty" role="status">
+            <cg-icon name="success" size="lg"></cg-icon>
+            <span>No accessibility issues found.</span>
+          </div>
+        ` : t`
+          <div class="issue-list" role="list" aria-label="Accessibility issues">
+            ${this.issues.map((s, n) => t`
+              <div class="issue-item" role="listitem">
+                <button class="issue-header"
+                        @click=${() => this._onClick(s, n)}
+                        aria-expanded=${this._expanded.has(n) ? "true" : "false"}>
+                  ${this._sevIcon(s.severity)}
+                  <span class="issue-rule">${s.rule}</span>
+                  <span class="level-badge level-${s.level}">WCAG ${s.level}</span>
+                  <cg-icon class="chevron" name="chevron-down" size="xs"></cg-icon>
+                </button>
+                ${this._expanded.has(n) ? t`
+                  <div class="issue-details">
+                    <div class="issue-desc">${s.description}</div>
+                    ${s.element ? t`
+                      <code class="issue-element">${s.element}</code>
+                    ` : g}
+                    ${s.fix ? t`
+                      <div class="issue-fix">
+                        <span class="issue-fix-label">Fix:</span>
+                        <span>${s.fix}</span>
+                      </div>
+                    ` : g}
+                  </div>
+                ` : g}
+              </div>
+            `)}
+          </div>
+        `}
+      </cg-card>
+    `;
+  }
+};
+c.styles = [h, b, m, v`
+    :host {
+      display: block;
+      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
+    }
+    :host([hidden]) { display: none; }
+
+    .header {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-16);
+      padding-bottom: var(--cg-spacing-12);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      margin-bottom: var(--cg-spacing-16);
+    }
+
+    .score-circle {
+      position: relative;
+      width: var(--cg-spacing-64);
+      height: var(--cg-spacing-64);
+      flex-shrink: 0;
+    }
+
+    .score-circle svg {
+      width: var(--cg-spacing-64);
+      height: var(--cg-spacing-64);
+      transform: rotate(-90deg);
+    }
+
+    .score-bg {
+      fill: none;
+      stroke: var(--cg-color-surface-cards-border);
+      stroke-width: 5;
+    }
+
+    .score-fg {
+      fill: none;
+      stroke-width: 5;
+      stroke-linecap: round;
+      transition: stroke-dashoffset var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
+
+    .score-text {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: var(--cg-font-size-lg);
+      font-weight: var(--cg-font-weight-bold);
+    }
+
+    .header-info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .title {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      margin: 0 0 var(--cg-spacing-4) 0;
+      color: var(--cg-color-surface-base-text);
+    }
+
+    .pass-count {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+      margin: 0 0 var(--cg-spacing-6) 0;
+    }
+
+    .breakdown {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--cg-spacing-12);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+    }
+
+    .breakdown-item {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+    }
+
+    .sev-dot {
+      width: var(--cg-spacing-8);
+      height: var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+    }
+
+    .sev-error { background: var(--cg-color-status-error-text-default); }
+    .sev-warning { background: var(--cg-color-status-warning-text-default); }
+    .sev-info { background: var(--cg-color-status-info-text-default); }
+
+    .issue-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-6);
+    }
+
+    .issue-item {
+      border-radius: var(--cg-border-radius-100);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      overflow: hidden;
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .issue-item:hover {
+      border-color: var(--cg-color-surface-cards-hover-border);
+    }
+
+    .issue-header {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      cursor: pointer;
+      background: transparent;
+      border: none;
+      color: inherit;
+      width: 100%;
+      font-family: inherit;
+      font-size: var(--cg-font-size-sm);
+      text-align: left;
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .issue-header:hover {
+      background: var(--cg-color-surface-cards-hover-background);
+    }
+    .issue-header:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .issue-header:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);
+    }
+
+    .sev-icon {
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+    }
+    .sev-icon-error { color: var(--cg-color-status-error-text-default); }
+    .sev-icon-warning { color: var(--cg-color-status-warning-text-default); }
+    .sev-icon-info { color: var(--cg-color-status-info-text-default); }
+
+    .issue-rule {
+      flex: 1;
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-base-text);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .chevron {
+      color: var(--cg-color-surface-container-outlined);
+      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .issue-header[aria-expanded="true"] .chevron {
+      transform: rotate(180deg);
+    }
+
+    .level-badge {
+      display: inline-flex;
+      padding: var(--cg-spacing-2) var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-50);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-bold);
+      flex-shrink: 0;
+    }
+    .level-A {
+      background: var(--cg-color-status-info-background-default);
+      color: var(--cg-color-status-info-text-default);
+    }
+    .level-AA {
+      background: var(--cg-color-status-warning-background-default);
+      color: var(--cg-color-status-warning-text-default);
+    }
+    .level-AAA {
+      background: var(--cg-overlay-accent-subtle);
+      color: var(--cg-color-accent-text);
+    }
+
+    .issue-details {
+      padding: var(--cg-spacing-8) var(--cg-spacing-12) var(--cg-spacing-12) var(--cg-spacing-32);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      font-size: var(--cg-font-size-xs);
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-8);
+    }
+
+    .issue-desc {
+      color: var(--cg-color-surface-container-outlined);
+      line-height: var(--cg-line-height-normal);
+    }
+
+    .issue-element {
+      display: inline-block;
+      align-self: flex-start;
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
+      background: var(--cg-color-action-tertiary-background-hover);
+      border-radius: var(--cg-border-radius-50);
+      font-family: var(--cg-font-family-mono);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-base-text);
+      word-break: break-all;
+    }
+
+    .issue-fix {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--cg-spacing-6);
+      padding: var(--cg-spacing-6) var(--cg-spacing-8);
+      background: var(--cg-overlay-accent-subtle);
+      border: var(--cg-border-width-50) solid var(--cg-overlay-accent-strong);
+      border-radius: var(--cg-border-radius-50);
+      color: var(--cg-color-surface-base-text);
+      line-height: var(--cg-line-height-normal);
+    }
+    .issue-fix-label {
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-accent-text);
+      flex-shrink: 0;
+    }
+
+    .empty {
+      text-align: center;
+      padding: var(--cg-spacing-24);
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-sm);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+    }
+    .empty cg-icon {
+      color: var(--cg-color-status-success-text-default);
+    }
+  `];
+l([
+  d({ type: Array })
+], c.prototype, "issues", 2);
+l([
+  d({ type: Number })
+], c.prototype, "score", 2);
+l([
+  d({ type: String })
+], c.prototype, "title", 2);
+l([
+  d({ type: Number, attribute: "total-checks" })
+], c.prototype, "totalChecks", 2);
+l([
+  f()
+], c.prototype, "_expanded", 2);
+c = l([
+  p("ai-accessibility-report")
+], c);
+export {
+  c as AiAccessibilityReport
+};
+//# sourceMappingURL=ai-accessibility-report.js.map