@cognivo/components 0.8.0

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

@@ -0,0 +1,86 @@
+import { css as d, LitElement as l, svg as v, html as p } from "lit";
+import { property as g, customElement as f } from "lit/decorators.js";
+import { h as u, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var h = Object.defineProperty, m = Object.getOwnPropertyDescriptor, t = (e, c, i, a) => {
+  for (var r = a > 1 ? void 0 : a ? m(c, i) : c, n = e.length - 1, s; n >= 0; n--)
+    (s = e[n]) && (r = (a ? s(c, i, r) : s(r)) || r);
+  return a && r && h(c, i, r), r;
+};
+let o = class extends l {
+  constructor() {
+    super(...arguments), this.gift = "", this.icon = "", this.prominence = "standard";
+  }
+  render() {
+    const e = v`<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="M20 12v10H4V12M2 7h20v5H2zM12 22V7M12 7H8a2 2 0 01-2-2 2 2 0 012-2c3 0 4 4 4 4z M12 7h4a2 2 0 002-2 2 2 0 00-2-2c-3 0-4 4-4 4z"></path></svg>`;
+    return p`
+      <div class="wrap" role="group" aria-label=${`You are getting: ${this.gift}`}>
+        ${this.gift ? p`<span class="gift">${e}<span>You're getting: ${this.gift}</span></span>` : ""}
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+o.biasId = "reciprocity";
+o.styles = [u, b, d`
+    .wrap {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-component-bias-reciprocity-padding);
+      border-radius: var(--cg-component-bias-reciprocity-radius);
+      background: var(--cg-color-surface-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);
+    }
+
+    .gift {
+      display: inline-flex;
+      align-items: center;
+      align-self: flex-start;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-4) var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-full);
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      background: var(--cg-color-accent-background);
+      color: var(--cg-color-accent-text);
+      border: var(--cg-border-width-50) solid var(--cg-color-accent-border);
+    }
+
+    .icon { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); flex-shrink: 0; }
+
+    :host([prominence="subtle"]) .wrap {
+      background: transparent;
+      border-color: transparent;
+      padding: var(--cg-spacing-4);
+    }
+    :host([prominence="subtle"]) .gift {
+      background: transparent;
+      border-color: var(--cg-color-accent-border);
+    }
+
+    :host([prominence="hero"]) .wrap {
+      background: var(--cg-color-accent-background);
+      border-color: var(--cg-color-accent-border);
+      padding: var(--cg-spacing-20);
+    }
+    :host([prominence="hero"]) .gift {
+      font-size: var(--cg-font-size-base);
+      padding: var(--cg-spacing-6) var(--cg-spacing-16);
+    }
+  `];
+t([
+  g()
+], o.prototype, "gift", 2);
+t([
+  g()
+], o.prototype, "icon", 2);
+t([
+  g({ reflect: !0 })
+], o.prototype, "prominence", 2);
+o = t([
+  f("bias-reciprocity")
+], o);
+export {
+  o as BiasReciprocity
+};
+//# sourceMappingURL=bias-reciprocity.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bias-reciprocity.js","sources":["../../../src/components/bias-reciprocity/bias-reciprocity.ts"],"sourcesContent":["import { LitElement, html, css, svg } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element bias-reciprocity\n * Value-first framing around a CTA. Presents a \"gift\" (free shipping, bonus,\n * trial) as an inbound favor, triggering reciprocity. Three prominence levels.\n *\n * @example\n * ```html\n * <bias-reciprocity gift=\"Free shipping\" prominence=\"standard\">\n *   <cg-button>Buy now</cg-button>\n * </bias-reciprocity>\n * ```\n *\n * @cssprop --cg-component-bias-reciprocity-radius\n * @cssprop --cg-component-bias-reciprocity-padding\n */\n@customElement('bias-reciprocity')\nexport class BiasReciprocity extends LitElement {\n  static biasId = 'reciprocity' as const;\n\n  static override styles = [hostBlock, reducedMotion, css`\n    .wrap {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-component-bias-reciprocity-padding);\n      border-radius: var(--cg-component-bias-reciprocity-radius);\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n    }\n\n    .gift {\n      display: inline-flex;\n      align-items: center;\n      align-self: flex-start;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-4) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-full);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      background: var(--cg-color-accent-background);\n      color: var(--cg-color-accent-text);\n      border: var(--cg-border-width-50) solid var(--cg-color-accent-border);\n    }\n\n    .icon { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); flex-shrink: 0; }\n\n    :host([prominence=\"subtle\"]) .wrap {\n      background: transparent;\n      border-color: transparent;\n      padding: var(--cg-spacing-4);\n    }\n    :host([prominence=\"subtle\"]) .gift {\n      background: transparent;\n      border-color: var(--cg-color-accent-border);\n    }\n\n    :host([prominence=\"hero\"]) .wrap {\n      background: var(--cg-color-accent-background);\n      border-color: var(--cg-color-accent-border);\n      padding: var(--cg-spacing-20);\n    }\n    :host([prominence=\"hero\"]) .gift {\n      font-size: var(--cg-font-size-base);\n      padding: var(--cg-spacing-6) var(--cg-spacing-16);\n    }\n  `];\n\n  @property() gift = '';\n  @property() icon = '';\n  @property({ reflect: true }) prominence: 'subtle' | 'standard' | 'hero' = 'standard';\n\n  override render() {\n    const giftIcon = 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=\"M20 12v10H4V12M2 7h20v5H2zM12 22V7M12 7H8a2 2 0 01-2-2 2 2 0 012-2c3 0 4 4 4 4z M12 7h4a2 2 0 002-2 2 2 0 00-2-2c-3 0-4 4-4 4z\"></path></svg>`;\n\n    return html`\n      <div class=\"wrap\" role=\"group\" aria-label=${`You are getting: ${this.gift}`}>\n        ${this.gift ? html`<span class=\"gift\">${giftIcon}<span>You're getting: ${this.gift}</span></span>` : ''}\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bias-reciprocity': BiasReciprocity;\n  }\n}\n"],"names":["BiasReciprocity","LitElement","giftIcon","svg","html","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAoBO,IAAMA,IAAN,cAA8BC,EAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GAmDO,KAAA,OAAO,IACP,KAAA,OAAO,IACU,KAAA,aAA6C;AAAA,EAAA;AAAA,EAEjE,SAAS;AAChB,UAAMC,IAAWC;AAEjB,WAAOC;AAAA,kDACuC,oBAAoB,KAAK,IAAI,EAAE;AAAA,UACvE,KAAK,OAAOA,uBAA0BF,CAAQ,yBAAyB,KAAK,IAAI,mBAAmB,EAAE;AAAA;AAAA;AAAA;AAAA,EAI7G;AACF;AAjEaF,EACJ,SAAS;AADLA,EAGK,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,GA8CnD;AAEWC,EAAA;AAAA,EAAXC,EAAA;AAAS,GAnDCT,EAmDC,WAAA,QAAA,CAAA;AACAQ,EAAA;AAAA,EAAXC,EAAA;AAAS,GApDCT,EAoDC,WAAA,QAAA,CAAA;AACiBQ,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GArDhBT,EAqDkB,WAAA,cAAA,CAAA;AArDlBA,IAANQ,EAAA;AAAA,EADNE,EAAc,kBAAkB;AAAA,GACpBV,CAAA;"}

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

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+/**
+ * @element bias-scarcity
+ * Urgency / scarcity indicator (time-based countdown, stock count, popularity).
+ * Escalates visually when thresholds are crossed. Widely used by Booking,
+ * Amazon, ticketing sites to trigger loss-aversion / FOMO.
+ *
+ * @example
+ * ```html
+ * <bias-scarcity type="stock" remaining="2" threshold="5" pulse></bias-scarcity>
+ * <bias-scarcity type="time" deadline="2026-05-01T00:00:00Z"></bias-scarcity>
+ * ```
+ *
+ * @cssprop --cg-component-bias-scarcity-radius
+ * @cssprop --cg-component-bias-scarcity-padding
+ */
+export declare class BiasScarcity extends LitElement {
+    static biasId: "scarcity-bias";
+    static styles: import('lit').CSSResult[];
+    type: 'time' | 'stock' | 'popularity';
+    deadline: string;
+    remaining: number;
+    threshold: number;
+    pulse: boolean;
+    private _label;
+    private _timer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _tick;
+    private _formatDuration;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bias-scarcity': BiasScarcity;
+    }
+}
+//# sourceMappingURL=bias-scarcity.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bias-scarcity.d.ts","sourceRoot":"","sources":["../../../src/components/bias-scarcity/bias-scarcity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA2B,MAAM,KAAK,CAAC;AAI1D;;;;;;;;;;;;;;GAcG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,MAAM,EAAG,eAAe,CAAU;IAEzC,OAAgB,MAAM,4BA8CnB;IAES,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,YAAY,CAAW;IAChD,QAAQ,SAAM;IACE,SAAS,SAAK;IACd,SAAS,SAAM;IACC,KAAK,UAAS;IAEjD,OAAO,CAAC,MAAM,CAAM;IAE7B,OAAO,CAAC,MAAM,CAAK;IAEV,iBAAiB;IAOjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAM9C,OAAO,CAAC,KAAK;IA2Bb,OAAO,CAAC,eAAe;IAUd,MAAM;CAehB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

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

@@ -0,0 +1,120 @@
+import { css as u, LitElement as p, svg as d, html as h } from "lit";
+import { property as n, state as g, customElement as f } from "lit/decorators.js";
+import { a as m, r as v } from "../../chunks/premium.css-9I4kHrsl.js";
+var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (e, r, i, a) => {
+  for (var t = a > 1 ? void 0 : a ? y(r, i) : r, l = e.length - 1, c; l >= 0; l--)
+    (c = e[l]) && (t = (a ? c(r, i, t) : c(t)) || t);
+  return a && t && b(r, i, t), t;
+};
+let s = class extends p {
+  constructor() {
+    super(...arguments), this.type = "stock", this.deadline = "", this.remaining = 0, this.threshold = 10, this.pulse = !1, this._label = "", this._timer = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._tick(), this._timer = window.setInterval(() => this._tick(), 3e4);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._timer && (clearInterval(this._timer), this._timer = 0);
+  }
+  updated(e) {
+    (e.has("type") || e.has("deadline") || e.has("remaining") || e.has("threshold")) && this._tick();
+  }
+  _tick() {
+    let e = !1, r = !1, i = "";
+    if (this.type === "time" && this.deadline) {
+      const a = Date.parse(this.deadline);
+      if (!Number.isNaN(a)) {
+        const t = a - Date.now();
+        i = t <= 0 ? "Ended" : `Ends in ${this._formatDuration(t)}`, e = t > 0 && t < 36e5, r = t >= 36e5 && t < 24 * 36e5;
+      }
+    } else this.type === "stock" ? (i = `Only ${this.remaining} left`, e = this.remaining > 0 && this.remaining < 3, r = this.remaining >= 3 && this.remaining < this.threshold) : this.type === "popularity" && (i = `Viewed ${this.remaining} times today`, r = this.remaining >= this.threshold);
+    this.toggleAttribute("data-critical", e), this.toggleAttribute("data-warning", r && !e), this._label = i;
+  }
+  _formatDuration(e) {
+    const r = Math.floor(e / 6e4), i = Math.floor(r / 1440), a = Math.floor((r - i * 60 * 24) / 60), t = r - i * 60 * 24 - a * 60;
+    return i > 0 ? `${i}d ${a}h` : a > 0 ? `${a}h ${t}m` : `${t}m`;
+  }
+  render() {
+    const e = this.type === "time" ? d`<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path></svg>` : this.type === "stock" ? d`<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 7h16M4 7l2 12h12l2-12"></path></svg>` : d`<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="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"></path><circle cx="12" cy="12" r="3"></circle></svg>`;
+    return h`
+      <span class="pill" role="status" aria-live=${this.type === "time" ? "polite" : "off"} aria-label=${this._label}>
+        ${this.pulse ? h`<span class="dot" aria-hidden="true"></span>` : e}
+        <span class="text">${this._label}</span>
+        <slot></slot>
+      </span>
+    `;
+  }
+};
+s.biasId = "scarcity-bias";
+s.styles = [m, v, u`
+    :host { align-items: center; }
+
+    .pill {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-component-bias-scarcity-gap);
+      padding: var(--cg-component-bias-scarcity-padding) var(--cg-spacing-12);
+      border-radius: var(--cg-component-bias-scarcity-radius);
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      background: var(--cg-color-status-info-background-default);
+      color: var(--cg-color-status-info-text-default);
+      border: var(--cg-border-width-50) solid var(--cg-color-status-info-border-default);
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    :host([data-critical]) .pill {
+      background: var(--cg-color-status-error-background-default);
+      color: var(--cg-color-status-error-text-default);
+      border-color: var(--cg-color-status-error-border-default);
+    }
+
+    :host([data-warning]) .pill {
+      background: var(--cg-color-status-warning-background-default);
+      color: var(--cg-color-status-warning-text-default);
+      border-color: var(--cg-color-status-warning-border-default);
+    }
+
+    .icon { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); flex-shrink: 0; }
+
+    .dot {
+      width: var(--cg-spacing-8);
+      height: var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+      background: currentColor;
+      flex-shrink: 0;
+    }
+
+    @keyframes biasScarcityPulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50% { opacity: 0.55; transform: scale(1.25); }
+    }
+    :host([pulse]) .dot {
+      animation: biasScarcityPulse 1.4s ease-in-out infinite;
+    }
+  `];
+o([
+  n()
+], s.prototype, "type", 2);
+o([
+  n()
+], s.prototype, "deadline", 2);
+o([
+  n({ type: Number })
+], s.prototype, "remaining", 2);
+o([
+  n({ type: Number })
+], s.prototype, "threshold", 2);
+o([
+  n({ type: Boolean, reflect: !0 })
+], s.prototype, "pulse", 2);
+o([
+  g()
+], s.prototype, "_label", 2);
+s = o([
+  f("bias-scarcity")
+], s);
+export {
+  s as BiasScarcity
+};
+//# sourceMappingURL=bias-scarcity.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bias-scarcity.js","sources":["../../../src/components/bias-scarcity/bias-scarcity.ts"],"sourcesContent":["import { LitElement, html, css, nothing, svg } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element bias-scarcity\n * Urgency / scarcity indicator (time-based countdown, stock count, popularity).\n * Escalates visually when thresholds are crossed. Widely used by Booking,\n * Amazon, ticketing sites to trigger loss-aversion / FOMO.\n *\n * @example\n * ```html\n * <bias-scarcity type=\"stock\" remaining=\"2\" threshold=\"5\" pulse></bias-scarcity>\n * <bias-scarcity type=\"time\" deadline=\"2026-05-01T00:00:00Z\"></bias-scarcity>\n * ```\n *\n * @cssprop --cg-component-bias-scarcity-radius\n * @cssprop --cg-component-bias-scarcity-padding\n */\n@customElement('bias-scarcity')\nexport class BiasScarcity extends LitElement {\n  static biasId = 'scarcity-bias' as const;\n\n  static override styles = [hostBase, reducedMotion, css`\n    :host { align-items: center; }\n\n    .pill {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-component-bias-scarcity-gap);\n      padding: var(--cg-component-bias-scarcity-padding) var(--cg-spacing-12);\n      border-radius: var(--cg-component-bias-scarcity-radius);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      background: var(--cg-color-status-info-background-default);\n      color: var(--cg-color-status-info-text-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-status-info-border-default);\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    :host([data-critical]) .pill {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n      border-color: var(--cg-color-status-error-border-default);\n    }\n\n    :host([data-warning]) .pill {\n      background: var(--cg-color-status-warning-background-default);\n      color: var(--cg-color-status-warning-text-default);\n      border-color: var(--cg-color-status-warning-border-default);\n    }\n\n    .icon { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); flex-shrink: 0; }\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: currentColor;\n      flex-shrink: 0;\n    }\n\n    @keyframes biasScarcityPulse {\n      0%, 100% { opacity: 1; transform: scale(1); }\n      50% { opacity: 0.55; transform: scale(1.25); }\n    }\n    :host([pulse]) .dot {\n      animation: biasScarcityPulse 1.4s ease-in-out infinite;\n    }\n  `];\n\n  @property() type: 'time' | 'stock' | 'popularity' = 'stock';\n  @property() deadline = '';\n  @property({ type: Number }) remaining = 0;\n  @property({ type: Number }) threshold = 10;\n  @property({ type: Boolean, reflect: true }) pulse = false;\n\n  @state() private _label = '';\n\n  private _timer = 0;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._tick();\n    // Refresh every 30s for time-type countdowns — enough to keep \"Ends in Xh Ym\" live.\n    this._timer = window.setInterval(() => this._tick(), 30_000);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._timer) { clearInterval(this._timer); this._timer = 0; }\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('type') || changed.has('deadline') || changed.has('remaining') || changed.has('threshold')) {\n      this._tick();\n    }\n  }\n\n  private _tick() {\n    let critical = false;\n    let warning = false;\n    let label = '';\n\n    if (this.type === 'time' && this.deadline) {\n      const end = Date.parse(this.deadline);\n      if (!Number.isNaN(end)) {\n        const diff = end - Date.now();\n        label = diff <= 0 ? 'Ended' : `Ends in ${this._formatDuration(diff)}`;\n        critical = diff > 0 && diff < 3_600_000; // < 1h\n        warning = diff >= 3_600_000 && diff < 24 * 3_600_000; // < 24h\n      }\n    } else if (this.type === 'stock') {\n      label = `Only ${this.remaining} left`;\n      critical = this.remaining > 0 && this.remaining < 3;\n      warning = this.remaining >= 3 && this.remaining < this.threshold;\n    } else if (this.type === 'popularity') {\n      label = `Viewed ${this.remaining} times today`;\n      warning = this.remaining >= this.threshold;\n    }\n\n    this.toggleAttribute('data-critical', critical);\n    this.toggleAttribute('data-warning', warning && !critical);\n    this._label = label;\n  }\n\n  private _formatDuration(ms: number): string {\n    const totalMinutes = Math.floor(ms / 60_000);\n    const days = Math.floor(totalMinutes / (60 * 24));\n    const hours = Math.floor((totalMinutes - days * 60 * 24) / 60);\n    const minutes = totalMinutes - days * 60 * 24 - hours * 60;\n    if (days > 0) return `${days}d ${hours}h`;\n    if (hours > 0) return `${hours}h ${minutes}m`;\n    return `${minutes}m`;\n  }\n\n  override render() {\n    const iconSvg = this.type === 'time'\n      ? 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\"><circle cx=\"12\" cy=\"12\" r=\"9\"></circle><path d=\"M12 7v5l3 2\"></path></svg>`\n      : this.type === 'stock'\n      ? 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 7h16M4 7l2 12h12l2-12\"></path></svg>`\n      : 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=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z\"></path><circle cx=\"12\" cy=\"12\" r=\"3\"></circle></svg>`;\n\n    return html`\n      <span class=\"pill\" role=\"status\" aria-live=${this.type === 'time' ? 'polite' : 'off'} aria-label=${this._label}>\n        ${this.pulse ? html`<span class=\"dot\" aria-hidden=\"true\"></span>` : iconSvg}\n        <span class=\"text\">${this._label}</span>\n        <slot></slot>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bias-scarcity': BiasScarcity;\n  }\n}\n"],"names":["BiasScarcity","LitElement","changed","critical","warning","label","end","diff","ms","totalMinutes","days","hours","minutes","iconSvg","svg","html","hostBase","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;AAoBO,IAAMA,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAmDO,KAAA,OAAwC,SACxC,KAAA,WAAW,IACK,KAAA,YAAY,GACZ,KAAA,YAAY,IACI,KAAA,QAAQ,IAE3C,KAAQ,SAAS,IAE1B,KAAQ,SAAS;AAAA,EAAA;AAAA,EAER,oBAAoB;AAC3B,UAAM,kBAAA,GACN,KAAK,MAAA,GAEL,KAAK,SAAS,OAAO,YAAY,MAAM,KAAK,MAAA,GAAS,GAAM;AAAA,EAC7D;AAAA,EAES,uBAAuB;AAC9B,UAAM,qBAAA,GACF,KAAK,WAAU,cAAc,KAAK,MAAM,GAAG,KAAK,SAAS;AAAA,EAC/D;AAAA,EAES,QAAQC,GAA+B;AAC9C,KAAIA,EAAQ,IAAI,MAAM,KAAKA,EAAQ,IAAI,UAAU,KAAKA,EAAQ,IAAI,WAAW,KAAKA,EAAQ,IAAI,WAAW,MACvG,KAAK,MAAA;AAAA,EAET;AAAA,EAEQ,QAAQ;AACd,QAAIC,IAAW,IACXC,IAAU,IACVC,IAAQ;AAEZ,QAAI,KAAK,SAAS,UAAU,KAAK,UAAU;AACzC,YAAMC,IAAM,KAAK,MAAM,KAAK,QAAQ;AACpC,UAAI,CAAC,OAAO,MAAMA,CAAG,GAAG;AACtB,cAAMC,IAAOD,IAAM,KAAK,IAAA;AACxB,QAAAD,IAAQE,KAAQ,IAAI,UAAU,WAAW,KAAK,gBAAgBA,CAAI,CAAC,IACnEJ,IAAWI,IAAO,KAAKA,IAAO,MAC9BH,IAAUG,KAAQ,QAAaA,IAAO,KAAK;AAAA,MAC7C;AAAA,IACF,MAAA,CAAW,KAAK,SAAS,WACvBF,IAAQ,QAAQ,KAAK,SAAS,SAC9BF,IAAW,KAAK,YAAY,KAAK,KAAK,YAAY,GAClDC,IAAU,KAAK,aAAa,KAAK,KAAK,YAAY,KAAK,aAC9C,KAAK,SAAS,iBACvBC,IAAQ,UAAU,KAAK,SAAS,gBAChCD,IAAU,KAAK,aAAa,KAAK;AAGnC,SAAK,gBAAgB,iBAAiBD,CAAQ,GAC9C,KAAK,gBAAgB,gBAAgBC,KAAW,CAACD,CAAQ,GACzD,KAAK,SAASE;AAAA,EAChB;AAAA,EAEQ,gBAAgBG,GAAoB;AAC1C,UAAMC,IAAe,KAAK,MAAMD,IAAK,GAAM,GACrCE,IAAO,KAAK,MAAMD,IAAgB,IAAQ,GAC1CE,IAAQ,KAAK,OAAOF,IAAeC,IAAO,KAAK,MAAM,EAAE,GACvDE,IAAUH,IAAeC,IAAO,KAAK,KAAKC,IAAQ;AACxD,WAAID,IAAO,IAAU,GAAGA,CAAI,KAAKC,CAAK,MAClCA,IAAQ,IAAU,GAAGA,CAAK,KAAKC,CAAO,MACnC,GAAGA,CAAO;AAAA,EACnB;AAAA,EAES,SAAS;AAChB,UAAMC,IAAU,KAAK,SAAS,SAC1BC,2OACA,KAAK,SAAS,UACdA,iNACAA;AAEJ,WAAOC;AAAA,mDACwC,KAAK,SAAS,SAAS,WAAW,KAAK,eAAe,KAAK,MAAM;AAAA,UAC1G,KAAK,QAAQA,kDAAqDF,CAAO;AAAA,6BACtD,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA,EAItC;AACF;AAnIab,EACJ,SAAS;AADLA,EAGK,SAAS,CAACgB,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,GA8ClD;AAEWC,EAAA;AAAA,EAAXC,EAAA;AAAS,GAnDCpB,EAmDC,WAAA,QAAA,CAAA;AACAmB,EAAA;AAAA,EAAXC,EAAA;AAAS,GApDCpB,EAoDC,WAAA,YAAA,CAAA;AACgBmB,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArDfpB,EAqDiB,WAAA,aAAA,CAAA;AACAmB,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtDfpB,EAsDiB,WAAA,aAAA,CAAA;AACgBmB,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAvD/BpB,EAuDiC,WAAA,SAAA,CAAA;AAE3BmB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAzDIrB,EAyDM,WAAA,UAAA,CAAA;AAzDNA,IAANmB,EAAA;AAAA,EADNG,EAAc,eAAe;AAAA,GACjBtB,CAAA;"}

package/dist/components/bias-social-proof/bias-social-proof.d.ts

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+/**
+ * @element bias-social-proof
+ * Lightweight social-proof badge showing how many others are viewing,
+ * purchasing, rating, or subscribing. Optional stacked avatars. Widely used
+ * on Booking.com, Airbnb, product pages.
+ *
+ * @example
+ * ```html
+ * <bias-social-proof count="23" type="viewing" interval="now"></bias-social-proof>
+ * <bias-social-proof count="1284" type="purchased" format="compact"
+ *   .avatars=${['/a.png','/b.png']}></bias-social-proof>
+ * ```
+ *
+ * @cssprop --cg-component-bias-social-proof-radius
+ * @cssprop --cg-component-bias-social-proof-avatar-size
+ */
+export declare class BiasSocialProof extends LitElement {
+    static biasId: "social-proof";
+    static styles: import('lit').CSSResult[];
+    count: number;
+    type: 'viewing' | 'purchased' | 'rated' | 'subscribed';
+    interval: 'now' | 'today' | 'week' | 'month';
+    format: 'compact' | 'full';
+    avatars: string[];
+    private _verb;
+    private _intervalSuffix;
+    private _formattedCount;
+    private _label;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bias-social-proof': BiasSocialProof;
+    }
+}
+//# sourceMappingURL=bias-social-proof.d.ts.map

package/dist/components/bias-social-proof/bias-social-proof.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bias-social-proof.d.ts","sourceRoot":"","sources":["../../../src/components/bias-social-proof/bias-social-proof.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAIjD;;;;;;;;;;;;;;;GAeG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,MAAM,CAAC,MAAM,EAAG,cAAc,CAAU;IAExC,OAAgB,MAAM,4BAkCnB;IAEyB,KAAK,SAAK;IAC1B,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,YAAY,CAAa;IACnE,QAAQ,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAS;IACrD,MAAM,EAAE,SAAS,GAAG,MAAM,CAAU;IACrB,OAAO,EAAE,MAAM,EAAE,CAAM;IAElD,OAAO,CAAC,KAAK;IASb,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,MAAM;IAQL,MAAM;CAmBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

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

@@ -0,0 +1,112 @@
+import { css as u, LitElement as d, svg as p, html as h } from "lit";
+import { property as o, customElement as v } from "lit/decorators.js";
+import { a as g, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (e, a, s, n) => {
+  for (var r = n > 1 ? void 0 : n ? b(a, s) : a, c = e.length - 1, l; c >= 0; c--)
+    (l = e[c]) && (r = (n ? l(a, s, r) : l(r)) || r);
+  return n && r && m(a, s, r), r;
+};
+let t = class extends d {
+  constructor() {
+    super(...arguments), this.count = 0, this.type = "viewing", this.interval = "now", this.format = "full", this.avatars = [];
+  }
+  _verb() {
+    switch (this.type) {
+      case "viewing":
+        return this.count === 1 ? "is viewing" : "are viewing";
+      case "purchased":
+        return "purchased";
+      case "rated":
+        return "rated this";
+      case "subscribed":
+        return "subscribed";
+    }
+  }
+  _intervalSuffix() {
+    switch (this.interval) {
+      case "now":
+        return this.type === "viewing" ? " now" : "";
+      case "today":
+        return " today";
+      case "week":
+        return " this week";
+      case "month":
+        return " this month";
+    }
+  }
+  _formattedCount() {
+    return this.count >= 1e6 ? `${(this.count / 1e6).toFixed(1)}M` : this.count >= 1e3 ? `${(this.count / 1e3).toFixed(1)}K` : String(this.count);
+  }
+  _label() {
+    const e = this.count === 1 ? "person" : "people";
+    return this.format === "compact" ? `${this._formattedCount()} ${this.type}${this._intervalSuffix()}`.trim() : `${this._formattedCount()} ${e} ${this._verb()}${this._intervalSuffix()}`.trim();
+  }
+  render() {
+    const e = this.type === "purchased" ? p`<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="M3 7h18l-2 12H5L3 7z"></path><path d="M8 7V5a4 4 0 018 0v2"></path></svg>` : this.type === "rated" ? p`<svg class="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3 6.5 7 .8-5.2 4.7 1.5 7-6.3-3.6-6.3 3.6 1.5-7L2 9.3l7-.8z"></path></svg>` : p`<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="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"></path><circle cx="12" cy="12" r="3"></circle></svg>`, a = this.avatars && this.avatars.length > 0;
+    return h`
+      <span class="strip" role="status" aria-label=${this._label()}>
+        ${a ? h`<span class="avatars" aria-hidden="true">${this.avatars.slice(0, 3).map((s) => h`<img class="avatar" src=${s} alt="" />`)}</span>` : e}
+        <span aria-hidden="true"><span class="count">${this._formattedCount()}</span> ${this.format === "full" ? `${this.count === 1 ? "person" : "people"} ${this._verb()}` : this.type}${this._intervalSuffix()}</span>
+        <slot></slot>
+      </span>
+    `;
+  }
+};
+t.biasId = "social-proof";
+t.styles = [g, f, u`
+    :host { align-items: center; }
+
+    .strip {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-component-bias-social-proof-padding) var(--cg-spacing-12);
+      border-radius: var(--cg-component-bias-social-proof-radius);
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-container-text);
+      background: var(--cg-color-surface-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);
+    }
+
+    .icon { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); flex-shrink: 0; opacity: 0.8; }
+
+    .avatars {
+      display: inline-flex;
+      align-items: center;
+    }
+    .avatar {
+      width: var(--cg-component-bias-social-proof-avatar-size);
+      height: var(--cg-component-bias-social-proof-avatar-size);
+      border-radius: var(--cg-border-radius-full);
+      border: var(--cg-border-width-100) solid var(--cg-color-surface-container-background);
+      background: var(--cg-color-surface-base-background);
+      object-fit: cover;
+      margin-left: calc(-1 * var(--cg-spacing-8));
+    }
+    .avatar:first-child { margin-left: 0; }
+
+    .count { font-weight: var(--cg-font-weight-semibold); color: var(--cg-color-surface-base-text); }
+  `];
+i([
+  o({ type: Number })
+], t.prototype, "count", 2);
+i([
+  o()
+], t.prototype, "type", 2);
+i([
+  o()
+], t.prototype, "interval", 2);
+i([
+  o()
+], t.prototype, "format", 2);
+i([
+  o({ type: Array })
+], t.prototype, "avatars", 2);
+t = i([
+  v("bias-social-proof")
+], t);
+export {
+  t as BiasSocialProof
+};
+//# sourceMappingURL=bias-social-proof.js.map

package/dist/components/bias-social-proof/bias-social-proof.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bias-social-proof.js","sources":["../../../src/components/bias-social-proof/bias-social-proof.ts"],"sourcesContent":["import { LitElement, html, css, svg } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element bias-social-proof\n * Lightweight social-proof badge showing how many others are viewing,\n * purchasing, rating, or subscribing. Optional stacked avatars. Widely used\n * on Booking.com, Airbnb, product pages.\n *\n * @example\n * ```html\n * <bias-social-proof count=\"23\" type=\"viewing\" interval=\"now\"></bias-social-proof>\n * <bias-social-proof count=\"1284\" type=\"purchased\" format=\"compact\"\n *   .avatars=${['/a.png','/b.png']}></bias-social-proof>\n * ```\n *\n * @cssprop --cg-component-bias-social-proof-radius\n * @cssprop --cg-component-bias-social-proof-avatar-size\n */\n@customElement('bias-social-proof')\nexport class BiasSocialProof extends LitElement {\n  static biasId = 'social-proof' as const;\n\n  static override styles = [hostBase, reducedMotion, css`\n    :host { align-items: center; }\n\n    .strip {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-component-bias-social-proof-padding) var(--cg-spacing-12);\n      border-radius: var(--cg-component-bias-social-proof-radius);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-container-text);\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n    }\n\n    .icon { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); flex-shrink: 0; opacity: 0.8; }\n\n    .avatars {\n      display: inline-flex;\n      align-items: center;\n    }\n    .avatar {\n      width: var(--cg-component-bias-social-proof-avatar-size);\n      height: var(--cg-component-bias-social-proof-avatar-size);\n      border-radius: var(--cg-border-radius-full);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-container-background);\n      background: var(--cg-color-surface-base-background);\n      object-fit: cover;\n      margin-left: calc(-1 * var(--cg-spacing-8));\n    }\n    .avatar:first-child { margin-left: 0; }\n\n    .count { font-weight: var(--cg-font-weight-semibold); color: var(--cg-color-surface-base-text); }\n  `];\n\n  @property({ type: Number }) count = 0;\n  @property() type: 'viewing' | 'purchased' | 'rated' | 'subscribed' = 'viewing';\n  @property() interval: 'now' | 'today' | 'week' | 'month' = 'now';\n  @property() format: 'compact' | 'full' = 'full';\n  @property({ type: Array }) avatars: string[] = [];\n\n  private _verb(): string {\n    switch (this.type) {\n      case 'viewing': return this.count === 1 ? 'is viewing' : 'are viewing';\n      case 'purchased': return 'purchased';\n      case 'rated': return 'rated this';\n      case 'subscribed': return 'subscribed';\n    }\n  }\n\n  private _intervalSuffix(): string {\n    switch (this.interval) {\n      case 'now': return this.type === 'viewing' ? ' now' : '';\n      case 'today': return ' today';\n      case 'week': return ' this week';\n      case 'month': return ' this month';\n    }\n  }\n\n  private _formattedCount(): string {\n    if (this.count >= 1_000_000) return `${(this.count / 1_000_000).toFixed(1)}M`;\n    if (this.count >= 1_000) return `${(this.count / 1_000).toFixed(1)}K`;\n    return String(this.count);\n  }\n\n  private _label(): string {\n    const noun = this.count === 1 ? 'person' : 'people';\n    if (this.format === 'compact') {\n      return `${this._formattedCount()} ${this.type}${this._intervalSuffix()}`.trim();\n    }\n    return `${this._formattedCount()} ${noun} ${this._verb()}${this._intervalSuffix()}`.trim();\n  }\n\n  override render() {\n    const iconSvg = this.type === 'purchased'\n      ? 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=\"M3 7h18l-2 12H5L3 7z\"></path><path d=\"M8 7V5a4 4 0 018 0v2\"></path></svg>`\n      : this.type === 'rated'\n      ? svg`<svg class=\"icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12 2l3 6.5 7 .8-5.2 4.7 1.5 7-6.3-3.6-6.3 3.6 1.5-7L2 9.3l7-.8z\"></path></svg>`\n      : 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=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z\"></path><circle cx=\"12\" cy=\"12\" r=\"3\"></circle></svg>`;\n\n    const hasAvatars = this.avatars && this.avatars.length > 0;\n\n    return html`\n      <span class=\"strip\" role=\"status\" aria-label=${this._label()}>\n        ${hasAvatars\n          ? html`<span class=\"avatars\" aria-hidden=\"true\">${this.avatars.slice(0, 3).map(src => html`<img class=\"avatar\" src=${src} alt=\"\" />`)}</span>`\n          : iconSvg}\n        <span aria-hidden=\"true\"><span class=\"count\">${this._formattedCount()}</span> ${this.format === 'full' ? `${this.count === 1 ? 'person' : 'people'} ${this._verb()}` : this.type}${this._intervalSuffix()}</span>\n        <slot></slot>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bias-social-proof': BiasSocialProof;\n  }\n}\n"],"names":["BiasSocialProof","LitElement","noun","iconSvg","svg","hasAvatars","html","src","hostBase","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAqBO,IAAMA,IAAN,cAA8BC,EAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GAuCuB,KAAA,QAAQ,GACxB,KAAA,OAAyD,WACzD,KAAA,WAA+C,OAC/C,KAAA,SAA6B,QACd,KAAA,UAAoB,CAAA;AAAA,EAAC;AAAA,EAExC,QAAgB;AACtB,YAAQ,KAAK,MAAA;AAAA,MACX,KAAK;AAAW,eAAO,KAAK,UAAU,IAAI,eAAe;AAAA,MACzD,KAAK;AAAa,eAAO;AAAA,MACzB,KAAK;AAAS,eAAO;AAAA,MACrB,KAAK;AAAc,eAAO;AAAA,IAAA;AAAA,EAE9B;AAAA,EAEQ,kBAA0B;AAChC,YAAQ,KAAK,UAAA;AAAA,MACX,KAAK;AAAO,eAAO,KAAK,SAAS,YAAY,SAAS;AAAA,MACtD,KAAK;AAAS,eAAO;AAAA,MACrB,KAAK;AAAQ,eAAO;AAAA,MACpB,KAAK;AAAS,eAAO;AAAA,IAAA;AAAA,EAEzB;AAAA,EAEQ,kBAA0B;AAChC,WAAI,KAAK,SAAS,MAAkB,IAAI,KAAK,QAAQ,KAAW,QAAQ,CAAC,CAAC,MACtE,KAAK,SAAS,MAAc,IAAI,KAAK,QAAQ,KAAO,QAAQ,CAAC,CAAC,MAC3D,OAAO,KAAK,KAAK;AAAA,EAC1B;AAAA,EAEQ,SAAiB;AACvB,UAAMC,IAAO,KAAK,UAAU,IAAI,WAAW;AAC3C,WAAI,KAAK,WAAW,YACX,GAAG,KAAK,gBAAA,CAAiB,IAAI,KAAK,IAAI,GAAG,KAAK,iBAAiB,GAAG,KAAA,IAEpE,GAAG,KAAK,gBAAA,CAAiB,IAAIA,CAAI,IAAI,KAAK,MAAA,CAAO,GAAG,KAAK,gBAAA,CAAiB,GAAG,KAAA;AAAA,EACtF;AAAA,EAES,SAAS;AAChB,UAAMC,IAAU,KAAK,SAAS,cAC1BC,mPACA,KAAK,SAAS,UACdA,2KACAA,+QAEEC,IAAa,KAAK,WAAW,KAAK,QAAQ,SAAS;AAEzD,WAAOC;AAAA,qDAC0C,KAAK,QAAQ;AAAA,UACxDD,IACEC,6CAAgD,KAAK,QAAQ,MAAM,GAAG,CAAC,EAAE,IAAI,OAAOA,4BAA+BC,CAAG,YAAY,CAAC,YACnIJ,CAAO;AAAA,uDACoC,KAAK,iBAAiB,WAAW,KAAK,WAAW,SAAS,GAAG,KAAK,UAAU,IAAI,WAAW,QAAQ,IAAI,KAAK,OAAO,KAAK,KAAK,IAAI,GAAG,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA,EAI/M;AACF;AAhGaH,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,GAkClD;AAE2BC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvCfZ,EAuCiB,WAAA,SAAA,CAAA;AAChBW,EAAA;AAAA,EAAXC,EAAA;AAAS,GAxCCZ,EAwCC,WAAA,QAAA,CAAA;AACAW,EAAA;AAAA,EAAXC,EAAA;AAAS,GAzCCZ,EAyCC,WAAA,YAAA,CAAA;AACAW,EAAA;AAAA,EAAXC,EAAA;AAAS,GA1CCZ,EA0CC,WAAA,UAAA,CAAA;AACeW,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GA3CdZ,EA2CgB,WAAA,WAAA,CAAA;AA3ChBA,IAANW,EAAA;AAAA,EADNE,EAAc,mBAAmB;AAAA,GACrBb,CAAA;"}

package/dist/components/cg-accordion/cg-accordion.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+/** Item definition for cg-accordion. */
+export interface AccordionItem {
+    value: string;
+    trigger: string;
+    content: string;
+    icon?: string;
+    disabled?: boolean;
+}
+/**
+ * @element cg-accordion
+ * Expandable content sections with smooth CSS grid height animation.
+ *
+ * @fires {CustomEvent<{open: string[], toggled: string}>} cg-accordion-change - When an item is toggled
+ */
+export declare class CgAccordion extends LitElement {
+    static styles: import('lit').CSSResult[];
+    size: 'sm' | 'md' | 'lg';
+    items: AccordionItem[];
+    multiple: boolean;
+    variant: 'default' | 'card' | 'bordered';
+    defaultOpen: string[];
+    private _openItems;
+    firstUpdated(): void;
+    private _handleTriggerKeydown;
+    private _toggle;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-accordion': CgAccordion;
+    }
+}
+//# sourceMappingURL=cg-accordion.d.ts.map

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

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