@cognivo/components 0.8.0

package/dist/components/ai-onboarding/ai-onboarding.js

@@ -0,0 +1,375 @@
+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 "../cg-card/cg-card.js";
+import "../cg-text/cg-text.js";
+import "../cg-button/cg-button.js";
+import "../cg-stack/cg-stack.js";
+var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, d = (t, r, o, n) => {
+  for (var e = n > 1 ? void 0 : n ? x(r, o) : r, i = t.length - 1, a; i >= 0; i--)
+    (a = t[i]) && (e = (n ? a(r, o, e) : a(e)) || e);
+  return n && e && w(r, o, e), e;
+};
+let c = class extends h {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.steps = [], this.active = 0, this.dismissible = !0, this.showSkip = !0, this.progress = "auto", this._direction = "forward", this._onKeydown = (t) => {
+      t.key === "ArrowRight" ? (t.preventDefault(), this._next()) : t.key === "ArrowLeft" ? (t.preventDefault(), this._prev()) : t.key === "Escape" && this.dismissible && (t.preventDefault(), this._dismiss());
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("keydown", this._onKeydown), this.hasAttribute("tabindex") || (this.tabIndex = 0);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("keydown", this._onKeydown);
+  }
+  _emit(t, r = {}) {
+    this.dispatchEvent(new CustomEvent(t, { detail: r, bubbles: !0, composed: !0 }));
+  }
+  _goTo(t) {
+    if (t < 0 || t >= this.steps.length || t === this.active) return;
+    const r = this.active;
+    this._direction = t > r ? "forward" : "back", this.active = t, this._emit("ai-onboarding-step-change", { from: r, to: t });
+  }
+  _next() {
+    this.active < this.steps.length - 1 ? (this._direction = "forward", this.active++, this._emit("ai-onboarding-next", { step: this.active }), this._emit("ai-onboarding-step-change", { from: this.active - 1, to: this.active })) : this._emit("ai-onboarding-complete");
+  }
+  _prev() {
+    this.active > 0 && (this._direction = "back", this.active--, this._emit("ai-onboarding-prev", { step: this.active }), this._emit("ai-onboarding-step-change", { from: this.active + 1, to: this.active }));
+  }
+  _dismiss() {
+    this._emit("ai-onboarding-dismiss", { step: this.active });
+  }
+  _resolvedProgress() {
+    if (this.progress !== "auto") return this.progress;
+    const t = this.steps.length;
+    return t <= 1 ? "numbered" : t <= 4 ? "dots" : "bar";
+  }
+  _renderProgress() {
+    const t = this._resolvedProgress(), r = this.steps.length, o = `Step ${this.active + 1} of ${r}`;
+    if (t === "numbered")
+      return s`<cg-text class="progress-numbered" size="xs" weight="bold" color="muted">${o}</cg-text>`;
+    if (t === "dots")
+      return s`
+        <div class="progress-dots" role="tablist" aria-label="Onboarding progress">
+          ${this.steps.map((n, e) => {
+        const i = e < this.active, a = e === this.active;
+        return s`<button
+              class="dot ${a ? "active" : i ? "completed" : ""}"
+              role="tab"
+              aria-selected=${a}
+              aria-label="Go to step ${e + 1}: ${n.title}"
+              ?disabled=${!i && !a}
+              @click=${() => i && this._goTo(e)}
+            ></button>`;
+      })}
+        </div>
+      `;
+    if (t === "bar") {
+      const n = r > 1 ? Math.round((this.active + 1) / r * 100) : 100;
+      return s`
+        <div class="progress-bar">
+          <div class="progress-bar-track" role="progressbar" aria-valuenow=${this.active + 1} aria-valuemin="1" aria-valuemax=${r} aria-label=${o}>
+            <div class="progress-bar-fill" style="width: ${n}%"></div>
+          </div>
+          <cg-text size="xs" weight="bold" color="muted">${o}</cg-text>
+        </div>
+      `;
+    }
+    return s`
+      <div class="progress-stepper" role="tablist" aria-label="Onboarding progress">
+        ${this.steps.map((n, e) => {
+      const i = e < this.active, a = e === this.active, p = a ? "active" : i ? "completed" : "", u = i ? s`<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>` : s`${e + 1}`;
+      return s`
+            ${e > 0 ? s`<span class="stepper-line ${e <= this.active ? "completed" : ""}"></span>` : g}
+            <button
+              class="stepper-node ${p}"
+              role="tab"
+              aria-selected=${a}
+              aria-label="Go to step ${e + 1}: ${n.title}"
+              ?disabled=${!i && !a}
+              @click=${() => i && this._goTo(e)}
+            >${u}</button>
+          `;
+    })}
+      </div>
+    `;
+  }
+  render() {
+    const t = this.steps[this.active];
+    if (!t) return g;
+    const r = this.active === this.steps.length - 1, o = this.steps.length;
+    return s`
+      <cg-card variant="elevated" padding="lg" rounded=${this.rounded} role="dialog" aria-modal="true" aria-label="Onboarding step ${this.active + 1} of ${o}">
+        <div class="sr-only" aria-live="polite" aria-atomic="true">Step ${this.active + 1} of ${o}: ${t.title}</div>
+
+        <div slot="header" class="header-row">
+          <div class="header-progress">${this._renderProgress()}</div>
+          ${this.dismissible ? s`<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>` : g}
+        </div>
+
+        <div class="step-content" data-direction=${this._direction} .key=${this.active}>
+          <div class="media-slot"><slot name="media"></slot></div>
+          <cg-stack direction="column" gap="sm">
+            <cg-text as="h3" size="lg" weight="bold">${t.title}</cg-text>
+            <cg-text size="sm" color="muted">${t.description}</cg-text>
+          </cg-stack>
+          <div class="step-action-slot"><slot name="step-action"></slot></div>
+        </div>
+
+        <div slot="footer" class="footer-row">
+          <cg-button
+            variant="secondary"
+            size="md"
+            ?disabled=${this.active === 0}
+            label="Previous step"
+            @click=${this._prev}
+          >Back</cg-button>
+          <div class="footer-right">
+            ${this.showSkip && !r ? s`<cg-button variant="tertiary" size="sm" label="Skip onboarding" @click=${this._dismiss}>Skip tour</cg-button>` : g}
+            <cg-button
+              variant="primary"
+              size="md"
+              label=${r ? "Complete onboarding" : "Next step"}
+              @click=${this._next}
+            >${r ? "Done" : "Next"}</cg-button>
+          </div>
+        </div>
+      </cg-card>
+    `;
+  }
+};
+c.styles = [m, y, k, v`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      display: block;
+      max-width: 440px;
+    }
+    :host([hidden]) { display: none; }
+
+    cg-card { display: block; }
+
+    /* ── Header row (progress + dismiss) ── */
+    .header-row {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      width: 100%;
+    }
+    .header-progress { flex: 1; min-width: 0; }
+
+    .dismiss-btn {
+      flex-shrink: 0;
+      background: none;
+      border: none;
+      color: var(--cg-color-surface-container-outlined);
+      cursor: pointer;
+      padding: var(--cg-spacing-4);
+      line-height: 1;
+      border-radius: var(--cg-border-radius-50);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      transition:
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .dismiss-btn:hover {
+      color: var(--cg-color-surface-base-text);
+      background: var(--cg-color-action-secondary-background-hover);
+    }
+    .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);
+    }
+
+    /* ── Progress: numbered ── */
+    .progress-numbered {
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+    }
+
+    /* ── Progress: dots ── */
+    .progress-dots {
+      display: flex;
+      gap: var(--cg-spacing-6);
+      align-items: center;
+    }
+    .dot {
+      width: var(--cg-spacing-8);
+      height: var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-surface-cards-border);
+      border: none;
+      padding: 0;
+      cursor: not-allowed;
+      transition:
+        background var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    .dot.completed {
+      background: var(--cg-color-action-primary-background-default);
+      opacity: 0.5;
+      cursor: pointer;
+    }
+    .dot.completed:hover { opacity: 0.85; }
+    .dot.active {
+      background: var(--cg-color-action-primary-background-default);
+      transform: scale(1.3);
+      cursor: default;
+    }
+    .dot:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+
+    /* ── Progress: bar ── */
+    .progress-bar {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-6);
+      width: 100%;
+    }
+    .progress-bar-track {
+      width: 100%;
+      height: var(--cg-spacing-4);
+      background: var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-full);
+      overflow: hidden;
+    }
+    .progress-bar-fill {
+      height: 100%;
+      background: var(--cg-color-action-primary-background-default);
+      border-radius: var(--cg-border-radius-full);
+      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out);
+    }
+
+    /* ── Progress: stepper ── */
+    .progress-stepper {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      flex-wrap: nowrap;
+      overflow: hidden;
+    }
+    .stepper-node {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--cg-spacing-24);
+      height: var(--cg-spacing-24);
+      flex-shrink: 0;
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-surface-cards-border);
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-bold);
+      border: none;
+      padding: 0;
+      cursor: not-allowed;
+      transition:
+        background var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    .stepper-node.completed {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+      cursor: pointer;
+    }
+    .stepper-node.active {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+      cursor: default;
+    }
+    .stepper-node:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    .stepper-line {
+      flex: 1;
+      min-width: var(--cg-spacing-8);
+      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);
+    }
+    .stepper-line.completed {
+      background: var(--cg-color-action-primary-background-default);
+    }
+
+    /* ── Step content (animated on change) ── */
+    .step-content {
+      animation: stepIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
+    }
+    @keyframes stepIn {
+      from { opacity: 0; transform: translateX(8px); }
+      to   { opacity: 1; transform: translateX(0); }
+    }
+    .step-content[data-direction="back"] { animation-name: stepInBack; }
+    @keyframes stepInBack {
+      from { opacity: 0; transform: translateX(-8px); }
+      to   { opacity: 1; transform: translateX(0); }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .step-content { animation: none; }
+    }
+
+    .media-slot { margin-bottom: var(--cg-spacing-16); }
+    .media-slot:empty { display: none; }
+
+    .step-action-slot { margin-top: var(--cg-spacing-16); }
+    .step-action-slot:empty { display: none; }
+
+    /* ── Footer (actions) ── */
+    .footer-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      width: 100%;
+    }
+    .footer-right {
+      display: inline-flex;
+      gap: var(--cg-spacing-8);
+      align-items: center;
+    }
+
+    /* sr-only live region */
+    .sr-only {
+      position: absolute;
+      width: 1px; height: 1px;
+      padding: 0; margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+  `];
+d([
+  l({ reflect: !0 })
+], c.prototype, "rounded", 2);
+d([
+  l({ type: Array })
+], c.prototype, "steps", 2);
+d([
+  l({ type: Number })
+], c.prototype, "active", 2);
+d([
+  l({ type: Boolean })
+], c.prototype, "dismissible", 2);
+d([
+  l({ type: Boolean, attribute: "show-skip" })
+], c.prototype, "showSkip", 2);
+d([
+  l({ reflect: !0 })
+], c.prototype, "progress", 2);
+d([
+  b()
+], c.prototype, "_direction", 2);
+c = d([
+  f("ai-onboarding")
+], c);
+export {
+  c as AiOnboarding
+};
+//# sourceMappingURL=ai-onboarding.js.map

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

@@ -0,0 +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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"}

package/dist/components/ai-permission-gate/ai-permission-gate.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+interface Permission {
+    feature: string;
+    role: string;
+    allowed: boolean;
+    reason?: string;
+}
+export declare class AiPermissionGate extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    permissions: Permission[];
+    currentRole: string;
+    private get _relevantPermissions();
+    private get _allowedCount();
+    private get _deniedCount();
+    private _requestAccess;
+    private _checkIcon;
+    private _xIcon;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-permission-gate': AiPermissionGate;
+    }
+}
+export {};
+//# sourceMappingURL=ai-permission-gate.d.ts.map

package/dist/components/ai-permission-gate/ai-permission-gate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-permission-gate.d.ts","sourceRoot":"","sources":["../../../src/components/ai-permission-gate/ai-permission-gate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAAE,UAAU,EAA2B,MAAM,KAAK,CAAC;AAG1D,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,2BAA2B,CAAC;AACnC,OAAO,yBAAyB,CAAC;AAEjC,UAAU,UAAU;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BAsFnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACvD,WAAW,EAAE,UAAU,EAAE,CAAM;IACH,WAAW,SAAM;IAExE,OAAO,KAAK,oBAAoB,GAG/B;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,UAAU;IAGlB,OAAO,CAAC,MAAM;IAIL,MAAM;CAsDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

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

@@ -0,0 +1,193 @@
+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 "../cg-card/cg-card.js";
+import "../cg-text/cg-text.js";
+import "../cg-button/cg-button.js";
+import "../cg-badge/cg-badge.js";
+var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, o = (e, t, n, a) => {
+  for (var r = a > 1 ? void 0 : a ? w(t, n) : t, c = e.length - 1, l; c >= 0; c--)
+    (l = e[c]) && (r = (a ? l(t, n, r) : l(r)) || r);
+  return a && r && b(t, n, r), r;
+};
+let i = class extends m {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.permissions = [], this.currentRole = "";
+  }
+  get _relevantPermissions() {
+    return this.currentRole ? this.permissions.filter((e) => e.role === this.currentRole) : this.permissions;
+  }
+  get _allowedCount() {
+    return this._relevantPermissions.filter((e) => e.allowed).length;
+  }
+  get _deniedCount() {
+    return this._relevantPermissions.filter((e) => !e.allowed).length;
+  }
+  _requestAccess(e) {
+    this.dispatchEvent(new CustomEvent("ai-permission-request", {
+      detail: { feature: e.feature, role: e.role },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _checkIcon() {
+    return u`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
+  }
+  _xIcon() {
+    return u`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>`;
+  }
+  render() {
+    const e = this._relevantPermissions;
+    return s`
+      <cg-card variant="outlined" padding="md" rounded=${this.rounded} role="region" aria-label="Permission gate">
+        <div slot="header" class="header-row">
+          <cg-text size="sm" weight="semibold">Feature Permissions</cg-text>
+          ${this.currentRole ? s`<cg-badge variant="neutral" size="sm" rounded="full">${this.currentRole}</cg-badge>` : d}
+        </div>
+
+        ${e.length === 0 ? s`
+          <div class="empty">
+            <cg-text size="sm" color="muted">No permissions configured</cg-text>
+          </div>
+        ` : s`
+          <div class="feature-list" role="list" aria-label="Feature permissions list">
+            ${e.map((t) => s`
+              <div class="feature-row" role="listitem">
+                <span class="status-icon ${t.allowed ? "allowed" : "denied"}" aria-hidden="true">
+                  ${t.allowed ? this._checkIcon() : this._xIcon()}
+                </span>
+                <div class="feature-info">
+                  <cg-text size="sm" weight="semibold">${t.feature}</cg-text>
+                  <cg-text size="xs" color="muted">Role: ${t.role}</cg-text>
+                  ${t.reason ? s`<cg-text size="xs" color="muted" style="font-style:italic;">${t.reason}</cg-text>` : d}
+                </div>
+                ${t.allowed ? d : s`
+                  <cg-button
+                    variant="secondary"
+                    size="sm"
+                    aria-label="Request access to ${t.feature}"
+                    @click=${() => this._requestAccess(t)}
+                  >Request Access</cg-button>
+                `}
+              </div>
+            `)}
+          </div>
+
+          <div class="summary">
+            <span class="summary-item">
+              <span class="dot dot-green" aria-hidden="true"></span>
+              <cg-text size="xs" color="muted">${this._allowedCount} allowed</cg-text>
+            </span>
+            <span class="summary-item">
+              <span class="dot dot-red" aria-hidden="true"></span>
+              <cg-text size="xs" color="muted">${this._deniedCount} denied</cg-text>
+            </span>
+          </div>
+        `}
+      </cg-card>
+    `;
+  }
+};
+i.styles = [f, h, x, p`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      display: block;
+    }
+    :host([hidden]) { display: none; }
+
+    cg-card { display: block; }
+
+    .header-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--cg-spacing-12);
+      width: 100%;
+    }
+
+    .feature-list {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+
+    .feature-row {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-12) var(--cg-spacing-8);
+      min-height: var(--cg-spacing-48);
+    }
+    .feature-row + .feature-row {
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+
+    .status-icon {
+      width: var(--cg-spacing-20);
+      height: var(--cg-spacing-20);
+      border-radius: var(--cg-border-radius-full);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    .status-icon svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }
+    .status-icon.allowed {
+      background: var(--cg-color-status-success-background-default);
+      color: var(--cg-color-status-success-text-default);
+    }
+    .status-icon.denied {
+      background: var(--cg-color-status-error-background-default);
+      color: var(--cg-color-status-error-text-default);
+    }
+
+    .feature-info {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-2);
+    }
+
+    .summary {
+      margin-top: var(--cg-spacing-12);
+      padding-top: var(--cg-spacing-12);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      display: flex;
+      gap: var(--cg-spacing-16);
+    }
+    .summary-item {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-6);
+    }
+    .dot {
+      width: var(--cg-spacing-8);
+      height: var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+      flex-shrink: 0;
+    }
+    .dot-green { background: var(--cg-color-status-success-text-default); }
+    .dot-red { background: var(--cg-color-status-error-text-default); }
+
+    .empty {
+      text-align: center;
+      padding: var(--cg-spacing-24) 0;
+    }
+  `];
+o([
+  g({ reflect: !0 })
+], i.prototype, "rounded", 2);
+o([
+  g({ type: Array })
+], i.prototype, "permissions", 2);
+o([
+  g({ type: String, attribute: "current-role" })
+], i.prototype, "currentRole", 2);
+i = o([
+  v("ai-permission-gate")
+], i);
+export {
+  i as AiPermissionGate
+};
+//# sourceMappingURL=ai-permission-gate.js.map