@cognivo/components 0.8.0

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

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

package/dist/components/bias-anchoring/bias-anchoring.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+/**
+ * @element bias-anchoring
+ * Reference-price anchoring wrapper. Displays a struck-through "anchor" value
+ * next to a prominently emphasized "current" value, with an optional savings
+ * label. Used by retail (Shopify, Amazon) to frame the current price as a
+ * discount from a perceived reference.
+ *
+ * @example
+ * ```html
+ * <bias-anchoring anchor="$199" current="$99" label="Save 50%"></bias-anchoring>
+ * ```
+ *
+ * @cssprop --cg-component-bias-anchoring-radius
+ * @cssprop --cg-component-bias-anchoring-padding
+ * @cssprop --cg-component-bias-anchoring-gap
+ */
+export declare class BiasAnchoring extends LitElement {
+    /** Canonical bias ID in @cognivo/design-advisor. */
+    static biasId: "anchoring-bias";
+    static styles: import('lit').CSSResult[];
+    anchor: string;
+    current: string;
+    label: string;
+    orientation: 'horizontal' | 'vertical';
+    variant: 'default' | 'subtle' | 'emphasized';
+    private get _ariaLabel();
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bias-anchoring': BiasAnchoring;
+    }
+}
+//# sourceMappingURL=bias-anchoring.d.ts.map

package/dist/components/bias-anchoring/bias-anchoring.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bias-anchoring.d.ts","sourceRoot":"","sources":["../../../src/components/bias-anchoring/bias-anchoring.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;;;GAeG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,oDAAoD;IACpD,MAAM,CAAC,MAAM,EAAG,gBAAgB,CAAU;IAE1C,OAAgB,MAAM,4BAwDnB;IAES,MAAM,SAAM;IACZ,OAAO,SAAM;IACb,KAAK,SAAM;IACM,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IACtD,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,YAAY,CAAa;IAEtF,OAAO,KAAK,UAAU,GAGrB;IAEQ,MAAM;CAUhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

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

@@ -0,0 +1,107 @@
+import { css as u, LitElement as d, nothing as h, html as n } from "lit";
+import { property as s, customElement as p } from "lit/decorators.js";
+import { h as v, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, a = (e, o, c, i) => {
+  for (var t = i > 1 ? void 0 : i ? m(o, c) : o, l = e.length - 1, g; l >= 0; l--)
+    (g = e[l]) && (t = (i ? g(o, c, t) : g(t)) || t);
+  return i && t && b(o, c, t), t;
+};
+let r = class extends d {
+  constructor() {
+    super(...arguments), this.anchor = "", this.current = "", this.label = "", this.orientation = "horizontal", this.variant = "default";
+  }
+  get _ariaLabel() {
+    const e = `Original ${this.anchor}, now ${this.current}`;
+    return this.label ? `${e}. ${this.label}` : e;
+  }
+  render() {
+    return n`
+      <div class="wrap" role="group" aria-label=${this._ariaLabel}>
+        ${this.anchor ? n`<span class="anchor" aria-hidden="true">${this.anchor}</span>` : h}
+        ${this.current ? n`<span class="current" aria-hidden="true">${this.current}</span>` : h}
+        ${this.label ? n`<span class="label" aria-hidden="true">${this.label}</span>` : h}
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+r.biasId = "anchoring-bias";
+r.styles = [v, f, u`
+    :host { display: inline-block; }
+
+    .wrap {
+      display: inline-flex;
+      align-items: baseline;
+      gap: var(--cg-component-bias-anchoring-gap);
+      padding: var(--cg-component-bias-anchoring-padding);
+      border-radius: var(--cg-component-bias-anchoring-radius);
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    :host([orientation="vertical"]) .wrap {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .anchor {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-container-text);
+      text-decoration: line-through;
+      opacity: 0.7;
+    }
+
+    .current {
+      font-size: var(--cg-font-size-xl);
+      font-weight: var(--cg-font-weight-bold);
+      color: var(--cg-color-surface-base-text);
+      letter-spacing: var(--cg-letter-spacing-tight);
+      line-height: var(--cg-line-height-tight);
+    }
+
+    .label {
+      display: inline-flex;
+      align-items: center;
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      background: var(--cg-color-status-success-background-default);
+      color: var(--cg-color-status-success-text-default);
+      border: var(--cg-border-width-50) solid var(--cg-color-status-success-border-default);
+    }
+
+    /* Variants */
+    :host([variant="subtle"]) .current { font-size: var(--cg-font-size-lg); }
+    :host([variant="subtle"]) .anchor { font-size: var(--cg-font-size-xs); }
+
+    :host([variant="emphasized"]) .wrap {
+      background: var(--cg-color-status-success-background-default);
+      border: var(--cg-border-width-50) solid var(--cg-color-status-success-border-default);
+    }
+    :host([variant="emphasized"]) .current {
+      color: var(--cg-color-status-success-text-default);
+      font-size: var(--cg-font-size-2xl);
+    }
+  `];
+a([
+  s()
+], r.prototype, "anchor", 2);
+a([
+  s()
+], r.prototype, "current", 2);
+a([
+  s()
+], r.prototype, "label", 2);
+a([
+  s({ reflect: !0 })
+], r.prototype, "orientation", 2);
+a([
+  s({ reflect: !0 })
+], r.prototype, "variant", 2);
+r = a([
+  p("bias-anchoring")
+], r);
+export {
+  r as BiasAnchoring
+};
+//# sourceMappingURL=bias-anchoring.js.map

package/dist/components/bias-anchoring/bias-anchoring.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bias-anchoring.js","sources":["../../../src/components/bias-anchoring/bias-anchoring.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element bias-anchoring\n * Reference-price anchoring wrapper. Displays a struck-through \"anchor\" value\n * next to a prominently emphasized \"current\" value, with an optional savings\n * label. Used by retail (Shopify, Amazon) to frame the current price as a\n * discount from a perceived reference.\n *\n * @example\n * ```html\n * <bias-anchoring anchor=\"$199\" current=\"$99\" label=\"Save 50%\"></bias-anchoring>\n * ```\n *\n * @cssprop --cg-component-bias-anchoring-radius\n * @cssprop --cg-component-bias-anchoring-padding\n * @cssprop --cg-component-bias-anchoring-gap\n */\n@customElement('bias-anchoring')\nexport class BiasAnchoring extends LitElement {\n  /** Canonical bias ID in @cognivo/design-advisor. */\n  static biasId = 'anchoring-bias' as const;\n\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { display: inline-block; }\n\n    .wrap {\n      display: inline-flex;\n      align-items: baseline;\n      gap: var(--cg-component-bias-anchoring-gap);\n      padding: var(--cg-component-bias-anchoring-padding);\n      border-radius: var(--cg-component-bias-anchoring-radius);\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    :host([orientation=\"vertical\"]) .wrap {\n      flex-direction: column;\n      align-items: flex-start;\n    }\n\n    .anchor {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-text);\n      text-decoration: line-through;\n      opacity: 0.7;\n    }\n\n    .current {\n      font-size: var(--cg-font-size-xl);\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text);\n      letter-spacing: var(--cg-letter-spacing-tight);\n      line-height: var(--cg-line-height-tight);\n    }\n\n    .label {\n      display: inline-flex;\n      align-items: center;\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      background: var(--cg-color-status-success-background-default);\n      color: var(--cg-color-status-success-text-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-status-success-border-default);\n    }\n\n    /* Variants */\n    :host([variant=\"subtle\"]) .current { font-size: var(--cg-font-size-lg); }\n    :host([variant=\"subtle\"]) .anchor { font-size: var(--cg-font-size-xs); }\n\n    :host([variant=\"emphasized\"]) .wrap {\n      background: var(--cg-color-status-success-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-status-success-border-default);\n    }\n    :host([variant=\"emphasized\"]) .current {\n      color: var(--cg-color-status-success-text-default);\n      font-size: var(--cg-font-size-2xl);\n    }\n  `];\n\n  @property() anchor = '';\n  @property() current = '';\n  @property() label = '';\n  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n  @property({ reflect: true }) variant: 'default' | 'subtle' | 'emphasized' = 'default';\n\n  private get _ariaLabel(): string {\n    const base = `Original ${this.anchor}, now ${this.current}`;\n    return this.label ? `${base}. ${this.label}` : base;\n  }\n\n  override render() {\n    return html`\n      <div class=\"wrap\" role=\"group\" aria-label=${this._ariaLabel}>\n        ${this.anchor ? html`<span class=\"anchor\" aria-hidden=\"true\">${this.anchor}</span>` : nothing}\n        ${this.current ? html`<span class=\"current\" aria-hidden=\"true\">${this.current}</span>` : nothing}\n        ${this.label ? html`<span class=\"label\" aria-hidden=\"true\">${this.label}</span>` : nothing}\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bias-anchoring': BiasAnchoring;\n  }\n}\n"],"names":["BiasAnchoring","LitElement","base","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAqBO,IAAMA,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GA8DO,KAAA,SAAS,IACT,KAAA,UAAU,IACV,KAAA,QAAQ,IACS,KAAA,cAAyC,cACzC,KAAA,UAA+C;AAAA,EAAA;AAAA,EAE5E,IAAY,aAAqB;AAC/B,UAAMC,IAAO,YAAY,KAAK,MAAM,SAAS,KAAK,OAAO;AACzD,WAAO,KAAK,QAAQ,GAAGA,CAAI,KAAK,KAAK,KAAK,KAAKA;AAAA,EACjD;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA,kDACuC,KAAK,UAAU;AAAA,UACvD,KAAK,SAASA,4CAA+C,KAAK,MAAM,YAAYC,CAAO;AAAA,UAC3F,KAAK,UAAUD,6CAAgD,KAAK,OAAO,YAAYC,CAAO;AAAA,UAC9F,KAAK,QAAQD,2CAA8C,KAAK,KAAK,YAAYC,CAAO;AAAA;AAAA;AAAA;AAAA,EAIhG;AACF;AAnFaJ,EAEJ,SAAS;AAFLA,EAIK,SAAS,CAACK,GAAWC,GAAeC;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,GAwDnD;AAEWC,EAAA;AAAA,EAAXC,EAAA;AAAS,GA9DCT,EA8DC,WAAA,UAAA,CAAA;AACAQ,EAAA;AAAA,EAAXC,EAAA;AAAS,GA/DCT,EA+DC,WAAA,WAAA,CAAA;AACAQ,EAAA;AAAA,EAAXC,EAAA;AAAS,GAhECT,EAgEC,WAAA,SAAA,CAAA;AACiBQ,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAjEhBT,EAiEkB,WAAA,eAAA,CAAA;AACAQ,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAlEhBT,EAkEkB,WAAA,WAAA,CAAA;AAlElBA,IAANQ,EAAA;AAAA,EADNE,EAAc,gBAAgB;AAAA,GAClBV,CAAA;"}

package/dist/components/bias-authority/bias-authority.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+/**
+ * @element bias-authority
+ * Inline endorsement / trust badge ("Verified by X", "Certified", "Featured in").
+ * Optional link mode via `href`. Slot hosts tooltip-style description.
+ *
+ * @example
+ * ```html
+ * <bias-authority source="Wirecutter" kind="featured"></bias-authority>
+ * <bias-authority source="ISO 27001" kind="certified" href="#"></bias-authority>
+ * ```
+ *
+ * @cssprop --cg-component-bias-authority-radius
+ * @cssprop --cg-component-bias-authority-padding
+ */
+export declare class BiasAuthority extends LitElement {
+    static biasId: "authority-bias";
+    static styles: import('lit').CSSResult[];
+    source: string;
+    kind: 'verified' | 'endorsed' | 'certified' | 'featured';
+    icon: string;
+    href: string;
+    private _iconSvg;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bias-authority': BiasAuthority;
+    }
+}
+//# sourceMappingURL=bias-authority.d.ts.map

package/dist/components/bias-authority/bias-authority.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bias-authority.d.ts","sourceRoot":"","sources":["../../../src/components/bias-authority/bias-authority.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA2B,MAAM,KAAK,CAAC;AAI1D;;;;;;;;;;;;;GAaG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,MAAM,EAAG,gBAAgB,CAAU;IAE1C,OAAgB,MAAM,4BAkDnB;IAES,MAAM,SAAM;IACK,IAAI,EAAE,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,CAAc;IACvF,IAAI,SAAM;IACV,IAAI,SAAM;IAEtB,OAAO,CAAC,QAAQ;IAeP,MAAM;CAehB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

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

@@ -0,0 +1,97 @@
+import { css as u, LitElement as h, svg as s, html as c, nothing as p } from "lit";
+import { property as d, customElement as v } from "lit/decorators.js";
+import { a as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var k = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (t, r, i, n) => {
+  for (var e = n > 1 ? void 0 : n ? x(r, i) : r, l = t.length - 1, g; l >= 0; l--)
+    (g = t[l]) && (e = (n ? g(r, i, e) : g(e)) || e);
+  return n && e && k(r, i, e), e;
+};
+let o = class extends h {
+  constructor() {
+    super(...arguments), this.source = "", this.kind = "verified", this.icon = "", this.href = "";
+  }
+  _iconSvg() {
+    return this.kind === "certified" ? s`<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2l2.5 5 5.5.8-4 4 1 5.5L12 14.8 7 17.3l1-5.5-4-4L9.5 7z"></path></svg>` : this.kind === "featured" ? s`<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v6a8 8 0 11-16 0V4z"></path><path d="M8 20h8"></path></svg>` : this.kind === "endorsed" ? s`<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 11V5a2 2 0 014 0v6h3l2 4v3a2 2 0 01-2 2H9l-2-5V11z"></path></svg>` : s`<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2l2 2 3-1 1 3 3 1-1 3 1 3-3 1-1 3-3-1-2 2-2-2-3 1-1-3-3-1 1-3-1-3 3-1 1-3 3 1z"></path><path d="M9 12l2 2 4-4"></path></svg>`;
+  }
+  render() {
+    const t = `${this.kind} by ${this.source}`, r = c`
+      <slot name="icon">${this._iconSvg()}</slot>
+      <span aria-hidden="true"><span class="source">${this.source}</span></span>
+    `, i = this.href ? c`<a class="badge" href=${this.href} role="note" aria-label=${t}>${r}</a>` : c`<span class="badge" role="note" aria-label=${t} tabindex="0">${r}</span>`;
+    return c`
+      ${i}
+      <span class="tip" role="tooltip"><slot>${p}</slot></span>
+    `;
+  }
+};
+o.biasId = "authority-bias";
+o.styles = [f, b, u`
+    :host { align-items: center; position: relative; }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-6);
+      padding: var(--cg-component-bias-authority-padding) var(--cg-spacing-12);
+      border-radius: var(--cg-component-bias-authority-radius);
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      background: var(--cg-color-surface-container-background);
+      color: var(--cg-color-surface-container-text);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);
+      text-decoration: none;
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    a.badge:hover { border-color: var(--cg-color-input-border-hover); }
+    a.badge:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--cg-color-focus-ring-offset), 0 0 0 4px var(--cg-color-focus-ring);
+    }
+
+    :host([kind="verified"]) .icon { color: var(--cg-color-status-success-text-default); }
+    :host([kind="certified"]) .icon { color: var(--cg-color-status-info-text-default); }
+    :host([kind="endorsed"]) .icon { color: var(--cg-color-status-warning-text-default); }
+    :host([kind="featured"]) .icon { color: var(--cg-color-accent-text); }
+
+    .icon { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); flex-shrink: 0; }
+
+    .source { font-weight: var(--cg-font-weight-semibold); color: var(--cg-color-surface-base-text); }
+
+    .tip {
+      position: absolute;
+      left: 0;
+      top: calc(100% + var(--cg-spacing-4));
+      z-index: 10;
+      display: none;
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      font-size: var(--cg-font-size-xs);
+      background: var(--cg-color-surface-cards-background);
+      color: var(--cg-color-surface-base-text);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-tooltip-radius);
+      max-width: 280px;
+      pointer-events: none;
+      box-shadow: var(--cg-elevation-2);
+    }
+    :host(:hover) .tip,
+    :host(:focus-within) .tip { display: block; }
+  `];
+a([
+  d()
+], o.prototype, "source", 2);
+a([
+  d({ reflect: !0 })
+], o.prototype, "kind", 2);
+a([
+  d()
+], o.prototype, "icon", 2);
+a([
+  d()
+], o.prototype, "href", 2);
+o = a([
+  v("bias-authority")
+], o);
+export {
+  o as BiasAuthority
+};
+//# sourceMappingURL=bias-authority.js.map

package/dist/components/bias-authority/bias-authority.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bias-authority.js","sources":["../../../src/components/bias-authority/bias-authority.ts"],"sourcesContent":["import { LitElement, html, css, nothing, svg } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element bias-authority\n * Inline endorsement / trust badge (\"Verified by X\", \"Certified\", \"Featured in\").\n * Optional link mode via `href`. Slot hosts tooltip-style description.\n *\n * @example\n * ```html\n * <bias-authority source=\"Wirecutter\" kind=\"featured\"></bias-authority>\n * <bias-authority source=\"ISO 27001\" kind=\"certified\" href=\"#\"></bias-authority>\n * ```\n *\n * @cssprop --cg-component-bias-authority-radius\n * @cssprop --cg-component-bias-authority-padding\n */\n@customElement('bias-authority')\nexport class BiasAuthority extends LitElement {\n  static biasId = 'authority-bias' as const;\n\n  static override styles = [hostBase, reducedMotion, css`\n    :host { align-items: center; position: relative; }\n\n    .badge {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      padding: var(--cg-component-bias-authority-padding) var(--cg-spacing-12);\n      border-radius: var(--cg-component-bias-authority-radius);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      background: var(--cg-color-surface-container-background);\n      color: var(--cg-color-surface-container-text);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n      text-decoration: none;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    a.badge:hover { border-color: var(--cg-color-input-border-hover); }\n    a.badge:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 2px var(--cg-color-focus-ring-offset), 0 0 0 4px var(--cg-color-focus-ring);\n    }\n\n    :host([kind=\"verified\"]) .icon { color: var(--cg-color-status-success-text-default); }\n    :host([kind=\"certified\"]) .icon { color: var(--cg-color-status-info-text-default); }\n    :host([kind=\"endorsed\"]) .icon { color: var(--cg-color-status-warning-text-default); }\n    :host([kind=\"featured\"]) .icon { color: var(--cg-color-accent-text); }\n\n    .icon { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); flex-shrink: 0; }\n\n    .source { font-weight: var(--cg-font-weight-semibold); color: var(--cg-color-surface-base-text); }\n\n    .tip {\n      position: absolute;\n      left: 0;\n      top: calc(100% + var(--cg-spacing-4));\n      z-index: 10;\n      display: none;\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      font-size: var(--cg-font-size-xs);\n      background: var(--cg-color-surface-cards-background);\n      color: var(--cg-color-surface-base-text);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-tooltip-radius);\n      max-width: 280px;\n      pointer-events: none;\n      box-shadow: var(--cg-elevation-2);\n    }\n    :host(:hover) .tip,\n    :host(:focus-within) .tip { display: block; }\n  `];\n\n  @property() source = '';\n  @property({ reflect: true }) kind: 'verified' | 'endorsed' | 'certified' | 'featured' = 'verified';\n  @property() icon = '';\n  @property() href = '';\n\n  private _iconSvg() {\n    // Default icon per kind. Consumer can override via `icon` slot.\n    if (this.kind === 'certified') {\n      return svg`<svg class=\"icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 2l2.5 5 5.5.8-4 4 1 5.5L12 14.8 7 17.3l1-5.5-4-4L9.5 7z\"></path></svg>`;\n    }\n    if (this.kind === 'featured') {\n      return svg`<svg class=\"icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 4h16v6a8 8 0 11-16 0V4z\"></path><path d=\"M8 20h8\"></path></svg>`;\n    }\n    if (this.kind === 'endorsed') {\n      return svg`<svg class=\"icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M7 11V5a2 2 0 014 0v6h3l2 4v3a2 2 0 01-2 2H9l-2-5V11z\"></path></svg>`;\n    }\n    // verified default\n    return svg`<svg class=\"icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 2l2 2 3-1 1 3 3 1-1 3 1 3-3 1-1 3-3-1-2 2-2-2-3 1-1-3-3-1 1-3-1-3 3-1 1-3 3 1z\"></path><path d=\"M9 12l2 2 4-4\"></path></svg>`;\n  }\n\n  override render() {\n    const ariaLabel = `${this.kind} by ${this.source}`;\n    const inner = html`\n      <slot name=\"icon\">${this._iconSvg()}</slot>\n      <span aria-hidden=\"true\"><span class=\"source\">${this.source}</span></span>\n    `;\n    const badge = this.href\n      ? html`<a class=\"badge\" href=${this.href} role=\"note\" aria-label=${ariaLabel}>${inner}</a>`\n      : html`<span class=\"badge\" role=\"note\" aria-label=${ariaLabel} tabindex=\"0\">${inner}</span>`;\n\n    return html`\n      ${badge}\n      <span class=\"tip\" role=\"tooltip\"><slot>${nothing}</slot></span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bias-authority': BiasAuthority;\n  }\n}\n"],"names":["BiasAuthority","LitElement","svg","ariaLabel","inner","html","badge","nothing","hostBase","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAmBO,IAAMA,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAuDO,KAAA,SAAS,IACQ,KAAA,OAA2D,YAC5E,KAAA,OAAO,IACP,KAAA,OAAO;AAAA,EAAA;AAAA,EAEX,WAAW;AAEjB,WAAI,KAAK,SAAS,cACTC,oPAEL,KAAK,SAAS,aACTA,4OAEL,KAAK,SAAS,aACTA,8OAGFA;AAAA,EACT;AAAA,EAES,SAAS;AAChB,UAAMC,IAAY,GAAG,KAAK,IAAI,OAAO,KAAK,MAAM,IAC1CC,IAAQC;AAAA,0BACQ,KAAK,UAAU;AAAA,sDACa,KAAK,MAAM;AAAA,OAEvDC,IAAQ,KAAK,OACfD,0BAA6B,KAAK,IAAI,2BAA2BF,CAAS,IAAIC,CAAK,SACnFC,+CAAkDF,CAAS,iBAAiBC,CAAK;AAErF,WAAOC;AAAA,QACHC,CAAK;AAAA,+CACkCC,CAAO;AAAA;AAAA,EAEpD;AACF;AA1FaP,EACJ,SAAS;AADLA,EAGK,SAAS,CAACQ,GAAUC,GAAeC;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,GAkDlD;AAEWC,EAAA;AAAA,EAAXC,EAAA;AAAS,GAvDCZ,EAuDC,WAAA,UAAA,CAAA;AACiBW,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAxDhBZ,EAwDkB,WAAA,QAAA,CAAA;AACjBW,EAAA;AAAA,EAAXC,EAAA;AAAS,GAzDCZ,EAyDC,WAAA,QAAA,CAAA;AACAW,EAAA;AAAA,EAAXC,EAAA;AAAS,GA1DCZ,EA0DC,WAAA,QAAA,CAAA;AA1DDA,IAANW,EAAA;AAAA,EADNE,EAAc,gBAAgB;AAAA,GAClBb,CAAA;"}

package/dist/components/bias-commitment/bias-commitment.d.ts

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+/**
+ * @element bias-commitment
+ * Progressive multi-step reveal. Children carrying `[data-step="N"]` become
+ * visible only when `step >= N`. Commitment / consistency bias — each
+ * completed micro-step increases the user's felt obligation to finish.
+ *
+ * @example
+ * ```html
+ * <bias-commitment step="2" total="3" show-progress>
+ *   <div data-step="1">Pick a plan</div>
+ *   <div data-step="2">Enter email</div>
+ *   <div data-step="3">Payment</div>
+ * </bias-commitment>
+ * ```
+ *
+ * @fires bias-commitment-advance - When advance() moves to a later step
+ *
+ * @cssprop --cg-component-bias-commitment-gap
+ * @cssprop --cg-component-bias-commitment-radius
+ */
+export declare class BiasCommitment extends LitElement {
+    static biasId: "commitment-bias";
+    static styles: import('lit').CSSResult[];
+    step: number;
+    total: number;
+    showProgress: boolean;
+    /** Advance to the next step and emit bias-commitment-advance. */
+    advance(): void;
+    updated(): void;
+    private get _pct();
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bias-commitment': BiasCommitment;
+    }
+}
+//# sourceMappingURL=bias-commitment.d.ts.map

package/dist/components/bias-commitment/bias-commitment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bias-commitment.d.ts","sourceRoot":"","sources":["../../../src/components/bias-commitment/bias-commitment.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,MAAM,CAAC,MAAM,EAAG,iBAAiB,CAAU;IAE3C,OAAgB,MAAM,4BAyCnB;IAEwC,IAAI,SAAK;IACxB,KAAK,SAAK;IACmB,YAAY,UAAS;IAE9E,iEAAiE;IACjE,OAAO;IAYE,OAAO;IAYhB,OAAO,KAAK,IAAI,GAGf;IAEQ,MAAM;CAqBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAC;KACnC;CACF"}

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

@@ -0,0 +1,115 @@
+import { css as m, LitElement as d, html as p, nothing as g } from "lit";
+import { property as c, customElement as h } from "lit/decorators.js";
+import { h as u, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (t, s, a, o) => {
+  for (var e = o > 1 ? void 0 : o ? b(s, a) : s, n = t.length - 1, l; n >= 0; n--)
+    (l = t[n]) && (e = (o ? l(s, a, e) : l(e)) || e);
+  return o && e && v(s, a, e), e;
+};
+let r = class extends d {
+  constructor() {
+    super(...arguments), this.step = 1, this.total = 1, this.showProgress = !1;
+  }
+  /** Advance to the next step and emit bias-commitment-advance. */
+  advance() {
+    if (this.step < this.total) {
+      const t = this.step;
+      this.step = this.step + 1, this.dispatchEvent(new CustomEvent("bias-commitment-advance", {
+        detail: { from: t, to: this.step, total: this.total },
+        bubbles: !0,
+        composed: !0
+      }));
+    }
+  }
+  updated() {
+    for (const t of Array.from(this.children)) {
+      const s = t.dataset.step;
+      if (s != null) {
+        const a = Number(s), o = Number.isFinite(a) && a <= this.step;
+        t.style.display = o ? "" : "none";
+      }
+    }
+  }
+  get _pct() {
+    return !this.total || this.total <= 0 ? 0 : Math.max(0, Math.min(100, this.step / this.total * 100));
+  }
+  render() {
+    const t = this.showProgress ? p`
+      <div class="progress">
+        <div class="progress-track" role="progressbar"
+          aria-valuemin="0"
+          aria-valuemax=${this.total}
+          aria-valuenow=${this.step}
+          aria-label="Step ${this.step} of ${this.total}">
+          <div class="progress-fill" style="width:${this._pct}%"></div>
+        </div>
+        <span class="progress-label">Step ${this.step}/${this.total}</span>
+      </div>
+    ` : g;
+    return p`
+      <div class="flow">
+        ${t}
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+r.biasId = "commitment-bias";
+r.styles = [u, f, m`
+    .flow {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-component-bias-commitment-gap);
+    }
+
+    .progress {
+      display: flex;
+      gap: var(--cg-spacing-6);
+      align-items: center;
+    }
+    .progress-track {
+      flex: 1;
+      height: var(--cg-spacing-6);
+      background: var(--cg-color-surface-container-background);
+      border-radius: var(--cg-border-radius-full);
+      overflow: hidden;
+    }
+    .progress-fill {
+      height: 100%;
+      background: var(--cg-color-action-primary-background-default);
+      border-radius: var(--cg-border-radius-full);
+      transition: width var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    .progress-label {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-text);
+      font-variant-numeric: tabular-nums;
+      min-width: var(--cg-spacing-48);
+      text-align: right;
+    }
+
+    ::slotted([data-step]) {
+      animation: biasCommitmentReveal var(--cg-transition-duration-default) var(--cg-transition-easing-default) both;
+    }
+
+    @keyframes biasCommitmentReveal {
+      from { opacity: 0; transform: translateY(var(--cg-spacing-8)); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+  `];
+i([
+  c({ type: Number, reflect: !0 })
+], r.prototype, "step", 2);
+i([
+  c({ type: Number })
+], r.prototype, "total", 2);
+i([
+  c({ type: Boolean, attribute: "show-progress" })
+], r.prototype, "showProgress", 2);
+r = i([
+  h("bias-commitment")
+], r);
+export {
+  r as BiasCommitment
+};
+//# sourceMappingURL=bias-commitment.js.map

package/dist/components/bias-commitment/bias-commitment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bias-commitment.js","sources":["../../../src/components/bias-commitment/bias-commitment.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element bias-commitment\n * Progressive multi-step reveal. Children carrying `[data-step=\"N\"]` become\n * visible only when `step >= N`. Commitment / consistency bias — each\n * completed micro-step increases the user's felt obligation to finish.\n *\n * @example\n * ```html\n * <bias-commitment step=\"2\" total=\"3\" show-progress>\n *   <div data-step=\"1\">Pick a plan</div>\n *   <div data-step=\"2\">Enter email</div>\n *   <div data-step=\"3\">Payment</div>\n * </bias-commitment>\n * ```\n *\n * @fires bias-commitment-advance - When advance() moves to a later step\n *\n * @cssprop --cg-component-bias-commitment-gap\n * @cssprop --cg-component-bias-commitment-radius\n */\n@customElement('bias-commitment')\nexport class BiasCommitment extends LitElement {\n  static biasId = 'commitment-bias' as const;\n\n  static override styles = [hostBlock, reducedMotion, css`\n    .flow {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-component-bias-commitment-gap);\n    }\n\n    .progress {\n      display: flex;\n      gap: var(--cg-spacing-6);\n      align-items: center;\n    }\n    .progress-track {\n      flex: 1;\n      height: var(--cg-spacing-6);\n      background: var(--cg-color-surface-container-background);\n      border-radius: var(--cg-border-radius-full);\n      overflow: hidden;\n    }\n    .progress-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-default) var(--cg-transition-easing-default);\n    }\n    .progress-label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-text);\n      font-variant-numeric: tabular-nums;\n      min-width: var(--cg-spacing-48);\n      text-align: right;\n    }\n\n    ::slotted([data-step]) {\n      animation: biasCommitmentReveal var(--cg-transition-duration-default) var(--cg-transition-easing-default) both;\n    }\n\n    @keyframes biasCommitmentReveal {\n      from { opacity: 0; transform: translateY(var(--cg-spacing-8)); }\n      to   { opacity: 1; transform: translateY(0); }\n    }\n  `];\n\n  @property({ type: Number, reflect: true }) step = 1;\n  @property({ type: Number }) total = 1;\n  @property({ type: Boolean, attribute: 'show-progress' }) showProgress = false;\n\n  /** Advance to the next step and emit bias-commitment-advance. */\n  advance() {\n    if (this.step < this.total) {\n      const prev = this.step;\n      this.step = this.step + 1;\n      this.dispatchEvent(new CustomEvent('bias-commitment-advance', {\n        detail: { from: prev, to: this.step, total: this.total },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  }\n\n  override updated() {\n    // Show/hide children based on data-step attribute.\n    for (const child of Array.from(this.children)) {\n      const ds = (child as HTMLElement).dataset.step;\n      if (ds != null) {\n        const n = Number(ds);\n        const visible = Number.isFinite(n) && n <= this.step;\n        (child as HTMLElement).style.display = visible ? '' : 'none';\n      }\n    }\n  }\n\n  private get _pct(): number {\n    if (!this.total || this.total <= 0) return 0;\n    return Math.max(0, Math.min(100, (this.step / this.total) * 100));\n  }\n\n  override render() {\n    const progressNode = this.showProgress ? html`\n      <div class=\"progress\">\n        <div class=\"progress-track\" role=\"progressbar\"\n          aria-valuemin=\"0\"\n          aria-valuemax=${this.total}\n          aria-valuenow=${this.step}\n          aria-label=\"Step ${this.step} of ${this.total}\">\n          <div class=\"progress-fill\" style=\"width:${this._pct}%\"></div>\n        </div>\n        <span class=\"progress-label\">Step ${this.step}/${this.total}</span>\n      </div>\n    ` : nothing;\n\n    return html`\n      <div class=\"flow\">\n        ${progressNode}\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bias-commitment': BiasCommitment;\n  }\n}\n"],"names":["BiasCommitment","LitElement","prev","child","ds","n","visible","progressNode","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAyBO,IAAMA,IAAN,cAA6BC,EAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA,GA8CsC,KAAA,OAAO,GACtB,KAAA,QAAQ,GACqB,KAAA,eAAe;AAAA,EAAA;AAAA;AAAA,EAGxE,UAAU;AACR,QAAI,KAAK,OAAO,KAAK,OAAO;AAC1B,YAAMC,IAAO,KAAK;AAClB,WAAK,OAAO,KAAK,OAAO,GACxB,KAAK,cAAc,IAAI,YAAY,2BAA2B;AAAA,QAC5D,QAAQ,EAAE,MAAMA,GAAM,IAAI,KAAK,MAAM,OAAO,KAAK,MAAA;AAAA,QACjD,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX,CAAC;AAAA,IACJ;AAAA,EACF;AAAA,EAES,UAAU;AAEjB,eAAWC,KAAS,MAAM,KAAK,KAAK,QAAQ,GAAG;AAC7C,YAAMC,IAAMD,EAAsB,QAAQ;AAC1C,UAAIC,KAAM,MAAM;AACd,cAAMC,IAAI,OAAOD,CAAE,GACbE,IAAU,OAAO,SAASD,CAAC,KAAKA,KAAK,KAAK;AAC/C,QAAAF,EAAsB,MAAM,UAAUG,IAAU,KAAK;AAAA,MACxD;AAAA,IACF;AAAA,EACF;AAAA,EAEA,IAAY,OAAe;AACzB,WAAI,CAAC,KAAK,SAAS,KAAK,SAAS,IAAU,IACpC,KAAK,IAAI,GAAG,KAAK,IAAI,KAAM,KAAK,OAAO,KAAK,QAAS,GAAG,CAAC;AAAA,EAClE;AAAA,EAES,SAAS;AAChB,UAAMC,IAAe,KAAK,eAAeC;AAAA;AAAA;AAAA;AAAA,0BAInB,KAAK,KAAK;AAAA,0BACV,KAAK,IAAI;AAAA,6BACN,KAAK,IAAI,OAAO,KAAK,KAAK;AAAA,oDACH,KAAK,IAAI;AAAA;AAAA,4CAEjB,KAAK,IAAI,IAAI,KAAK,KAAK;AAAA;AAAA,QAE3DC;AAEJ,WAAOD;AAAA;AAAA,UAEDD,CAAY;AAAA;AAAA;AAAA;AAAA,EAIpB;AACF;AArGaP,EACJ,SAAS;AADLA,EAGK,SAAS,CAACU,GAAWC,GAAeC;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,GAyCnD;AAE0CC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA9C9Bd,EA8CgC,WAAA,QAAA,CAAA;AACfa,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/Cfd,EA+CiB,WAAA,SAAA,CAAA;AAC6Ba,EAAA;AAAA,EAAxDC,EAAS,EAAE,MAAM,SAAS,WAAW,iBAAiB;AAAA,GAhD5Cd,EAgD8C,WAAA,gBAAA,CAAA;AAhD9CA,IAANa,EAAA;AAAA,EADNE,EAAc,iBAAiB;AAAA,GACnBf,CAAA;"}

package/dist/components/bias-reciprocity/bias-reciprocity.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+/**
+ * @element bias-reciprocity
+ * Value-first framing around a CTA. Presents a "gift" (free shipping, bonus,
+ * trial) as an inbound favor, triggering reciprocity. Three prominence levels.
+ *
+ * @example
+ * ```html
+ * <bias-reciprocity gift="Free shipping" prominence="standard">
+ *   <cg-button>Buy now</cg-button>
+ * </bias-reciprocity>
+ * ```
+ *
+ * @cssprop --cg-component-bias-reciprocity-radius
+ * @cssprop --cg-component-bias-reciprocity-padding
+ */
+export declare class BiasReciprocity extends LitElement {
+    static biasId: "reciprocity";
+    static styles: import('lit').CSSResult[];
+    gift: string;
+    icon: string;
+    prominence: 'subtle' | 'standard' | 'hero';
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bias-reciprocity': BiasReciprocity;
+    }
+}
+//# sourceMappingURL=bias-reciprocity.d.ts.map

package/dist/components/bias-reciprocity/bias-reciprocity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bias-reciprocity.d.ts","sourceRoot":"","sources":["../../../src/components/bias-reciprocity/bias-reciprocity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAIjD;;;;;;;;;;;;;;GAcG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,MAAM,CAAC,MAAM,EAAG,aAAa,CAAU;IAEvC,OAAgB,MAAM,4BA8CnB;IAES,IAAI,SAAM;IACV,IAAI,SAAM;IACO,UAAU,EAAE,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAc;IAE5E,MAAM;CAUhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,eAAe,CAAC;KACrC;CACF"}