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-onboarding/ai-onboarding.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css as v, LitElement as h, html as s, nothing as g } from "lit";
 import { property as l, state as b, customElement as f } from "lit/decorators.js";
-import { h as m, r as y, f as k } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as m, r as y, f as k } from "../../chunks/premium.css-DHekUEUt.js";
 import "../cg-card/cg-card.js";
 import "../cg-text/cg-text.js";
 import "../cg-button/cg-button.js";
@@ -180,7 +180,7 @@ c.styles = [m, y, k, v`
     .dismiss-btn:active { transform: scale(var(--cg-interaction-press-scale)); }
     .dismiss-btn:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      box-shadow: 0 0 0 3px var(--cg-color-focus-ring);
     }
     /* ── Progress: numbered ── */
@@ -210,7 +210,7 @@ c.styles = [m, y, k, v`
     }
     .dot.completed {
       background: var(--cg-color-action-primary-background-default);
-      opacity: 0.5;
+      opacity: var(--cg-opacity-50);
       cursor: pointer;
     }
     .dot.completed:hover { opacity: 0.85; }
@@ -221,7 +221,7 @@ c.styles = [m, y, k, v`
     }
     .dot:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      box-shadow: 0 0 0 3px var(--cg-color-focus-ring);
     }
     /* ── Progress: bar ── */
@@ -284,7 +284,7 @@ c.styles = [m, y, k, v`
     }
     .stepper-node:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      box-shadow: 0 0 0 3px var(--cg-color-focus-ring);
     }
     .stepper-line {
       flex: 1;

package/dist/components/ai-onboarding/ai-onboarding.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ai-onboarding.js","sources":["../../../src/components/ai-onboarding/ai-onboarding.ts"],"sourcesContent":["/*\n @element ai-onboarding\n * Step-by-step onboarding card built entirely from design-system primitives\n * (cg-card, cg-text, cg-button, cg-stack). Progress affordance is configurable\n * via the `progress` attribute: numbered \| dots \| bar \| stepper.\n \n @example\n * ```html\n * <ai-onboarding\n * progress=\"bar\"\n * .steps=${[\n * { title: 'Welcome', description: 'Let us show you around.' },\n * { title: 'Ask anything', description: 'Type a question to get started.' }\n * ]}\n * active=\"0\"\n * dismissible\n * ></ai-onboarding>\n * ```\n \n @prop {OnboardingStep[]} steps - Array of step objects with title and description\n * @prop {number} active - Index of the current step (default 0)\n * @prop {boolean} dismissible - Show dismiss button (default true)\n * @prop {'numbered'\|'dots'\|'bar'\|'stepper'} progress - Progress style (default auto-picks by step count)\n \n @slot media - Optional media (illustration, Lottie, video) shown above the title\n * @slot step-action - Optional per-step CTA (e.g., \"Try it\") rendered below description\n \n @fires {CustomEvent<{step: number}>} ai-onboarding-next - When Next is clicked\n * @fires {CustomEvent<{step: number}>} ai-onboarding-prev - When Back is clicked\n * @fires {CustomEvent<{from: number, to: number}>} ai-onboarding-step-change - Any step change\n * @fires ai-onboarding-complete - When Done is clicked on the last step\n * @fires {CustomEvent<{step: number}>} ai-onboarding-dismiss - When dismissed\n /\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-card/cg-card.js';\nimport '../cg-text/cg-text.js';\nimport '../cg-button/cg-button.js';\nimport '../cg-stack/cg-stack.js';\n\nexport interface OnboardingStep {\n title: string;\n description: string;\n target?: string;\n}\n\ntype ProgressVariant = 'numbered' \| 'dots' \| 'bar' \| 'stepper';\n\n@customElement('ai-onboarding')\nexport class AiOnboarding 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 display: block;\n max-width: 440px;\n }\n :host([hidden]) { display: none; }\n\n cg-card { display: block; }\n\n / ── Header row (progress + dismiss) ── /\n .header-row {\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-12);\n width: 100%;\n }\n .header-progress { flex: 1; min-width: 0; }\n\n .dismiss-btn {\n flex-shrink: 0;\n background: none;\n border: none;\n color: var(--cg-color-surface-container-outlined);\n cursor: pointer;\n padding: var(--cg-spacing-4);\n line-height: 1;\n border-radius: var(--cg-border-radius-50);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n transition:\n color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .dismiss-btn:hover {\n color: var(--cg-color-surface-base-text);\n background: var(--cg-color-action-secondary-background-hover);\n }\n .dismiss-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n .dismiss-btn:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n }\n\n / ── Progress: numbered ── /\n .progress-numbered {\n text-transform: uppercase;\n letter-spacing: var(--cg-letter-spacing-wide);\n }\n\n / ── Progress: dots ── /\n .progress-dots {\n display: flex;\n gap: var(--cg-spacing-6);\n align-items: center;\n }\n .dot {\n width: var(--cg-spacing-8);\n height: var(--cg-spacing-8);\n border-radius: var(--cg-border-radius-full);\n background: var(--cg-color-surface-cards-border);\n border: none;\n padding: 0;\n cursor: not-allowed;\n transition:\n background var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n transform var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n }\n .dot.completed {\n background: var(--cg-color-action-primary-background-default);\n opacity: 0.5;\n cursor: pointer;\n }\n .dot.completed:hover { opacity: 0.85; }\n .dot.active {\n background: var(--cg-color-action-primary-background-default);\n transform: scale(1.3);\n cursor: default;\n }\n .dot:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n }\n\n / ── Progress: bar ── /\n .progress-bar {\n display: flex;\n flex-direction: column;\n gap: var(--cg-spacing-6);\n width: 100%;\n }\n .progress-bar-track {\n width: 100%;\n height: var(--cg-spacing-4);\n background: var(--cg-color-surface-cards-border);\n border-radius: var(--cg-border-radius-full);\n overflow: hidden;\n }\n .progress-bar-fill {\n height: 100%;\n background: var(--cg-color-action-primary-background-default);\n border-radius: var(--cg-border-radius-full);\n transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out);\n }\n\n / ── Progress: stepper ── /\n .progress-stepper {\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-4);\n flex-wrap: nowrap;\n overflow: hidden;\n }\n .stepper-node {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--cg-spacing-24);\n height: var(--cg-spacing-24);\n flex-shrink: 0;\n border-radius: var(--cg-border-radius-full);\n background: var(--cg-color-surface-cards-border);\n color: var(--cg-color-surface-container-outlined);\n font-size: var(--cg-font-size-xs);\n font-weight: var(--cg-font-weight-bold);\n border: none;\n padding: 0;\n cursor: not-allowed;\n transition:\n background var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n }\n .stepper-node.completed {\n background: var(--cg-color-action-primary-background-default);\n color: var(--cg-color-action-primary-text-default);\n cursor: pointer;\n }\n .stepper-node.active {\n background: var(--cg-color-action-primary-background-default);\n color: var(--cg-color-action-primary-text-default);\n cursor: default;\n }\n .stepper-node:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n }\n .stepper-line {\n flex: 1;\n min-width: var(--cg-spacing-8);\n height: var(--cg-border-width-100);\n background: var(--cg-color-surface-cards-border);\n transition: background var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n }\n .stepper-line.completed {\n background: var(--cg-color-action-primary-background-default);\n }\n\n / ── Step content (animated on change) ── /\n .step-content {\n animation: stepIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n }\n @keyframes stepIn {\n from { opacity: 0; transform: translateX(8px); }\n to { opacity: 1; transform: translateX(0); }\n }\n .step-content[data-direction=\"back\"] { animation-name: stepInBack; }\n @keyframes stepInBack {\n from { opacity: 0; transform: translateX(-8px); }\n to { opacity: 1; transform: translateX(0); }\n }\n @media (prefers-reduced-motion: reduce) {\n .step-content { animation: none; }\n }\n\n .media-slot { margin-bottom: var(--cg-spacing-16); }\n .media-slot:empty { display: none; }\n\n .step-action-slot { margin-top: var(--cg-spacing-16); }\n .step-action-slot:empty { display: none; }\n\n / ── Footer (actions) ── /\n .footer-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--cg-spacing-8);\n width: 100%;\n }\n .footer-right {\n display: inline-flex;\n gap: var(--cg-spacing-8);\n align-items: center;\n }\n\n / sr-only live region /\n .sr-only {\n position: absolute;\n width: 1px; height: 1px;\n padding: 0; margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n `];\n\n @property({ reflect: true }) rounded: 'none' \| 'sm' \| 'md' \| 'lg' \| 'full' = 'lg';\n @property({ type: Array }) steps: OnboardingStep[] = [];\n @property({ type: Number }) active = 0;\n @property({ type: Boolean }) dismissible = true;\n @property({ type: Boolean, attribute: 'show-skip' }) showSkip = true;\n @property({ reflect: true }) progress: ProgressVariant \| 'auto' = 'auto';\n\n @state() private _direction: 'forward' \| 'back' = 'forward';\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('keydown', this._onKeydown);\n if (!this.hasAttribute('tabindex')) this.tabIndex = 0;\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this._onKeydown);\n }\n\n private _onKeydown = (e: KeyboardEvent) => {\n if (e.key === 'ArrowRight') { e.preventDefault(); this._next(); }\n else if (e.key === 'ArrowLeft') { e.preventDefault(); this._prev(); }\n else if (e.key === 'Escape' && this.dismissible) { e.preventDefault(); this._dismiss(); }\n };\n\n private _emit(name: string, detail: Record<string, unknown> = {}) {\n this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));\n }\n\n private _goTo(target: number) {\n if (target < 0 \|\| target >= this.steps.length \|\| target === this.active) return;\n const from = this.active;\n this._direction = target > from ? 'forward' : 'back';\n this.active = target;\n this._emit('ai-onboarding-step-change', { from, to: target });\n }\n\n private _next() {\n if (this.active < this.steps.length - 1) {\n this._direction = 'forward';\n this.active++;\n this._emit('ai-onboarding-next', { step: this.active });\n this._emit('ai-onboarding-step-change', { from: this.active - 1, to: this.active });\n } else {\n this._emit('ai-onboarding-complete');\n }\n }\n\n private _prev() {\n if (this.active > 0) {\n this._direction = 'back';\n this.active--;\n this._emit('ai-onboarding-prev', { step: this.active });\n this._emit('ai-onboarding-step-change', { from: this.active + 1, to: this.active });\n }\n }\n\n private _dismiss() {\n this._emit('ai-onboarding-dismiss', { step: this.active });\n }\n\n private _resolvedProgress(): ProgressVariant {\n if (this.progress !== 'auto') return this.progress;\n const n = this.steps.length;\n if (n <= 1) return 'numbered';\n if (n <= 4) return 'dots';\n return 'bar';\n }\n\n private _renderProgress() {\n const variant = this._resolvedProgress();\n const total = this.steps.length;\n const stepLabel = `Step ${this.active + 1} of ${total}`;\n\n if (variant === 'numbered') {\n return html`<cg-text class=\"progress-numbered\" size=\"xs\" weight=\"bold\" color=\"muted\">${stepLabel}</cg-text>`;\n }\n\n if (variant === 'dots') {\n return html`\n <div class=\"progress-dots\" role=\"tablist\" aria-label=\"Onboarding progress\">\n ${this.steps.map((s, i) => {\n const completed = i < this.active;\n const current = i === this.active;\n const cls = current ? 'active' : completed ? 'completed' : '';\n return html`<button\n class=\"dot ${cls}\"\n role=\"tab\"\n aria-selected=${current}\n aria-label=\"Go to step ${i + 1}: ${s.title}\"\n ?disabled=${!completed && !current}\n @click=${() => completed && this._goTo(i)}\n ></button>`;\n })}\n </div>\n `;\n }\n\n if (variant === 'bar') {\n const pct = total > 1 ? Math.round(((this.active + 1) / total) 100) : 100;\n return html`\n <div class=\"progress-bar\">\n <div class=\"progress-bar-track\" role=\"progressbar\" aria-valuenow=${this.active + 1} aria-valuemin=\"1\" aria-valuemax=${total} aria-label=${stepLabel}>\n <div class=\"progress-bar-fill\" style=\"width: ${pct}%\"></div>\n </div>\n <cg-text size=\"xs\" weight=\"bold\" color=\"muted\">${stepLabel}</cg-text>\n </div>\n `;\n }\n\n // stepper\n return html`\n <div class=\"progress-stepper\" role=\"tablist\" aria-label=\"Onboarding progress\">\n ${this.steps.map((s, i) => {\n const completed = i < this.active;\n const current = i === this.active;\n const cls = current ? 'active' : completed ? 'completed' : '';\n const label = completed\n ? html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg>`\n : html`${i + 1}`;\n return html`\n ${i > 0 ? html`<span class=\"stepper-line ${i <= this.active ? 'completed' : ''}\"></span>` : nothing}\n <button\n class=\"stepper-node ${cls}\"\n role=\"tab\"\n aria-selected=${current}\n aria-label=\"Go to step ${i + 1}: ${s.title}\"\n ?disabled=${!completed && !current}\n @click=${() => completed && this._goTo(i)}\n >${label}</button>\n `;\n })}\n </div>\n `;\n }\n\n override render() {\n const step = this.steps[this.active];\n if (!step) return nothing;\n\n const isLast = this.active === this.steps.length - 1;\n const total = this.steps.length;\n\n return html`\n <cg-card variant=\"elevated\" padding=\"lg\" rounded=${this.rounded} role=\"dialog\" aria-modal=\"true\" aria-label=\"Onboarding step ${this.active + 1} of ${total}\">\n <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">Step ${this.active + 1} of ${total}: ${step.title}</div>\n\n <div slot=\"header\" class=\"header-row\">\n <div class=\"header-progress\">${this._renderProgress()}</div>\n ${this.dismissible\n ? html`<button class=\"dismiss-btn\" aria-label=\"Dismiss onboarding\" @click=${this._dismiss}><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg></button>`\n : nothing}\n </div>\n\n <div class=\"step-content\" data-direction=${this._direction} .key=${this.active}>\n <div class=\"media-slot\"><slot name=\"media\"></slot></div>\n <cg-stack direction=\"column\" gap=\"sm\">\n <cg-text as=\"h3\" size=\"lg\" weight=\"bold\">${step.title}</cg-text>\n <cg-text size=\"sm\" color=\"muted\">${step.description}</cg-text>\n </cg-stack>\n <div class=\"step-action-slot\"><slot name=\"step-action\"></slot></div>\n </div>\n\n <div slot=\"footer\" class=\"footer-row\">\n <cg-button\n variant=\"secondary\"\n size=\"md\"\n ?disabled=${this.active === 0}\n label=\"Previous step\"\n @click=${this._prev}\n >Back</cg-button>\n <div class=\"footer-right\">\n ${this.showSkip && !isLast\n ? html`<cg-button variant=\"tertiary\" size=\"sm\" label=\"Skip onboarding\" @click=${this._dismiss}>Skip tour</cg-button>`\n : nothing}\n <cg-button\n variant=\"primary\"\n size=\"md\"\n label=${isLast ? 'Complete onboarding' : 'Next step'}\n @click=${this._next}\n >${isLast ? 'Done' : 'Next'}</cg-button>\n </div>\n </div>\n </cg-card>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ai-onboarding': AiOnboarding;\n }\n}\n"],"names":["AiOnboarding","LitElement","e","name","detail","target","from","n","variant","total","stepLabel","html","s","i","completed","current","pct","cls","label","nothing","step","isLast","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"ai-onboarding.js","sources":["../../../src/components/ai-onboarding/ai-onboarding.ts"],"sourcesContent":["/*\n @element ai-onboarding\n * Step-by-step onboarding card built entirely from design-system primitives\n * (cg-card, cg-text, cg-button, cg-stack). Progress affordance is configurable\n * via the `progress` attribute: numbered \| dots \| bar \| stepper.\n \n @example\n * ```html\n * <ai-onboarding\n * progress=\"bar\"\n * .steps=${[\n * { title: 'Welcome', description: 'Let us show you around.' },\n * { title: 'Ask anything', description: 'Type a question to get started.' }\n * ]}\n * active=\"0\"\n * dismissible\n * ></ai-onboarding>\n * ```\n \n @prop {OnboardingStep[]} steps - Array of step objects with title and description\n * @prop {number} active - Index of the current step (default 0)\n * @prop {boolean} dismissible - Show dismiss button (default true)\n * @prop {'numbered'\|'dots'\|'bar'\|'stepper'} progress - Progress style (default auto-picks by step count)\n \n @slot media - Optional media (illustration, Lottie, video) shown above the title\n * @slot step-action - Optional per-step CTA (e.g., \"Try it\") rendered below description\n \n @fires {CustomEvent<{step: number}>} ai-onboarding-next - When Next is clicked\n * @fires {CustomEvent<{step: number}>} ai-onboarding-prev - When Back is clicked\n * @fires {CustomEvent<{from: number, to: number}>} ai-onboarding-step-change - Any step change\n * @fires ai-onboarding-complete - When Done is clicked on the last step\n * @fires {CustomEvent<{step: number}>} ai-onboarding-dismiss - When dismissed\n /\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-card/cg-card.js';\nimport '../cg-text/cg-text.js';\nimport '../cg-button/cg-button.js';\nimport '../cg-stack/cg-stack.js';\n\nexport interface OnboardingStep {\n title: string;\n description: string;\n target?: string;\n}\n\ntype ProgressVariant = 'numbered' \| 'dots' \| 'bar' \| 'stepper';\n\n@customElement('ai-onboarding')\nexport class AiOnboarding 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 display: block;\n max-width: 440px;\n }\n :host([hidden]) { display: none; }\n\n cg-card { display: block; }\n\n / ── Header row (progress + dismiss) ── /\n .header-row {\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-12);\n width: 100%;\n }\n .header-progress { flex: 1; min-width: 0; }\n\n .dismiss-btn {\n flex-shrink: 0;\n background: none;\n border: none;\n color: var(--cg-color-surface-container-outlined);\n cursor: pointer;\n padding: var(--cg-spacing-4);\n line-height: 1;\n border-radius: var(--cg-border-radius-50);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n transition:\n color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .dismiss-btn:hover {\n color: var(--cg-color-surface-base-text);\n background: var(--cg-color-action-secondary-background-hover);\n }\n .dismiss-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n .dismiss-btn:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px var(--cg-color-focus-ring);\n }\n\n / ── Progress: numbered ── /\n .progress-numbered {\n text-transform: uppercase;\n letter-spacing: var(--cg-letter-spacing-wide);\n }\n\n / ── Progress: dots ── /\n .progress-dots {\n display: flex;\n gap: var(--cg-spacing-6);\n align-items: center;\n }\n .dot {\n width: var(--cg-spacing-8);\n height: var(--cg-spacing-8);\n border-radius: var(--cg-border-radius-full);\n background: var(--cg-color-surface-cards-border);\n border: none;\n padding: 0;\n cursor: not-allowed;\n transition:\n background var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n transform var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n }\n .dot.completed {\n background: var(--cg-color-action-primary-background-default);\n opacity: var(--cg-opacity-50);\n cursor: pointer;\n }\n .dot.completed:hover { opacity: 0.85; }\n .dot.active {\n background: var(--cg-color-action-primary-background-default);\n transform: scale(1.3);\n cursor: default;\n }\n .dot:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px var(--cg-color-focus-ring);\n }\n\n / ── Progress: bar ── /\n .progress-bar {\n display: flex;\n flex-direction: column;\n gap: var(--cg-spacing-6);\n width: 100%;\n }\n .progress-bar-track {\n width: 100%;\n height: var(--cg-spacing-4);\n background: var(--cg-color-surface-cards-border);\n border-radius: var(--cg-border-radius-full);\n overflow: hidden;\n }\n .progress-bar-fill {\n height: 100%;\n background: var(--cg-color-action-primary-background-default);\n border-radius: var(--cg-border-radius-full);\n transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out);\n }\n\n / ── Progress: stepper ── /\n .progress-stepper {\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-4);\n flex-wrap: nowrap;\n overflow: hidden;\n }\n .stepper-node {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--cg-spacing-24);\n height: var(--cg-spacing-24);\n flex-shrink: 0;\n border-radius: var(--cg-border-radius-full);\n background: var(--cg-color-surface-cards-border);\n color: var(--cg-color-surface-container-outlined);\n font-size: var(--cg-font-size-xs);\n font-weight: var(--cg-font-weight-bold);\n border: none;\n padding: 0;\n cursor: not-allowed;\n transition:\n background var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n }\n .stepper-node.completed {\n background: var(--cg-color-action-primary-background-default);\n color: var(--cg-color-action-primary-text-default);\n cursor: pointer;\n }\n .stepper-node.active {\n background: var(--cg-color-action-primary-background-default);\n color: var(--cg-color-action-primary-text-default);\n cursor: default;\n }\n .stepper-node:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px var(--cg-color-focus-ring);\n }\n .stepper-line {\n flex: 1;\n min-width: var(--cg-spacing-8);\n height: var(--cg-border-width-100);\n background: var(--cg-color-surface-cards-border);\n transition: background var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n }\n .stepper-line.completed {\n background: var(--cg-color-action-primary-background-default);\n }\n\n / ── Step content (animated on change) ── /\n .step-content {\n animation: stepIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n }\n @keyframes stepIn {\n from { opacity: 0; transform: translateX(8px); }\n to { opacity: 1; transform: translateX(0); }\n }\n .step-content[data-direction=\"back\"] { animation-name: stepInBack; }\n @keyframes stepInBack {\n from { opacity: 0; transform: translateX(-8px); }\n to { opacity: 1; transform: translateX(0); }\n }\n @media (prefers-reduced-motion: reduce) {\n .step-content { animation: none; }\n }\n\n .media-slot { margin-bottom: var(--cg-spacing-16); }\n .media-slot:empty { display: none; }\n\n .step-action-slot { margin-top: var(--cg-spacing-16); }\n .step-action-slot:empty { display: none; }\n\n / ── Footer (actions) ── /\n .footer-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--cg-spacing-8);\n width: 100%;\n }\n .footer-right {\n display: inline-flex;\n gap: var(--cg-spacing-8);\n align-items: center;\n }\n\n / sr-only live region /\n .sr-only {\n position: absolute;\n width: 1px; height: 1px;\n padding: 0; margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n `];\n\n @property({ reflect: true }) rounded: 'none' \| 'sm' \| 'md' \| 'lg' \| 'full' = 'lg';\n @property({ type: Array }) steps: OnboardingStep[] = [];\n @property({ type: Number }) active = 0;\n @property({ type: Boolean }) dismissible = true;\n @property({ type: Boolean, attribute: 'show-skip' }) showSkip = true;\n @property({ reflect: true }) progress: ProgressVariant \| 'auto' = 'auto';\n\n @state() private _direction: 'forward' \| 'back' = 'forward';\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('keydown', this._onKeydown);\n if (!this.hasAttribute('tabindex')) this.tabIndex = 0;\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this._onKeydown);\n }\n\n private _onKeydown = (e: KeyboardEvent) => {\n if (e.key === 'ArrowRight') { e.preventDefault(); this._next(); }\n else if (e.key === 'ArrowLeft') { e.preventDefault(); this._prev(); }\n else if (e.key === 'Escape' && this.dismissible) { e.preventDefault(); this._dismiss(); }\n };\n\n private _emit(name: string, detail: Record<string, unknown> = {}) {\n this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));\n }\n\n private _goTo(target: number) {\n if (target < 0 \|\| target >= this.steps.length \|\| target === this.active) return;\n const from = this.active;\n this._direction = target > from ? 'forward' : 'back';\n this.active = target;\n this._emit('ai-onboarding-step-change', { from, to: target });\n }\n\n private _next() {\n if (this.active < this.steps.length - 1) {\n this._direction = 'forward';\n this.active++;\n this._emit('ai-onboarding-next', { step: this.active });\n this._emit('ai-onboarding-step-change', { from: this.active - 1, to: this.active });\n } else {\n this._emit('ai-onboarding-complete');\n }\n }\n\n private _prev() {\n if (this.active > 0) {\n this._direction = 'back';\n this.active--;\n this._emit('ai-onboarding-prev', { step: this.active });\n this._emit('ai-onboarding-step-change', { from: this.active + 1, to: this.active });\n }\n }\n\n private _dismiss() {\n this._emit('ai-onboarding-dismiss', { step: this.active });\n }\n\n private _resolvedProgress(): ProgressVariant {\n if (this.progress !== 'auto') return this.progress;\n const n = this.steps.length;\n if (n <= 1) return 'numbered';\n if (n <= 4) return 'dots';\n return 'bar';\n }\n\n private _renderProgress() {\n const variant = this._resolvedProgress();\n const total = this.steps.length;\n const stepLabel = `Step ${this.active + 1} of ${total}`;\n\n if (variant === 'numbered') {\n return html`<cg-text class=\"progress-numbered\" size=\"xs\" weight=\"bold\" color=\"muted\">${stepLabel}</cg-text>`;\n }\n\n if (variant === 'dots') {\n return html`\n <div class=\"progress-dots\" role=\"tablist\" aria-label=\"Onboarding progress\">\n ${this.steps.map((s, i) => {\n const completed = i < this.active;\n const current = i === this.active;\n const cls = current ? 'active' : completed ? 'completed' : '';\n return html`<button\n class=\"dot ${cls}\"\n role=\"tab\"\n aria-selected=${current}\n aria-label=\"Go to step ${i + 1}: ${s.title}\"\n ?disabled=${!completed && !current}\n @click=${() => completed && this._goTo(i)}\n ></button>`;\n })}\n </div>\n `;\n }\n\n if (variant === 'bar') {\n const pct = total > 1 ? Math.round(((this.active + 1) / total) 100) : 100;\n return html`\n <div class=\"progress-bar\">\n <div class=\"progress-bar-track\" role=\"progressbar\" aria-valuenow=${this.active + 1} aria-valuemin=\"1\" aria-valuemax=${total} aria-label=${stepLabel}>\n <div class=\"progress-bar-fill\" style=\"width: ${pct}%\"></div>\n </div>\n <cg-text size=\"xs\" weight=\"bold\" color=\"muted\">${stepLabel}</cg-text>\n </div>\n `;\n }\n\n // stepper\n return html`\n <div class=\"progress-stepper\" role=\"tablist\" aria-label=\"Onboarding progress\">\n ${this.steps.map((s, i) => {\n const completed = i < this.active;\n const current = i === this.active;\n const cls = current ? 'active' : completed ? 'completed' : '';\n const label = completed\n ? html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg>`\n : html`${i + 1}`;\n return html`\n ${i > 0 ? html`<span class=\"stepper-line ${i <= this.active ? 'completed' : ''}\"></span>` : nothing}\n <button\n class=\"stepper-node ${cls}\"\n role=\"tab\"\n aria-selected=${current}\n aria-label=\"Go to step ${i + 1}: ${s.title}\"\n ?disabled=${!completed && !current}\n @click=${() => completed && this._goTo(i)}\n >${label}</button>\n `;\n })}\n </div>\n `;\n }\n\n override render() {\n const step = this.steps[this.active];\n if (!step) return nothing;\n\n const isLast = this.active === this.steps.length - 1;\n const total = this.steps.length;\n\n return html`\n <cg-card variant=\"elevated\" padding=\"lg\" rounded=${this.rounded} role=\"dialog\" aria-modal=\"true\" aria-label=\"Onboarding step ${this.active + 1} of ${total}\">\n <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">Step ${this.active + 1} of ${total}: ${step.title}</div>\n\n <div slot=\"header\" class=\"header-row\">\n <div class=\"header-progress\">${this._renderProgress()}</div>\n ${this.dismissible\n ? html`<button class=\"dismiss-btn\" aria-label=\"Dismiss onboarding\" @click=${this._dismiss}><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg></button>`\n : nothing}\n </div>\n\n <div class=\"step-content\" data-direction=${this._direction} .key=${this.active}>\n <div class=\"media-slot\"><slot name=\"media\"></slot></div>\n <cg-stack direction=\"column\" gap=\"sm\">\n <cg-text as=\"h3\" size=\"lg\" weight=\"bold\">${step.title}</cg-text>\n <cg-text size=\"sm\" color=\"muted\">${step.description}</cg-text>\n </cg-stack>\n <div class=\"step-action-slot\"><slot name=\"step-action\"></slot></div>\n </div>\n\n <div slot=\"footer\" class=\"footer-row\">\n <cg-button\n variant=\"secondary\"\n size=\"md\"\n ?disabled=${this.active === 0}\n label=\"Previous step\"\n @click=${this._prev}\n >Back</cg-button>\n <div class=\"footer-right\">\n ${this.showSkip && !isLast\n ? html`<cg-button variant=\"tertiary\" size=\"sm\" label=\"Skip onboarding\" @click=${this._dismiss}>Skip tour</cg-button>`\n : nothing}\n <cg-button\n variant=\"primary\"\n size=\"md\"\n label=${isLast ? 'Complete onboarding' : 'Next step'}\n @click=${this._next}\n >${isLast ? 'Done' : 'Next'}</cg-button>\n </div>\n </div>\n </cg-card>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ai-onboarding': AiOnboarding;\n }\n}\n"],"names":["AiOnboarding","LitElement","e","name","detail","target","from","n","variant","total","stepLabel","html","s","i","completed","current","pct","cls","label","nothing","step","isLast","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-permission-gate/ai-permission-gate.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css as p, LitElement as m, svg as u, nothing as d, html as s } from "lit";
 import { property as g, customElement as v } from "lit/decorators.js";
-import { h as f, r as h, f as x } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as f, r as h, f as x } from "../../chunks/premium.css-DHekUEUt.js";
 import "../cg-card/cg-card.js";
 import "../cg-text/cg-text.js";
 import "../cg-button/cg-button.js";

package/dist/components/ai-personalization-dash/ai-personalization-dash.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css as p, LitElement as v, nothing as n, html as s } from "lit";
 import { property as c, customElement as f } 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 m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (e, a, o, l) => {
   for (var t = l > 1 ? void 0 : l ? b(a, o) : a, d = e.length - 1, g; d >= 0; d--)
     (g = e[d]) && (t = (l ? g(a, o, t) : g(t)) || t);

package/dist/components/ai-presence/ai-presence.js CHANGED Viewed

@@ -1,10 +1,10 @@
-import { css as g, LitElement as p, html as n, nothing as b } from "lit";
-import { property as c, customElement as u } from "lit/decorators.js";
-import { a as f, r as h, f as m } from "../../chunks/premium.css-9I4kHrsl.js";
+import { css as g, LitElement as d, html as s, nothing as u } from "lit";
+import { property as c, customElement as b } from "lit/decorators.js";
+import { a as f, r as h, f as m } from "../../chunks/premium.css-DHekUEUt.js";
 import "../cg-avatar/cg-avatar.js";
-var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (r, t, e, a) => {
-  for (var o = a > 1 ? void 0 : a ? y(t, e) : t, l = r.length - 1, d; l >= 0; l--)
-    (d = r[l]) && (o = (a ? d(t, e, o) : d(o)) || o);
+var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, n = (r, t, e, a) => {
+  for (var o = a > 1 ? void 0 : a ? y(t, e) : t, l = r.length - 1, p; l >= 0; l--)
+    (p = r[l]) && (o = (a ? p(t, e, o) : p(o)) || o);
   return a && o && w(t, e, o), o;
 };
 const v = {
@@ -13,7 +13,7 @@ const v = {
   busy: "Do not disturb",
   offline: "Offline"
 };
-let i = class extends p {
+let i = class extends d {
   constructor() {
     super(...arguments), this.users = [], this.maxVisible = 5, this.loading = !1, this.size = "md";
   }
@@ -29,7 +29,7 @@ let i = class extends p {
   }
   _renderTooltip(r) {
     const t = v[r.status], e = r.lastSeen ? `${t} • ${r.lastSeen}` : t;
-    return n`
+    return s`
       <span class="tooltip" role="tooltip">
         <span class="tooltip-name">${r.name}</span>
         <span class="tooltip-meta">${e}</span>
@@ -39,19 +39,19 @@ let i = class extends p {
   render() {
     if (this.loading) {
       const a = Math.min(this.maxVisible, 4);
-      return n`
+      return s`
         <div class="container" aria-busy="true" aria-label="Loading presence">
           <div class="avatar-stack">
-            ${Array.from({ length: a }).map(() => n`<span class="skeleton"></span>`)}
+            ${Array.from({ length: a }).map(() => s`<span class="skeleton"></span>`)}
           </div>
         </div>
       `;
     }
     const r = this.users.slice(0, this.maxVisible), t = this.users.length - this.maxVisible, e = this._avatarSize();
-    return n`
+    return s`
       <div class="container" role="group" aria-label="Active users" aria-live="polite">
         <div class="avatar-stack">
-          ${r.map((a) => n`
+          ${r.map((a) => s`
             <div class="avatar-wrapper">
               <button
                 class="avatar-btn"
@@ -69,7 +69,7 @@ let i = class extends p {
               ${this._renderTooltip(a)}
             </div>
           `)}
-          ${t > 0 ? n`<span class="overflow-badge" aria-label="${t} more users">+${t}</span>` : b}
+          ${t > 0 ? s`<span class="overflow-badge" aria-label="${t} more users">+${t}</span>` : u}
         </div>
       </div>
     `;
@@ -157,7 +157,7 @@ i.styles = [f, h, m, g`
       bottom: calc(100% + var(--cg-spacing-8));
       left: 50%;
       transform: translateX(-50%) translateY(var(--cg-spacing-2));
-      background: var(--cg-color-modal-container-background);
+      background: var(--cg-color-surface-tooltip-background);
       color: var(--cg-color-surface-base-text);
       padding: var(--cg-spacing-6) var(--cg-spacing-12);
       border-radius: var(--cg-border-radius-100);
@@ -170,7 +170,7 @@ i.styles = [f, h, m, g`
         opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
         transform var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out);
       z-index: 20;
-      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-tooltip-border);
       box-shadow: var(--cg-elevation-2);
       white-space: nowrap;
     }
@@ -182,9 +182,9 @@ i.styles = [f, h, m, g`
       width: var(--cg-spacing-8);
       height: var(--cg-spacing-8);
       transform: translateX(-50%) translateY(-50%) rotate(45deg);
-      background: var(--cg-color-modal-container-background);
-      border-right: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);
-      border-bottom: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);
+      background: var(--cg-color-surface-tooltip-background);
+      border-right: var(--cg-border-width-50) solid var(--cg-color-surface-tooltip-border);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-tooltip-border);
     }
     .tooltip-name {
       font-weight: var(--cg-font-weight-semibold);
@@ -195,7 +195,7 @@ i.styles = [f, h, m, g`
     .tooltip-meta {
       display: block;
       margin-top: var(--cg-spacing-2);
-      color: var(--cg-color-surface-container-outlined);
+      color: var(--cg-color-surface-container-subtle);
     }
     .avatar-wrapper:hover .tooltip,
     .avatar-wrapper:focus-within .tooltip {
@@ -240,20 +240,20 @@ i.styles = [f, h, m, g`
       .skeleton { animation: none; }
     }
   `];
-s([
+n([
   c({ type: Array })
 ], i.prototype, "users", 2);
-s([
+n([
   c({ type: Number, attribute: "max-visible" })
 ], i.prototype, "maxVisible", 2);
-s([
+n([
   c({ type: Boolean, reflect: !0 })
 ], i.prototype, "loading", 2);
-s([
+n([
   c({ type: String, reflect: !0 })
 ], i.prototype, "size", 2);
-i = s([
-  u("ai-presence")
+i = n([
+  b("ai-presence")
 ], i);
 export {
   i as AiPresence

package/dist/components/ai-presence/ai-presence.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ai-presence.js","sources":["../../../src/components/ai-presence/ai-presence.ts"],"sourcesContent":["/*\n @element ai-presence\n * Overlapping avatar stack showing live user presence. Built on top of <cg-avatar>\n * (handles initials/image/status-dot/sizes) with bespoke overlap stack, hover-lift,\n * tooltip with status + last-seen, \"+N more\" overflow badge, and skeleton state.\n \n @example\n * ```html\n * <ai-presence\n * size=\"md\"\n * .users=${[\n * { name: 'Alice', status: 'online', avatar: '/avatars/alice.jpg' },\n * { name: 'Bob', status: 'away', lastSeen: '5m ago' },\n * { name: 'Carol', status: 'busy' }\n * ]}\n * max-visible=\"4\"\n * ></ai-presence>\n * ```\n \n @prop {PresenceUser[]} users - User objects (name, status, optional avatar + lastSeen)\n * @prop {number} maxVisible - Max avatars before overflow badge (default 5)\n * @prop {boolean} loading - Render skeleton placeholders\n * @prop {\"sm\" \| \"md\" \| \"lg\"} size - Avatar size (default md)\n \n @fires {CustomEvent<{user: PresenceUser}>} ai-presence-user-click - Avatar clicked\n /\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBase, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-avatar/cg-avatar.js';\n\nexport type PresenceStatus = 'online' \| 'away' \| 'busy' \| 'offline';\nexport type PresenceSize = 'sm' \| 'md' \| 'lg';\n\nexport interface PresenceUser {\n name: string;\n avatar?: string;\n status: PresenceStatus;\n /* Optional last-seen text shown in the tooltip (e.g. \"5m ago\") /\n lastSeen?: string;\n}\n\nconst STATUS_LABEL: Record<PresenceStatus, string> = {\n online: 'Active',\n away: 'Away',\n busy: 'Do not disturb',\n offline: 'Offline',\n};\n\n@customElement('ai-presence')\nexport class AiPresence extends LitElement {\n static override styles = [hostBase, reducedMotion, fadeSlideInKeyframes, css`\n :host {\n align-items: center;\n animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n\n / Per-size variables (defaults to md) /\n --_avatar-size: var(--cg-spacing-32);\n --_overlap: var(--cg-spacing-8);\n }\n :host([hidden]) { display: none; }\n :host([size=\"sm\"]) {\n --_avatar-size: var(--cg-spacing-24);\n --_overlap: var(--cg-spacing-6);\n }\n :host([size=\"lg\"]) {\n --_avatar-size: var(--cg-spacing-40);\n --_overlap: var(--cg-spacing-12);\n }\n\n .container {\n display: flex;\n align-items: center;\n }\n .avatar-stack {\n display: flex;\n align-items: center;\n }\n\n .avatar-wrapper {\n position: relative;\n margin-left: calc(-1 var(--_overlap));\n z-index: 1;\n transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n }\n .avatar-wrapper:first-child { margin-left: 0; }\n .avatar-wrapper:hover,\n .avatar-wrapper:focus-within {\n z-index: 10;\n transform: translateY(calc(-1 * var(--cg-spacing-4)));\n }\n\n /* Outline ring around each avatar so they read as separate even when overlapping /\n .avatar-btn {\n display: inline-block;\n border-radius: var(--cg-border-radius-full);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-base-background);\n background: transparent;\n padding: 0;\n cursor: pointer;\n transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .avatar-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n .avatar-btn:focus-visible {\n outline: none;\n box-shadow:\n 0 0 0 2px var(--cg-color-surface-base-background),\n 0 0 0 calc(2px + var(--cg-border-width-100)) var(--cg-color-focus-ring);\n }\n\n / ── Overflow ── /\n .overflow-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--_avatar-size);\n height: var(--_avatar-size);\n border-radius: var(--cg-border-radius-full);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-base-background);\n background: var(--cg-color-action-tertiary-background-hover);\n color: var(--cg-color-surface-base-text);\n font-size: var(--cg-font-size-xs);\n font-weight: var(--cg-font-weight-bold);\n margin-left: calc(-1 var(--_overlap));\n cursor: default;\n }\n\n /* ── Tooltip (bespoke — multi-line beats cg-tooltip's single-string content) ── /\n .tooltip {\n position: absolute;\n bottom: calc(100% + var(--cg-spacing-8));\n left: 50%;\n transform: translateX(-50%) translateY(var(--cg-spacing-2));\n background: var(--cg-color-modal-container-background);\n color: var(--cg-color-surface-base-text);\n padding: var(--cg-spacing-6) var(--cg-spacing-12);\n border-radius: var(--cg-border-radius-100);\n font-size: var(--cg-font-size-xs);\n line-height: var(--cg-line-height-snug);\n max-width: var(--cg-spacing-256);\n pointer-events: none;\n opacity: 0;\n transition:\n opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n transform var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out);\n z-index: 20;\n border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n box-shadow: var(--cg-elevation-2);\n white-space: nowrap;\n }\n .tooltip::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n width: var(--cg-spacing-8);\n height: var(--cg-spacing-8);\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\n background: var(--cg-color-modal-container-background);\n border-right: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n border-bottom: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n }\n .tooltip-name {\n font-weight: var(--cg-font-weight-semibold);\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .tooltip-meta {\n display: block;\n margin-top: var(--cg-spacing-2);\n color: var(--cg-color-surface-container-outlined);\n }\n .avatar-wrapper:hover .tooltip,\n .avatar-wrapper:focus-within .tooltip {\n opacity: 1;\n transform: translateX(-50%) translateY(0);\n }\n\n / ── Skeleton ── /\n @keyframes presence-shimmer {\n 0% { background-position: -100% 0, 0 0; }\n 100% { background-position: 200% 0, 0 0; }\n }\n .skeleton {\n display: inline-block;\n width: var(--_avatar-size);\n height: var(--_avatar-size);\n border-radius: var(--cg-border-radius-full);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-base-background);\n margin-left: calc(-1 var(--_overlap));\n flex-shrink: 0;\n background:\n linear-gradient(\n 90deg,\n transparent 0%,\n var(--cg-overlay-white-strong) 50%,\n transparent 100%\n ),\n var(--cg-color-action-tertiary-background-hover);\n background-size: 50% 100%, 100% 100%;\n background-repeat: no-repeat, no-repeat;\n animation: presence-shimmer 1.5s var(--cg-transition-easing-linear) infinite;\n }\n .skeleton:first-child { margin-left: 0; }\n\n @media (prefers-reduced-motion: reduce) {\n :host { animation: none; }\n .avatar-wrapper { transition: none; }\n .avatar-btn { transition: none; }\n .tooltip { transition: none; transform: translateX(-50%); }\n .avatar-wrapper:hover .tooltip,\n .avatar-wrapper:focus-within .tooltip { transform: translateX(-50%); }\n .skeleton { animation: none; }\n }\n `];\n\n @property({ type: Array }) users: PresenceUser[] = [];\n @property({ type: Number, attribute: 'max-visible' }) maxVisible = 5;\n @property({ type: Boolean, reflect: true }) loading = false;\n @property({ type: String, reflect: true }) size: PresenceSize = 'md';\n\n private _handleUserClick(user: PresenceUser) {\n this.dispatchEvent(new CustomEvent('ai-presence-user-click', {\n detail: { user },\n bubbles: true, composed: true,\n }));\n }\n\n private _avatarSize(): 'sm' \| 'md' \| 'lg' {\n return this.size; // matches cg-avatar's size scale\n }\n\n private _renderTooltip(user: PresenceUser) {\n const statusText = STATUS_LABEL[user.status];\n const meta = user.lastSeen ? `${statusText} • ${user.lastSeen}` : statusText;\n return html`\n <span class=\"tooltip\" role=\"tooltip\">\n <span class=\"tooltip-name\">${user.name}</span>\n <span class=\"tooltip-meta\">${meta}</span>\n </span>\n `;\n }\n\n override render() {\n if (this.loading) {\n const placeholders = Math.min(this.maxVisible, 4);\n return html`\n <div class=\"container\" aria-busy=\"true\" aria-label=\"Loading presence\">\n <div class=\"avatar-stack\">\n ${Array.from({ length: placeholders }).map(() => html`<span class=\"skeleton\"></span>`)}\n </div>\n </div>\n `;\n }\n\n const visible = this.users.slice(0, this.maxVisible);\n const overflow = this.users.length - this.maxVisible;\n const avSize = this._avatarSize();\n\n return html`\n <div class=\"container\" role=\"group\" aria-label=\"Active users\" aria-live=\"polite\">\n <div class=\"avatar-stack\">\n ${visible.map(user => html`\n <div class=\"avatar-wrapper\">\n <button\n class=\"avatar-btn\"\n aria-label=\"${user.name}, ${STATUS_LABEL[user.status]}${user.lastSeen ? `, last seen ${user.lastSeen}` : ''}\"\n @click=${() => this._handleUserClick(user)}\n >\n <cg-avatar\n size=${avSize}\n shape=\"circle\"\n name=${user.name}\n src=${user.avatar ?? ''}\n status=${user.status}\n ></cg-avatar>\n </button>\n ${this._renderTooltip(user)}\n </div>\n `)}\n ${overflow > 0\n ? html`<span class=\"overflow-badge\" aria-label=\"${overflow} more users\">+${overflow}</span>`\n : nothing}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ai-presence': AiPresence;\n }\n}\n"],"names":["STATUS_LABEL","AiPresence","LitElement","user","statusText","meta","html","placeholders","visible","overflow","avSize","nothing","hostBase","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"ai-presence.js","sources":["../../../src/components/ai-presence/ai-presence.ts"],"sourcesContent":["/*\n @element ai-presence\n * Overlapping avatar stack showing live user presence. Built on top of <cg-avatar>\n * (handles initials/image/status-dot/sizes) with bespoke overlap stack, hover-lift,\n * tooltip with status + last-seen, \"+N more\" overflow badge, and skeleton state.\n \n @example\n * ```html\n * <ai-presence\n * size=\"md\"\n * .users=${[\n * { name: 'Alice', status: 'online', avatar: '/avatars/alice.jpg' },\n * { name: 'Bob', status: 'away', lastSeen: '5m ago' },\n * { name: 'Carol', status: 'busy' }\n * ]}\n * max-visible=\"4\"\n * ></ai-presence>\n * ```\n \n @prop {PresenceUser[]} users - User objects (name, status, optional avatar + lastSeen)\n * @prop {number} maxVisible - Max avatars before overflow badge (default 5)\n * @prop {boolean} loading - Render skeleton placeholders\n * @prop {\"sm\" \| \"md\" \| \"lg\"} size - Avatar size (default md)\n \n @fires {CustomEvent<{user: PresenceUser}>} ai-presence-user-click - Avatar clicked\n /\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBase, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-avatar/cg-avatar.js';\n\nexport type PresenceStatus = 'online' \| 'away' \| 'busy' \| 'offline';\nexport type PresenceSize = 'sm' \| 'md' \| 'lg';\n\nexport interface PresenceUser {\n name: string;\n avatar?: string;\n status: PresenceStatus;\n /* Optional last-seen text shown in the tooltip (e.g. \"5m ago\") /\n lastSeen?: string;\n}\n\nconst STATUS_LABEL: Record<PresenceStatus, string> = {\n online: 'Active',\n away: 'Away',\n busy: 'Do not disturb',\n offline: 'Offline',\n};\n\n@customElement('ai-presence')\nexport class AiPresence extends LitElement {\n static override styles = [hostBase, reducedMotion, fadeSlideInKeyframes, css`\n :host {\n align-items: center;\n animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n\n / Per-size variables (defaults to md) /\n --_avatar-size: var(--cg-spacing-32);\n --_overlap: var(--cg-spacing-8);\n }\n :host([hidden]) { display: none; }\n :host([size=\"sm\"]) {\n --_avatar-size: var(--cg-spacing-24);\n --_overlap: var(--cg-spacing-6);\n }\n :host([size=\"lg\"]) {\n --_avatar-size: var(--cg-spacing-40);\n --_overlap: var(--cg-spacing-12);\n }\n\n .container {\n display: flex;\n align-items: center;\n }\n .avatar-stack {\n display: flex;\n align-items: center;\n }\n\n .avatar-wrapper {\n position: relative;\n margin-left: calc(-1 var(--_overlap));\n z-index: 1;\n transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n }\n .avatar-wrapper:first-child { margin-left: 0; }\n .avatar-wrapper:hover,\n .avatar-wrapper:focus-within {\n z-index: 10;\n transform: translateY(calc(-1 * var(--cg-spacing-4)));\n }\n\n /* Outline ring around each avatar so they read as separate even when overlapping /\n .avatar-btn {\n display: inline-block;\n border-radius: var(--cg-border-radius-full);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-base-background);\n background: transparent;\n padding: 0;\n cursor: pointer;\n transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .avatar-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n .avatar-btn:focus-visible {\n outline: none;\n box-shadow:\n 0 0 0 2px var(--cg-color-surface-base-background),\n 0 0 0 calc(2px + var(--cg-border-width-100)) var(--cg-color-focus-ring);\n }\n\n / ── Overflow ── /\n .overflow-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--_avatar-size);\n height: var(--_avatar-size);\n border-radius: var(--cg-border-radius-full);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-base-background);\n background: var(--cg-color-action-tertiary-background-hover);\n color: var(--cg-color-surface-base-text);\n font-size: var(--cg-font-size-xs);\n font-weight: var(--cg-font-weight-bold);\n margin-left: calc(-1 var(--_overlap));\n cursor: default;\n }\n\n /* ── Tooltip (bespoke — multi-line beats cg-tooltip's single-string content) ── /\n .tooltip {\n position: absolute;\n bottom: calc(100% + var(--cg-spacing-8));\n left: 50%;\n transform: translateX(-50%) translateY(var(--cg-spacing-2));\n background: var(--cg-color-surface-tooltip-background);\n color: var(--cg-color-surface-base-text);\n padding: var(--cg-spacing-6) var(--cg-spacing-12);\n border-radius: var(--cg-border-radius-100);\n font-size: var(--cg-font-size-xs);\n line-height: var(--cg-line-height-snug);\n max-width: var(--cg-spacing-256);\n pointer-events: none;\n opacity: 0;\n transition:\n opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n transform var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out);\n z-index: 20;\n border: var(--cg-border-width-50) solid var(--cg-color-surface-tooltip-border);\n box-shadow: var(--cg-elevation-2);\n white-space: nowrap;\n }\n .tooltip::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n width: var(--cg-spacing-8);\n height: var(--cg-spacing-8);\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\n background: var(--cg-color-surface-tooltip-background);\n border-right: var(--cg-border-width-50) solid var(--cg-color-surface-tooltip-border);\n border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-tooltip-border);\n }\n .tooltip-name {\n font-weight: var(--cg-font-weight-semibold);\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .tooltip-meta {\n display: block;\n margin-top: var(--cg-spacing-2);\n color: var(--cg-color-surface-container-subtle);\n }\n .avatar-wrapper:hover .tooltip,\n .avatar-wrapper:focus-within .tooltip {\n opacity: 1;\n transform: translateX(-50%) translateY(0);\n }\n\n / ── Skeleton ── /\n @keyframes presence-shimmer {\n 0% { background-position: -100% 0, 0 0; }\n 100% { background-position: 200% 0, 0 0; }\n }\n .skeleton {\n display: inline-block;\n width: var(--_avatar-size);\n height: var(--_avatar-size);\n border-radius: var(--cg-border-radius-full);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-base-background);\n margin-left: calc(-1 var(--_overlap));\n flex-shrink: 0;\n background:\n linear-gradient(\n 90deg,\n transparent 0%,\n var(--cg-overlay-white-strong) 50%,\n transparent 100%\n ),\n var(--cg-color-action-tertiary-background-hover);\n background-size: 50% 100%, 100% 100%;\n background-repeat: no-repeat, no-repeat;\n animation: presence-shimmer 1.5s var(--cg-transition-easing-linear) infinite;\n }\n .skeleton:first-child { margin-left: 0; }\n\n @media (prefers-reduced-motion: reduce) {\n :host { animation: none; }\n .avatar-wrapper { transition: none; }\n .avatar-btn { transition: none; }\n .tooltip { transition: none; transform: translateX(-50%); }\n .avatar-wrapper:hover .tooltip,\n .avatar-wrapper:focus-within .tooltip { transform: translateX(-50%); }\n .skeleton { animation: none; }\n }\n `];\n\n @property({ type: Array }) users: PresenceUser[] = [];\n @property({ type: Number, attribute: 'max-visible' }) maxVisible = 5;\n @property({ type: Boolean, reflect: true }) loading = false;\n @property({ type: String, reflect: true }) size: PresenceSize = 'md';\n\n private _handleUserClick(user: PresenceUser) {\n this.dispatchEvent(new CustomEvent('ai-presence-user-click', {\n detail: { user },\n bubbles: true, composed: true,\n }));\n }\n\n private _avatarSize(): 'sm' \| 'md' \| 'lg' {\n return this.size; // matches cg-avatar's size scale\n }\n\n private _renderTooltip(user: PresenceUser) {\n const statusText = STATUS_LABEL[user.status];\n const meta = user.lastSeen ? `${statusText} • ${user.lastSeen}` : statusText;\n return html`\n <span class=\"tooltip\" role=\"tooltip\">\n <span class=\"tooltip-name\">${user.name}</span>\n <span class=\"tooltip-meta\">${meta}</span>\n </span>\n `;\n }\n\n override render() {\n if (this.loading) {\n const placeholders = Math.min(this.maxVisible, 4);\n return html`\n <div class=\"container\" aria-busy=\"true\" aria-label=\"Loading presence\">\n <div class=\"avatar-stack\">\n ${Array.from({ length: placeholders }).map(() => html`<span class=\"skeleton\"></span>`)}\n </div>\n </div>\n `;\n }\n\n const visible = this.users.slice(0, this.maxVisible);\n const overflow = this.users.length - this.maxVisible;\n const avSize = this._avatarSize();\n\n return html`\n <div class=\"container\" role=\"group\" aria-label=\"Active users\" aria-live=\"polite\">\n <div class=\"avatar-stack\">\n ${visible.map(user => html`\n <div class=\"avatar-wrapper\">\n <button\n class=\"avatar-btn\"\n aria-label=\"${user.name}, ${STATUS_LABEL[user.status]}${user.lastSeen ? `, last seen ${user.lastSeen}` : ''}\"\n @click=${() => this._handleUserClick(user)}\n >\n <cg-avatar\n size=${avSize}\n shape=\"circle\"\n name=${user.name}\n src=${user.avatar ?? ''}\n status=${user.status}\n ></cg-avatar>\n </button>\n ${this._renderTooltip(user)}\n </div>\n `)}\n ${overflow > 0\n ? html`<span class=\"overflow-badge\" aria-label=\"${overflow} more users\">+${overflow}</span>`\n : nothing}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ai-presence': AiPresence;\n }\n}\n"],"names":["STATUS_LABEL","AiPresence","LitElement","user","statusText","meta","html","placeholders","visible","overflow","avSize","nothing","hostBase","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-progress-steps/ai-progress-steps.js CHANGED Viewed

@@ -1,9 +1,9 @@
-import { css as u, LitElement as g, nothing as p, html as c } from "lit";
+import { css as u, LitElement as g, nothing as p, html as i } from "lit";
 import { property as d, customElement as v } from "lit/decorators.js";
-import { h as f, r as b, f as h } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as f, r as b, f as h } from "../../chunks/premium.css-DHekUEUt.js";
 var m = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (r, t, e, o) => {
-  for (var a = o > 1 ? void 0 : o ? x(t, e) : t, i = r.length - 1, n; i >= 0; i--)
-    (n = r[i]) && (a = (o ? n(t, e, a) : n(a)) || a);
+  for (var a = o > 1 ? void 0 : o ? x(t, e) : t, c = r.length - 1, n; c >= 0; c--)
+    (n = r[c]) && (a = (o ? n(t, e, a) : n(a)) || a);
   return o && a && m(t, e, a), a;
 };
 let s = class extends g {
@@ -31,11 +31,11 @@ let s = class extends g {
   }
   render() {
     const r = this.phases.length;
-    return c`
+    return i`
       <div class="steps" role="list" aria-label="Progress steps">
         ${this.phases.map((t, e) => {
       const o = e > 0 && this.phases[e - 1].status === "complete";
-      return c`
+      return i`
             <button
               class="step"
               role="listitem"
@@ -47,13 +47,13 @@ let s = class extends g {
               <div class="step-row">
                 <div class="line ${e === 0 ? "hide" : ""} ${o ? "done" : ""}"></div>
                 <div class="dot" data-status=${t.status}>
-                  ${this._statusIcon(t.status) || c`${e + 1}`}
+                  ${this._statusIcon(t.status) || i`${e + 1}`}
                 </div>
                 <div class="line ${e === r - 1 ? "hide" : ""} ${t.status === "complete" ? "done" : ""}"></div>
               </div>
               <div class="info">
                 <div class="label">${t.label}</div>
-                ${t.duration ? c`<div class="duration">${t.duration}</div>` : p}
+                ${t.duration ? i`<div class="duration">${t.duration}</div>` : p}
               </div>
             </button>
           `;
@@ -95,7 +95,7 @@ s.styles = [f, b, h, u`
       transform: scale(var(--cg-interaction-press-scale));
     }
     .step:focus-visible {
-      outline: 2px solid var(--cg-overlay-accent-strong);
+      outline: var(--cg-outline-width-default) solid var(--cg-color-focus-ring);
       outline-offset: var(--cg-outline-offset-default);
       border-radius: var(--cg-border-radius-50);
     }
@@ -108,7 +108,7 @@ s.styles = [f, b, h, u`
     .line {
       flex: 1;
-      height: 2px;
+      height: var(--cg-border-width-100);
       background: var(--cg-color-surface-cards-border);
       transition: background var(--cg-transition-duration-default) var(--cg-transition-easing-default);
     }
@@ -160,7 +160,7 @@ s.styles = [f, b, h, u`
     }
     .label {
-      font-size: var(--cg-font-size-xs);
+      font-size: var(--cg-font-size-sm);
       font-weight: var(--cg-font-weight-medium);
       color: var(--cg-color-input-text-placeholder);
       white-space: nowrap;

package/dist/components/ai-progress-steps/ai-progress-steps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ai-progress-steps.js","sources":["../../../src/components/ai-progress-steps/ai-progress-steps.ts"],"sourcesContent":["/*\n @element ai-progress-steps\n * Horizontal step indicator for multi-phase AI pipelines. Shows connected\n * dots with status icons (pending/active/complete/error), pulse animation\n * on the active phase, and optional duration labels. Supports compact mode.\n \n @example\n * ```html\n * <ai-progress-steps .phases=${[\n * { label: 'Retrieve', status: 'complete', duration: '0.3s' },\n * { label: 'Analyze', status: 'active' },\n * { label: 'Generate', status: 'pending' }\n * ]}></ai-progress-steps>\n * ```\n \n @prop {ProgressPhase[]} phases - Array of phase objects with label, status, duration\n * @prop {boolean} compact - Hide labels and shrink dots\n \n @fires {CustomEvent<{label: string, status: string, index: number}>} ai-progress-phase-click - When a phase is clicked\n /\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\nexport interface ProgressPhase {\n label: string;\n status: 'pending' \| 'active' \| 'complete' \| 'error';\n duration?: string;\n}\n\n@customElement('ai-progress-steps')\nexport class AiProgressSteps 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 :host([hidden]) { display: none; }\n\n .steps {\n display: flex;\n align-items: flex-start;\n gap: 0;\n width: 100%;\n }\n\n .step {\n display: flex;\n flex-direction: column;\n align-items: center;\n flex: 1;\n position: relative;\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n font-family: inherit;\n color: inherit;\n }\n .step:hover .dot {\n border-color: var(--cg-color-input-border-hover);\n }\n .step:active {\n transform: scale(var(--cg-interaction-press-scale));\n }\n .step:focus-visible {\n outline: ~~2px~~ solid var(--cg-~~overlay~~-~~accent~~-~~strong~~);\n outline-offset: var(--cg-outline-offset-default);\n border-radius: var(--cg-border-radius-50);\n }\n\n .step-row {\n display: flex;\n align-items: center;\n width: 100%;\n }\n\n .line {\n flex: 1;\n height: ~~2px~~;\n background: var(--cg-color-surface-cards-border);\n transition: background var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n }\n .line.done {\n background: var(--cg-color-action-primary-background-default);\n }\n .line.hide { visibility: hidden; }\n\n .dot {\n flex-shrink: 0;\n width: var(--cg-spacing-24);\n height: var(--cg-spacing-24);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--cg-font-size-sm);\n font-weight: var(--cg-font-weight-semibold);\n border: var(--cg-border-width-100) solid var(--cg-color-surface-cards-border);\n background: var(--cg-color-surface-container-background);\n color: var(--cg-color-input-text-placeholder);\n transition: opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n }\n\n .dot[data-status=\"complete\"] {\n border-color: var(--cg-color-surface-base-text);\n background: var(--cg-color-action-primary-background-default);\n color: var(--cg-color-surface-container-background);\n }\n .dot[data-status=\"active\"] {\n border-color: var(--cg-color-surface-base-text);\n color: var(--cg-color-surface-base-text);\n animation: pulse 1.5s ease-in-out infinite;\n }\n .dot[data-status=\"error\"] {\n border-color: var(--cg-color-status-error-text-default);\n background: var(--cg-color-status-error-background-default);\n color: var(--cg-color-status-error-text-default);\n }\n\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.6; }\n }\n\n .info {\n margin-top: var(--cg-spacing-6);\n text-align: center;\n }\n\n .label {\n font-size: var(--cg-font-size-xs);\n font-weight: var(--cg-font-weight-medium);\n color: var(--cg-color-input-text-placeholder);\n white-space: nowrap;\n }\n .step[data-status=\"active\"] .label {\n color: var(--cg-color-surface-base-text);\n }\n .step[data-status=\"complete\"] .label {\n color: var(--cg-color-surface-base-text);\n }\n .step[data-status=\"error\"] .label {\n color: var(--cg-color-status-error-text-default);\n }\n\n .duration {\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-input-text-placeholder);\n margin-top: var(--cg-spacing-2);\n }\n\n / Compact mode */\n :host([compact]) .dot { width: var(--cg-spacing-20); height: var(--cg-spacing-20); font-size: var(--cg-font-size-xs); }\n :host([compact]) .info { display: none; }\n\n `];\n\n @property({ type: Array }) phases: ProgressPhase[] = [];\n @property({ type: Boolean, reflect: true }) compact = false;\n\n private _statusIcon(status: string): string {\n switch (status) {\n case 'complete': return '\\u2713';\n case 'error': return '\\u2717';\n case 'active': return '\\u25CF';\n default: return '';\n }\n }\n\n private _handlePhaseClick(phase: ProgressPhase, index: number): void {\n this.dispatchEvent(new CustomEvent('ai-progress-phase-click', {\n detail: { label: phase.label, status: phase.status, index },\n bubbles: true,\n composed: true,\n }));\n }\n\n override render() {\n const len = this.phases.length;\n return html`\n <div class=\"steps\" role=\"list\" aria-label=\"Progress steps\">\n ${this.phases.map((phase, i) => {\n const prevDone = i > 0 && (this.phases[i - 1]!.status === 'complete');\n return html`\n <button\n class=\"step\"\n role=\"listitem\"\n tabindex=\"0\"\n data-status=${phase.status}\n aria-label=${`${phase.label}: ${phase.status}`}\n @click=${() => this._handlePhaseClick(phase, i)}\n >\n <div class=\"step-row\">\n <div class=\"line ${i === 0 ? 'hide' : ''} ${prevDone ? 'done' : ''}\"></div>\n <div class=\"dot\" data-status=${phase.status}>\n ${this._statusIcon(phase.status) \|\| html`${i + 1}`}\n </div>\n <div class=\"line ${i === len - 1 ? 'hide' : ''} ${phase.status === 'complete' ? 'done' : ''}\"></div>\n </div>\n <div class=\"info\">\n <div class=\"label\">${phase.label}</div>\n ${phase.duration ? html`<div class=\"duration\">${phase.duration}</div>` : nothing}\n </div>\n </button>\n `;\n })}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ai-progress-steps': AiProgressSteps;\n }\n}\n"],"names":["AiProgressSteps","LitElement","status","phase","index","len","html","i","prevDone","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AA+BO,IAAMA,IAAN,cAA8BC,EAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GA8HsB,KAAA,SAA0B,CAAA,GACT,KAAA,UAAU;AAAA,EAAA;AAAA,EAE9C,YAAYC,GAAwB;AAC1C,YAAQA,GAAA;AAAA,MACN,KAAK;AAAY,eAAO;AAAA,MACxB,KAAK;AAAS,eAAO;AAAA,MACrB,KAAK;AAAU,eAAO;AAAA,MACtB;AAAS,eAAO;AAAA,IAAA;AAAA,EAEpB;AAAA,EAEQ,kBAAkBC,GAAsBC,GAAqB;AACnE,SAAK,cAAc,IAAI,YAAY,2BAA2B;AAAA,MAC5D,QAAQ,EAAE,OAAOD,EAAM,OAAO,QAAQA,EAAM,QAAQ,OAAAC,EAAA;AAAA,MACpD,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAES,SAAS;AAChB,UAAMC,IAAM,KAAK,OAAO;AACxB,WAAOC;AAAA;AAAA,UAED,KAAK,OAAO,IAAI,CAACH,GAAOI,MAAM;AAC9B,YAAMC,IAAWD,IAAI,KAAM,KAAK,OAAOA,IAAI,CAAC,EAAG,WAAW;AAC1D,aAAOD;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKWH,EAAM,MAAM;AAAA,2BACb,GAAGA,EAAM,KAAK,KAAKA,EAAM,MAAM,EAAE;AAAA,uBACrC,MAAM,KAAK,kBAAkBA,GAAOI,CAAC,CAAC;AAAA;AAAA;AAAA,mCAG1BA,MAAM,IAAI,SAAS,EAAE,IAAIC,IAAW,SAAS,EAAE;AAAA,+CACnCL,EAAM,MAAM;AAAA,oBACvC,KAAK,YAAYA,EAAM,MAAM,KAAKG,IAAOC,IAAI,CAAC,EAAE;AAAA;AAAA,mCAEjCA,MAAMF,IAAM,IAAI,SAAS,EAAE,IAAIF,EAAM,WAAW,aAAa,SAAS,EAAE;AAAA;AAAA;AAAA,qCAGtEA,EAAM,KAAK;AAAA,kBAC9BA,EAAM,WAAWG,0BAA6BH,EAAM,QAAQ,WAAWM,CAAO;AAAA;AAAA;AAAA;AAAA,IAIxF,CAAC,CAAC;AAAA;AAAA;AAAA,EAGR;AACF;AAlLaT,EACK,SAAS,CAACU,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,GA2HzE;AAE0BC,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GA9Hdf,EA8HgB,WAAA,UAAA,CAAA;AACiBc,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA/H/Bf,EA+HiC,WAAA,WAAA,CAAA;AA/HjCA,IAANc,EAAA;AAAA,EADNE,EAAc,mBAAmB;AAAA,GACrBhB,CAAA;"}
1	+ {"version":3,"file":"ai-progress-steps.js","sources":["../../../src/components/ai-progress-steps/ai-progress-steps.ts"],"sourcesContent":["/*\n @element ai-progress-steps\n * Horizontal step indicator for multi-phase AI pipelines. Shows connected\n * dots with status icons (pending/active/complete/error), pulse animation\n * on the active phase, and optional duration labels. Supports compact mode.\n \n @example\n * ```html\n * <ai-progress-steps .phases=${[\n * { label: 'Retrieve', status: 'complete', duration: '0.3s' },\n * { label: 'Analyze', status: 'active' },\n * { label: 'Generate', status: 'pending' }\n * ]}></ai-progress-steps>\n * ```\n \n @prop {ProgressPhase[]} phases - Array of phase objects with label, status, duration\n * @prop {boolean} compact - Hide labels and shrink dots\n \n @fires {CustomEvent<{label: string, status: string, index: number}>} ai-progress-phase-click - When a phase is clicked\n /\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\nexport interface ProgressPhase {\n label: string;\n status: 'pending' \| 'active' \| 'complete' \| 'error';\n duration?: string;\n}\n\n@customElement('ai-progress-steps')\nexport class AiProgressSteps 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 :host([hidden]) { display: none; }\n\n .steps {\n display: flex;\n align-items: flex-start;\n gap: 0;\n width: 100%;\n }\n\n .step {\n display: flex;\n flex-direction: column;\n align-items: center;\n flex: 1;\n position: relative;\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n font-family: inherit;\n color: inherit;\n }\n .step:hover .dot {\n border-color: var(--cg-color-input-border-hover);\n }\n .step:active {\n transform: scale(var(--cg-interaction-press-scale));\n }\n .step:focus-visible {\n outline: var(--cg-outline-width-default) solid var(--cg-color-focus-ring);\n outline-offset: var(--cg-outline-offset-default);\n border-radius: var(--cg-border-radius-50);\n }\n\n .step-row {\n display: flex;\n align-items: center;\n width: 100%;\n }\n\n .line {\n flex: 1;\n height: var(--cg-border-width-100);\n background: var(--cg-color-surface-cards-border);\n transition: background var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n }\n .line.done {\n background: var(--cg-color-action-primary-background-default);\n }\n .line.hide { visibility: hidden; }\n\n .dot {\n flex-shrink: 0;\n width: var(--cg-spacing-24);\n height: var(--cg-spacing-24);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--cg-font-size-sm);\n font-weight: var(--cg-font-weight-semibold);\n border: var(--cg-border-width-100) solid var(--cg-color-surface-cards-border);\n background: var(--cg-color-surface-container-background);\n color: var(--cg-color-input-text-placeholder);\n transition: opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n }\n\n .dot[data-status=\"complete\"] {\n border-color: var(--cg-color-surface-base-text);\n background: var(--cg-color-action-primary-background-default);\n color: var(--cg-color-surface-container-background);\n }\n .dot[data-status=\"active\"] {\n border-color: var(--cg-color-surface-base-text);\n color: var(--cg-color-surface-base-text);\n animation: pulse 1.5s ease-in-out infinite;\n }\n .dot[data-status=\"error\"] {\n border-color: var(--cg-color-status-error-text-default);\n background: var(--cg-color-status-error-background-default);\n color: var(--cg-color-status-error-text-default);\n }\n\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.6; }\n }\n\n .info {\n margin-top: var(--cg-spacing-6);\n text-align: center;\n }\n\n .label {\n font-size: var(--cg-font-size-sm);\n font-weight: var(--cg-font-weight-medium);\n color: var(--cg-color-input-text-placeholder);\n white-space: nowrap;\n }\n .step[data-status=\"active\"] .label {\n color: var(--cg-color-surface-base-text);\n }\n .step[data-status=\"complete\"] .label {\n color: var(--cg-color-surface-base-text);\n }\n .step[data-status=\"error\"] .label {\n color: var(--cg-color-status-error-text-default);\n }\n\n .duration {\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-input-text-placeholder);\n margin-top: var(--cg-spacing-2);\n }\n\n / Compact mode */\n :host([compact]) .dot { width: var(--cg-spacing-20); height: var(--cg-spacing-20); font-size: var(--cg-font-size-xs); }\n :host([compact]) .info { display: none; }\n\n `];\n\n @property({ type: Array }) phases: ProgressPhase[] = [];\n @property({ type: Boolean, reflect: true }) compact = false;\n\n private _statusIcon(status: string): string {\n switch (status) {\n case 'complete': return '\\u2713';\n case 'error': return '\\u2717';\n case 'active': return '\\u25CF';\n default: return '';\n }\n }\n\n private _handlePhaseClick(phase: ProgressPhase, index: number): void {\n this.dispatchEvent(new CustomEvent('ai-progress-phase-click', {\n detail: { label: phase.label, status: phase.status, index },\n bubbles: true,\n composed: true,\n }));\n }\n\n override render() {\n const len = this.phases.length;\n return html`\n <div class=\"steps\" role=\"list\" aria-label=\"Progress steps\">\n ${this.phases.map((phase, i) => {\n const prevDone = i > 0 && (this.phases[i - 1]!.status === 'complete');\n return html`\n <button\n class=\"step\"\n role=\"listitem\"\n tabindex=\"0\"\n data-status=${phase.status}\n aria-label=${`${phase.label}: ${phase.status}`}\n @click=${() => this._handlePhaseClick(phase, i)}\n >\n <div class=\"step-row\">\n <div class=\"line ${i === 0 ? 'hide' : ''} ${prevDone ? 'done' : ''}\"></div>\n <div class=\"dot\" data-status=${phase.status}>\n ${this._statusIcon(phase.status) \|\| html`${i + 1}`}\n </div>\n <div class=\"line ${i === len - 1 ? 'hide' : ''} ${phase.status === 'complete' ? 'done' : ''}\"></div>\n </div>\n <div class=\"info\">\n <div class=\"label\">${phase.label}</div>\n ${phase.duration ? html`<div class=\"duration\">${phase.duration}</div>` : nothing}\n </div>\n </button>\n `;\n })}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ai-progress-steps': AiProgressSteps;\n }\n}\n"],"names":["AiProgressSteps","LitElement","status","phase","index","len","html","i","prevDone","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-prompt-editor/ai-prompt-editor.js CHANGED Viewed

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