@cognivo/components 0.8.0

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

@@ -0,0 +1,60 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-card
+ * Container with header / body / footer slots and five visual variants.
+ * Designed to work as both a content card AND a generic layout container —
+ * use `variant="plain"` when you just want padding + radius without any
+ * visual treatment.
+ *
+ * Shadow-free by design: the lift between layers comes from background
+ * fill + a hairline border, not box-shadow. Modern flat aesthetic; works
+ * cleanly across light + dark themes.
+ *
+ * @example
+ * ```html
+ * <!-- default content card (subtle bg + border, no shadow) -->
+ * <cg-card>
+ *   <h3 slot="header">Title</h3>
+ *   <p>Body content.</p>
+ *   <div slot="footer"><cg-button>Action</cg-button></div>
+ * </cg-card>
+ *
+ * <!-- pure container, no visual treatment, just slots + padding -->
+ * <cg-card variant="plain"><div>Layout shell</div></cg-card>
+ *
+ * <!-- clickable list-row pattern, no bg until hover -->
+ * <cg-card variant="ghost" clickable>Click me</cg-card>
+ * ```
+ *
+ * @slot - Default slot for body content
+ * @slot header - Card header area (above body)
+ * @slot footer - Card footer area (below body)
+ *
+ * @fires {CustomEvent} cg-card-click - When a clickable card is clicked
+ *
+ * @cssprop --cg-color-surface-cards-background - Card background fill
+ * @cssprop --cg-color-surface-cards-border - Card border (default + outlined variants)
+ * @cssprop --cg-color-surface-cards-emphasis - Filled variant fill
+ * @cssprop --cg-component-card-radius - Default border radius
+ */
+export declare class CgCard extends LitElement {
+    static styles: import('lit').CSSResult[];
+    variant: 'elevated' | 'outlined' | 'filled' | 'plain' | 'ghost';
+    padding: 'none' | 'sm' | 'md' | 'lg';
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    clickable: boolean;
+    disabled: boolean;
+    private _hasHeader;
+    private _hasFooter;
+    private _onHeaderSlotChange;
+    private _onFooterSlotChange;
+    private _handleClick;
+    private _handleKeydown;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-card': CgCard;
+    }
+}
+//# sourceMappingURL=cg-card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-card.d.ts","sourceRoot":"","sources":["../../../src/components/cg-card/cg-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,4BAuInB;IAE0B,OAAO,EAAE,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAc;IAC7E,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC5C,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACtC,SAAS,UAAS;IAClB,QAAQ,UAAS;IAEpD,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAQb,MAAM;CAgBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/components/cg-card/cg-card.js

@@ -0,0 +1,207 @@
+import { css as h, LitElement as u, nothing as d, html as b } from "lit";
+import { property as n, state as g, customElement as v } from "lit/decorators.js";
+import { h as p, r as f, f as m } from "../../chunks/premium.css-9I4kHrsl.js";
+var y = Object.defineProperty, k = Object.getOwnPropertyDescriptor, o = (r, e, c, s) => {
+  for (var t = s > 1 ? void 0 : s ? k(e, c) : e, i = r.length - 1, l; i >= 0; i--)
+    (l = r[i]) && (t = (s ? l(e, c, t) : l(t)) || t);
+  return s && t && y(e, c, t), t;
+};
+let a = class extends u {
+  constructor() {
+    super(...arguments), this.variant = "elevated", this.padding = "md", this.rounded = "lg", this.clickable = !1, this.disabled = !1, this._hasHeader = !1, this._hasFooter = !1;
+  }
+  _onHeaderSlotChange(r) {
+    const e = r.target;
+    this._hasHeader = e.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  _onFooterSlotChange(r) {
+    const e = r.target;
+    this._hasFooter = e.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  _handleClick() {
+    this.disabled || this.clickable && this.dispatchEvent(new CustomEvent("cg-card-click", { bubbles: !0, composed: !0 }));
+  }
+  _handleKeydown(r) {
+    this.disabled || this.clickable && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), this._handleClick());
+  }
+  render() {
+    return b`
+      <div
+        class="card"
+        @click=${this.clickable ? this._handleClick : d}
+        @keydown=${this.clickable ? this._handleKeydown : d}
+        role=${this.clickable ? "button" : d}
+        tabindex=${this.clickable && !this.disabled ? "0" : d}
+        aria-disabled=${this.disabled ? "true" : d}
+      >
+        <div class="header ${this._hasHeader ? "has-content" : ""}"><slot name="header" @slotchange=${this._onHeaderSlotChange}></slot></div>
+        <div class="body"><slot></slot></div>
+        <div class="footer ${this._hasFooter ? "has-content" : ""}"><slot name="footer" @slotchange=${this._onFooterSlotChange}></slot></div>
+      </div>
+    `;
+  }
+};
+a.styles = [p, f, m, h`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    .card {
+      position: relative;
+      border-radius: var(--cg-component-card-radius);
+      overflow: hidden;
+      transition:
+        border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        background-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      background: var(--cg-color-surface-cards-background);
+    }
+
+    /* ── Variants ──
+       All variants are flat (no box-shadow). The lift between layers
+       comes from background + border contrast. */
+
+    /* Elevated (default) — subtle bg + hairline border. Was a shadowed
+       lift; now flat. The default content card. */
+    :host([variant="elevated"]) .card {
+      background: var(--cg-color-surface-cards-background);
+      border-color: var(--cg-color-surface-cards-border);
+    }
+
+    /* Outlined — transparent fill, border defines the container */
+    :host([variant="outlined"]) .card {
+      background: transparent;
+      border-color: var(--cg-color-surface-cards-outlined);
+    }
+
+    /* Filled — slightly emphasized fill, no border. For highlighting
+       one card among many. */
+    :host([variant="filled"]) .card {
+      background: var(--cg-color-surface-cards-emphasis);
+      border-color: transparent;
+    }
+
+    /* Plain — no fill, no border. Pure layout container that gives you
+       slots + padding + radius. Use for layout shells where you don't
+       want any visual treatment. */
+    :host([variant="plain"]) .card {
+      background: transparent;
+      border-color: transparent;
+    }
+
+    /* Ghost — transparent until hover. Useful for clickable list rows
+       where you want a quiet default state and a clear hover lift. */
+    :host([variant="ghost"]) .card {
+      background: transparent;
+      border-color: transparent;
+    }
+    :host([variant="ghost"][clickable]) .card:hover {
+      background: var(--cg-color-surface-cards-hover-background);
+      border-color: transparent;
+    }
+
+    /* ── Interactive (clickable) ── */
+    :host([clickable]) .card {
+      cursor: pointer;
+    }
+    :host([clickable]) .card:hover {
+      border-color: var(--cg-color-surface-cards-hover-border);
+      background: var(--cg-color-surface-cards-hover-background);
+    }
+    :host([clickable]) .card:active {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+    :host([clickable]) .card:focus-visible {
+      outline: none;
+      box-shadow:
+        0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring-offset),
+        0 0 0 var(--cg-border-width-300) var(--cg-color-focus-ring);
+    }
+
+    /* ── Padding ── */
+    :host([padding="none"]) .body { padding: 0; }
+    :host([padding="sm"]) .body { padding: var(--cg-component-card-padding-sm); }
+    :host([padding="md"]) .body { padding: var(--cg-component-card-padding-md) var(--cg-spacing-24); }
+    :host([padding="lg"]) .body { padding: var(--cg-component-card-padding-lg); }
+
+    /* ── Content z-index ── */
+    .header, .body, .footer {
+      position: relative;
+      z-index: 1;
+    }
+
+    /* ── Header slot ── */
+    .header {
+      padding: var(--cg-spacing-20) var(--cg-spacing-24) var(--cg-component-card-padding-md);
+    }
+    .header:not(.has-content) {
+      display: none;
+    }
+    .header ::slotted(*) {
+      margin: 0;
+    }
+
+    /* ── Body ── */
+    .body {
+      padding: var(--cg-component-card-padding-lg);
+    }
+
+    /* ── Footer slot ── */
+    .footer {
+      padding: var(--cg-component-card-padding-md) var(--cg-spacing-24);
+    }
+    .footer:not(.has-content) {
+      display: none;
+    }
+
+    /* Plain variant strips default padding too — pure layout. */
+    :host([variant="plain"]) .header,
+    :host([variant="plain"]) .body,
+    :host([variant="plain"]) .footer {
+      padding: 0;
+    }
+
+    /* Disabled state */
+    :host([disabled]) .card {
+      background: var(--cg-color-surface-cards-disable-background);
+      border-color: var(--cg-color-surface-cards-disable-border);
+      color: var(--cg-color-surface-cards-disable-text);
+      pointer-events: none;
+    }
+
+    /* Rounded variants */
+    :host([rounded="none"]) .card { border-radius: 0; }
+    :host([rounded="sm"]) .card { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .card { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .card { border-radius: var(--cg-component-card-radius); }
+    :host([rounded="full"]) .card { border-radius: var(--cg-border-radius-full); }
+  `];
+o([
+  n({ reflect: !0 })
+], a.prototype, "variant", 2);
+o([
+  n({ reflect: !0 })
+], a.prototype, "padding", 2);
+o([
+  n({ reflect: !0 })
+], a.prototype, "rounded", 2);
+o([
+  n({ type: Boolean, reflect: !0 })
+], a.prototype, "clickable", 2);
+o([
+  n({ type: Boolean, reflect: !0 })
+], a.prototype, "disabled", 2);
+o([
+  g()
+], a.prototype, "_hasHeader", 2);
+o([
+  g()
+], a.prototype, "_hasFooter", 2);
+a = o([
+  v("cg-card")
+], a);
+export {
+  a as CgCard
+};
+//# sourceMappingURL=cg-card.js.map

package/dist/components/cg-card/cg-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-card.js","sources":["../../../src/components/cg-card/cg-card.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\n/**\n * @element cg-card\n * Container with header / body / footer slots and five visual variants.\n * Designed to work as both a content card AND a generic layout container —\n * use `variant=\"plain\"` when you just want padding + radius without any\n * visual treatment.\n *\n * Shadow-free by design: the lift between layers comes from background\n * fill + a hairline border, not box-shadow. Modern flat aesthetic; works\n * cleanly across light + dark themes.\n *\n * @example\n * ```html\n * <!-- default content card (subtle bg + border, no shadow) -->\n * <cg-card>\n *   <h3 slot=\"header\">Title</h3>\n *   <p>Body content.</p>\n *   <div slot=\"footer\"><cg-button>Action</cg-button></div>\n * </cg-card>\n *\n * <!-- pure container, no visual treatment, just slots + padding -->\n * <cg-card variant=\"plain\"><div>Layout shell</div></cg-card>\n *\n * <!-- clickable list-row pattern, no bg until hover -->\n * <cg-card variant=\"ghost\" clickable>Click me</cg-card>\n * ```\n *\n * @slot - Default slot for body content\n * @slot header - Card header area (above body)\n * @slot footer - Card footer area (below body)\n *\n * @fires {CustomEvent} cg-card-click - When a clickable card is clicked\n *\n * @cssprop --cg-color-surface-cards-background - Card background fill\n * @cssprop --cg-color-surface-cards-border - Card border (default + outlined variants)\n * @cssprop --cg-color-surface-cards-emphasis - Filled variant fill\n * @cssprop --cg-component-card-radius - Default border radius\n */\n@customElement('cg-card')\nexport class CgCard 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    .card {\n      position: relative;\n      border-radius: var(--cg-component-card-radius);\n      overflow: hidden;\n      transition:\n        border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        background-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: var(--cg-color-surface-cards-background);\n    }\n\n    /* ── Variants ──\n       All variants are flat (no box-shadow). The lift between layers\n       comes from background + border contrast. */\n\n    /* Elevated (default) — subtle bg + hairline border. Was a shadowed\n       lift; now flat. The default content card. */\n    :host([variant=\"elevated\"]) .card {\n      background: var(--cg-color-surface-cards-background);\n      border-color: var(--cg-color-surface-cards-border);\n    }\n\n    /* Outlined — transparent fill, border defines the container */\n    :host([variant=\"outlined\"]) .card {\n      background: transparent;\n      border-color: var(--cg-color-surface-cards-outlined);\n    }\n\n    /* Filled — slightly emphasized fill, no border. For highlighting\n       one card among many. */\n    :host([variant=\"filled\"]) .card {\n      background: var(--cg-color-surface-cards-emphasis);\n      border-color: transparent;\n    }\n\n    /* Plain — no fill, no border. Pure layout container that gives you\n       slots + padding + radius. Use for layout shells where you don't\n       want any visual treatment. */\n    :host([variant=\"plain\"]) .card {\n      background: transparent;\n      border-color: transparent;\n    }\n\n    /* Ghost — transparent until hover. Useful for clickable list rows\n       where you want a quiet default state and a clear hover lift. */\n    :host([variant=\"ghost\"]) .card {\n      background: transparent;\n      border-color: transparent;\n    }\n    :host([variant=\"ghost\"][clickable]) .card:hover {\n      background: var(--cg-color-surface-cards-hover-background);\n      border-color: transparent;\n    }\n\n    /* ── Interactive (clickable) ── */\n    :host([clickable]) .card {\n      cursor: pointer;\n    }\n    :host([clickable]) .card:hover {\n      border-color: var(--cg-color-surface-cards-hover-border);\n      background: var(--cg-color-surface-cards-hover-background);\n    }\n    :host([clickable]) .card:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    :host([clickable]) .card:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring-offset),\n        0 0 0 var(--cg-border-width-300) var(--cg-color-focus-ring);\n    }\n\n    /* ── Padding ── */\n    :host([padding=\"none\"]) .body { padding: 0; }\n    :host([padding=\"sm\"]) .body { padding: var(--cg-component-card-padding-sm); }\n    :host([padding=\"md\"]) .body { padding: var(--cg-component-card-padding-md) var(--cg-spacing-24); }\n    :host([padding=\"lg\"]) .body { padding: var(--cg-component-card-padding-lg); }\n\n    /* ── Content z-index ── */\n    .header, .body, .footer {\n      position: relative;\n      z-index: 1;\n    }\n\n    /* ── Header slot ── */\n    .header {\n      padding: var(--cg-spacing-20) var(--cg-spacing-24) var(--cg-component-card-padding-md);\n    }\n    .header:not(.has-content) {\n      display: none;\n    }\n    .header ::slotted(*) {\n      margin: 0;\n    }\n\n    /* ── Body ── */\n    .body {\n      padding: var(--cg-component-card-padding-lg);\n    }\n\n    /* ── Footer slot ── */\n    .footer {\n      padding: var(--cg-component-card-padding-md) var(--cg-spacing-24);\n    }\n    .footer:not(.has-content) {\n      display: none;\n    }\n\n    /* Plain variant strips default padding too — pure layout. */\n    :host([variant=\"plain\"]) .header,\n    :host([variant=\"plain\"]) .body,\n    :host([variant=\"plain\"]) .footer {\n      padding: 0;\n    }\n\n    /* Disabled state */\n    :host([disabled]) .card {\n      background: var(--cg-color-surface-cards-disable-background);\n      border-color: var(--cg-color-surface-cards-disable-border);\n      color: var(--cg-color-surface-cards-disable-text);\n      pointer-events: none;\n    }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"]) .card { border-radius: 0; }\n    :host([rounded=\"sm\"]) .card { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .card { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .card { border-radius: var(--cg-component-card-radius); }\n    :host([rounded=\"full\"]) .card { border-radius: var(--cg-border-radius-full); }\n  `];\n\n  @property({ reflect: true }) variant: 'elevated' | 'outlined' | 'filled' | 'plain' | 'ghost' = 'elevated';\n  @property({ reflect: true }) padding: 'none' | 'sm' | 'md' | 'lg' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ type: Boolean, reflect: true }) clickable = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @state() private _hasHeader = false;\n  @state() private _hasFooter = false;\n\n  private _onHeaderSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHeader = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private _onFooterSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private _handleClick() {\n    if (this.disabled) return;\n    if (this.clickable) {\n      this.dispatchEvent(new CustomEvent('cg-card-click', { bubbles: true, composed: true }));\n    }\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    if (this.disabled) return;\n    if (this.clickable && (e.key === 'Enter' || e.key === ' ')) {\n      e.preventDefault();\n      this._handleClick();\n    }\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"card\"\n        @click=${this.clickable ? this._handleClick : nothing}\n        @keydown=${this.clickable ? this._handleKeydown : nothing}\n        role=${this.clickable ? 'button' : nothing}\n        tabindex=${this.clickable && !this.disabled ? '0' : nothing}\n        aria-disabled=${this.disabled ? 'true' : nothing}\n      >\n        <div class=\"header ${this._hasHeader ? 'has-content' : ''}\"><slot name=\"header\" @slotchange=${this._onHeaderSlotChange}></slot></div>\n        <div class=\"body\"><slot></slot></div>\n        <div class=\"footer ${this._hasFooter ? 'has-content' : ''}\"><slot name=\"footer\" @slotchange=${this._onFooterSlotChange}></slot></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-card': CgCard;\n  }\n}\n"],"names":["CgCard","LitElement","e","slot","html","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;AA2CO,IAAMA,IAAN,cAAqBC,EAAW;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GA0IwB,KAAA,UAAkE,YAClE,KAAA,UAAuC,MACvC,KAAA,UAAgD,MACjC,KAAA,YAAY,IACZ,KAAA,WAAW,IAE9C,KAAQ,aAAa,IACrB,KAAQ,aAAa;AAAA,EAAA;AAAA,EAEtB,oBAAoBC,GAAU;AACpC,UAAMC,IAAOD,EAAE;AACf,SAAK,aAAaC,EAAK,cAAc,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS;AAAA,EACnE;AAAA,EAEQ,oBAAoBD,GAAU;AACpC,UAAMC,IAAOD,EAAE;AACf,SAAK,aAAaC,EAAK,cAAc,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS;AAAA,EACnE;AAAA,EAEQ,eAAe;AACrB,IAAI,KAAK,YACL,KAAK,aACP,KAAK,cAAc,IAAI,YAAY,iBAAiB,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EAE1F;AAAA,EAEQ,eAAeD,GAAkB;AACvC,IAAI,KAAK,YACL,KAAK,cAAcA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACpDA,EAAE,eAAA,GACF,KAAK,aAAA;AAAA,EAET;AAAA,EAES,SAAS;AAChB,WAAOE;AAAA;AAAA;AAAA,iBAGM,KAAK,YAAY,KAAK,eAAeC,CAAO;AAAA,mBAC1C,KAAK,YAAY,KAAK,iBAAiBA,CAAO;AAAA,eAClD,KAAK,YAAY,WAAWA,CAAO;AAAA,mBAC/B,KAAK,aAAa,CAAC,KAAK,WAAW,MAAMA,CAAO;AAAA,wBAC3C,KAAK,WAAW,SAASA,CAAO;AAAA;AAAA,6BAE3B,KAAK,aAAa,gBAAgB,EAAE,qCAAqC,KAAK,mBAAmB;AAAA;AAAA,6BAEjG,KAAK,aAAa,gBAAgB,EAAE,qCAAqC,KAAK,mBAAmB;AAAA;AAAA;AAAA,EAG5H;AACF;AA5LaL,EACK,SAAS,CAACM,GAAWC,GAAeC,GAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAuIzE;AAE4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA1IhBX,EA0IkB,WAAA,WAAA,CAAA;AACAU,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA3IhBX,EA2IkB,WAAA,WAAA,CAAA;AACAU,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA5IhBX,EA4IkB,WAAA,WAAA,CAAA;AACeU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA7I/BX,EA6IiC,WAAA,aAAA,CAAA;AACAU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA9I/BX,EA8IiC,WAAA,YAAA,CAAA;AAE3BU,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAhJIZ,EAgJM,WAAA,cAAA,CAAA;AACAU,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAjJIZ,EAiJM,WAAA,cAAA,CAAA;AAjJNA,IAANU,EAAA;AAAA,EADNG,EAAc,SAAS;AAAA,GACXb,CAAA;"}

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

@@ -0,0 +1,52 @@
+import { LitElement } from 'lit';
+/**
+ * <cg-carousel> — Scrollable content carousel with snap, autoplay, and multi-column.
+ *
+ * @example
+ * ```html
+ * <cg-carousel columns="1" autoplay loop>
+ *   <div>Slide 1</div>
+ *   <div>Slide 2</div>
+ *   <div>Slide 3</div>
+ * </cg-carousel>
+ * ```
+ *
+ * @slot - Carousel slides
+ *
+ * @fires {CustomEvent<{index: number}>} cg-slide-click - When a slide is clicked
+ *
+ * @cssprop --cg-spacing-16 - Gap between slides
+ * @cssprop --cg-color-action-primary-background-default - Active dot color
+ */
+export declare class CgCarousel extends LitElement {
+    static styles: import('lit').CSSResult[];
+    showDots: boolean;
+    showArrows: boolean;
+    columns: number;
+    peek: boolean;
+    loop: boolean;
+    autoplay: boolean;
+    interval: number;
+    private _current;
+    private _total;
+    private _track;
+    private _autoplayTimer;
+    private _paused;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private _startAutoplay;
+    private _stopAutoplay;
+    private _handleScroll;
+    private _goTo;
+    private _prev;
+    private _next;
+    private _handleSlideClick;
+    private _handleKeydown;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-carousel': CgCarousel;
+    }
+}
+//# sourceMappingURL=cg-carousel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-carousel.d.ts","sourceRoot":"","sources":["../../../src/components/cg-carousel/cg-carousel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAsHnB;IAE0B,QAAQ,UAAQ;IAChB,UAAU,UAAQ;IACJ,OAAO,SAAK;IACX,IAAI,UAAS;IAC5B,IAAI,UAAS;IACb,QAAQ,UAAS;IAClB,QAAQ,SAAQ;IAEnC,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,MAAM,CAAK;IAEX,OAAO,CAAC,MAAM,CAAe;IAE9C,OAAO,CAAC,cAAc,CAA+C;IACrE,OAAO,CAAC,OAAO,CAAS;IAEf,YAAY;IAYZ,oBAAoB;IAM7B,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,aAAa,CAQnB;IAEF,OAAO,CAAC,KAAK;IAOb,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,cAAc;IAKb,MAAM;CA2ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,aAAa,EAAE,UAAU,CAAC;KAAE;CAC/D"}

package/dist/components/cg-carousel/cg-carousel.js

@@ -0,0 +1,262 @@
+import { css as p, LitElement as g, nothing as h, html as l } from "lit";
+import { property as n, state as u, query as v, customElement as f } from "lit/decorators.js";
+import { h as _, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, e = (t, r, s, a) => {
+  for (var i = a > 1 ? void 0 : a ? y(r, s) : r, c = t.length - 1, d; c >= 0; c--)
+    (d = t[c]) && (i = (a ? d(r, s, i) : d(i)) || i);
+  return a && i && m(r, s, i), i;
+};
+let o = class extends g {
+  constructor() {
+    super(...arguments), this.showDots = !0, this.showArrows = !0, this.columns = 1, this.peek = !1, this.loop = !1, this.autoplay = !1, this.interval = 4e3, this._current = 0, this._total = 0, this._autoplayTimer = null, this._paused = !1, this._handleScroll = () => {
+      if (!this._track || this._total === 0) return;
+      const t = this._track.scrollLeft, r = this._track.scrollWidth / this._total, s = Math.round(t / r);
+      s !== this._current && (this._current = Math.max(0, Math.min(s, this._total - 1)));
+    };
+  }
+  firstUpdated() {
+    const t = this.shadowRoot.querySelector("slot");
+    if (t) {
+      const r = () => {
+        this._total = t.assignedElements().length;
+      };
+      t.addEventListener("slotchange", r), r();
+    }
+    this._track?.addEventListener("scroll", this._handleScroll, { passive: !0 }), this._startAutoplay();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._track?.removeEventListener("scroll", this._handleScroll), this._stopAutoplay();
+  }
+  _startAutoplay() {
+    this.autoplay && (this._stopAutoplay(), this._autoplayTimer = setInterval(() => {
+      this._paused || (this._current >= this._total - 1 ? this.loop && this._goTo(0) : this._next());
+    }, this.interval));
+  }
+  _stopAutoplay() {
+    this._autoplayTimer && (clearInterval(this._autoplayTimer), this._autoplayTimer = null);
+  }
+  _goTo(t) {
+    const r = this._track.querySelector("slot")?.assignedElements();
+    !r || !r[t] || (r[t].scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" }), this._current = t);
+  }
+  _prev() {
+    this._current <= 0 && this.loop ? this._goTo(this._total - 1) : this._goTo(Math.max(0, this._current - 1));
+  }
+  _next() {
+    this._current >= this._total - 1 && this.loop ? this._goTo(0) : this._goTo(Math.min(this._total - 1, this._current + 1));
+  }
+  _handleSlideClick(t) {
+    const s = this._track?.querySelector("slot")?.assignedElements();
+    if (!s) return;
+    const a = t.target, i = s.findIndex((c) => c === a || c.contains(a));
+    i >= 0 && this.dispatchEvent(new CustomEvent("cg-slide-click", {
+      detail: { index: i },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _handleKeydown(t) {
+    t.key === "ArrowLeft" && (t.preventDefault(), this._prev()), t.key === "ArrowRight" && (t.preventDefault(), this._next());
+  }
+  render() {
+    const t = this._current === 0 && !this.loop, r = this._current >= this._total - 1 && !this.loop;
+    return l`
+      <div
+        class="track-wrapper"
+        tabindex="0"
+        @keydown=${this._handleKeydown}
+        @mouseenter=${() => {
+      this._paused = !0;
+    }}
+        @mouseleave=${() => {
+      this._paused = !1;
+    }}
+        role="region"
+        aria-label="Carousel"
+        aria-roledescription="carousel"
+        aria-live="polite"
+      >
+        <div class="track" @click=${this._handleSlideClick}><slot></slot></div>
+      </div>
+
+      ${this.showArrows && this._total > 1 ? l`
+        <button class="nav-btn nav-prev" @click=${this._prev} ?disabled=${t} aria-label="Previous slide">
+          <cg-icon name="chevron-left" size="sm"></cg-icon>
+        </button>
+        <button class="nav-btn nav-next" @click=${this._next} ?disabled=${r} aria-label="Next slide">
+          <cg-icon name="chevron-right" size="sm"></cg-icon>
+        </button>
+      ` : h}
+
+      ${this.showDots && this._total > 1 ? l`
+        <div class="dots" role="tablist" aria-label="Slide indicators">
+          ${Array.from({ length: this._total }, (s, a) => l`
+            <button
+              class="dot ${a === this._current ? "active" : ""}"
+              role="tab"
+              aria-selected=${a === this._current}
+              aria-label="Slide ${a + 1}"
+              @click=${() => this._goTo(a)}
+            ></button>
+          `)}
+        </div>
+      ` : h}
+    `;
+  }
+};
+o.styles = [_, b, p`
+    :host {
+      position: relative;
+      display: block;
+    }
+
+    .track-wrapper {
+      overflow: hidden;
+      border-radius: var(--cg-border-radius-150);
+    }
+
+    .track {
+      display: flex;
+      overflow-x: auto;
+      scroll-snap-type: x mandatory;
+      scrollbar-width: none;
+      gap: var(--cg-spacing-16);
+      scroll-behavior: smooth;
+      -webkit-overflow-scrolling: touch;
+    }
+    .track::-webkit-scrollbar { display: none; }
+
+    ::slotted(*) {
+      scroll-snap-align: start;
+      flex-shrink: 0;
+    }
+
+    /* ── Column sizing ── */
+    :host([columns="1"]) ::slotted(*) { width: 100%; }
+    :host([columns="2"]) ::slotted(*) { width: calc(50% - var(--cg-spacing-8)); }
+    :host([columns="3"]) ::slotted(*) { width: calc(33.333% - var(--cg-spacing-12)); }
+    :host([columns="4"]) ::slotted(*) { width: calc(25% - var(--cg-spacing-12)); }
+
+    /* Peek — show sliver of next slide */
+    :host([peek]) .track {
+      padding-right: var(--cg-spacing-48);
+    }
+
+    /* ── Navigation arrows ── */
+    .nav-btn {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 2;
+      width: var(--cg-spacing-40);
+      height: var(--cg-spacing-40);
+      border-radius: var(--cg-border-radius-full);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);
+      background: var(--cg-color-surface-container-background);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      opacity: 0;
+      color: var(--cg-color-surface-container-outlined);
+      box-shadow: var(--cg-elevation-1);
+      transition:
+        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    :host(:hover) .nav-btn:not(:disabled) { opacity: 1; }
+
+    .nav-btn:hover {
+      background: var(--cg-color-action-tertiary-background-hover);
+      color: var(--cg-color-surface-container-text);
+      transform: translateY(-50%) scale(1.05);
+    }
+    .nav-btn:active {
+      transform: translateY(-50%) scale(var(--cg-interaction-press-scale));
+    }
+    .nav-btn:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      opacity: 1;
+    }
+    .nav-btn:disabled { opacity: 0 !important; cursor: default; }
+
+    .nav-prev { left: calc(var(--cg-spacing-12) * -1); }
+    .nav-next { right: calc(var(--cg-spacing-12) * -1); }
+
+    /* ── Dot indicators ── */
+    .dots {
+      display: flex;
+      justify-content: center;
+      gap: var(--cg-spacing-6);
+      margin-top: var(--cg-spacing-12);
+    }
+    .dot {
+      width: var(--cg-spacing-8);
+      height: var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-surface-container-border);
+      border: none;
+      cursor: pointer;
+      padding: 0;
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        width var(--cg-transition-duration-fast) var(--cg-transition-easing-spring);
+    }
+    .dot:hover { background: var(--cg-color-surface-container-outlined); }
+    .dot.active {
+      background: var(--cg-color-action-primary-background-default);
+      width: var(--cg-spacing-24);
+      border-radius: var(--cg-border-radius-50);
+    }
+    .dot:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+
+    /* Reduced motion */
+    @media (prefers-reduced-motion: reduce) {
+      .track { scroll-behavior: auto !important; }
+      .dot { transition: background-color var(--cg-transition-duration-fast) ease; }
+    }
+  `];
+e([
+  n({ type: Boolean })
+], o.prototype, "showDots", 2);
+e([
+  n({ type: Boolean })
+], o.prototype, "showArrows", 2);
+e([
+  n({ type: Number, reflect: !0 })
+], o.prototype, "columns", 2);
+e([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "peek", 2);
+e([
+  n({ type: Boolean })
+], o.prototype, "loop", 2);
+e([
+  n({ type: Boolean })
+], o.prototype, "autoplay", 2);
+e([
+  n({ type: Number })
+], o.prototype, "interval", 2);
+e([
+  u()
+], o.prototype, "_current", 2);
+e([
+  u()
+], o.prototype, "_total", 2);
+e([
+  v(".track")
+], o.prototype, "_track", 2);
+o = e([
+  f("cg-carousel")
+], o);
+export {
+  o as CgCarousel
+};
+//# sourceMappingURL=cg-carousel.js.map

package/dist/components/cg-carousel/cg-carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-carousel.js","sources":["../../../src/components/cg-carousel/cg-carousel.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * <cg-carousel> — Scrollable content carousel with snap, autoplay, and multi-column.\n *\n * @example\n * ```html\n * <cg-carousel columns=\"1\" autoplay loop>\n *   <div>Slide 1</div>\n *   <div>Slide 2</div>\n *   <div>Slide 3</div>\n * </cg-carousel>\n * ```\n *\n * @slot - Carousel slides\n *\n * @fires {CustomEvent<{index: number}>} cg-slide-click - When a slide is clicked\n *\n * @cssprop --cg-spacing-16 - Gap between slides\n * @cssprop --cg-color-action-primary-background-default - Active dot color\n */\n@customElement('cg-carousel')\nexport class CgCarousel extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      position: relative;\n      display: block;\n    }\n\n    .track-wrapper {\n      overflow: hidden;\n      border-radius: var(--cg-border-radius-150);\n    }\n\n    .track {\n      display: flex;\n      overflow-x: auto;\n      scroll-snap-type: x mandatory;\n      scrollbar-width: none;\n      gap: var(--cg-spacing-16);\n      scroll-behavior: smooth;\n      -webkit-overflow-scrolling: touch;\n    }\n    .track::-webkit-scrollbar { display: none; }\n\n    ::slotted(*) {\n      scroll-snap-align: start;\n      flex-shrink: 0;\n    }\n\n    /* ── Column sizing ── */\n    :host([columns=\"1\"]) ::slotted(*) { width: 100%; }\n    :host([columns=\"2\"]) ::slotted(*) { width: calc(50% - var(--cg-spacing-8)); }\n    :host([columns=\"3\"]) ::slotted(*) { width: calc(33.333% - var(--cg-spacing-12)); }\n    :host([columns=\"4\"]) ::slotted(*) { width: calc(25% - var(--cg-spacing-12)); }\n\n    /* Peek — show sliver of next slide */\n    :host([peek]) .track {\n      padding-right: var(--cg-spacing-48);\n    }\n\n    /* ── Navigation arrows ── */\n    .nav-btn {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      z-index: 2;\n      width: var(--cg-spacing-40);\n      height: var(--cg-spacing-40);\n      border-radius: var(--cg-border-radius-full);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n      background: var(--cg-color-surface-container-background);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 0;\n      opacity: 0;\n      color: var(--cg-color-surface-container-outlined);\n      box-shadow: var(--cg-elevation-1);\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    :host(:hover) .nav-btn:not(:disabled) { opacity: 1; }\n\n    .nav-btn:hover {\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-surface-container-text);\n      transform: translateY(-50%) scale(1.05);\n    }\n    .nav-btn:active {\n      transform: translateY(-50%) scale(var(--cg-interaction-press-scale));\n    }\n    .nav-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n      opacity: 1;\n    }\n    .nav-btn:disabled { opacity: 0 !important; cursor: default; }\n\n    .nav-prev { left: calc(var(--cg-spacing-12) * -1); }\n    .nav-next { right: calc(var(--cg-spacing-12) * -1); }\n\n    /* ── Dot indicators ── */\n    .dots {\n      display: flex;\n      justify-content: center;\n      gap: var(--cg-spacing-6);\n      margin-top: var(--cg-spacing-12);\n    }\n    .dot {\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-container-border);\n      border: none;\n      cursor: pointer;\n      padding: 0;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        width var(--cg-transition-duration-fast) var(--cg-transition-easing-spring);\n    }\n    .dot:hover { background: var(--cg-color-surface-container-outlined); }\n    .dot.active {\n      background: var(--cg-color-action-primary-background-default);\n      width: var(--cg-spacing-24);\n      border-radius: var(--cg-border-radius-50);\n    }\n    .dot:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    /* Reduced motion */\n    @media (prefers-reduced-motion: reduce) {\n      .track { scroll-behavior: auto !important; }\n      .dot { transition: background-color var(--cg-transition-duration-fast) ease; }\n    }\n  `];\n\n  @property({ type: Boolean }) showDots = true;\n  @property({ type: Boolean }) showArrows = true;\n  @property({ type: Number, reflect: true }) columns = 1;\n  @property({ type: Boolean, reflect: true }) peek = false;\n  @property({ type: Boolean }) loop = false;\n  @property({ type: Boolean }) autoplay = false;\n  @property({ type: Number }) interval = 4000;\n\n  @state() private _current = 0;\n  @state() private _total = 0;\n\n  @query('.track') private _track!: HTMLElement;\n\n  private _autoplayTimer: ReturnType<typeof setInterval> | null = null;\n  private _paused = false;\n\n  override firstUpdated() {\n    const slot = this.shadowRoot!.querySelector('slot');\n    if (slot) {\n      const update = () => { this._total = slot.assignedElements().length; };\n      slot.addEventListener('slotchange', update);\n      update();\n    }\n\n    this._track?.addEventListener('scroll', this._handleScroll, { passive: true });\n    this._startAutoplay();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._track?.removeEventListener('scroll', this._handleScroll);\n    this._stopAutoplay();\n  }\n\n  private _startAutoplay() {\n    if (!this.autoplay) return;\n    this._stopAutoplay();\n    this._autoplayTimer = setInterval(() => {\n      if (this._paused) return;\n      if (this._current >= this._total - 1) {\n        if (this.loop) this._goTo(0);\n      } else {\n        this._next();\n      }\n    }, this.interval);\n  }\n\n  private _stopAutoplay() {\n    if (this._autoplayTimer) {\n      clearInterval(this._autoplayTimer);\n      this._autoplayTimer = null;\n    }\n  }\n\n  private _handleScroll = () => {\n    if (!this._track || this._total === 0) return;\n    const scrollLeft = this._track.scrollLeft;\n    const itemWidth = this._track.scrollWidth / this._total;\n    const idx = Math.round(scrollLeft / itemWidth);\n    if (idx !== this._current) {\n      this._current = Math.max(0, Math.min(idx, this._total - 1));\n    }\n  };\n\n  private _goTo(index: number) {\n    const items = this._track.querySelector('slot')?.assignedElements() as HTMLElement[] | undefined;\n    if (!items || !items[index]) return;\n    items[index]!.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });\n    this._current = index;\n  }\n\n  private _prev() {\n    if (this._current <= 0 && this.loop) {\n      this._goTo(this._total - 1);\n    } else {\n      this._goTo(Math.max(0, this._current - 1));\n    }\n  }\n\n  private _next() {\n    if (this._current >= this._total - 1 && this.loop) {\n      this._goTo(0);\n    } else {\n      this._goTo(Math.min(this._total - 1, this._current + 1));\n    }\n  }\n\n  private _handleSlideClick(e: Event) {\n    const slot = this._track?.querySelector('slot');\n    const items = slot?.assignedElements() as HTMLElement[] | undefined;\n    if (!items) return;\n    const target = e.target as HTMLElement;\n    const index = items.findIndex(el => el === target || el.contains(target));\n    if (index >= 0) {\n      this.dispatchEvent(new CustomEvent('cg-slide-click', {\n        detail: { index },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    if (e.key === 'ArrowLeft') { e.preventDefault(); this._prev(); }\n    if (e.key === 'ArrowRight') { e.preventDefault(); this._next(); }\n  }\n\n  override render() {\n    const atStart = this._current === 0 && !this.loop;\n    const atEnd = this._current >= this._total - 1 && !this.loop;\n\n    return html`\n      <div\n        class=\"track-wrapper\"\n        tabindex=\"0\"\n        @keydown=${this._handleKeydown}\n        @mouseenter=${() => { this._paused = true; }}\n        @mouseleave=${() => { this._paused = false; }}\n        role=\"region\"\n        aria-label=\"Carousel\"\n        aria-roledescription=\"carousel\"\n        aria-live=\"polite\"\n      >\n        <div class=\"track\" @click=${this._handleSlideClick}><slot></slot></div>\n      </div>\n\n      ${this.showArrows && this._total > 1 ? html`\n        <button class=\"nav-btn nav-prev\" @click=${this._prev} ?disabled=${atStart} aria-label=\"Previous slide\">\n          <cg-icon name=\"chevron-left\" size=\"sm\"></cg-icon>\n        </button>\n        <button class=\"nav-btn nav-next\" @click=${this._next} ?disabled=${atEnd} aria-label=\"Next slide\">\n          <cg-icon name=\"chevron-right\" size=\"sm\"></cg-icon>\n        </button>\n      ` : nothing}\n\n      ${this.showDots && this._total > 1 ? html`\n        <div class=\"dots\" role=\"tablist\" aria-label=\"Slide indicators\">\n          ${Array.from({ length: this._total }, (_, i) => html`\n            <button\n              class=\"dot ${i === this._current ? 'active' : ''}\"\n              role=\"tab\"\n              aria-selected=${i === this._current}\n              aria-label=\"Slide ${i + 1}\"\n              @click=${() => this._goTo(i)}\n            ></button>\n          `)}\n        </div>\n      ` : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-carousel': CgCarousel; }\n}\n"],"names":["CgCarousel","LitElement","scrollLeft","itemWidth","idx","slot","update","index","items","e","target","el","atStart","atEnd","html","nothing","_","i","hostBlock","reducedMotion","css","__decorateClass","property","state","query","customElement"],"mappings":"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"}