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-webhook-config/ai-webhook-config.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ai-webhook-config.js","sources":["../../../src/components/ai-webhook-config/ai-webhook-config.ts"],"sourcesContent":["/*\n @element ai-webhook-config\n * Webhook endpoint management — Stripe / Svix style. Composed entirely\n * from design-system primitives:\n * • <cg-input> for the URL field (HTTPS validation)\n * • <cg-button> for Add / Cancel / Create / Test / Delete actions\n * • <cg-switch> for the on/off toggle\n * • <cg-chip> for selectable events in the form + event tags on rows\n * • <cg-badge> for the last-delivery HTTP status code (success/warning/danger)\n * Lists configured webhooks with URL, event chips, last delivery status\n * (code + retries + relative time), test + delete actions, and an inline\n * Add form with HTTPS-validated input + selectable event picker.\n \n @example\n * ```html\n * <ai-webhook-config\n * .webhooks=${[{ id: 'wh1', url: 'https://example.com/hook', events: ['model.complete'], active: true,\n * lastDelivery: { status: 200, at: Date.now() - 3600000 } }]}\n * .availableEvents=${['model.complete', 'model.error', 'usage.limit']}\n * ></ai-webhook-config>\n * ```\n \n @prop {WebhookEntry[]} webhooks - Configured webhook entries\n * @prop {string[]} availableEvents - Event types available for subscription\n \n @fires {CustomEvent<{url, events}>} ai-webhook-create\n * @fires {CustomEvent<{id, active}>} ai-webhook-toggle\n * @fires {CustomEvent<{id}>} ai-webhook-delete\n * @fires {CustomEvent<{id, url}>} ai-webhook-test\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-button/cg-button.js';\nimport '../cg-input/cg-input.js';\nimport '../cg-switch/cg-switch.js';\nimport '../cg-chip/cg-chip.js';\nimport '../cg-badge/cg-badge.js';\n\nexport interface WebhookDelivery {\n /* HTTP status code from the last delivery attempt. /\n status: number;\n /* ISO date or epoch ms of the last attempt. /\n at: string \| number;\n /* Number of retries that preceded the final result. /\n retries?: number;\n}\n\nexport interface WebhookEntry {\n id: string;\n url: string;\n events: string[];\n active: boolean;\n /* Stripe / Svix-style: most recent delivery result. /\n lastDelivery?: WebhookDelivery;\n /* Auto-disabled after consecutive failures. /\n disabled?: boolean;\n /* @deprecated use lastDelivery instead /\n lastTriggered?: string;\n}\n\n@customElement('ai-webhook-config')\nexport class AiWebhookConfig extends LitElement {\n static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n :host {\n display: block;\n background: var(--cg-color-surface-cards-background);\n color: var(--cg-color-surface-base-text);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n border-radius: var(--cg-border-radius-150);\n box-shadow: var(--cg-elevation-1);\n padding: var(--cg-spacing-20);\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 justify-content: space-between;\n align-items: center;\n gap: var(--cg-spacing-12);\n padding-bottom: var(--cg-spacing-16);\n border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n margin-bottom: var(--cg-spacing-16);\n }\n h3 {\n font-size: var(--cg-font-size-sm);\n font-weight: var(--cg-font-weight-semibold);\n margin: 0;\n }\n\n / ── Add-webhook form ── /\n .form {\n display: flex;\n flex-direction: column;\n gap: var(--cg-spacing-12);\n padding: var(--cg-spacing-16);\n background: var(--cg-overlay-dark-subtle);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n border-radius: var(--cg-border-radius-100);\n margin-bottom: var(--cg-spacing-12);\n }\n .form-events {\n display: flex;\n flex-wrap: wrap;\n gap: var(--cg-spacing-6);\n }\n .form-events-label {\n width: 100%;\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-input-text-placeholder);\n letter-spacing: var(--cg-letter-spacing-wide);\n text-transform: uppercase;\n font-weight: var(--cg-font-weight-bold);\n }\n .form-actions {\n display: flex;\n gap: var(--cg-spacing-8);\n justify-content: flex-end;\n }\n\n / ── Webhook list ── /\n .webhook-list {\n display: flex;\n flex-direction: column;\n gap: var(--cg-spacing-8);\n }\n\n .webhook-item {\n padding: var(--cg-spacing-16);\n background: var(--cg-color-surface-cards-emphasis);\n border-radius: var(--cg-border-radius-100);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n display: flex;\n flex-direction: column;\n gap: var(--cg-spacing-8);\n }\n .webhook-item.is-disabled { opacity: 0.65; }\n\n .webhook-top {\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-12);\n }\n .webhook-url {\n flex: 1;\n min-width: 0;\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 overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .webhook-events {\n display: flex;\n flex-wrap: wrap;\n gap: var(--cg-spacing-4);\n }\n\n / ── Footer (last delivery + actions) ── /\n .webhook-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--cg-spacing-12);\n flex-wrap: wrap;\n }\n\n .last-delivery {\n display: inline-flex;\n align-items: center;\n gap: var(--cg-spacing-8);\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-input-text-placeholder);\n font-variant-numeric: tabular-nums;\n }\n .last-delivery cg-badge {\n font-variant-numeric: tabular-nums;\n }\n .delivery-retries {\n color: var(--cg-color-status-warning-text-default);\n font-weight: var(--cg-font-weight-medium);\n }\n\n .webhook-actions {\n display: flex;\n gap: var(--cg-spacing-6);\n flex-shrink: 0;\n }\n\n .empty {\n text-align: center;\n padding: var(--cg-spacing-32);\n color: var(--cg-color-input-text-placeholder);\n font-size: var(--cg-font-size-sm);\n }\n `];\n\n @property({ type: Array }) webhooks: WebhookEntry[] = [];\n @property({ type: Array }) availableEvents: string[] = [];\n\n @state() private _showForm = false;\n @state() private _newUrl = '';\n @state() private _selectedEvents = new Set<string>();\n @state() private _urlError = '';\n\n // ─── Form lifecycle ─────────────────────────────────────────────────────\n\n private _toggleForm(): void {\n this._showForm = !this._showForm;\n this._newUrl = '';\n this._urlError = '';\n this._selectedEvents = new Set();\n }\n\n private _onUrlInput(e: Event): void {\n const detail = (e as CustomEvent<{ value: string }>).detail;\n this._newUrl = detail?.value ?? (e.target as HTMLInputElement).value ?? '';\n this._urlError = '';\n }\n\n private _toggleEvent(evt: string): void {\n const next = new Set(this._selectedEvents);\n if (next.has(evt)) next.delete(evt); else next.add(evt);\n this._selectedEvents = next;\n }\n\n private _onCreate(): void {\n if (!this._newUrl) {\n this._urlError = 'URL is required';\n return;\n }\n if (!/^https:\\/\\//i.test(this._newUrl)) {\n this._urlError = 'URL must use HTTPS';\n return;\n }\n this.dispatchEvent(new CustomEvent('ai-webhook-create', {\n bubbles: true, composed: true,\n detail: { url: this._newUrl, events: [...this._selectedEvents] },\n }));\n this._toggleForm();\n }\n\n // ─── Per-webhook handlers ───────────────────────────────────────────────\n\n private _onToggle(wh: WebhookEntry, e: Event): void {\n const detail = (e as CustomEvent<{ checked: boolean }>).detail;\n this.dispatchEvent(new CustomEvent('ai-webhook-toggle', {\n bubbles: true, composed: true,\n detail: { id: wh.id, active: detail?.checked ?? !wh.active },\n }));\n }\n\n private _onDelete(wh: WebhookEntry): void {\n this.dispatchEvent(new CustomEvent('ai-webhook-delete', {\n bubbles: true, composed: true,\n detail: { id: wh.id },\n }));\n }\n\n private _onTest(wh: WebhookEntry): void {\n this.dispatchEvent(new CustomEvent('ai-webhook-test', {\n bubbles: true, composed: true,\n detail: { id: wh.id, url: wh.url },\n }));\n }\n\n // ─── Helpers ────────────────────────────────────────────────────────────\n\n private _deliveryVariant(status: number): 'success' \| 'warning' \| 'danger' \| 'neutral' {\n if (status >= 200 && status < 300) return 'success';\n if (status >= 400 && status < 500) return 'warning';\n if (status >= 500) return 'danger';\n return 'neutral';\n }\n\n private _relativeTime(input: string \| number): string {\n const date = new Date(input);\n if (isNaN(date.getTime())) return String(input);\n const diffMs = date.getTime() - Date.now();\n const abs = Math.abs(diffMs);\n const min = 60_000, hr = 60 min, day = 24 * hr, week = 7 * day;\n let value: number, unit: Intl.RelativeTimeFormatUnit;\n if (abs < hr) { value = Math.round(diffMs / min); unit = 'minute'; }\n else if (abs < day) { value = Math.round(diffMs / hr); unit = 'hour'; }\n else if (abs < week) { value = Math.round(diffMs / day); unit = 'day'; }\n else { value = Math.round(diffMs / week); unit = 'week'; }\n try { return new Intl.RelativeTimeFormat('en', { numeric: 'auto' }).format(value, unit); }\n catch { return String(input); }\n }\n\n // ─── Render ─────────────────────────────────────────────────────────────\n\n override render() {\n return html`\n <div class=\"header\">\n <h3>Webhooks</h3>\n <cg-button\n variant=${this._showForm ? 'secondary' : 'primary'}\n size=\"sm\"\n @click=${this._toggleForm}\n aria-label=\"${this._showForm ? 'Cancel new webhook' : 'Add webhook'}\"\n >${this._showForm ? 'Cancel' : 'Add webhook'}</cg-button>\n </div>\n\n ${this._showForm ? html`\n <div class=\"form\" role=\"form\" aria-label=\"New webhook\">\n <cg-input\n type=\"url\"\n label=\"Endpoint URL\"\n placeholder=\"https://example.com/webhook\"\n .value=${this._newUrl}\n ?error=${!!this._urlError}\n helper=${this._urlError \|\| 'Must use HTTPS in production.'}\n required\n @cg-input=${this._onUrlInput}\n ></cg-input>\n\n ${this.availableEvents.length ? html`\n <div role=\"group\" aria-label=\"Subscribed events\">\n <span class=\"form-events-label\">Subscribe to events</span>\n <div class=\"form-events\">\n ${this.availableEvents.map(evt => html`\n <cg-chip\n label=${evt}\n size=\"sm\"\n ?selected=${this._selectedEvents.has(evt)}\n @click=${() => this._toggleEvent(evt)}\n ></cg-chip>\n `)}\n </div>\n </div>\n ` : nothing}\n\n <div class=\"form-actions\">\n <cg-button variant=\"tertiary\" size=\"sm\" @click=${this._toggleForm}>\n Cancel\n </cg-button>\n <cg-button variant=\"primary\" size=\"sm\" @click=${this._onCreate}>\n Create webhook\n </cg-button>\n </div>\n </div>\n ` : nothing}\n\n ${this.webhooks.length === 0 ? html`\n <div class=\"empty\" role=\"status\">No webhooks configured yet.</div>\n ` : html`\n <div class=\"webhook-list\" role=\"list\" aria-label=\"Configured webhooks\">\n ${this.webhooks.map(wh => {\n const lastDelivery = wh.lastDelivery;\n return html`\n <div class=\"webhook-item ${wh.disabled ? 'is-disabled' : ''}\" role=\"listitem\">\n <div class=\"webhook-top\">\n <span class=\"webhook-url\" title=${wh.url}>${wh.url}</span>\n <cg-switch\n .checked=${wh.active}\n ?disabled=${wh.disabled}\n aria-label=\"Toggle webhook ${wh.url}\"\n @cg-change=${(e: Event) => this._onToggle(wh, e)}\n ></cg-switch>\n </div>\n\n ${wh.events.length ? html`\n <div class=\"webhook-events\">\n ${wh.events.map(e => html`\n <cg-chip label=${e} size=\"sm\" variant=\"info\"></cg-chip>\n `)}\n </div>\n ` : nothing}\n\n <div class=\"webhook-footer\">\n <div class=\"last-delivery\">\n ${lastDelivery ? html`\n <cg-badge\n variant=${this._deliveryVariant(lastDelivery.status)}\n label=${String(lastDelivery.status)}\n size=\"sm\"\n ></cg-badge>\n <span>${this._relativeTime(lastDelivery.at)}</span>\n ${lastDelivery.retries && lastDelivery.retries > 0 ? html`\n <span class=\"delivery-retries\">· ${lastDelivery.retries} ${lastDelivery.retries === 1 ? 'retry' : 'retries'}</span>\n ` : nothing}\n ` : wh.lastTriggered ? html`\n <span>Last triggered ${wh.lastTriggered}</span>\n ` : html`\n <span>Never triggered</span>\n `}\n </div>\n <div class=\"webhook-actions\">\n <cg-button variant=\"secondary\" size=\"sm\" @click=${() => this._onTest(wh)}>\n Test\n </cg-button>\n <cg-button variant=\"secondary\" size=\"sm\" type=\"danger\" @click=${() => this._onDelete(wh)}>\n Delete\n </cg-button>\n </div>\n </div>\n </div>\n `;\n })}\n </div>\n `}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ai-webhook-config': AiWebhookConfig;\n }\n}\n"],"names":["AiWebhookConfig","LitElement","detail","evt","next","wh","e","status","input","date","diffMs","abs","min","hr","day","week","value","unit","html","nothing","lastDelivery","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;;;;;;AA8DO,IAAMA,IAAN,cAA8BC,EAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GA0IsB,KAAA,WAA2B,CAAA,GAC3B,KAAA,kBAA4B,CAAA,GAE9C,KAAQ,YAAY,IACpB,KAAQ,UAAU,IAClB,KAAQ,sCAAsB,IAAA,GAC9B,KAAQ,YAAY;AAAA,EAAA;AAAA;AAAA,EAIrB,cAAoB;AAC1B,SAAK,YAAY,CAAC,KAAK,WACvB,KAAK,UAAU,IACf,KAAK,YAAY,IACjB,KAAK,sCAAsB,IAAA;AAAA,EAC7B;AAAA,EAEQ,YAAY,GAAgB;AAClC,UAAMC,IAAU,EAAqC;AACrD,SAAK,UAAUA,GAAQ,SAAU,EAAE,OAA4B,SAAS,IACxE,KAAK,YAAY;AAAA,EACnB;AAAA,EAEQ,aAAaC,GAAmB;AACtC,UAAMC,IAAO,IAAI,IAAI,KAAK,eAAe;AACzC,IAAIA,EAAK,IAAID,CAAG,IAAGC,EAAK,OAAOD,CAAG,IAAQC,EAAK,IAAID,CAAG,GACtD,KAAK,kBAAkBC;AAAA,EACzB;AAAA,EAEQ,YAAkB;AACxB,QAAI,CAAC,KAAK,SAAS;AACjB,WAAK,YAAY;AACjB;AAAA,IACF;AACA,QAAI,CAAC,eAAe,KAAK,KAAK,OAAO,GAAG;AACtC,WAAK,YAAY;AACjB;AAAA,IACF;AACA,SAAK,cAAc,IAAI,YAAY,qBAAqB;AAAA,MACtD,SAAS;AAAA,MAAM,UAAU;AAAA,MACzB,QAAQ,EAAE,KAAK,KAAK,SAAS,QAAQ,CAAC,GAAG,KAAK,eAAe,EAAA;AAAA,IAAE,CAChE,CAAC,GACF,KAAK,YAAA;AAAA,EACP;AAAA;AAAA,EAIQ,UAAUC,GAAkBC,GAAgB;AAClD,UAAMJ,IAAUI,EAAwC;AACxD,SAAK,cAAc,IAAI,YAAY,qBAAqB;AAAA,MACtD,SAAS;AAAA,MAAM,UAAU;AAAA,MACzB,QAAQ,EAAE,IAAID,EAAG,IAAI,QAAQH,GAAQ,WAAW,CAACG,EAAG,OAAA;AAAA,IAAO,CAC5D,CAAC;AAAA,EACJ;AAAA,EAEQ,UAAUA,GAAwB;AACxC,SAAK,cAAc,IAAI,YAAY,qBAAqB;AAAA,MACtD,SAAS;AAAA,MAAM,UAAU;AAAA,MACzB,QAAQ,EAAE,IAAIA,EAAG,GAAA;AAAA,IAAG,CACrB,CAAC;AAAA,EACJ;AAAA,EAEQ,QAAQA,GAAwB;AACtC,SAAK,cAAc,IAAI,YAAY,mBAAmB;AAAA,MACpD,SAAS;AAAA,MAAM,UAAU;AAAA,MACzB,QAAQ,EAAE,IAAIA,EAAG,IAAI,KAAKA,EAAG,IAAA;AAAA,IAAI,CAClC,CAAC;AAAA,EACJ;AAAA;AAAA,EAIQ,iBAAiBE,GAA8D;AACrF,WAAIA,KAAU,OAAOA,IAAS,MAAY,YACtCA,KAAU,OAAOA,IAAS,MAAY,YACtCA,KAAU,MAAY,WACnB;AAAA,EACT;AAAA,EAEQ,cAAcC,GAAgC;AACpD,UAAMC,IAAO,IAAI,KAAKD,CAAK;AAC3B,QAAI,MAAMC,EAAK,QAAA,CAAS,EAAG,QAAO,OAAOD,CAAK;AAC9C,UAAME,IAASD,EAAK,QAAA,IAAY,KAAK,IAAA,GAC/BE,IAAM,KAAK,IAAID,CAAM,GACrBE,IAAM,KAAQC,IAAK,KAAKD,GAAKE,IAAM,KAAKD,GAAIE,IAAO,IAAID;AAC7D,QAAIE,GAAeC;AACnB,IAAIN,IAAME,KAAMG,IAAQ,KAAK,MAAMN,IAASE,CAAG,GAAGK,IAAO,YAChDN,IAAMG,KAAOE,IAAQ,KAAK,MAAMN,IAASG,CAAE,GAAGI,IAAO,UACrDN,IAAMI,KAAQC,IAAQ,KAAK,MAAMN,IAASI,CAAG,GAAGG,IAAO,UACzDD,IAAQ,KAAK,MAAMN,IAASK,CAAI,GAAGE,IAAO;AACjD,QAAI;AAAE,aAAO,IAAI,KAAK,mBAAmB,MAAM,EAAE,SAAS,OAAA,CAAQ,EAAE,OAAOD,GAAOC,CAAI;AAAA,IAAG,QACnF;AAAE,aAAO,OAAOT,CAAK;AAAA,IAAG;AAAA,EAChC;AAAA;AAAA,EAIS,SAAS;AAChB,WAAOU;AAAA;AAAA;AAAA;AAAA,oBAIS,KAAK,YAAY,cAAc,SAAS;AAAA;AAAA,mBAEzC,KAAK,WAAW;AAAA,wBACX,KAAK,YAAY,uBAAuB,aAAa;AAAA,WAClE,KAAK,YAAY,WAAW,aAAa;AAAA;AAAA;AAAA,QAG5C,KAAK,YAAYA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMJ,KAAK,OAAO;AAAA,qBACZ,CAAC,CAAC,KAAK,SAAS;AAAA,qBAChB,KAAK,aAAa,+BAA+B;AAAA;AAAA,wBAE9C,KAAK,WAAW;AAAA;AAAA;AAAA,YAG5B,KAAK,gBAAgB,SAASA;AAAA;AAAA;AAAA;AAAA,kBAIxB,KAAK,gBAAgB,IAAI,CAAAf,MAAOe;AAAA;AAAA,4BAEtBf,CAAG;AAAA;AAAA,gCAEC,KAAK,gBAAgB,IAAIA,CAAG,CAAC;AAAA,6BAChC,MAAM,KAAK,aAAaA,CAAG,CAAC;AAAA;AAAA,iBAExC,CAAC;AAAA;AAAA;AAAA,cAGJgB,CAAO;AAAA;AAAA;AAAA,6DAGwC,KAAK,WAAW;AAAA;AAAA;AAAA,4DAGjB,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,UAKhEA,CAAO;AAAA;AAAA,QAET,KAAK,SAAS,WAAW,IAAID;AAAA;AAAA,UAE3BA;AAAA;AAAA,YAEE,KAAK,SAAS,IAAI,CAAAb,MAAM;AACxB,YAAMe,IAAef,EAAG;AACxB,aAAOa;AAAA,yCACsBb,EAAG,WAAW,gBAAgB,EAAE;AAAA;AAAA,oDAErBA,EAAG,GAAG,IAAIA,EAAG,GAAG;AAAA;AAAA,+BAErCA,EAAG,MAAM;AAAA,gCACRA,EAAG,QAAQ;AAAA,iDACMA,EAAG,GAAG;AAAA,iCACtB,CAACC,MAAa,KAAK,UAAUD,GAAIC,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,kBAIlDD,EAAG,OAAO,SAASa;AAAA;AAAA,sBAEfb,EAAG,OAAO,IAAI,CAAAC,MAAKY;AAAA,uCACFZ,CAAC;AAAA,qBACnB,CAAC;AAAA;AAAA,oBAEFa,CAAO;AAAA;AAAA;AAAA;AAAA,sBAILC,IAAeF;AAAA;AAAA,kCAEH,KAAK,iBAAiBE,EAAa,MAAM,CAAC;AAAA,gCAC5C,OAAOA,EAAa,MAAM,CAAC;AAAA;AAAA;AAAA,8BAG7B,KAAK,cAAcA,EAAa,EAAE,CAAC;AAAA,wBACzCA,EAAa,WAAWA,EAAa,UAAU,IAAIF;AAAA,2DAChBE,EAAa,OAAO,IAAIA,EAAa,YAAY,IAAI,UAAU,SAAS;AAAA,0BACzGD,CAAO;AAAA,wBACTd,EAAG,gBAAgBa;AAAA,6CACEb,EAAG,aAAa;AAAA,wBACrCa;AAAA;AAAA,qBAEH;AAAA;AAAA;AAAA,sEAGiD,MAAM,KAAK,QAAQb,CAAE,CAAC;AAAA;AAAA;AAAA,oFAGR,MAAM,KAAK,UAAUA,CAAE,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOlG,CAAC,CAAC;AAAA;AAAA,OAEL;AAAA;AAAA,EAEL;AACF;AAzVaL,EACK,SAAS,CAACqB,GAAWC,GAAeC,GAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAuIzE;AAE0BC,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GA1Id1B,EA0IgB,WAAA,YAAA,CAAA;AACAyB,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GA3Id1B,EA2IgB,WAAA,mBAAA,CAAA;AAEVyB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA7II3B,EA6IM,WAAA,aAAA,CAAA;AACAyB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA9II3B,EA8IM,WAAA,WAAA,CAAA;AACAyB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA/II3B,EA+IM,WAAA,mBAAA,CAAA;AACAyB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAhJI3B,EAgJM,WAAA,aAAA,CAAA;AAhJNA,IAANyB,EAAA;AAAA,EADNG,EAAc,mBAAmB;AAAA,GACrB5B,CAAA;"}
1	+ {"version":3,"file":"ai-webhook-config.js","sources":["../../../src/components/ai-webhook-config/ai-webhook-config.ts"],"sourcesContent":["/*\n @element ai-webhook-config\n * Webhook endpoint management panel. Lists configured webhooks with URL,\n * event tags, on/off toggle, test and delete actions. Includes an \"Add\n * Webhook\" form with URL input and event selection chips.\n \n @example\n * ```html\n * <ai-webhook-config\n * .webhooks=${[{ id: 'wh1', url: 'https://example.com/hook', events: ['model.complete'], active: true }]}\n * .availableEvents=${['model.complete', 'model.error', 'usage.limit']}\n * ></ai-webhook-config>\n * ```\n \n @prop {WebhookEntry[]} webhooks - Array of configured webhook entries\n * @prop {string[]} availableEvents - Event types available for subscription\n \n @fires {CustomEvent<{url: string, events: string[]}>} ai-webhook-create - When a new webhook is created\n * @fires {CustomEvent<{id: string, active: boolean}>} ai-webhook-toggle - When a webhook is toggled on/off\n * @fires {CustomEvent<{id: string}>} ai-webhook-delete - When a webhook is deleted\n * @fires {CustomEvent<{id: string, url: string}>} ai-webhook-test - When a webhook test is triggered\n /\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\nexport interface WebhookEntry {\n id: string;\n url: string;\n events: string[];\n active: boolean;\n lastTriggered?: string;\n}\n\n@customElement('ai-webhook-config')\nexport class AiWebhookConfig extends LitElement {\n static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n :host {\n background: var(--cg-color-surface-base-background);\n color: var(--cg-color-surface-base-text);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n border-radius: var(--cg-border-radius-150);\n padding: var(--cg-spacing-16);\n animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n :host([hidden]) { display: none; }\n\n .header {\n display: flex;\n justify-content: space-between;\n align-items: center;\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-12);\n }\n\n h3 {\n font-size: var(--cg-font-size-sm);\n font-weight: var(--cg-font-weight-semibold);\n margin: 0;\n }\n\n .add-btn {\n background: var(--cg-color-action-primary-background-default);\n color: var(--cg-color-surface-container-background);\n border: none;\n border-radius: var(--cg-border-radius-100);\n padding: var(--cg-spacing-6) var(--cg-spacing-12);\n font-size: var(--cg-font-size-xs);\n font-weight: var(--cg-font-weight-semibold);\n cursor: pointer;\n font-family: inherit;\n transition: filter var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .add-btn:hover {\n filter: brightness(1.1);\n transform: translateY(calc(-1 var(--cg-spacing-1)));\n }\n\n .add-btn:focus-visible {\n outline: var(--cg-outline-width-default) solid var(--cg-overlay-accent-strong);\n outline-offset: var(--cg-outline-offset-default);\n }\n\n .form {\n display: flex;\n flex-direction: column;\n gap: var(--cg-spacing-8);\n padding: var(--cg-spacing-12);\n background: var(--cg-color-surface-inset-background);\n border-radius: var(--cg-border-radius-100);\n margin-bottom: var(--cg-spacing-12);\n }\n\n .form-row {\n display: flex;\n gap: var(--cg-spacing-8);\n }\n\n input[type=\"url\"] {\n flex: 1;\n background: var(--cg-color-surface-base-background);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n border-radius: var(--cg-border-radius-50);\n padding: var(--cg-spacing-6) var(--cg-spacing-8);\n color: var(--cg-color-surface-base-text);\n font-size: var(--cg-font-size-sm);\n font-family: var(--cg-font-family-mono);\n }\n\n input[type=\"url\"]:focus-visible {\n outline: var(--cg-outline-width-default) solid var(--cg-overlay-accent-strong);\n outline-offset: -2px;\n }\n\n .events-select {\n display: flex;\n flex-wrap: wrap;\n gap: var(--cg-spacing-4);\n }\n\n .event-chip {\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 background: transparent;\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n border-radius: var(--cg-border-radius-full);\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-input-text-placeholder);\n cursor: pointer;\n font-family: inherit;\n }\n\n .event-chip:focus-visible {\n outline: var(--cg-outline-width-default) solid var(--cg-overlay-accent-strong);\n outline-offset: var(--cg-outline-offset-default);\n }\n\n .event-chip[aria-pressed=\"true\"] {\n background: var(--cg-overlay-accent-strong);\n border-color: var(--cg-color-surface-base-text);\n color: var(--cg-color-surface-base-text);\n }\n\n .form-actions {\n display: flex;\n gap: var(--cg-spacing-8);\n justify-content: flex-end;\n }\n\n .btn-sm {\n background: transparent;\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n border-radius: var(--cg-border-radius-50);\n padding: var(--cg-spacing-4) var(--cg-spacing-8);\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-input-text-placeholder);\n cursor: pointer;\n font-family: inherit;\n transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .btn-sm:hover {\n border-color: var(--cg-color-surface-base-text);\n color: var(--cg-color-surface-base-text);\n transform: translateY(calc(-1 * var(--cg-spacing-1)));\n }\n\n .btn-sm:focus-visible {\n outline: var(--cg-outline-width-default) solid var(--cg-overlay-accent-strong);\n outline-offset: var(--cg-outline-offset-default);\n }\n\n .btn-sm.primary {\n background: var(--cg-color-action-primary-background-default);\n color: var(--cg-color-surface-container-background);\n border-color: var(--cg-color-surface-base-text);\n font-weight: var(--cg-font-weight-semibold);\n }\n .btn-sm.primary:hover {\n filter: brightness(1.1);\n }\n\n .webhook-list {\n display: flex;\n flex-direction: column;\n gap: var(--cg-spacing-8);\n }\n\n .webhook-item {\n padding: var(--cg-spacing-12);\n background: var(--cg-color-surface-inset-background);\n border-radius: var(--cg-border-radius-100);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n }\n\n .webhook-top {\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-8);\n margin-bottom: var(--cg-spacing-6);\n }\n\n .webhook-url {\n flex: 1;\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 overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .toggle-switch {\n position: relative;\n display: inline-block;\n width: var(--cg-spacing-32);\n height: var(--cg-spacing-16);\n flex-shrink: 0;\n }\n\n .toggle-switch input {\n opacity: 0;\n width: 0;\n height: 0;\n position: absolute;\n }\n\n .toggle-track {\n position: absolute;\n inset: 0;\n background: var(--cg-color-surface-base-background);\n border-radius: var(--cg-border-radius-full);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n cursor: pointer;\n transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n\n .toggle-track::after {\n content: '';\n position: absolute;\n width: var(--cg-spacing-12);\n height: var(--cg-spacing-12);\n border-radius: 50%;\n background: var(--cg-color-input-text-placeholder);\n top: var(--cg-spacing-2);\n left: var(--cg-spacing-2);\n transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n\n .toggle-switch input:checked + .toggle-track {\n background: var(--cg-overlay-accent-strong);\n border-color: var(--cg-color-surface-base-text);\n }\n\n .toggle-switch input:checked + .toggle-track::after {\n transform: translateX(var(--cg-spacing-12));\n background: var(--cg-color-action-primary-background-default);\n }\n\n .toggle-switch input:focus-visible + .toggle-track {\n outline: var(--cg-outline-width-default) solid var(--cg-overlay-accent-strong);\n outline-offset: var(--cg-outline-offset-default);\n }\n\n .webhook-events {\n display: flex;\n flex-wrap: wrap;\n gap: var(--cg-spacing-4);\n margin-bottom: var(--cg-spacing-6);\n }\n\n .event-tag {\n padding: var(--cg-spacing-2) var(--cg-spacing-6);\n background: var(--cg-overlay-accent-medium);\n border-radius: var(--cg-border-radius-50);\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-surface-base-text);\n }\n\n .webhook-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .last-triggered {\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-input-text-placeholder);\n }\n\n .webhook-actions {\n display: flex;\n gap: var(--cg-spacing-4);\n }\n\n .btn-sm.danger {\n color: var(--cg-color-status-error-text-default);\n border-color: var(--cg-color-status-error-text-default);\n }\n .btn-sm.danger:hover {\n background: var(--cg-color-status-error-background-default);\n }\n\n .empty {\n text-align: center;\n padding: var(--cg-spacing-24);\n color: var(--cg-color-input-text-placeholder);\n font-size: var(--cg-font-size-sm);\n }\n\n `];\n\n @property({ type: Array }) webhooks: WebhookEntry[] = [];\n @property({ type: Array }) availableEvents: string[] = [];\n\n @state() private _showForm = false;\n @state() private _newUrl = '';\n @state() private _selectedEvents = new Set<string>();\n\n private _toggleForm(): void {\n this._showForm = !this._showForm;\n this._newUrl = '';\n this._selectedEvents = new Set();\n }\n\n private _toggleEvent(evt: string): void {\n const next = new Set(this._selectedEvents);\n if (next.has(evt)) next.delete(evt); else next.add(evt);\n this._selectedEvents = next;\n }\n\n private _onCreate(): void {\n if (!this._newUrl) return;\n this.dispatchEvent(new CustomEvent('ai-webhook-create', {\n bubbles: true, composed: true,\n detail: { url: this._newUrl, events: [...this._selectedEvents] },\n }));\n this._toggleForm();\n }\n\n private _onToggle(wh: WebhookEntry): void {\n this.dispatchEvent(new CustomEvent('ai-webhook-toggle', {\n bubbles: true, composed: true,\n detail: { id: wh.id, active: !wh.active },\n }));\n }\n\n private _onDelete(wh: WebhookEntry): void {\n this.dispatchEvent(new CustomEvent('ai-webhook-delete', {\n bubbles: true, composed: true,\n detail: { id: wh.id },\n }));\n }\n\n private _onTest(wh: WebhookEntry): void {\n this.dispatchEvent(new CustomEvent('ai-webhook-test', {\n bubbles: true, composed: true,\n detail: { id: wh.id, url: wh.url },\n }));\n }\n\n override render() {\n return html`\n <div class=\"header\">\n <h3>Webhooks</h3>\n <button class=\"add-btn\" @click=${this._toggleForm}\n aria-label=\"${this._showForm ? 'Cancel' : 'Add webhook'}\"\n tabindex=\"0\">\n ${this._showForm ? 'Cancel' : '+ Add Webhook'}\n </button>\n </div>\n ${this._showForm ? html`\n <div class=\"form\" role=\"form\" aria-label=\"New webhook form\">\n <div class=\"form-row\">\n <input type=\"url\" placeholder=\"https://example.com/webhook\"\n .value=${this._newUrl}\n @input=${(e: Event) => { this._newUrl = (e.target as HTMLInputElement).value; }}\n aria-label=\"Webhook URL\" tabindex=\"0\" />\n </div>\n <div class=\"events-select\" role=\"group\" aria-label=\"Select events\">\n ${this.availableEvents.map(evt => html`\n <button class=\"event-chip\"\n aria-pressed=${this._selectedEvents.has(evt) ? 'true' : 'false'}\n @click=${() => this._toggleEvent(evt)}\n tabindex=\"0\">\n ${evt}\n </button>\n `)}\n </div>\n <div class=\"form-actions\">\n <button class=\"btn-sm\" @click=${this._toggleForm} tabindex=\"0\">Cancel</button>\n <button class=\"btn-sm primary\" @click=${this._onCreate} tabindex=\"0\">Create</button>\n </div>\n </div>\n ` : nothing}\n ${this.webhooks.length === 0 ? html`\n <div class=\"empty\" role=\"status\">No webhooks configured.</div>\n ` : html`\n <div class=\"webhook-list\" role=\"list\" aria-label=\"Configured webhooks\">\n ${this.webhooks.map(wh => html`\n <div class=\"webhook-item\" role=\"listitem\">\n <div class=\"webhook-top\">\n <span class=\"webhook-url\">${wh.url}</span>\n <label class=\"toggle-switch\">\n <input type=\"checkbox\" .checked=${wh.active}\n @change=${() => this._onToggle(wh)}\n aria-label=\"Toggle webhook ${wh.url}\" />\n <span class=\"toggle-track\"></span>\n </label>\n </div>\n <div class=\"webhook-events\">\n ${wh.events.map(e => html`<span class=\"event-tag\">${e}</span>`)}\n </div>\n <div class=\"webhook-footer\">\n <span class=\"last-triggered\">\n ${wh.lastTriggered ? `Last triggered: ${wh.lastTriggered}` : 'Never triggered'}\n </span>\n <div class=\"webhook-actions\">\n <button class=\"btn-sm\" @click=${() => this._onTest(wh)}\n aria-label=\"Test webhook\" tabindex=\"0\">Test</button>\n <button class=\"btn-sm danger\" @click=${() => this._onDelete(wh)}\n aria-label=\"Delete webhook\" tabindex=\"0\">Delete</button>\n </div>\n </div>\n </div>\n `)}\n </div>\n `}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ai-webhook-config': AiWebhookConfig;\n }\n}\n"],"names":["AiWebhookConfig","LitElement","evt","next","wh","html","nothing","e","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-workflow-builder/ai-workflow-builder.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css as v, LitElement as h, html as t, nothing as d } from "lit";
 import { property as g, state as u, queryAll as p, customElement as f } from "lit/decorators.js";
-import { h as b, r as w, f as x } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as b, r as w, f as x } from "../../chunks/premium.css-DHekUEUt.js";
 var k = Object.defineProperty, m = Object.getOwnPropertyDescriptor, c = (e, r, o, a) => {
   for (var i = a > 1 ? void 0 : a ? m(r, o) : r, n = e.length - 1, l; n >= 0; n--)
     (l = e[n]) && (i = (a ? l(r, o, i) : l(i)) || i);
@@ -115,7 +115,7 @@ s.styles = [b, w, x, v`
       min-width: var(--cg-spacing-96); cursor: pointer; transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
     .step:hover { border-color: var(--cg-color-input-border-hover); }
-    .step:focus-visible { outline: none; box-shadow: 0 0 0 var(--cg-spacing-2) var(--cg-overlay-accent-strong); outline-offset: var(--cg-outline-offset-default); }
+    .step:focus-visible { outline: none; box-shadow: 0 0 0 var(--cg-spacing-2) var(--cg-color-focus-ring); outline-offset: var(--cg-outline-offset-default); }
     .step:active { transform: scale(var(--cg-interaction-press-scale)); }
     .step.active { border-color: var(--cg-color-surface-base-text); background: var(--cg-overlay-accent-subtle); }
     .step.complete { border-color: var(--cg-color-status-success-text-default); }

package/dist/components/ai-workflow-builder/ai-workflow-builder.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ai-workflow-builder.js","sources":["../../../src/components/ai-workflow-builder/ai-workflow-builder.ts"],"sourcesContent":["/*\n @element ai-workflow-builder\n * Visual agent workflow rendered as a vertical DAG (directed acyclic graph).\n * Each step displays a type icon (start/agent/tool/condition/end), label,\n * description, and status with connecting lines between steps.\n \n @example\n * ```html\n * <ai-workflow-builder heading=\"Support Agent\" .steps=${[\n * { id: '1', label: 'Receive Query', type: 'start', status: 'complete' },\n * { id: '2', label: 'Classify Intent', type: 'agent', status: 'active', description: 'Using GPT-4' },\n * { id: '3', label: 'Search KB', type: 'tool', status: 'pending', next: ['4'] },\n * { id: '4', label: 'Respond', type: 'end', status: 'pending' }\n * ]}></ai-workflow-builder>\n * ```\n \n @prop {WorkflowStep[]} steps - Array of workflow step objects\n * @prop {string} heading - Workflow header title (default 'Workflow')\n \n @fires {CustomEvent<{id: string, label: string, type: string, status: string}>} ai-workflow-step-click - When a step is clicked\n /\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement, queryAll } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\ninterface WorkflowStep {\n id: string;\n label: string;\n type: 'start' \| 'agent' \| 'tool' \| 'condition' \| 'end';\n status?: 'pending' \| 'active' \| 'complete' \| 'error' \| 'skipped';\n description?: string;\n next?: string[]; // IDs of next steps\n}\n\n@customElement('ai-workflow-builder')\nexport class AiWorkflowBuilder extends LitElement {\n static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n :host {\n animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n\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-150); padding: var(--cg-spacing-16); overflow: auto;\n }\n\n .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--cg-spacing-16); }\n .title { font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-bold); color: var(--cg-color-surface-base-text); }\n .step-count { font-size: var(--cg-font-size-xs); color: var(--cg-color-input-text-placeholder); }\n\n .flow { display: flex; flex-direction: column; align-items: center; gap: 0; }\n\n .step-wrapper { display: flex; flex-direction: column; align-items: center; }\n\n .connector { width: var(--cg-spacing-2); height: var(--cg-spacing-20); background: var(--cg-color-surface-cards-border); }\n .connector.active { background: var(--cg-color-action-primary-background-default); }\n\n .step {\n display: flex; align-items: center; gap: var(--cg-spacing-8);\n padding: var(--cg-spacing-8) var(--cg-spacing-16); border-radius: var(--cg-border-radius-100);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n background: var(--cg-color-surface-base-background);\n min-width: var(--cg-spacing-96); cursor: pointer; transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .step:hover { border-color: var(--cg-color-input-border-hover); }\n .step:focus-visible { outline: none; box-shadow: 0 0 0 var(--cg-spacing-2) var(--cg-overlay-accent-strong); outline-offset: var(--cg-outline-offset-default); }\n .step:active { transform: scale(var(--cg-interaction-press-scale)); }\n .step.active { border-color: var(--cg-color-surface-base-text); background: var(--cg-overlay-accent-subtle); }\n .step.complete { border-color: var(--cg-color-status-success-text-default); }\n .step.error { border-color: var(--cg-color-status-error-text-default); }\n .step.skipped { opacity: 0.5; }\n\n .step-icon {\n width: var(--cg-spacing-24); height: var(--cg-spacing-24); border-radius: var(--cg-border-radius-100);\n display: flex; align-items: center; justify-content: center;\n font-size: var(--cg-font-size-xs); flex-shrink: 0;\n }\n .step-icon.start { background: var(--cg-color-status-success-background-default); color: var(--cg-color-status-success-text-default); }\n .step-icon.agent { background: var(--cg-overlay-accent-light); color: var(--cg-color-surface-base-text); }\n .step-icon.tool { background: var(--cg-color-status-info-background-default); color: var(--cg-color-status-info-text-default); }\n .step-icon.condition { background: var(--cg-color-status-warning-background-default); color: var(--cg-color-status-warning-text-default); }\n .step-icon.end { background: var(--cg-color-surface-container-background); color: var(--cg-color-input-text-placeholder); }\n\n .step-info { flex: 1; min-width: 0; }\n .step-label { font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold); color: var(--cg-color-surface-base-text); }\n .step-desc { font-size: var(--cg-font-size-xs); color: var(--cg-color-input-text-placeholder); margin-top: var(--cg-spacing-2); }\n .step-type { font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-bold); text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wider); color: var(--cg-color-input-text-placeholder); }\n\n .step-status { font-size: var(--cg-font-size-xs); flex-shrink: 0; }\n\n .branch { display: flex; gap: var(--cg-spacing-16); align-items: flex-start; }\n .branch-line { width: var(--cg-spacing-1); height: 100%; background: var(--cg-color-surface-cards-border); }\n\n .empty { text-align: center; padding: var(--cg-spacing-32); color: var(--cg-color-input-text-placeholder); font-size: var(--cg-font-size-sm); }\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-150); }\n :host([rounded=\"full\"]) .container { border-radius: var(--cg-border-radius-full); }\n `];\n\n @property({ reflect: true }) rounded: 'none' \| 'sm' \| 'md' \| 'lg' \| 'full' = 'lg';\n @property({ type: Array }) steps: WorkflowStep[] = [];\n @property({ type: String }) heading: string = 'Workflow';\n\n @state() private _activeIndex = 0;\n @state() private _shouldFocusActive = false;\n\n @queryAll('.step') private _stepEls!: NodeListOf<HTMLElement>;\n\n private _getTypeIcon(type: string): unknown {\n if (type === 'start') return html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"/></svg>`;\n if (type === 'agent') return html`<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><rect x=\"3\" y=\"8\" width=\"18\" height=\"12\" rx=\"3\"/><circle cx=\"9\" cy=\"14\" r=\"1.5\"/><circle cx=\"15\" cy=\"14\" r=\"1.5\"/><path d=\"M12 2v4M8 8V6a4 4 0 018 0v2\"/></svg>`;\n if (type === 'tool') return html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z\"/></svg>`;\n if (type === 'condition') return html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2l10 10-10 10L2 12z\"/></svg>`;\n if (type === 'end') return html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"1\"/></svg>`;\n return html`<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\"><circle cx=\"4\" cy=\"4\" r=\"4\" fill=\"currentColor\"/></svg>`;\n }\n private _getStatusIcon(status: string): unknown {\n if (status === 'complete') return html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>`;\n if (status === 'error') return html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>`;\n if (status === 'active') return html`<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\"><circle cx=\"4\" cy=\"4\" r=\"4\" fill=\"currentColor\"/></svg>`;\n if (status === 'pending') return html`<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\"><circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg>`;\n return html`<span>--</span>`;\n }\n\n private _handleStepClick(step: WorkflowStep, index: number) {\n this._activeIndex = index;\n this.dispatchEvent(new CustomEvent('ai-workflow-step-click', {\n bubbles: true, composed: true,\n detail: { id: step.id, label: step.label, type: step.type, status: step.status },\n }));\n }\n\n private _handleStepKeyDown(e: KeyboardEvent, step: WorkflowStep, index: number) {\n const total = this.steps.length;\n if (total === 0) return;\n\n switch (e.key) {\n case 'ArrowRight':\n case 'ArrowDown':\n e.preventDefault();\n this._activeIndex = (index + 1) % total;\n this._shouldFocusActive = true;\n break;\n case 'ArrowLeft':\n case 'ArrowUp':\n e.preventDefault();\n this._activeIndex = (index - 1 + total) % total;\n this._shouldFocusActive = true;\n break;\n case 'Home':\n e.preventDefault();\n this._activeIndex = 0;\n this._shouldFocusActive = true;\n break;\n case 'End':\n e.preventDefault();\n this._activeIndex = total - 1;\n this._shouldFocusActive = true;\n break;\n case 'Enter':\n case ' ':\n e.preventDefault();\n this._handleStepClick(step, index);\n break;\n }\n }\n\n override updated(changed: Map<string, unknown>) {\n super.updated(changed);\n // Clamp active index if steps array shrunk.\n if (changed.has('steps') && this._activeIndex >= this.steps.length) {\n this._activeIndex = Math.max(0, this.steps.length - 1);\n }\n if (this._shouldFocusActive) {\n this._shouldFocusActive = false;\n const els = this._stepEls;\n const target = els?.[this._activeIndex];\n if (target) target.focus();\n }\n }\n\n override render() {\n if (this.steps.length === 0) return html`<div class=\"container\"><div class=\"empty\">No workflow defined</div></div>`;\n\n return html`\n <div class=\"container\" role=\"figure\" aria-label=\"${this.heading}\">\n <div class=\"header\">\n <span class=\"title\">${this.heading}</span>\n <span class=\"step-count\">${this.steps.length} steps</span>\n </div>\n <div class=\"flow\" role=\"toolbar\" aria-label=\"${this.heading} workflow steps (vertical orientation)\" aria-orientation=\"vertical\">\n ${this.steps.map((step, i) => html`\n ${i > 0 ? html`<div class=\"connector ${step.status === 'active' \|\| step.status === 'complete' ? 'active' : ''}\"></div>` : nothing}\n <div class=\"step ${step.status \|\| 'pending'}\"\n tabindex=${i === this._activeIndex ? '0' : '-1'}\n role=\"button\"\n aria-label=\"${step.label}\"\n aria-current=${step.status === 'active' ? 'step' : nothing}\n @click=${() => this._handleStepClick(step, i)}\n @keydown=${(e: KeyboardEvent) => this._handleStepKeyDown(e, step, i)}>\n <div class=\"step-icon ${step.type}\" aria-hidden=\"true\">${this._getTypeIcon(step.type)}</div>\n <div class=\"step-info\">\n <div class=\"step-type\">${step.type}</div>\n <div class=\"step-label\">${step.label}</div>\n ${step.description ? html`<div class=\"step-desc\">${step.description}</div>` : nothing}\n </div>\n <span class=\"step-status\" aria-hidden=\"true\">${this._getStatusIcon(step.status \|\| 'pending')}</span>\n </div>\n `)}\n </div>\n </div>\n `;\n }\n}\n"],"names":["AiWorkflowBuilder","LitElement","type","html","status","step","index","total","changed","target","i","nothing","e","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","queryAll","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"ai-workflow-builder.js","sources":["../../../src/components/ai-workflow-builder/ai-workflow-builder.ts"],"sourcesContent":["/*\n @element ai-workflow-builder\n * Visual agent workflow rendered as a vertical DAG (directed acyclic graph).\n * Each step displays a type icon (start/agent/tool/condition/end), label,\n * description, and status with connecting lines between steps.\n \n @example\n * ```html\n * <ai-workflow-builder heading=\"Support Agent\" .steps=${[\n * { id: '1', label: 'Receive Query', type: 'start', status: 'complete' },\n * { id: '2', label: 'Classify Intent', type: 'agent', status: 'active', description: 'Using GPT-4' },\n * { id: '3', label: 'Search KB', type: 'tool', status: 'pending', next: ['4'] },\n * { id: '4', label: 'Respond', type: 'end', status: 'pending' }\n * ]}></ai-workflow-builder>\n * ```\n \n @prop {WorkflowStep[]} steps - Array of workflow step objects\n * @prop {string} heading - Workflow header title (default 'Workflow')\n \n @fires {CustomEvent<{id: string, label: string, type: string, status: string}>} ai-workflow-step-click - When a step is clicked\n /\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement, queryAll } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\ninterface WorkflowStep {\n id: string;\n label: string;\n type: 'start' \| 'agent' \| 'tool' \| 'condition' \| 'end';\n status?: 'pending' \| 'active' \| 'complete' \| 'error' \| 'skipped';\n description?: string;\n next?: string[]; // IDs of next steps\n}\n\n@customElement('ai-workflow-builder')\nexport class AiWorkflowBuilder extends LitElement {\n static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n :host {\n animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n\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-150); padding: var(--cg-spacing-16); overflow: auto;\n }\n\n .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--cg-spacing-16); }\n .title { font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-bold); color: var(--cg-color-surface-base-text); }\n .step-count { font-size: var(--cg-font-size-xs); color: var(--cg-color-input-text-placeholder); }\n\n .flow { display: flex; flex-direction: column; align-items: center; gap: 0; }\n\n .step-wrapper { display: flex; flex-direction: column; align-items: center; }\n\n .connector { width: var(--cg-spacing-2); height: var(--cg-spacing-20); background: var(--cg-color-surface-cards-border); }\n .connector.active { background: var(--cg-color-action-primary-background-default); }\n\n .step {\n display: flex; align-items: center; gap: var(--cg-spacing-8);\n padding: var(--cg-spacing-8) var(--cg-spacing-16); border-radius: var(--cg-border-radius-100);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n background: var(--cg-color-surface-base-background);\n min-width: var(--cg-spacing-96); cursor: pointer; transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .step:hover { border-color: var(--cg-color-input-border-hover); }\n .step:focus-visible { outline: none; box-shadow: 0 0 0 var(--cg-spacing-2) var(--cg-color-focus-ring); outline-offset: var(--cg-outline-offset-default); }\n .step:active { transform: scale(var(--cg-interaction-press-scale)); }\n .step.active { border-color: var(--cg-color-surface-base-text); background: var(--cg-overlay-accent-subtle); }\n .step.complete { border-color: var(--cg-color-status-success-text-default); }\n .step.error { border-color: var(--cg-color-status-error-text-default); }\n .step.skipped { opacity: 0.5; }\n\n .step-icon {\n width: var(--cg-spacing-24); height: var(--cg-spacing-24); border-radius: var(--cg-border-radius-100);\n display: flex; align-items: center; justify-content: center;\n font-size: var(--cg-font-size-xs); flex-shrink: 0;\n }\n .step-icon.start { background: var(--cg-color-status-success-background-default); color: var(--cg-color-status-success-text-default); }\n .step-icon.agent { background: var(--cg-overlay-accent-light); color: var(--cg-color-surface-base-text); }\n .step-icon.tool { background: var(--cg-color-status-info-background-default); color: var(--cg-color-status-info-text-default); }\n .step-icon.condition { background: var(--cg-color-status-warning-background-default); color: var(--cg-color-status-warning-text-default); }\n .step-icon.end { background: var(--cg-color-surface-container-background); color: var(--cg-color-input-text-placeholder); }\n\n .step-info { flex: 1; min-width: 0; }\n .step-label { font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold); color: var(--cg-color-surface-base-text); }\n .step-desc { font-size: var(--cg-font-size-xs); color: var(--cg-color-input-text-placeholder); margin-top: var(--cg-spacing-2); }\n .step-type { font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-bold); text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wider); color: var(--cg-color-input-text-placeholder); }\n\n .step-status { font-size: var(--cg-font-size-xs); flex-shrink: 0; }\n\n .branch { display: flex; gap: var(--cg-spacing-16); align-items: flex-start; }\n .branch-line { width: var(--cg-spacing-1); height: 100%; background: var(--cg-color-surface-cards-border); }\n\n .empty { text-align: center; padding: var(--cg-spacing-32); color: var(--cg-color-input-text-placeholder); font-size: var(--cg-font-size-sm); }\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-150); }\n :host([rounded=\"full\"]) .container { border-radius: var(--cg-border-radius-full); }\n `];\n\n @property({ reflect: true }) rounded: 'none' \| 'sm' \| 'md' \| 'lg' \| 'full' = 'lg';\n @property({ type: Array }) steps: WorkflowStep[] = [];\n @property({ type: String }) heading: string = 'Workflow';\n\n @state() private _activeIndex = 0;\n @state() private _shouldFocusActive = false;\n\n @queryAll('.step') private _stepEls!: NodeListOf<HTMLElement>;\n\n private _getTypeIcon(type: string): unknown {\n if (type === 'start') return html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"/></svg>`;\n if (type === 'agent') return html`<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><rect x=\"3\" y=\"8\" width=\"18\" height=\"12\" rx=\"3\"/><circle cx=\"9\" cy=\"14\" r=\"1.5\"/><circle cx=\"15\" cy=\"14\" r=\"1.5\"/><path d=\"M12 2v4M8 8V6a4 4 0 018 0v2\"/></svg>`;\n if (type === 'tool') return html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z\"/></svg>`;\n if (type === 'condition') return html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2l10 10-10 10L2 12z\"/></svg>`;\n if (type === 'end') return html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"1\"/></svg>`;\n return html`<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\"><circle cx=\"4\" cy=\"4\" r=\"4\" fill=\"currentColor\"/></svg>`;\n }\n private _getStatusIcon(status: string): unknown {\n if (status === 'complete') return html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>`;\n if (status === 'error') return html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>`;\n if (status === 'active') return html`<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\"><circle cx=\"4\" cy=\"4\" r=\"4\" fill=\"currentColor\"/></svg>`;\n if (status === 'pending') return html`<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\"><circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg>`;\n return html`<span>--</span>`;\n }\n\n private _handleStepClick(step: WorkflowStep, index: number) {\n this._activeIndex = index;\n this.dispatchEvent(new CustomEvent('ai-workflow-step-click', {\n bubbles: true, composed: true,\n detail: { id: step.id, label: step.label, type: step.type, status: step.status },\n }));\n }\n\n private _handleStepKeyDown(e: KeyboardEvent, step: WorkflowStep, index: number) {\n const total = this.steps.length;\n if (total === 0) return;\n\n switch (e.key) {\n case 'ArrowRight':\n case 'ArrowDown':\n e.preventDefault();\n this._activeIndex = (index + 1) % total;\n this._shouldFocusActive = true;\n break;\n case 'ArrowLeft':\n case 'ArrowUp':\n e.preventDefault();\n this._activeIndex = (index - 1 + total) % total;\n this._shouldFocusActive = true;\n break;\n case 'Home':\n e.preventDefault();\n this._activeIndex = 0;\n this._shouldFocusActive = true;\n break;\n case 'End':\n e.preventDefault();\n this._activeIndex = total - 1;\n this._shouldFocusActive = true;\n break;\n case 'Enter':\n case ' ':\n e.preventDefault();\n this._handleStepClick(step, index);\n break;\n }\n }\n\n override updated(changed: Map<string, unknown>) {\n super.updated(changed);\n // Clamp active index if steps array shrunk.\n if (changed.has('steps') && this._activeIndex >= this.steps.length) {\n this._activeIndex = Math.max(0, this.steps.length - 1);\n }\n if (this._shouldFocusActive) {\n this._shouldFocusActive = false;\n const els = this._stepEls;\n const target = els?.[this._activeIndex];\n if (target) target.focus();\n }\n }\n\n override render() {\n if (this.steps.length === 0) return html`<div class=\"container\"><div class=\"empty\">No workflow defined</div></div>`;\n\n return html`\n <div class=\"container\" role=\"figure\" aria-label=\"${this.heading}\">\n <div class=\"header\">\n <span class=\"title\">${this.heading}</span>\n <span class=\"step-count\">${this.steps.length} steps</span>\n </div>\n <div class=\"flow\" role=\"toolbar\" aria-label=\"${this.heading} workflow steps (vertical orientation)\" aria-orientation=\"vertical\">\n ${this.steps.map((step, i) => html`\n ${i > 0 ? html`<div class=\"connector ${step.status === 'active' \|\| step.status === 'complete' ? 'active' : ''}\"></div>` : nothing}\n <div class=\"step ${step.status \|\| 'pending'}\"\n tabindex=${i === this._activeIndex ? '0' : '-1'}\n role=\"button\"\n aria-label=\"${step.label}\"\n aria-current=${step.status === 'active' ? 'step' : nothing}\n @click=${() => this._handleStepClick(step, i)}\n @keydown=${(e: KeyboardEvent) => this._handleStepKeyDown(e, step, i)}>\n <div class=\"step-icon ${step.type}\" aria-hidden=\"true\">${this._getTypeIcon(step.type)}</div>\n <div class=\"step-info\">\n <div class=\"step-type\">${step.type}</div>\n <div class=\"step-label\">${step.label}</div>\n ${step.description ? html`<div class=\"step-desc\">${step.description}</div>` : nothing}\n </div>\n <span class=\"step-status\" aria-hidden=\"true\">${this._getStatusIcon(step.status \|\| 'pending')}</span>\n </div>\n `)}\n </div>\n </div>\n `;\n }\n}\n"],"names":["AiWorkflowBuilder","LitElement","type","html","status","step","index","total","changed","target","i","nothing","e","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","queryAll","customElement"],"mappings":"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"}

package/dist/components/bias-anchoring/bias-anchoring.js CHANGED Viewed

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

package/dist/components/bias-authority/bias-authority.js CHANGED Viewed

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

package/dist/components/bias-commitment/bias-commitment.js CHANGED Viewed

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

package/dist/components/bias-reciprocity/bias-reciprocity.js CHANGED Viewed

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

package/dist/components/bias-scarcity/bias-scarcity.js CHANGED Viewed

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

package/dist/components/bias-social-proof/bias-social-proof.js CHANGED Viewed

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

package/dist/components/cg-accordion/cg-accordion.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cg-accordion.d.ts","sourceRoot":"","sources":["../../../src/components/cg-accordion/cg-accordion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,~~EAAsB~~,MAAM,KAAK,CAAC;~~AAIrD~~,wCAAwC;AACxC,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;GAKG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,~~4BAwHnB~~;IAE0B,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAClC,KAAK,EAAE,aAAa,EAAE,CAAM;IAC1B,QAAQ,UAAS;IACjB,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,CAAa;IACvD,WAAW,EAAE,MAAM,EAAE,CAAM;IAE7C,OAAO,CAAC,UAAU,CAAqB;IAEvC,YAAY;IAMrB,OAAO,CAAC,qBAAqB;IAkB7B,OAAO,CAAC,OAAO;IAgBN,MAAM;CA4BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,cAAc,EAAE,WAAW,CAAC;KAAE;CACjE"}
1	+ {"version":3,"file":"cg-accordion.d.ts","sourceRoot":"","sources":["../../../src/components/cg-accordion/cg-accordion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,wCAAwC;AACxC,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;GAKG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAgInB;IAE0B,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAClC,KAAK,EAAE,aAAa,EAAE,CAAM;IAC1B,QAAQ,UAAS;IACjB,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,CAAa;IACvD,WAAW,EAAE,MAAM,EAAE,CAAM;IAE7C,OAAO,CAAC,UAAU,CAAqB;IAEvC,YAAY;IAMrB,OAAO,CAAC,qBAAqB;IAkB7B,OAAO,CAAC,OAAO;IAgBN,MAAM;CA4BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,cAAc,EAAE,WAAW,CAAC;KAAE;CACjE"}

package/dist/components/cg-accordion/cg-accordion.js CHANGED Viewed

@@ -1,69 +1,69 @@
-import { css as l, LitElement as p, html as g } from "lit";
-import { property as s, state as v, customElement as u } from "lit/decorators.js";
-import { h, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
-var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, n = (r, e, o, i) => {
-  for (var t = i > 1 ? void 0 : i ? m(e, o) : e, c = r.length - 1, d; c >= 0; c--)
-    (d = r[c]) && (t = (i ? d(e, o, t) : d(t)) || t);
-  return i && t && b(e, o, t), t;
+import { css as l, LitElement as v, html as g } from "lit";
+import { property as s, state as p, customElement as u } from "lit/decorators.js";
+import { h, r as f } from "../../chunks/premium.css-DHekUEUt.js";
+var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, n = (e, r, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? m(r, a) : r, c = e.length - 1, d; c >= 0; c--)
+    (d = e[c]) && (t = (i ? d(r, a, t) : d(t)) || t);
+  return i && t && b(r, a, t), t;
 };
-let a = class extends p {
+let o = class extends v {
   constructor() {
     super(...arguments), this.size = "md", this.items = [], this.multiple = !1, this.variant = "default", this.defaultOpen = [], this._openItems = /* @__PURE__ */ new Set();
   }
   firstUpdated() {
     this.defaultOpen.length > 0 && (this._openItems = new Set(this.multiple ? this.defaultOpen : [this.defaultOpen[0]]));
   }
-  _handleTriggerKeydown(r) {
-    const e = this.shadowRoot.querySelectorAll(".trigger:not(:disabled)"), o = Array.from(e), i = o.indexOf(r.currentTarget);
+  _handleTriggerKeydown(e) {
+    const r = this.shadowRoot.querySelectorAll(".trigger:not(:disabled)"), a = Array.from(r), i = a.indexOf(e.currentTarget);
     let t = i;
-    switch (r.key) {
+    switch (e.key) {
       case "ArrowDown":
-        t = (i + 1) % o.length;
+        t = (i + 1) % a.length;
         break;
       case "ArrowUp":
-        t = (i - 1 + o.length) % o.length;
+        t = (i - 1 + a.length) % a.length;
         break;
       case "Home":
         t = 0;
         break;
       case "End":
-        t = o.length - 1;
+        t = a.length - 1;
         break;
       default:
         return;
     }
-    r.preventDefault(), o[t]?.focus();
+    e.preventDefault(), a[t]?.focus();
   }
-  _toggle(r) {
-    const e = new Set(this._openItems);
-    e.has(r) ? e.delete(r) : (this.multiple || e.clear(), e.add(r)), this._openItems = e, this.dispatchEvent(new CustomEvent("cg-accordion-change", {
-      detail: { open: [...e], toggled: r },
+  _toggle(e) {
+    const r = new Set(this._openItems);
+    r.has(e) ? r.delete(e) : (this.multiple || r.clear(), r.add(e)), this._openItems = r, this.dispatchEvent(new CustomEvent("cg-accordion-change", {
+      detail: { open: [...r], toggled: e },
       bubbles: !0,
       composed: !0
     }));
   }
   render() {
-    return g`${this.items.map((r) => {
-      const e = this._openItems.has(r.value);
+    return g`${this.items.map((e) => {
+      const r = this._openItems.has(e.value);
       return g`
-        <div class="item ${e ? "open" : ""}">
+        <div class="item ${r ? "open" : ""}">
           <button
             class="trigger"
-            id="trigger-${r.value}"
-            aria-expanded=${e}
-            aria-controls="panel-${r.value}"
-            ?disabled=${r.disabled}
-            @click=${() => this._toggle(r.value)}
+            id="trigger-${e.value}"
+            aria-expanded=${r}
+            aria-controls="panel-${e.value}"
+            ?disabled=${e.disabled}
+            @click=${() => this._toggle(e.value)}
             @keydown=${this._handleTriggerKeydown}
           >
-            <span class="trigger-text">${r.trigger}</span>
-            <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <span class="trigger-text">${e.trigger}</span>
+            <svg class="chevron" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
               <path d="M6 9l6 6 6-6"></path>
             </svg>
           </button>
           <div class="content-wrapper">
-            <div class="content" id="panel-${r.value}" role="region" aria-labelledby="trigger-${r.value}">
-              <div class="content-inner">${r.content}</div>
+            <div class="content" id="panel-${e.value}" role="region" aria-labelledby="trigger-${e.value}">
+              <div class="content-inner">${e.content}</div>
             </div>
           </div>
         </div>
@@ -71,7 +71,7 @@ let a = class extends p {
     })}`;
   }
 };
-a.styles = [h, f, l`
+o.styles = [h, f, l`
     /* ── Default variant — minimal dividers, transparent ── */
     .item {
@@ -132,7 +132,7 @@ a.styles = [h, f, l`
     .trigger:focus-visible {
       outline: none;
-      box-shadow: inset 0 0 0 2px var(--cg-color-focus-ring-offset), inset 0 0 0 4px var(--cg-color-focus-ring);
+      box-shadow: inset 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring-offset), inset 0 0 0 calc(var(--cg-border-width-100) * 2) var(--cg-color-focus-ring);
     }
     .trigger:disabled {
@@ -157,6 +157,14 @@ a.styles = [h, f, l`
       transform: rotate(180deg);
       color: var(--cg-color-surface-base-text);
     }
+    /* ── Open trigger: subtle accent so the active section is scannable ──
+       The chevron flip alone was the only signal; add a faint accent wash +
+       a brand leading edge + brighter title text. */
+    .item.open .trigger {
+      background: var(--cg-overlay-accent-subtle);
+      color: var(--cg-color-surface-base-text);
+      box-shadow: inset var(--cg-border-width-100) 0 0 0 var(--cg-color-action-primary-background-default);
+    }
     /* ── Content — CSS grid smooth height ── */
     .content-wrapper {
@@ -194,26 +202,26 @@ a.styles = [h, f, l`
   `];
 n([
   s({ reflect: !0 })
-], a.prototype, "size", 2);
+], o.prototype, "size", 2);
 n([
   s({ type: Array })
-], a.prototype, "items", 2);
+], o.prototype, "items", 2);
 n([
   s({ type: Boolean })
-], a.prototype, "multiple", 2);
+], o.prototype, "multiple", 2);
 n([
   s({ reflect: !0 })
-], a.prototype, "variant", 2);
+], o.prototype, "variant", 2);
 n([
   s({ type: Array })
-], a.prototype, "defaultOpen", 2);
+], o.prototype, "defaultOpen", 2);
 n([
-  v()
-], a.prototype, "_openItems", 2);
-a = n([
+  p()
+], o.prototype, "_openItems", 2);
+o = n([
   u("cg-accordion")
-], a);
+], o);
 export {
-  a as CgAccordion
+  o as CgAccordion
 };
 //# sourceMappingURL=cg-accordion.js.map

package/dist/components/cg-accordion/cg-accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cg-accordion.js","sources":["../../../src/components/cg-accordion/cg-accordion.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/** Item definition for cg-accordion. /\nexport interface AccordionItem {\n value: string;\n trigger: string;\n content: string;\n icon?: string;\n disabled?: boolean;\n}\n\n/\n @element cg-accordion\n * Expandable content sections with smooth CSS grid height animation.\n \n @fires {CustomEvent<{open: string[], toggled: string}>} cg-accordion-change - When an item is toggled\n /\n@customElement('cg-accordion')\nexport class CgAccordion extends LitElement {\n static override styles = [hostBlock, reducedMotion, css`\n\n / ── Default variant — minimal dividers, transparent ── /\n .item {\n border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-base-divider);\n }\n .item:last-child { border-bottom: none; }\n\n / ── Card variant — separated elevated cards ── /\n :host([variant=\"card\"]) .item {\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n border-radius: var(--cg-component-card-radius);\n margin-bottom: var(--cg-spacing-8);\n background: var(--cg-color-surface-cards-background);\n border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n overflow: hidden;\n }\n :host([variant=\"card\"]) .item:last-child { margin-bottom: 0; }\n\n / ── Bordered variant — single grouped container ── /\n :host([variant=\"bordered\"]) {\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n border-radius: var(--cg-component-card-radius);\n background: var(--cg-color-surface-cards-background);\n overflow: hidden;\n }\n :host([variant=\"bordered\"]) .item {\n border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n }\n :host([variant=\"bordered\"]) .item:last-child {\n border-bottom: none;\n }\n\n / ── Trigger ── /\n .trigger {\n width: 100%;\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-12);\n padding: var(--cg-spacing-16);\n background: transparent;\n border: none;\n font: inherit;\n font-size: var(--cg-font-size-sm);\n font-weight: var(--cg-font-weight-medium);\n color: var(--cg-color-surface-base-text);\n cursor: pointer;\n text-align: left;\n transition: background var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n }\n\n .trigger:hover:not(:disabled) {\n background: var(--cg-overlay-dark-subtle);\n }\n\n .trigger:active:not(:disabled) .chevron {\n transform: scale(0.85);\n }\n\n .trigger:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--cg-color-focus-ring-offset), inset 0 0 0 4px var(--cg-color-focus-ring);\n }\n\n .trigger:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .trigger-text {\n flex: 1;\n min-width: 0;\n }\n\n / ── Chevron — only active signal ── /\n .chevron {\n width: var(--cg-icon-size-100);\n height: var(--cg-icon-size-100);\n flex-shrink: 0;\n color: var(--cg-color-surface-container-outlined);\n transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out), color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n }\n .item.open .chevron {\n transform: rotate(180deg);\n color: var(--cg-color-surface-base-text);\n }\n\n / ── Content — CSS grid smooth height ── /\n .content-wrapper {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n }\n .item.open .content-wrapper {\n grid-template-rows: 1fr;\n }\n\n .content {\n overflow: hidden;\n }\n\n .content-inner {\n padding: 0 var(--cg-spacing-16) var(--cg-spacing-16);\n font-size: var(--cg-font-size-sm);\n color: var(--cg-color-surface-container-outlined);\n line-height: var(--cg-line-height-relaxed);\n opacity: 0;\n transition: opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n transition-delay: 50ms;\n }\n .item.open .content-inner {\n opacity: 1;\n }\n\n / ── Size variants ── */\n :host([size=\"sm\"]) .trigger { font-size: var(--cg-font-size-xs); padding: var(--cg-spacing-12); }\n :host([size=\"sm\"]) .content-inner { font-size: var(--cg-font-size-xs); padding: 0 var(--cg-spacing-12) var(--cg-spacing-12); }\n\n :host([size=\"lg\"]) .trigger { font-size: var(--cg-font-size-base); padding: var(--cg-spacing-20); }\n :host([size=\"lg\"]) .content-inner { font-size: var(--cg-font-size-base); padding: 0 var(--cg-spacing-20) var(--cg-spacing-20); }\n `];\n\n @property({ reflect: true }) size: 'sm' \| 'md' \| 'lg' = 'md';\n @property({ type: Array }) items: AccordionItem[] = [];\n @property({ type: Boolean }) multiple = false;\n @property({ reflect: true }) variant: 'default' \| 'card' \| 'bordered' = 'default';\n @property({ type: Array }) defaultOpen: string[] = [];\n\n @state() private _openItems = new Set<string>();\n\n override firstUpdated() {\n if (this.defaultOpen.length > 0) {\n this._openItems = new Set(this.multiple ? this.defaultOpen : [this.defaultOpen[0]!]);\n }\n }\n\n private _handleTriggerKeydown(e: KeyboardEvent) {\n const triggers = this.shadowRoot!.querySelectorAll('.trigger:not(:disabled)') as NodeListOf<HTMLElement>;\n const triggerArr = Array.from(triggers);\n const currentIdx = triggerArr.indexOf(e.currentTarget as HTMLElement);\n let nextIdx = currentIdx;\n\n switch (e.key) {\n case 'ArrowDown': nextIdx = (currentIdx + 1) % triggerArr.length; break;\n case 'ArrowUp': nextIdx = (currentIdx - 1 + triggerArr.length) % triggerArr.length; break;\n case 'Home': nextIdx = 0; break;\n case 'End': nextIdx = triggerArr.length - 1; break;\n default: return;\n }\n\n e.preventDefault();\n triggerArr[nextIdx]?.focus();\n }\n\n private _toggle(value: string) {\n const next = new Set(this._openItems);\n if (next.has(value)) {\n next.delete(value);\n } else {\n if (!this.multiple) next.clear();\n next.add(value);\n }\n this._openItems = next;\n this.dispatchEvent(new CustomEvent('cg-accordion-change', {\n detail: { open: [...next], toggled: value },\n bubbles: true,\n composed: true,\n }));\n }\n\n override render() {\n return html`${this.items.map(item => {\n const isOpen = this._openItems.has(item.value);\n return html`\n <div class=\"item ${isOpen ? 'open' : ''}\">\n <button\n class=\"trigger\"\n id=\"trigger-${item.value}\"\n aria-expanded=${isOpen}\n aria-controls=\"panel-${item.value}\"\n ?disabled=${item.disabled}\n @click=${() => this._toggle(item.value)}\n @keydown=${this._handleTriggerKeydown}\n >\n <span class=\"trigger-text\">${item.trigger}</span>\n <svg class=\"chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M6 9l6 6 6-6\"></path>\n </svg>\n </button>\n <div class=\"content-wrapper\">\n <div class=\"content\" id=\"panel-${item.value}\" role=\"region\" aria-labelledby=\"trigger-${item.value}\">\n <div class=\"content-inner\">${item.content}</div>\n </div>\n </div>\n </div>\n `;\n })}`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap { 'cg-accordion': CgAccordion; }\n}\n"],"names":["CgAccordion","LitElement","e","triggers","triggerArr","currentIdx","nextIdx","value","next","html","item","isOpen","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"cg-accordion.js","sources":["../../../src/components/cg-accordion/cg-accordion.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/** Item definition for cg-accordion. /\nexport interface AccordionItem {\n value: string;\n trigger: string;\n content: string;\n icon?: string;\n disabled?: boolean;\n}\n\n/\n @element cg-accordion\n * Expandable content sections with smooth CSS grid height animation.\n \n @fires {CustomEvent<{open: string[], toggled: string}>} cg-accordion-change - When an item is toggled\n /\n@customElement('cg-accordion')\nexport class CgAccordion extends LitElement {\n static override styles = [hostBlock, reducedMotion, css`\n\n / ── Default variant — minimal dividers, transparent ── /\n .item {\n border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-base-divider);\n }\n .item:last-child { border-bottom: none; }\n\n / ── Card variant — separated elevated cards ── /\n :host([variant=\"card\"]) .item {\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n border-radius: var(--cg-component-card-radius);\n margin-bottom: var(--cg-spacing-8);\n background: var(--cg-color-surface-cards-background);\n border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n overflow: hidden;\n }\n :host([variant=\"card\"]) .item:last-child { margin-bottom: 0; }\n\n / ── Bordered variant — single grouped container ── /\n :host([variant=\"bordered\"]) {\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n border-radius: var(--cg-component-card-radius);\n background: var(--cg-color-surface-cards-background);\n overflow: hidden;\n }\n :host([variant=\"bordered\"]) .item {\n border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n }\n :host([variant=\"bordered\"]) .item:last-child {\n border-bottom: none;\n }\n\n / ── Trigger ── /\n .trigger {\n width: 100%;\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-12);\n padding: var(--cg-spacing-16);\n background: transparent;\n border: none;\n font: inherit;\n font-size: var(--cg-font-size-sm);\n font-weight: var(--cg-font-weight-medium);\n color: var(--cg-color-surface-base-text);\n cursor: pointer;\n text-align: left;\n transition: background var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n }\n\n .trigger:hover:not(:disabled) {\n background: var(--cg-overlay-dark-subtle);\n }\n\n .trigger:active:not(:disabled) .chevron {\n transform: scale(0.85);\n }\n\n .trigger:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring-offset), inset 0 0 0 calc(var(--cg-border-width-100) 2) var(--cg-color-focus-ring);\n }\n\n .trigger:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .trigger-text {\n flex: 1;\n min-width: 0;\n }\n\n /* ── Chevron — only active signal ── /\n .chevron {\n width: var(--cg-icon-size-100);\n height: var(--cg-icon-size-100);\n flex-shrink: 0;\n color: var(--cg-color-surface-container-outlined);\n transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out), color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n }\n .item.open .chevron {\n transform: rotate(180deg);\n color: var(--cg-color-surface-base-text);\n }\n / ── Open trigger: subtle accent so the active section is scannable ──\n The chevron flip alone was the only signal; add a faint accent wash +\n a brand leading edge + brighter title text. /\n .item.open .trigger {\n background: var(--cg-overlay-accent-subtle);\n color: var(--cg-color-surface-base-text);\n box-shadow: inset var(--cg-border-width-100) 0 0 0 var(--cg-color-action-primary-background-default);\n }\n\n / ── Content — CSS grid smooth height ── /\n .content-wrapper {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n }\n .item.open .content-wrapper {\n grid-template-rows: 1fr;\n }\n\n .content {\n overflow: hidden;\n }\n\n .content-inner {\n padding: 0 var(--cg-spacing-16) var(--cg-spacing-16);\n font-size: var(--cg-font-size-sm);\n color: var(--cg-color-surface-container-outlined);\n line-height: var(--cg-line-height-relaxed);\n opacity: 0;\n transition: opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n transition-delay: 50ms;\n }\n .item.open .content-inner {\n opacity: 1;\n }\n\n / ── Size variants ── */\n :host([size=\"sm\"]) .trigger { font-size: var(--cg-font-size-xs); padding: var(--cg-spacing-12); }\n :host([size=\"sm\"]) .content-inner { font-size: var(--cg-font-size-xs); padding: 0 var(--cg-spacing-12) var(--cg-spacing-12); }\n\n :host([size=\"lg\"]) .trigger { font-size: var(--cg-font-size-base); padding: var(--cg-spacing-20); }\n :host([size=\"lg\"]) .content-inner { font-size: var(--cg-font-size-base); padding: 0 var(--cg-spacing-20) var(--cg-spacing-20); }\n `];\n\n @property({ reflect: true }) size: 'sm' \| 'md' \| 'lg' = 'md';\n @property({ type: Array }) items: AccordionItem[] = [];\n @property({ type: Boolean }) multiple = false;\n @property({ reflect: true }) variant: 'default' \| 'card' \| 'bordered' = 'default';\n @property({ type: Array }) defaultOpen: string[] = [];\n\n @state() private _openItems = new Set<string>();\n\n override firstUpdated() {\n if (this.defaultOpen.length > 0) {\n this._openItems = new Set(this.multiple ? this.defaultOpen : [this.defaultOpen[0]!]);\n }\n }\n\n private _handleTriggerKeydown(e: KeyboardEvent) {\n const triggers = this.shadowRoot!.querySelectorAll('.trigger:not(:disabled)') as NodeListOf<HTMLElement>;\n const triggerArr = Array.from(triggers);\n const currentIdx = triggerArr.indexOf(e.currentTarget as HTMLElement);\n let nextIdx = currentIdx;\n\n switch (e.key) {\n case 'ArrowDown': nextIdx = (currentIdx + 1) % triggerArr.length; break;\n case 'ArrowUp': nextIdx = (currentIdx - 1 + triggerArr.length) % triggerArr.length; break;\n case 'Home': nextIdx = 0; break;\n case 'End': nextIdx = triggerArr.length - 1; break;\n default: return;\n }\n\n e.preventDefault();\n triggerArr[nextIdx]?.focus();\n }\n\n private _toggle(value: string) {\n const next = new Set(this._openItems);\n if (next.has(value)) {\n next.delete(value);\n } else {\n if (!this.multiple) next.clear();\n next.add(value);\n }\n this._openItems = next;\n this.dispatchEvent(new CustomEvent('cg-accordion-change', {\n detail: { open: [...next], toggled: value },\n bubbles: true,\n composed: true,\n }));\n }\n\n override render() {\n return html`${this.items.map(item => {\n const isOpen = this._openItems.has(item.value);\n return html`\n <div class=\"item ${isOpen ? 'open' : ''}\">\n <button\n class=\"trigger\"\n id=\"trigger-${item.value}\"\n aria-expanded=${isOpen}\n aria-controls=\"panel-${item.value}\"\n ?disabled=${item.disabled}\n @click=${() => this._toggle(item.value)}\n @keydown=${this._handleTriggerKeydown}\n >\n <span class=\"trigger-text\">${item.trigger}</span>\n <svg class=\"chevron\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M6 9l6 6 6-6\"></path>\n </svg>\n </button>\n <div class=\"content-wrapper\">\n <div class=\"content\" id=\"panel-${item.value}\" role=\"region\" aria-labelledby=\"trigger-${item.value}\">\n <div class=\"content-inner\">${item.content}</div>\n </div>\n </div>\n </div>\n `;\n })}`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap { 'cg-accordion': CgAccordion; }\n}\n"],"names":["CgAccordion","LitElement","triggers","triggerArr","currentIdx","nextIdx","value","next","html","item","isOpen","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/cg-alert-dialog/cg-alert-dialog.js CHANGED Viewed

@@ -1,13 +1,13 @@
-import { css as g, LitElement as v, nothing as p, html as c } from "lit";
-import { property as o, query as u, customElement as h } from "lit/decorators.js";
-import { h as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
-import { F as m } from "../../chunks/focus-trap-BdRNhSPD.js";
-var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, e = (i, r, n, s) => {
-  for (var a = s > 1 ? void 0 : s ? w(r, n) : r, l = i.length - 1, d; l >= 0; l--)
-    (d = i[l]) && (a = (s ? d(r, n, a) : d(a)) || a);
-  return s && a && y(r, n, a), a;
+import { css as g, LitElement as u, nothing as r, html as n } from "lit";
+import { property as o, query as v, customElement as h } from "lit/decorators.js";
+import { h as f, r as b } from "../../chunks/premium.css-DHekUEUt.js";
+import { F as m } from "../../chunks/focus-trap-vlQwKK-3.js";
+var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, e = (i, s, l, c) => {
+  for (var a = c > 1 ? void 0 : c ? w(s, l) : s, d = i.length - 1, p; d >= 0; d--)
+    (p = i[d]) && (a = (c ? p(s, l, a) : p(a)) || a);
+  return c && a && y(s, l, a), a;
 };
-let t = class extends v {
+let t = class extends u {
   constructor() {
     super(...arguments), this.open = !1, this.title = "", this.description = "", this.confirmLabel = "Confirm", this.cancelLabel = "Cancel", this.destructive = !1, this.loading = !1, this.closable = !1, this._focusTrap = new m(), this._previousOverflow = "";
   }
@@ -39,30 +39,30 @@ let t = class extends v {
     this.dispatchEvent(new CustomEvent("cg-alert-cancel", { bubbles: !0, composed: !0 })), this.open = !1;
   }
   render() {
-    return c`
+    return n`
       <div class="backdrop" @click=${() => this.closable && this._cancel()}></div>
       <div
         class="dialog"
         role="alertdialog"
         aria-modal="true"
-        aria-labelledby="alert-title"
-        aria-describedby="alert-description"
+        aria-labelledby=${this.title ? "alert-title" : r}
+        aria-describedby=${this.description ? "alert-description" : r}
         ?inert=${!this.open}
       >
         <div class="header">
           <slot name="icon">
-            ${this.destructive ? c`
+            ${this.destructive ? n`
               <div class="icon-wrap">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <svg aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <path d="M12 9v4M12 17h.01"/>
                   <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
                 </svg>
               </div>
-            ` : p}
+            ` : r}
           </slot>
           <div class="header-text">
-            ${this.title ? c`<h2 id="alert-title" class="title">${this.title}</h2>` : p}
-            ${this.description ? c`<p id="alert-description" class="description">${this.description}</p>` : p}
+            ${this.title ? n`<h2 id="alert-title" class="title">${this.title}</h2>` : r}
+            ${this.description ? n`<p id="alert-description" class="description">${this.description}</p>` : r}
           </div>
         </div>
         <div class="body"><slot></slot></div>
@@ -209,7 +209,7 @@ e([
   o({ type: Boolean })
 ], t.prototype, "closable", 2);
 e([
-  u(".dialog")
+  v(".dialog")
 ], t.prototype, "_dialogEl", 2);
 t = e([
   h("cg-alert-dialog")