npm - @cognivo/components - Versions diffs - 0.8.0 → 0.8.2 - Mend

@cognivo/components 0.8.0 → 0.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (543) hide show

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

@@ -1,6 +1,6 @@
 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";
+import { h as u, r as h } from "../../chunks/premium.css-DHekUEUt.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);

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

	@@ -1 +1 @@
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"}
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,4BAgPnB;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 CHANGED Viewed

@@ -1,12 +1,12 @@
 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 { h, r as b, f as m } from "../../chunks/premium.css-DHekUEUt.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;
+var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (e, r, i, o) => {
+  for (var a = o > 1 ? void 0 : o ? w(r, i) : r, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (a = (o ? n(r, i, a) : n(a)) || a);
+  return o && a && x(r, i, a), a;
 };
 let c = class extends u {
   constructor() {
@@ -40,11 +40,11 @@ let c = class extends u {
       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>`;
+    }, i = `sev-icon sev-icon-${e}`;
+    return t`<span class=${i} 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);
+    const e = 2 * Math.PI * 27, r = e - this.score / 100 * e, i = this._getScoreColor(), o = this.totalChecks > 0 ? this.totalChecks : this.issues.length, a = Math.max(0, o - this.issues.length);
     return t`
       <cg-card>
         <div class="header">
@@ -53,16 +53,16 @@ let c = class extends u {
             <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="${i}"
                       stroke-dasharray="${e}"
                       stroke-dashoffset="${r}" />
             </svg>
-            <div class="score-text" style="color:${o}">${this.score}</div>
+            <div class="score-text" style="color:${i}">${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>
+            ${o > 0 ? t`
+              <p class="pass-count">${a} of ${o} checks passed</p>
             ` : g}
             <div class="breakdown">
               <span class="breakdown-item">
@@ -231,6 +231,7 @@ c.styles = [h, b, m, v`
       align-items: center;
       gap: var(--cg-spacing-8);
       padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      min-height: var(--cg-spacing-40);
       cursor: pointer;
       background: transparent;
       border: none;
@@ -302,7 +303,7 @@ c.styles = [h, b, m, v`
     .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);
+      font-size: var(--cg-font-size-sm);
       display: flex;
       flex-direction: column;
       gap: var(--cg-spacing-8);

package/dist/components/ai-accessibility-report/ai-accessibility-report.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ai-accessibility-report.js","sources":["../../../src/components/ai-accessibility-report/ai-accessibility-report.ts"],"sourcesContent":["/*\n @element ai-accessibility-report\n * WCAG compliance report with score circle, severity breakdown, and expandable\n * issue list with optional \"How to fix\" suggestions per issue. Modeled after\n * Lighthouse / axe DevTools / Accessibility Insights.\n \n @example\n * ```html\n * <ai-accessibility-report\n * .issues=${[{rule:'color-contrast', level:'AA', severity:'error',\n * description:'Low contrast ratio', fix:'Increase contrast to at least 4.5:1'}]}\n * score=\"72\"\n * title=\"Page Audit\"\n * ></ai-accessibility-report>\n * ```\n \n @fires {CustomEvent<{issue: A11yIssue, index: number}>} ai-a11y-issue-click - Issue row clicked/expanded\n /\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-card/cg-card.js';\nimport '../cg-icon/cg-icon.js';\n\nexport interface A11yIssue {\n rule: string;\n level: 'A' \| 'AA' \| 'AAA';\n severity: 'error' \| 'warning' \| 'info';\n element?: string;\n description: string;\n /* Optional fix suggestion (axe DevTools / Lighthouse pattern) /\n fix?: string;\n}\n\n@customElement('ai-accessibility-report')\nexport class AiAccessibilityReport extends LitElement {\n static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n :host {\n display: block;\n animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n }\n :host([hidden]) { display: none; }\n\n .header {\n display: flex;\n align-items: center;\n gap: 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-border);\n margin-bottom: var(--cg-spacing-16);\n }\n\n .score-circle {\n position: relative;\n width: var(--cg-spacing-64);\n height: var(--cg-spacing-64);\n flex-shrink: 0;\n }\n\n .score-circle svg {\n width: var(--cg-spacing-64);\n height: var(--cg-spacing-64);\n transform: rotate(-90deg);\n }\n\n .score-bg {\n fill: none;\n stroke: var(--cg-color-surface-cards-border);\n stroke-width: 5;\n }\n\n .score-fg {\n fill: none;\n stroke-width: 5;\n stroke-linecap: round;\n transition: stroke-dashoffset var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n }\n\n .score-text {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--cg-font-size-lg);\n font-weight: var(--cg-font-weight-bold);\n }\n\n .header-info {\n flex: 1;\n min-width: 0;\n }\n\n .title {\n font-size: var(--cg-font-size-sm);\n font-weight: var(--cg-font-weight-semibold);\n margin: 0 0 var(--cg-spacing-4) 0;\n color: var(--cg-color-surface-base-text);\n }\n\n .pass-count {\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-surface-container-outlined);\n margin: 0 0 var(--cg-spacing-6) 0;\n }\n\n .breakdown {\n display: flex;\n flex-wrap: wrap;\n gap: var(--cg-spacing-12);\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-surface-container-outlined);\n }\n\n .breakdown-item {\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-4);\n }\n\n .sev-dot {\n width: var(--cg-spacing-8);\n height: var(--cg-spacing-8);\n border-radius: var(--cg-border-radius-full);\n }\n\n .sev-error { background: var(--cg-color-status-error-text-default); }\n .sev-warning { background: var(--cg-color-status-warning-text-default); }\n .sev-info { background: var(--cg-color-status-info-text-default); }\n\n .issue-list {\n display: flex;\n flex-direction: column;\n gap: var(--cg-spacing-6);\n }\n\n .issue-item {\n border-radius: var(--cg-border-radius-100);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n overflow: hidden;\n transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .issue-item:hover {\n border-color: var(--cg-color-surface-cards-hover-border);\n }\n\n .issue-header {\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-8);\n padding: var(--cg-spacing-8) var(--cg-spacing-12);\n cursor: pointer;\n background: transparent;\n border: none;\n color: inherit;\n width: 100%;\n font-family: inherit;\n font-size: var(--cg-font-size-sm);\n text-align: left;\n transition:\n background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .issue-header:hover {\n background: var(--cg-color-surface-cards-hover-background);\n }\n .issue-header:active { transform: scale(var(--cg-interaction-press-scale)); }\n .issue-header:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\n }\n\n .sev-icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n }\n .sev-icon-error { color: var(--cg-color-status-error-text-default); }\n .sev-icon-warning { color: var(--cg-color-status-warning-text-default); }\n .sev-icon-info { color: var(--cg-color-status-info-text-default); }\n\n .issue-rule {\n flex: 1;\n font-weight: var(--cg-font-weight-medium);\n color: var(--cg-color-surface-base-text);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .chevron {\n color: var(--cg-color-surface-container-outlined);\n transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .issue-header[aria-expanded=\"true\"] .chevron {\n transform: rotate(180deg);\n }\n\n .level-badge {\n display: inline-flex;\n padding: var(--cg-spacing-2) var(--cg-spacing-6);\n border-radius: var(--cg-border-radius-50);\n font-size: var(--cg-font-size-xs);\n font-weight: var(--cg-font-weight-bold);\n flex-shrink: 0;\n }\n .level-A {\n background: var(--cg-color-status-info-background-default);\n color: var(--cg-color-status-info-text-default);\n }\n .level-AA {\n background: var(--cg-color-status-warning-background-default);\n color: var(--cg-color-status-warning-text-default);\n }\n .level-AAA {\n background: var(--cg-overlay-accent-subtle);\n color: var(--cg-color-accent-text);\n }\n\n .issue-details {\n padding: var(--cg-spacing-8) var(--cg-spacing-12) var(--cg-spacing-12) var(--cg-spacing-32);\n border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n font-size: var(--cg-font-size-xs);\n display: flex;\n flex-direction: column;\n gap: var(--cg-spacing-8);\n }\n\n .issue-desc {\n color: var(--cg-color-surface-container-outlined);\n line-height: var(--cg-line-height-normal);\n }\n\n .issue-element {\n display: inline-block;\n align-self: flex-start;\n padding: var(--cg-spacing-2) var(--cg-spacing-8);\n background: var(--cg-color-action-tertiary-background-hover);\n border-radius: var(--cg-border-radius-50);\n font-family: var(--cg-font-family-mono);\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-surface-base-text);\n word-break: break-all;\n }\n\n .issue-fix {\n display: flex;\n align-items: flex-start;\n gap: var(--cg-spacing-6);\n padding: var(--cg-spacing-6) var(--cg-spacing-8);\n background: var(--cg-overlay-accent-subtle);\n border: var(--cg-border-width-50) solid var(--cg-overlay-accent-strong);\n border-radius: var(--cg-border-radius-50);\n color: var(--cg-color-surface-base-text);\n line-height: var(--cg-line-height-normal);\n }\n .issue-fix-label {\n font-weight: var(--cg-font-weight-semibold);\n color: var(--cg-color-accent-text);\n flex-shrink: 0;\n }\n\n .empty {\n text-align: center;\n padding: var(--cg-spacing-24);\n color: var(--cg-color-surface-container-outlined);\n font-size: var(--cg-font-size-sm);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--cg-spacing-8);\n }\n .empty cg-icon {\n color: var(--cg-color-status-success-text-default);\n }\n `];\n\n @property({ type: Array }) issues: A11yIssue[] = [];\n @property({ type: Number }) score = 0;\n @property({ type: String }) override title = 'Accessibility Report';\n /* Total checks run (for \"X of Y passed\" display). Defaults to issues.length when 0. /\n @property({ type: Number, attribute: 'total-checks' }) totalChecks = 0;\n\n @state() private _expanded = new Set<number>();\n\n private get _errorCount() { return this.issues.filter(i => i.severity === 'error').length; }\n private get _warningCount() { return this.issues.filter(i => i.severity === 'warning').length; }\n private get _infoCount() { return this.issues.filter(i => i.severity === 'info').length; }\n\n private _getScoreColor(): string {\n if (this.score >= 90) return 'var(--cg-color-status-success-text-default)';\n if (this.score >= 70) return 'var(--cg-color-status-warning-text-default)';\n if (this.score >= 50) return 'var(--cg-color-status-warning-text-default)';\n return 'var(--cg-color-status-error-text-default)';\n }\n\n private _toggle(idx: number): void {\n const next = new Set(this._expanded);\n if (next.has(idx)) next.delete(idx); else next.add(idx);\n this._expanded = next;\n }\n\n private _onClick(issue: A11yIssue, idx: number): void {\n this._toggle(idx);\n this.dispatchEvent(new CustomEvent('ai-a11y-issue-click', {\n bubbles: true, composed: true,\n detail: { issue, index: idx },\n }));\n }\n\n private _sevIcon(severity: string) {\n const map: Record<string, string> = {\n error: 'error',\n warning: 'warning',\n info: 'info',\n };\n const cls = `sev-icon sev-icon-${severity}`;\n return html`<span class=${cls} aria-hidden=\"true\"><cg-icon name=\"${map[severity] ?? 'info'}\" size=\"sm\"></cg-icon></span>`;\n }\n\n override render() {\n const circumference = 2 Math.PI * 27;\n const offset = circumference - (this.score / 100) * circumference;\n const scoreColor = this._getScoreColor();\n const total = this.totalChecks > 0 ? this.totalChecks : this.issues.length;\n const passed = Math.max(0, total - this.issues.length);\n\n return html`\n <cg-card>\n <div class=\"header\">\n <div class=\"score-circle\" role=\"meter\" aria-valuenow=${this.score}\n aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Accessibility score ${this.score} out of 100\">\n <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n <circle class=\"score-bg\" cx=\"32\" cy=\"32\" r=\"27\" />\n <circle class=\"score-fg\" cx=\"32\" cy=\"32\" r=\"27\"\n stroke=\"${scoreColor}\"\n stroke-dasharray=\"${circumference}\"\n stroke-dashoffset=\"${offset}\" />\n </svg>\n <div class=\"score-text\" style=\"color:${scoreColor}\">${this.score}</div>\n </div>\n <div class=\"header-info\">\n <h3 class=\"title\">${this.title}</h3>\n ${total > 0 ? html`\n <p class=\"pass-count\">${passed} of ${total} checks passed</p>\n ` : nothing}\n <div class=\"breakdown\">\n <span class=\"breakdown-item\">\n <span class=\"sev-dot sev-error\"></span> ${this._errorCount} ${this._errorCount === 1 ? 'error' : 'errors'}\n </span>\n <span class=\"breakdown-item\">\n <span class=\"sev-dot sev-warning\"></span> ${this._warningCount} ${this._warningCount === 1 ? 'warning' : 'warnings'}\n </span>\n <span class=\"breakdown-item\">\n <span class=\"sev-dot sev-info\"></span> ${this._infoCount} info\n </span>\n </div>\n </div>\n </div>\n ${this.issues.length === 0 ? html`\n <div class=\"empty\" role=\"status\">\n <cg-icon name=\"success\" size=\"lg\"></cg-icon>\n <span>No accessibility issues found.</span>\n </div>\n ` : html`\n <div class=\"issue-list\" role=\"list\" aria-label=\"Accessibility issues\">\n ${this.issues.map((issue, i) => html`\n <div class=\"issue-item\" role=\"listitem\">\n <button class=\"issue-header\"\n @click=${() => this._onClick(issue, i)}\n aria-expanded=${this._expanded.has(i) ? 'true' : 'false'}>\n ${this._sevIcon(issue.severity)}\n <span class=\"issue-rule\">${issue.rule}</span>\n <span class=\"level-badge level-${issue.level}\">WCAG ${issue.level}</span>\n <cg-icon class=\"chevron\" name=\"chevron-down\" size=\"xs\"></cg-icon>\n </button>\n ${this._expanded.has(i) ? html`\n <div class=\"issue-details\">\n <div class=\"issue-desc\">${issue.description}</div>\n ${issue.element ? html`\n <code class=\"issue-element\">${issue.element}</code>\n ` : nothing}\n ${issue.fix ? html`\n <div class=\"issue-fix\">\n <span class=\"issue-fix-label\">Fix:</span>\n <span>${issue.fix}</span>\n </div>\n ` : nothing}\n </div>\n ` : nothing}\n </div>\n `)}\n </div>\n `}\n </cg-card>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ai-accessibility-report': AiAccessibilityReport;\n }\n}\n"],"names":["AiAccessibilityReport","LitElement","i","idx","next","issue","severity","map","cls","html","circumference","offset","scoreColor","total","passed","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"ai-accessibility-report.js","sources":["../../../src/components/ai-accessibility-report/ai-accessibility-report.ts"],"sourcesContent":["/*\n @element ai-accessibility-report\n * WCAG compliance report with score circle, severity breakdown, and expandable\n * issue list with optional \"How to fix\" suggestions per issue. Modeled after\n * Lighthouse / axe DevTools / Accessibility Insights.\n \n @example\n * ```html\n * <ai-accessibility-report\n * .issues=${[{rule:'color-contrast', level:'AA', severity:'error',\n * description:'Low contrast ratio', fix:'Increase contrast to at least 4.5:1'}]}\n * score=\"72\"\n * title=\"Page Audit\"\n * ></ai-accessibility-report>\n * ```\n \n @fires {CustomEvent<{issue: A11yIssue, index: number}>} ai-a11y-issue-click - Issue row clicked/expanded\n /\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-card/cg-card.js';\nimport '../cg-icon/cg-icon.js';\n\nexport interface A11yIssue {\n rule: string;\n level: 'A' \| 'AA' \| 'AAA';\n severity: 'error' \| 'warning' \| 'info';\n element?: string;\n description: string;\n /* Optional fix suggestion (axe DevTools / Lighthouse pattern) /\n fix?: string;\n}\n\n@customElement('ai-accessibility-report')\nexport class AiAccessibilityReport extends LitElement {\n static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n :host {\n display: block;\n animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n }\n :host([hidden]) { display: none; }\n\n .header {\n display: flex;\n align-items: center;\n gap: 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-border);\n margin-bottom: var(--cg-spacing-16);\n }\n\n .score-circle {\n position: relative;\n width: var(--cg-spacing-64);\n height: var(--cg-spacing-64);\n flex-shrink: 0;\n }\n\n .score-circle svg {\n width: var(--cg-spacing-64);\n height: var(--cg-spacing-64);\n transform: rotate(-90deg);\n }\n\n .score-bg {\n fill: none;\n stroke: var(--cg-color-surface-cards-border);\n stroke-width: 5;\n }\n\n .score-fg {\n fill: none;\n stroke-width: 5;\n stroke-linecap: round;\n transition: stroke-dashoffset var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n }\n\n .score-text {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--cg-font-size-lg);\n font-weight: var(--cg-font-weight-bold);\n }\n\n .header-info {\n flex: 1;\n min-width: 0;\n }\n\n .title {\n font-size: var(--cg-font-size-sm);\n font-weight: var(--cg-font-weight-semibold);\n margin: 0 0 var(--cg-spacing-4) 0;\n color: var(--cg-color-surface-base-text);\n }\n\n .pass-count {\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-surface-container-outlined);\n margin: 0 0 var(--cg-spacing-6) 0;\n }\n\n .breakdown {\n display: flex;\n flex-wrap: wrap;\n gap: var(--cg-spacing-12);\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-surface-container-outlined);\n }\n\n .breakdown-item {\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-4);\n }\n\n .sev-dot {\n width: var(--cg-spacing-8);\n height: var(--cg-spacing-8);\n border-radius: var(--cg-border-radius-full);\n }\n\n .sev-error { background: var(--cg-color-status-error-text-default); }\n .sev-warning { background: var(--cg-color-status-warning-text-default); }\n .sev-info { background: var(--cg-color-status-info-text-default); }\n\n .issue-list {\n display: flex;\n flex-direction: column;\n gap: var(--cg-spacing-6);\n }\n\n .issue-item {\n border-radius: var(--cg-border-radius-100);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n overflow: hidden;\n transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .issue-item:hover {\n border-color: var(--cg-color-surface-cards-hover-border);\n }\n\n .issue-header {\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-8);\n padding: var(--cg-spacing-8) var(--cg-spacing-12);\n min-height: var(--cg-spacing-40);\n cursor: pointer;\n background: transparent;\n border: none;\n color: inherit;\n width: 100%;\n font-family: inherit;\n font-size: var(--cg-font-size-sm);\n text-align: left;\n transition:\n background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .issue-header:hover {\n background: var(--cg-color-surface-cards-hover-background);\n }\n .issue-header:active { transform: scale(var(--cg-interaction-press-scale)); }\n .issue-header:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\n }\n\n .sev-icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n }\n .sev-icon-error { color: var(--cg-color-status-error-text-default); }\n .sev-icon-warning { color: var(--cg-color-status-warning-text-default); }\n .sev-icon-info { color: var(--cg-color-status-info-text-default); }\n\n .issue-rule {\n flex: 1;\n font-weight: var(--cg-font-weight-medium);\n color: var(--cg-color-surface-base-text);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .chevron {\n color: var(--cg-color-surface-container-outlined);\n transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .issue-header[aria-expanded=\"true\"] .chevron {\n transform: rotate(180deg);\n }\n\n .level-badge {\n display: inline-flex;\n padding: var(--cg-spacing-2) var(--cg-spacing-6);\n border-radius: var(--cg-border-radius-50);\n font-size: var(--cg-font-size-xs);\n font-weight: var(--cg-font-weight-bold);\n flex-shrink: 0;\n }\n .level-A {\n background: var(--cg-color-status-info-background-default);\n color: var(--cg-color-status-info-text-default);\n }\n .level-AA {\n background: var(--cg-color-status-warning-background-default);\n color: var(--cg-color-status-warning-text-default);\n }\n .level-AAA {\n background: var(--cg-overlay-accent-subtle);\n color: var(--cg-color-accent-text);\n }\n\n .issue-details {\n padding: var(--cg-spacing-8) var(--cg-spacing-12) var(--cg-spacing-12) var(--cg-spacing-32);\n border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n font-size: var(--cg-font-size-sm);\n display: flex;\n flex-direction: column;\n gap: var(--cg-spacing-8);\n }\n\n .issue-desc {\n color: var(--cg-color-surface-container-outlined);\n line-height: var(--cg-line-height-normal);\n }\n\n .issue-element {\n display: inline-block;\n align-self: flex-start;\n padding: var(--cg-spacing-2) var(--cg-spacing-8);\n background: var(--cg-color-action-tertiary-background-hover);\n border-radius: var(--cg-border-radius-50);\n font-family: var(--cg-font-family-mono);\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-surface-base-text);\n word-break: break-all;\n }\n\n .issue-fix {\n display: flex;\n align-items: flex-start;\n gap: var(--cg-spacing-6);\n padding: var(--cg-spacing-6) var(--cg-spacing-8);\n background: var(--cg-overlay-accent-subtle);\n border: var(--cg-border-width-50) solid var(--cg-overlay-accent-strong);\n border-radius: var(--cg-border-radius-50);\n color: var(--cg-color-surface-base-text);\n line-height: var(--cg-line-height-normal);\n }\n .issue-fix-label {\n font-weight: var(--cg-font-weight-semibold);\n color: var(--cg-color-accent-text);\n flex-shrink: 0;\n }\n\n .empty {\n text-align: center;\n padding: var(--cg-spacing-24);\n color: var(--cg-color-surface-container-outlined);\n font-size: var(--cg-font-size-sm);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--cg-spacing-8);\n }\n .empty cg-icon {\n color: var(--cg-color-status-success-text-default);\n }\n `];\n\n @property({ type: Array }) issues: A11yIssue[] = [];\n @property({ type: Number }) score = 0;\n @property({ type: String }) override title = 'Accessibility Report';\n /* Total checks run (for \"X of Y passed\" display). Defaults to issues.length when 0. /\n @property({ type: Number, attribute: 'total-checks' }) totalChecks = 0;\n\n @state() private _expanded = new Set<number>();\n\n private get _errorCount() { return this.issues.filter(i => i.severity === 'error').length; }\n private get _warningCount() { return this.issues.filter(i => i.severity === 'warning').length; }\n private get _infoCount() { return this.issues.filter(i => i.severity === 'info').length; }\n\n private _getScoreColor(): string {\n if (this.score >= 90) return 'var(--cg-color-status-success-text-default)';\n if (this.score >= 70) return 'var(--cg-color-status-warning-text-default)';\n if (this.score >= 50) return 'var(--cg-color-status-warning-text-default)';\n return 'var(--cg-color-status-error-text-default)';\n }\n\n private _toggle(idx: number): void {\n const next = new Set(this._expanded);\n if (next.has(idx)) next.delete(idx); else next.add(idx);\n this._expanded = next;\n }\n\n private _onClick(issue: A11yIssue, idx: number): void {\n this._toggle(idx);\n this.dispatchEvent(new CustomEvent('ai-a11y-issue-click', {\n bubbles: true, composed: true,\n detail: { issue, index: idx },\n }));\n }\n\n private _sevIcon(severity: string) {\n const map: Record<string, string> = {\n error: 'error',\n warning: 'warning',\n info: 'info',\n };\n const cls = `sev-icon sev-icon-${severity}`;\n return html`<span class=${cls} aria-hidden=\"true\"><cg-icon name=\"${map[severity] ?? 'info'}\" size=\"sm\"></cg-icon></span>`;\n }\n\n override render() {\n const circumference = 2 Math.PI * 27;\n const offset = circumference - (this.score / 100) * circumference;\n const scoreColor = this._getScoreColor();\n const total = this.totalChecks > 0 ? this.totalChecks : this.issues.length;\n const passed = Math.max(0, total - this.issues.length);\n\n return html`\n <cg-card>\n <div class=\"header\">\n <div class=\"score-circle\" role=\"meter\" aria-valuenow=${this.score}\n aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Accessibility score ${this.score} out of 100\">\n <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n <circle class=\"score-bg\" cx=\"32\" cy=\"32\" r=\"27\" />\n <circle class=\"score-fg\" cx=\"32\" cy=\"32\" r=\"27\"\n stroke=\"${scoreColor}\"\n stroke-dasharray=\"${circumference}\"\n stroke-dashoffset=\"${offset}\" />\n </svg>\n <div class=\"score-text\" style=\"color:${scoreColor}\">${this.score}</div>\n </div>\n <div class=\"header-info\">\n <h3 class=\"title\">${this.title}</h3>\n ${total > 0 ? html`\n <p class=\"pass-count\">${passed} of ${total} checks passed</p>\n ` : nothing}\n <div class=\"breakdown\">\n <span class=\"breakdown-item\">\n <span class=\"sev-dot sev-error\"></span> ${this._errorCount} ${this._errorCount === 1 ? 'error' : 'errors'}\n </span>\n <span class=\"breakdown-item\">\n <span class=\"sev-dot sev-warning\"></span> ${this._warningCount} ${this._warningCount === 1 ? 'warning' : 'warnings'}\n </span>\n <span class=\"breakdown-item\">\n <span class=\"sev-dot sev-info\"></span> ${this._infoCount} info\n </span>\n </div>\n </div>\n </div>\n ${this.issues.length === 0 ? html`\n <div class=\"empty\" role=\"status\">\n <cg-icon name=\"success\" size=\"lg\"></cg-icon>\n <span>No accessibility issues found.</span>\n </div>\n ` : html`\n <div class=\"issue-list\" role=\"list\" aria-label=\"Accessibility issues\">\n ${this.issues.map((issue, i) => html`\n <div class=\"issue-item\" role=\"listitem\">\n <button class=\"issue-header\"\n @click=${() => this._onClick(issue, i)}\n aria-expanded=${this._expanded.has(i) ? 'true' : 'false'}>\n ${this._sevIcon(issue.severity)}\n <span class=\"issue-rule\">${issue.rule}</span>\n <span class=\"level-badge level-${issue.level}\">WCAG ${issue.level}</span>\n <cg-icon class=\"chevron\" name=\"chevron-down\" size=\"xs\"></cg-icon>\n </button>\n ${this._expanded.has(i) ? html`\n <div class=\"issue-details\">\n <div class=\"issue-desc\">${issue.description}</div>\n ${issue.element ? html`\n <code class=\"issue-element\">${issue.element}</code>\n ` : nothing}\n ${issue.fix ? html`\n <div class=\"issue-fix\">\n <span class=\"issue-fix-label\">Fix:</span>\n <span>${issue.fix}</span>\n </div>\n ` : nothing}\n </div>\n ` : nothing}\n </div>\n `)}\n </div>\n `}\n </cg-card>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ai-accessibility-report': AiAccessibilityReport;\n }\n}\n"],"names":["AiAccessibilityReport","LitElement","i","idx","next","issue","severity","map","cls","html","circumference","offset","scoreColor","total","passed","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-action-preview/ai-action-preview.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ai-action-preview.d.ts","sourceRoot":"","sources":["../../../src/components/ai-action-preview/ai-action-preview.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,KAAK,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;AAEvD,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,~~4BA6JnB~~;IACyB,OAAO,SAAM;IACb,WAAW,SAAM;IACjB,MAAM,SAAM;IACZ,QAAQ,EAAE,QAAQ,CAAS;IACvB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IACzC,YAAY,SAAa;IACzB,WAAW,SAAY;IACvB,SAAS,SAAK;IAEjC,OAAO,CAAC,UAAU,CAAK;IAChC,OAAO,CAAC,MAAM,CAAC,CAA6C;IAEnD,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAI9C,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,UAAU,CAAS;IAE3B,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,aAAa;IAOZ,MAAM;CAmDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
1	+ {"version":3,"file":"ai-action-preview.d.ts","sourceRoot":"","sources":["../../../src/components/ai-action-preview/ai-action-preview.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,KAAK,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;AAEvD,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BA8JnB;IACyB,OAAO,SAAM;IACb,WAAW,SAAM;IACjB,MAAM,SAAM;IACZ,QAAQ,EAAE,QAAQ,CAAS;IACvB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IACzC,YAAY,SAAa;IACzB,WAAW,SAAY;IACvB,SAAS,SAAK;IAEjC,OAAO,CAAC,UAAU,CAAK;IAChC,OAAO,CAAC,MAAM,CAAC,CAA6C;IAEnD,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAI9C,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,UAAU,CAAS;IAE3B,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,aAAa;IAOZ,MAAM;CAmDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/components/ai-action-preview/ai-action-preview.js CHANGED Viewed

@@ -1,10 +1,10 @@
-import { css as u, LitElement as v, nothing as g, html as s } from "lit";
+import { css as u, LitElement as v, nothing as g, html as n } from "lit";
 import { property as a, state as p, customElement as f } from "lit/decorators.js";
-import { h as b, r as h, p as m, f as y } from "../../chunks/premium.css-9I4kHrsl.js";
-var w = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, t = (e, o, c, n) => {
-  for (var i = n > 1 ? void 0 : n ? _(o, c) : o, l = e.length - 1, d; l >= 0; l--)
-    (d = e[l]) && (i = (n ? d(o, c, i) : d(i)) || i);
-  return n && i && w(o, c, i), i;
+import { h as b, r as h, p as m, f as y } from "../../chunks/premium.css-DHekUEUt.js";
+var w = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, t = (e, o, c, s) => {
+  for (var i = s > 1 ? void 0 : s ? _(o, c) : o, l = e.length - 1, d; l >= 0; l--)
+    (d = e[l]) && (i = (s ? d(o, c, i) : d(i)) || i);
+  return s && i && w(o, c, i), i;
 };
 let r = class extends v {
   constructor() {
@@ -51,7 +51,7 @@ let r = class extends v {
   }
   render() {
     const e = Object.entries(this.details);
-    return s`
+    return n`
       <div
         class="card ${this.severity === "critical" ? "critical" : ""}"
         role="alertdialog"
@@ -66,11 +66,11 @@ let r = class extends v {
           </span>
         </div>
-        ${this.description ? s`<div class="description">${this.description}</div>` : g}
+        ${this.description ? n`<div class="description">${this.description}</div>` : g}
-        ${e.length > 0 ? s`
+        ${e.length > 0 ? n`
           <div class="details" role="list" aria-label="Action details">
-            ${e.map(([o, c]) => s`
+            ${e.map(([o, c]) => n`
               <div class="detail-row" role="listitem">
                 <span class="detail-key">${o}</span>
                 <span class="detail-value">${c}</span>
@@ -79,7 +79,7 @@ let r = class extends v {
           </div>
         ` : g}
-        ${this._remaining > 0 ? s`
+        ${this._remaining > 0 ? n`
           <div class="countdown" aria-live="polite">
             Auto-confirming in <span class="countdown-num">${this._remaining}s</span>
           </div>
@@ -116,7 +116,7 @@ r.styles = [b, h, m, y, u`
     }
     .card.critical {
       border-color: var(--cg-color-status-error-text-default);
-      animation: pulse-border 2s ease-in-out infinite;
+      animation: pulse-border var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-in-out) infinite;
     }
     /* ── Header ── */
@@ -155,7 +155,7 @@ r.styles = [b, h, m, y, u`
     }
     .severity.high {
       background: var(--cg-color-status-error-background-default);
-      color: var(--cg-color-chart-5);
+      color: var(--cg-color-status-error-text-default);
     }
     .severity.critical {
       background: var(--cg-color-status-error-background-default);
@@ -216,6 +216,7 @@ r.styles = [b, h, m, y, u`
     }
     button {
       flex: 1;
+      min-height: var(--cg-component-button-height-md);
       padding: var(--cg-spacing-8) var(--cg-spacing-16);
       border-radius: var(--cg-border-radius-100);
       font-size: var(--cg-font-size-sm);
@@ -229,7 +230,7 @@ r.styles = [b, h, m, y, u`
     }
     button:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-color-focus-ring);
     }
     button:active {
       transform: scale(0.97);

package/dist/components/ai-action-preview/ai-action-preview.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ai-action-preview.js","sources":["../../../src/components/ai-action-preview/ai-action-preview.ts"],"sourcesContent":["/*\n @element ai-action-preview\n * Confirmation card for dangerous or irreversible AI actions with severity badge and optional countdown.\n \n @example\n * ```html\n * <ai-action-preview\n * heading=\"Delete training data\"\n * severity=\"critical\"\n * .details=${{Dataset: 'prod-v2', Rows: '14,200'}}\n * countdown=\"10\"\n * ></ai-action-preview>\n * ```\n \n @fires {CustomEvent<{action: string, details: Record<string,string>}>} ai-action-confirm - User confirmed\n * @fires {CustomEvent<{action: string}>} ai-action-cancel - User cancelled\n \n @cssprop [--cg-brand-ai-accent=#dfff61] - Confirm button and focus ring color\n * @cssprop [--cg-red-400=#f87171] - Critical severity border and pulse\n /\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, pulseKeyframes, fadeSlideInKeyframes } from '../../styles/index.js';\n\ntype Severity = 'low' \| 'medium' \| 'high' \| 'critical';\n\n@customElement('ai-action-preview')\nexport class AiActionPreview extends LitElement {\n static override styles = [hostBlock, reducedMotion, pulseKeyframes, fadeSlideInKeyframes, css`\n :host {\n animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n }\n\n .card {\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-16);\n position: relative;\n overflow: hidden;\n }\n .card.critical {\n border-color: var(--cg-color-status-error-text-default);\n animation: pulse-border 2s ease-in-out infinite;\n }\n\n / ── Header ── /\n .header {\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-8);\n margin-bottom: var(--cg-spacing-16);\n }\n .title {\n font-size: var(--cg-font-size-base);\n font-weight: var(--cg-font-weight-bold);\n color: var(--cg-color-surface-base-text);\n flex: 1;\n }\n\n / ── Severity badge ── /\n .severity {\n display: inline-flex;\n align-items: center;\n gap: var(--cg-spacing-4);\n padding: var(--cg-spacing-2) var(--cg-spacing-8);\n border-radius: var(--cg-border-radius-full);\n font-size: var(--cg-font-size-xs);\n font-weight: var(--cg-font-weight-bold);\n text-transform: uppercase;\n letter-spacing: var(--cg-letter-spacing-wide);\n }\n .severity.low {\n background: var(--cg-color-status-success-background-default);\n color: var(--cg-color-status-success-text-default);\n }\n .severity.medium {\n background: var(--cg-color-status-warning-background-default);\n color: var(--cg-color-status-warning-text-default);\n }\n .severity.high {\n background: var(--cg-color-status-error-background-default);\n color: var(--cg-color-chart-5);\n }\n .severity.critical {\n background: var(--cg-color-status-error-background-default);\n color: var(--cg-color-status-error-text-default);\n }\n\n / ── Description ── /\n .description {\n font-size: var(--cg-font-size-sm);\n color: var(--cg-color-input-text-placeholder);\n line-height: 1.5;\n margin-bottom: var(--cg-spacing-16);\n }\n\n / ── Details key-value list ── /\n .details {\n display: flex;\n flex-direction: column;\n gap: var(--cg-spacing-8);\n margin-bottom: var(--cg-spacing-16);\n padding: var(--cg-spacing-12);\n background: var(--cg-color-surface-base-background);\n border-radius: var(--cg-border-radius-100);\n }\n .detail-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: var(--cg-font-size-sm);\n }\n .detail-key {\n color: var(--cg-color-input-text-placeholder);\n font-weight: var(--cg-font-weight-medium);\n }\n .detail-value {\n color: var(--cg-color-surface-base-text);\n font-weight: var(--cg-font-weight-semibold);\n }\n\n / ── Countdown ── /\n .countdown {\n text-align: center;\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-input-text-placeholder);\n margin-bottom: var(--cg-spacing-12);\n }\n .countdown-num {\n font-weight: var(--cg-font-weight-bold);\n color: var(--cg-color-surface-base-text);\n }\n\n / ── Actions ── */\n .actions {\n padding-top: var(--cg-spacing-12);\n border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n display: flex;\n gap: var(--cg-spacing-8);\n }\n button {\n flex: 1;\n padding: var(--cg-spacing-8) var(--cg-spacing-16);\n border-radius: var(--cg-border-radius-100);\n font-size: var(--cg-font-size-sm);\n font-weight: var(--cg-font-weight-semibold);\n cursor: pointer;\n transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n filter var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n border: none;\n }\n button:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n }\n button:active {\n transform: scale(0.97);\n }\n .btn-cancel {\n background: var(--cg-color-surface-container-background);\n color: var(--cg-color-surface-base-text);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n }\n .btn-cancel:hover { background: var(--cg-color-surface-cards-border); }\n .btn-confirm {\n background: var(--cg-color-action-primary-background-default);\n color: var(--cg-color-surface-base-background);\n }\n .btn-confirm:hover { filter: brightness(0.9); }\n .btn-confirm.critical {\n background: var(--cg-color-status-error-text-default);\n color: var(--cg-color-surface-base-text);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .card.critical { animation: none; }\n }\n\n @keyframes pulse-border {\n 0%, 100% { border-color: var(--cg-color-status-error-text-default); }\n 50% { border-color: var(--cg-color-status-error-border-default); }\n }\n `];\n @property({ type: String }) heading = '';\n @property({ type: String }) description = '';\n @property({ type: String }) action = '';\n @property({ type: String }) severity: Severity = 'low';\n @property({ attribute: false }) details: Record<string, string> = {};\n @property({ type: String }) confirmLabel = 'Confirm';\n @property({ type: String }) cancelLabel = 'Cancel';\n @property({ type: Number }) countdown = 0;\n\n @state() private _remaining = 0;\n private _timer?: ReturnType<typeof setInterval> \| undefined;\n\n override connectedCallback() {\n super.connectedCallback();\n this._startCountdown();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this._clearTimer();\n }\n\n override updated(changed: Map<string, unknown>) {\n if (changed.has('countdown')) this._startCountdown();\n }\n\n private _clearTimer() {\n if (this._timer !== undefined) { clearInterval(this._timer); this._timer = undefined; }\n }\n\n private _startCountdown() {\n this._clearTimer();\n if (this.countdown > 0) {\n this._remaining = this.countdown;\n this._timer = setInterval(() => {\n this._remaining--;\n if (this._remaining <= 0) {\n this._clearTimer();\n this._handleConfirm();\n }\n }, 1000);\n }\n }\n\n private _confirmed = false;\n\n private _handleConfirm() {\n if (this._confirmed) return; // Guard double-fire\n this._confirmed = true;\n this._clearTimer();\n this.dispatchEvent(new CustomEvent('ai-action-confirm', {\n bubbles: true, composed: true,\n detail: { action: this.action, details: this.details },\n }));\n }\n\n private _handleCancel() {\n this._clearTimer();\n this.dispatchEvent(new CustomEvent('ai-action-cancel', {\n bubbles: true, composed: true,\n detail: { action: this.action },\n }));\n }\n\n private _severityIcon(): string {\n const icons: Record<Severity, string> = {\n low: '\\u2713', medium: '\\u26A0', high: '\\u26A0', critical: '\\u2716',\n };\n return icons[this.severity];\n }\n\n override render() {\n const entries = Object.entries(this.details);\n return html`\n <div\n class=\"card ${this.severity === 'critical' ? 'critical' : ''}\"\n role=\"alertdialog\"\n aria-label=\"Action preview: ${this.heading}\"\n tabindex=\"0\"\n >\n <div class=\"header\">\n <span class=\"title\">${this.heading}</span>\n <span class=\"severity ${this.severity}\" aria-label=\"Severity: ${this.severity}\">\n <span aria-hidden=\"true\">${this._severityIcon()}</span>\n ${this.severity}\n </span>\n </div>\n\n ${this.description ? html`<div class=\"description\">${this.description}</div>` : nothing}\n\n ${entries.length > 0 ? html`\n <div class=\"details\" role=\"list\" aria-label=\"Action details\">\n ${entries.map(([k, v]) => html`\n <div class=\"detail-row\" role=\"listitem\">\n <span class=\"detail-key\">${k}</span>\n <span class=\"detail-value\">${v}</span>\n </div>\n `)}\n </div>\n ` : nothing}\n\n ${this._remaining > 0 ? html`\n <div class=\"countdown\" aria-live=\"polite\">\n Auto-confirming in <span class=\"countdown-num\">${this._remaining}s</span>\n </div>\n ` : nothing}\n\n <div class=\"actions\">\n <button\n class=\"btn-cancel\"\n @click=${this._handleCancel}\n aria-label=\"${this.cancelLabel}\"\n >${this.cancelLabel}</button>\n <button\n class=\"btn-confirm ${this.severity === 'critical' ? 'critical' : ''}\"\n @click=${this._handleConfirm}\n aria-label=\"${this.confirmLabel}\"\n >${this.confirmLabel}</button>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ai-action-preview': AiActionPreview;\n }\n}\n"],"names":["AiActionPreview","LitElement","changed","entries","html","nothing","k","v","hostBlock","reducedMotion","pulseKeyframes","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"ai-action-preview.js","sources":["../../../src/components/ai-action-preview/ai-action-preview.ts"],"sourcesContent":["/*\n @element ai-action-preview\n * Confirmation card for dangerous or irreversible AI actions with severity badge and optional countdown.\n \n @example\n * ```html\n * <ai-action-preview\n * heading=\"Delete training data\"\n * severity=\"critical\"\n * .details=${{Dataset: 'prod-v2', Rows: '14,200'}}\n * countdown=\"10\"\n * ></ai-action-preview>\n * ```\n \n @fires {CustomEvent<{action: string, details: Record<string,string>}>} ai-action-confirm - User confirmed\n * @fires {CustomEvent<{action: string}>} ai-action-cancel - User cancelled\n \n @cssprop [--cg-brand-ai-accent=#dfff61] - Confirm button and focus ring color\n * @cssprop [--cg-red-400=#f87171] - Critical severity border and pulse\n /\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, pulseKeyframes, fadeSlideInKeyframes } from '../../styles/index.js';\n\ntype Severity = 'low' \| 'medium' \| 'high' \| 'critical';\n\n@customElement('ai-action-preview')\nexport class AiActionPreview extends LitElement {\n static override styles = [hostBlock, reducedMotion, pulseKeyframes, fadeSlideInKeyframes, css`\n :host {\n animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n }\n\n .card {\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-16);\n position: relative;\n overflow: hidden;\n }\n .card.critical {\n border-color: var(--cg-color-status-error-text-default);\n animation: pulse-border var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-in-out) infinite;\n }\n\n / ── Header ── /\n .header {\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-8);\n margin-bottom: var(--cg-spacing-16);\n }\n .title {\n font-size: var(--cg-font-size-base);\n font-weight: var(--cg-font-weight-bold);\n color: var(--cg-color-surface-base-text);\n flex: 1;\n }\n\n / ── Severity badge ── /\n .severity {\n display: inline-flex;\n align-items: center;\n gap: var(--cg-spacing-4);\n padding: var(--cg-spacing-2) var(--cg-spacing-8);\n border-radius: var(--cg-border-radius-full);\n font-size: var(--cg-font-size-xs);\n font-weight: var(--cg-font-weight-bold);\n text-transform: uppercase;\n letter-spacing: var(--cg-letter-spacing-wide);\n }\n .severity.low {\n background: var(--cg-color-status-success-background-default);\n color: var(--cg-color-status-success-text-default);\n }\n .severity.medium {\n background: var(--cg-color-status-warning-background-default);\n color: var(--cg-color-status-warning-text-default);\n }\n .severity.high {\n background: var(--cg-color-status-error-background-default);\n color: var(--cg-color-status-error-text-default);\n }\n .severity.critical {\n background: var(--cg-color-status-error-background-default);\n color: var(--cg-color-status-error-text-default);\n }\n\n / ── Description ── /\n .description {\n font-size: var(--cg-font-size-sm);\n color: var(--cg-color-input-text-placeholder);\n line-height: 1.5;\n margin-bottom: var(--cg-spacing-16);\n }\n\n / ── Details key-value list ── /\n .details {\n display: flex;\n flex-direction: column;\n gap: var(--cg-spacing-8);\n margin-bottom: var(--cg-spacing-16);\n padding: var(--cg-spacing-12);\n background: var(--cg-color-surface-base-background);\n border-radius: var(--cg-border-radius-100);\n }\n .detail-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: var(--cg-font-size-sm);\n }\n .detail-key {\n color: var(--cg-color-input-text-placeholder);\n font-weight: var(--cg-font-weight-medium);\n }\n .detail-value {\n color: var(--cg-color-surface-base-text);\n font-weight: var(--cg-font-weight-semibold);\n }\n\n / ── Countdown ── /\n .countdown {\n text-align: center;\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-input-text-placeholder);\n margin-bottom: var(--cg-spacing-12);\n }\n .countdown-num {\n font-weight: var(--cg-font-weight-bold);\n color: var(--cg-color-surface-base-text);\n }\n\n / ── Actions ── */\n .actions {\n padding-top: var(--cg-spacing-12);\n border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n display: flex;\n gap: var(--cg-spacing-8);\n }\n button {\n flex: 1;\n min-height: var(--cg-component-button-height-md);\n padding: var(--cg-spacing-8) var(--cg-spacing-16);\n border-radius: var(--cg-border-radius-100);\n font-size: var(--cg-font-size-sm);\n font-weight: var(--cg-font-weight-semibold);\n cursor: pointer;\n transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n filter var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n border: none;\n }\n button:focus-visible {\n outline: none;\n box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-color-focus-ring);\n }\n button:active {\n transform: scale(0.97);\n }\n .btn-cancel {\n background: var(--cg-color-surface-container-background);\n color: var(--cg-color-surface-base-text);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n }\n .btn-cancel:hover { background: var(--cg-color-surface-cards-border); }\n .btn-confirm {\n background: var(--cg-color-action-primary-background-default);\n color: var(--cg-color-surface-base-background);\n }\n .btn-confirm:hover { filter: brightness(0.9); }\n .btn-confirm.critical {\n background: var(--cg-color-status-error-text-default);\n color: var(--cg-color-surface-base-text);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .card.critical { animation: none; }\n }\n\n @keyframes pulse-border {\n 0%, 100% { border-color: var(--cg-color-status-error-text-default); }\n 50% { border-color: var(--cg-color-status-error-border-default); }\n }\n `];\n @property({ type: String }) heading = '';\n @property({ type: String }) description = '';\n @property({ type: String }) action = '';\n @property({ type: String }) severity: Severity = 'low';\n @property({ attribute: false }) details: Record<string, string> = {};\n @property({ type: String }) confirmLabel = 'Confirm';\n @property({ type: String }) cancelLabel = 'Cancel';\n @property({ type: Number }) countdown = 0;\n\n @state() private _remaining = 0;\n private _timer?: ReturnType<typeof setInterval> \| undefined;\n\n override connectedCallback() {\n super.connectedCallback();\n this._startCountdown();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this._clearTimer();\n }\n\n override updated(changed: Map<string, unknown>) {\n if (changed.has('countdown')) this._startCountdown();\n }\n\n private _clearTimer() {\n if (this._timer !== undefined) { clearInterval(this._timer); this._timer = undefined; }\n }\n\n private _startCountdown() {\n this._clearTimer();\n if (this.countdown > 0) {\n this._remaining = this.countdown;\n this._timer = setInterval(() => {\n this._remaining--;\n if (this._remaining <= 0) {\n this._clearTimer();\n this._handleConfirm();\n }\n }, 1000);\n }\n }\n\n private _confirmed = false;\n\n private _handleConfirm() {\n if (this._confirmed) return; // Guard double-fire\n this._confirmed = true;\n this._clearTimer();\n this.dispatchEvent(new CustomEvent('ai-action-confirm', {\n bubbles: true, composed: true,\n detail: { action: this.action, details: this.details },\n }));\n }\n\n private _handleCancel() {\n this._clearTimer();\n this.dispatchEvent(new CustomEvent('ai-action-cancel', {\n bubbles: true, composed: true,\n detail: { action: this.action },\n }));\n }\n\n private _severityIcon(): string {\n const icons: Record<Severity, string> = {\n low: '\\u2713', medium: '\\u26A0', high: '\\u26A0', critical: '\\u2716',\n };\n return icons[this.severity];\n }\n\n override render() {\n const entries = Object.entries(this.details);\n return html`\n <div\n class=\"card ${this.severity === 'critical' ? 'critical' : ''}\"\n role=\"alertdialog\"\n aria-label=\"Action preview: ${this.heading}\"\n tabindex=\"0\"\n >\n <div class=\"header\">\n <span class=\"title\">${this.heading}</span>\n <span class=\"severity ${this.severity}\" aria-label=\"Severity: ${this.severity}\">\n <span aria-hidden=\"true\">${this._severityIcon()}</span>\n ${this.severity}\n </span>\n </div>\n\n ${this.description ? html`<div class=\"description\">${this.description}</div>` : nothing}\n\n ${entries.length > 0 ? html`\n <div class=\"details\" role=\"list\" aria-label=\"Action details\">\n ${entries.map(([k, v]) => html`\n <div class=\"detail-row\" role=\"listitem\">\n <span class=\"detail-key\">${k}</span>\n <span class=\"detail-value\">${v}</span>\n </div>\n `)}\n </div>\n ` : nothing}\n\n ${this._remaining > 0 ? html`\n <div class=\"countdown\" aria-live=\"polite\">\n Auto-confirming in <span class=\"countdown-num\">${this._remaining}s</span>\n </div>\n ` : nothing}\n\n <div class=\"actions\">\n <button\n class=\"btn-cancel\"\n @click=${this._handleCancel}\n aria-label=\"${this.cancelLabel}\"\n >${this.cancelLabel}</button>\n <button\n class=\"btn-confirm ${this.severity === 'critical' ? 'critical' : ''}\"\n @click=${this._handleConfirm}\n aria-label=\"${this.confirmLabel}\"\n >${this.confirmLabel}</button>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ai-action-preview': AiActionPreview;\n }\n}\n"],"names":["AiActionPreview","LitElement","changed","entries","html","nothing","k","v","hostBlock","reducedMotion","pulseKeyframes","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-agent-card/ai-agent-card.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css as h, LitElement as p, nothing as c, html as e } from "lit";
 import { property as d, customElement as f } from "lit/decorators.js";
-import { h as u, r as v, f as b } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as u, r as v, f as b } from "../../chunks/premium.css-DHekUEUt.js";
 var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (a, s, g, l) => {
   for (var r = l > 1 ? void 0 : l ? y(s, g) : s, o = a.length - 1, n; o >= 0; o--)
     (n = a[o]) && (r = (l ? n(s, g, r) : n(r)) || r);

package/dist/components/ai-agent-steps/ai-agent-steps.d.ts CHANGED Viewed

@@ -1,48 +1,35 @@
 import { LitElement, nothing } from 'lit';
-/** Optional classification used to pick the completed-step icon. */
-export type StepKind = 'llm' | 'tool' | 'retrieval' | 'decision';
 /** Step definition for ai-agent-steps. */
 export interface AgentStep {
     label: string;
     status: 'pending' | 'loading' | 'complete' | 'error';
     detail?: string;
-    /** Optional duration in ms — rendered right-aligned for completed steps. */
-    duration?: number;
-    /** Optional step kind — drives the icon for completed steps. */
-    kind?: StepKind;
 }
 /**
- * <ai-agent-steps> — Live agent task feed. Status icons (pending / running /
- * complete / error), shimmering label on the active step, connecting thread
- * line under the icons, optional per-step duration and kind (LLM call / tool
- * call / retrieval / decision). Modeled on LangGraph / Langfuse trace
- * viewers and the Cursor / Claude Code agent step lists.
+ * <ai-agent-steps> — Live task feed showing AI agent operations in progress.
  *
  * @example
  * ```html
  * <ai-agent-steps
  *   .steps=${[
- *     { label: 'Search the web',     status: 'complete', duration: 1240, kind: 'tool' },
- *     { label: 'Read 3 results',     status: 'complete', duration: 880,  kind: 'retrieval' },
- *     { label: 'Analyse content',    status: 'loading' },
- *     { label: 'Generate summary',   status: 'pending',  kind: 'llm' },
+ *     { label: 'Searching the web', status: 'complete' },
+ *     { label: 'Reading 3 results', status: 'complete' },
+ *     { label: 'Analyzing content', status: 'loading' },
+ *     { label: 'Generating summary', status: 'pending' },
  *   ]}
  * ></ai-agent-steps>
  * ```
  *
- * @fires {CustomEvent<{index: number, step: AgentStep}>} ai-step-click - Completed/errored step activated
+ * @fires {CustomEvent<{index: number}>} ai-step-click - When a completed step is clicked
  */
 export declare class AiAgentSteps extends LitElement {
     static styles: import('lit').CSSResult[];
-    /** Steps array — each with label, status, optional detail / duration / kind. */
+    /** Steps array — each with label, status, and optional detail */
     steps: AgentStep[];
-    /** Wrap in a card container. */
+    /** Wrap in a card container */
     contained: boolean;
-    private _isInteractive;
-    private _formatDuration;
     private _handleStepClick;
     private _renderStatusIcon;
-    private _renderKindIcon;
     render(): import('lit').TemplateResult<1> | typeof nothing;
 }
 declare global {

package/dist/components/ai-agent-steps/ai-agent-steps.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ai-agent-steps.d.ts","sourceRoot":"","sources":["../../../src/components/ai-agent-steps/ai-agent-steps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,~~EAAO~~,MAAM,KAAK,CAAC;~~AAI1D~~,~~oEAAoE;AACpE,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,CAAC;AAEjE,~~0CAA0C;AAC1C,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;~~IAChB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gEAAgE;IAChE,IAAI,CAAC,EAAE,QAAQ,CAAC;~~CACjB;AAED~~;;;;;;;;;;;;;;;;;;;;GAoBG~~;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,~~4BAuMnB~~;IAEH,~~gFAAgF~~;~~IACrD~~,KAAK,EAAE,SAAS,EAAE,CAAM;IAEnD~~,gCAAgC~~;~~IACY~~,SAAS,UAAS;~~IAI9D~~,OAAO,CAAC,~~cAAc;IAItB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,~~gBAAgB;~~IAWxB~~,OAAO,CAAC,iBAAiB;~~IAczB~~,~~OAAO,CAAC,eAAe;IAoBd,~~MAAM;~~CAiDhB~~;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,gBAAgB,EAAE,YAAY,CAAC;KAAE;CACpE"}
1	+ {"version":3,"file":"ai-agent-steps.d.ts","sourceRoot":"","sources":["../../../src/components/ai-agent-steps/ai-agent-steps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAIrD,0CAA0C;AAC1C,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BA+KnB;IAEH,iEAAiE;IACtC,KAAK,EAAE,SAAS,EAAE,CAAM;IAEnD,+BAA+B;IACa,SAAS,UAAS;IAE9D,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,iBAAiB;IAahB,MAAM;CAwBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,gBAAgB,EAAE,YAAY,CAAC;KAAE;CACpE"}