@cognivo/components 0.8.0

package/dist/components/cg-image-block/cg-image-block.js

@@ -0,0 +1,214 @@
+import { css as h, LitElement as f, nothing as o, html as c } from "lit";
+import { property as t, state as u, customElement as p } from "lit/decorators.js";
+import { h as v, r as b, b as m } from "../../chunks/premium.css-9I4kHrsl.js";
+var y = Object.defineProperty, k = Object.getOwnPropertyDescriptor, e = (a, s, l, n) => {
+  for (var i = n > 1 ? void 0 : n ? k(s, l) : s, g = a.length - 1, d; g >= 0; g--)
+    (d = a[g]) && (i = (n ? d(s, l, i) : d(i)) || i);
+  return n && i && y(s, l, i), i;
+};
+let r = class extends f {
+  constructor() {
+    super(...arguments), this.src = "", this.alt = "", this.caption = "", this.source = "", this.sourceUrl = "", this.ratio = "auto", this.clickable = !1, this.rounded = "lg", this._loading = !0, this._error = !1;
+  }
+  _onLoad() {
+    this._loading = !1, this._error = !1;
+  }
+  _onError() {
+    this._loading = !1, this._error = !0;
+  }
+  _retry() {
+    this._loading = !0, this._error = !1, this.requestUpdate();
+  }
+  _handleClick() {
+    this.clickable && this.dispatchEvent(new CustomEvent("cg-image-click", { detail: { src: this.src, alt: this.alt }, bubbles: !0, composed: !0 }));
+  }
+  _handleKeydown(a) {
+    this.clickable && (a.key === "Enter" || a.key === " ") && (a.preventDefault(), this._handleClick());
+  }
+  render() {
+    return c`
+      <figure
+        @click=${this.clickable ? this._handleClick : o}
+        @keydown=${this.clickable ? this._handleKeydown : o}
+        tabindex=${this.clickable ? "0" : o}
+        role=${this.clickable ? "button" : o}
+        aria-label=${this.clickable ? `View image: ${this.alt}` : o}
+      >
+        <div class="image-container">
+          ${this._loading && !this._error ? c`<div class="skeleton"></div>` : o}
+          ${this._error ? c`
+            <div class="error-state">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+              <span>Image unavailable</span>
+              <button class="retry-btn" @click=${this._retry}>Retry</button>
+            </div>
+          ` : o}
+          ${this._error ? o : c`
+            <img
+              src=${this.src}
+              alt=${this.alt}
+              loading="lazy"
+              class=${this._loading ? "" : "loaded"}
+              @load=${this._onLoad}
+              @error=${this._onError}
+            />
+          `}
+        </div>
+        ${this.caption || this.source ? c`
+          <figcaption>
+            ${this.caption}
+            ${this.source ? c` — <a class="source" href=${this.sourceUrl || "#"} target="_blank" rel="noopener">${this.source}</a>` : o}
+          </figcaption>
+        ` : o}
+      </figure>
+    `;
+  }
+};
+r.styles = [v, b, m, h`
+    figure {
+      margin: 0;
+      border-radius: var(--cg-border-radius-200);
+      overflow: hidden;
+      background: var(--cg-color-surface-container-background);
+    }
+
+    /* Rounded variants */
+    :host([rounded="none"]) figure { border-radius: 0; }
+    :host([rounded="sm"]) figure { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) figure { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) figure { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="full"]) figure { border-radius: var(--cg-border-radius-full); }
+
+    .image-container {
+      position: relative;
+      overflow: hidden;
+    }
+
+    :host([ratio="16:9"]) .image-container { aspect-ratio: 16 / 9; }
+    :host([ratio="4:3"]) .image-container { aspect-ratio: 4 / 3; }
+    :host([ratio="1:1"]) .image-container { aspect-ratio: 1 / 1; }
+    :host([ratio="3:2"]) .image-container { aspect-ratio: 3 / 2; }
+
+    img {
+      width: 100%;
+      height: auto;
+      object-fit: cover;
+      display: block;
+      opacity: 0;
+      transition: opacity var(--cg-transition-duration-slower) var(--cg-transition-easing-default);
+    }
+    img.loaded { opacity: 1; }
+
+    /* When an aspect ratio is enforced, the image should fill the container
+       so object-fit can crop. Without a ratio, keep natural height to avoid
+       vertical squeezing inside flex/grid parents. */
+    :host([ratio]) img {
+      height: 100%;
+    }
+
+    .skeleton {
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(90deg, var(--cg-color-surface-container-background) 25%, var(--cg-color-surface-container-border) 50%, var(--cg-color-surface-container-background) 75%);
+      background-size: 200% 100%;
+      animation: shimmer 1.5s infinite;
+    }
+    .error-state {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-24);
+      color: var(--cg-color-surface-container-outlined);
+    }
+    .error-state svg {
+      width: var(--cg-icon-size-300);
+      height: var(--cg-icon-size-300);
+      opacity: 0.4;
+    }
+    .error-state span {
+      font-size: var(--cg-font-size-sm);
+    }
+
+    .retry-btn {
+      padding: var(--cg-spacing-6) var(--cg-spacing-16);
+      border-radius: var(--cg-border-radius-100);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      background: var(--cg-color-surface-container-background);
+      color: var(--cg-color-surface-base-text);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);
+      cursor: pointer;
+      transition: background var(--cg-transition-duration-default) var(--cg-transition-easing-default), border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    .retry-btn:hover {
+      background: var(--cg-color-action-tertiary-background-hover);
+      border-color: var(--cg-color-action-primary-background-default);
+    }
+    .retry-btn: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);
+    }
+
+    figcaption {
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+      line-height: var(--cg-line-height-snug);
+    }
+    .source {
+      color: var(--cg-color-action-primary-background-default);
+      text-decoration: none;
+      font-weight: var(--cg-font-weight-medium);
+    }
+    .source:hover { text-decoration: underline; }
+
+    /* Clickable variant */
+    :host([clickable]) figure { cursor: pointer; }
+    :host([clickable]) figure:hover img { transform: scale(1.02); }
+    :host([clickable]) figure:active img { transform: scale(0.99); }
+    :host([clickable]) img { transition: opacity var(--cg-transition-duration-slower) var(--cg-transition-easing-default), transform var(--cg-transition-duration-default) var(--cg-transition-easing-default); }
+
+    :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);
+    }
+  `];
+e([
+  t()
+], r.prototype, "src", 2);
+e([
+  t()
+], r.prototype, "alt", 2);
+e([
+  t()
+], r.prototype, "caption", 2);
+e([
+  t()
+], r.prototype, "source", 2);
+e([
+  t()
+], r.prototype, "sourceUrl", 2);
+e([
+  t({ reflect: !0 })
+], r.prototype, "ratio", 2);
+e([
+  t({ type: Boolean, reflect: !0 })
+], r.prototype, "clickable", 2);
+e([
+  t({ reflect: !0 })
+], r.prototype, "rounded", 2);
+e([
+  u()
+], r.prototype, "_loading", 2);
+e([
+  u()
+], r.prototype, "_error", 2);
+r = e([
+  p("cg-image-block")
+], r);
+export {
+  r as CgImageBlock
+};
+//# sourceMappingURL=cg-image-block.js.map

package/dist/components/cg-image-block/cg-image-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-image-block.js","sources":["../../../src/components/cg-image-block/cg-image-block.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, shimmerKeyframes } from '../../styles/index.js';\n\n/**\n * <cg-image-block> — Image with caption, loading state, and error fallback.\n *\n * Features:\n * - Skeleton loading placeholder\n * - Error fallback with retry\n * - Aspect ratio control\n * - Caption with optional source attribution\n * - Click to expand (emits event)\n */\n@customElement('cg-image-block')\nexport class CgImageBlock extends LitElement {\n  static override styles = [hostBlock, reducedMotion, shimmerKeyframes, css`\n    figure {\n      margin: 0;\n      border-radius: var(--cg-border-radius-200);\n      overflow: hidden;\n      background: var(--cg-color-surface-container-background);\n    }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"]) figure { border-radius: 0; }\n    :host([rounded=\"sm\"]) figure { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) figure { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) figure { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) figure { border-radius: var(--cg-border-radius-full); }\n\n    .image-container {\n      position: relative;\n      overflow: hidden;\n    }\n\n    :host([ratio=\"16:9\"]) .image-container { aspect-ratio: 16 / 9; }\n    :host([ratio=\"4:3\"]) .image-container { aspect-ratio: 4 / 3; }\n    :host([ratio=\"1:1\"]) .image-container { aspect-ratio: 1 / 1; }\n    :host([ratio=\"3:2\"]) .image-container { aspect-ratio: 3 / 2; }\n\n    img {\n      width: 100%;\n      height: auto;\n      object-fit: cover;\n      display: block;\n      opacity: 0;\n      transition: opacity var(--cg-transition-duration-slower) var(--cg-transition-easing-default);\n    }\n    img.loaded { opacity: 1; }\n\n    /* When an aspect ratio is enforced, the image should fill the container\n       so object-fit can crop. Without a ratio, keep natural height to avoid\n       vertical squeezing inside flex/grid parents. */\n    :host([ratio]) img {\n      height: 100%;\n    }\n\n    .skeleton {\n      position: absolute;\n      inset: 0;\n      background: linear-gradient(90deg, var(--cg-color-surface-container-background) 25%, var(--cg-color-surface-container-border) 50%, var(--cg-color-surface-container-background) 75%);\n      background-size: 200% 100%;\n      animation: shimmer 1.5s infinite;\n    }\n    .error-state {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-direction: column;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-24);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .error-state svg {\n      width: var(--cg-icon-size-300);\n      height: var(--cg-icon-size-300);\n      opacity: 0.4;\n    }\n    .error-state span {\n      font-size: var(--cg-font-size-sm);\n    }\n\n    .retry-btn {\n      padding: var(--cg-spacing-6) var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-100);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      background: var(--cg-color-surface-container-background);\n      color: var(--cg-color-surface-base-text);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n      cursor: pointer;\n      transition: background var(--cg-transition-duration-default) var(--cg-transition-easing-default), border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .retry-btn:hover {\n      background: var(--cg-color-action-tertiary-background-hover);\n      border-color: var(--cg-color-action-primary-background-default);\n    }\n    .retry-btn: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    figcaption {\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-snug);\n    }\n    .source {\n      color: var(--cg-color-action-primary-background-default);\n      text-decoration: none;\n      font-weight: var(--cg-font-weight-medium);\n    }\n    .source:hover { text-decoration: underline; }\n\n    /* Clickable variant */\n    :host([clickable]) figure { cursor: pointer; }\n    :host([clickable]) figure:hover img { transform: scale(1.02); }\n    :host([clickable]) figure:active img { transform: scale(0.99); }\n    :host([clickable]) img { transition: opacity var(--cg-transition-duration-slower) var(--cg-transition-easing-default), transform var(--cg-transition-duration-default) var(--cg-transition-easing-default); }\n\n    :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\n  @property() src = '';\n  @property() alt = '';\n  @property() caption = '';\n  @property() source = '';\n  @property() sourceUrl = '';\n  @property({ reflect: true }) ratio: '16:9' | '4:3' | '1:1' | '3:2' | 'auto' = 'auto';\n  @property({ type: Boolean, reflect: true }) clickable = false;\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n\n  @state() private _loading = true;\n  @state() private _error = false;\n\n  private _onLoad() { this._loading = false; this._error = false; }\n  private _onError() { this._loading = false; this._error = true; }\n  private _retry() { this._loading = true; this._error = false; this.requestUpdate(); }\n\n  private _handleClick() {\n    if (this.clickable) {\n      this.dispatchEvent(new CustomEvent('cg-image-click', { detail: { src: this.src, alt: this.alt }, bubbles: true, composed: true }));\n    }\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\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      <figure\n        @click=${this.clickable ? this._handleClick : nothing}\n        @keydown=${this.clickable ? this._handleKeydown : nothing}\n        tabindex=${this.clickable ? '0' : nothing}\n        role=${this.clickable ? 'button' : nothing}\n        aria-label=${this.clickable ? `View image: ${this.alt}` : nothing}\n      >\n        <div class=\"image-container\">\n          ${this._loading && !this._error ? html`<div class=\"skeleton\"></div>` : nothing}\n          ${this._error ? html`\n            <div class=\"error-state\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"></rect><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"></circle><polyline points=\"21 15 16 10 5 21\"></polyline></svg>\n              <span>Image unavailable</span>\n              <button class=\"retry-btn\" @click=${this._retry}>Retry</button>\n            </div>\n          ` : nothing}\n          ${!this._error ? html`\n            <img\n              src=${this.src}\n              alt=${this.alt}\n              loading=\"lazy\"\n              class=${this._loading ? '' : 'loaded'}\n              @load=${this._onLoad}\n              @error=${this._onError}\n            />\n          ` : nothing}\n        </div>\n        ${this.caption || this.source ? html`\n          <figcaption>\n            ${this.caption}\n            ${this.source ? html` — <a class=\"source\" href=${this.sourceUrl || '#'} target=\"_blank\" rel=\"noopener\">${this.source}</a>` : nothing}\n          </figcaption>\n        ` : nothing}\n      </figure>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-image-block': CgImageBlock; }\n}\n"],"names":["CgImageBlock","LitElement","e","html","nothing","hostBlock","reducedMotion","shimmerKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/cg-image-gallery/cg-image-gallery.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+/** Image entry for cg-image-gallery, with source URL, alt text, and optional caption. */
+export interface GalleryImage {
+    src: string;
+    alt?: string;
+    caption?: string;
+}
+/**
+ * <cg-image-gallery> — Responsive image grid with lightbox click and "show all" overflow.
+ *
+ * Features:
+ * - Smart grid layout (adapts to image count: 1-5 different layouts)
+ * - Max visible images with "+N more" badge
+ * - Click to emit event (for lightbox integration)
+ * - Loading skeleton per image
+ * - Responsive column sizing
+ */
+export declare class CgImageGallery extends LitElement {
+    static styles: import('lit').CSSResult[];
+    images: GalleryImage[];
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    maxVisible: number;
+    private _loadedSet;
+    private _handleImageLoad;
+    private _handleImageKeydown;
+    private _handleClick;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-image-gallery': CgImageGallery;
+    }
+}
+//# sourceMappingURL=cg-image-gallery.d.ts.map

package/dist/components/cg-image-gallery/cg-image-gallery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-image-gallery.d.ts","sourceRoot":"","sources":["../../../src/components/cg-image-gallery/cg-image-gallery.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,yFAAyF;AACzF,MAAM,WAAW,YAAY;IAAG,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAAE;AAE9E;;;;;;;;;GASG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAmFnB;IAEwB,MAAM,EAAE,YAAY,EAAE,CAAM;IAC1B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACtD,UAAU,SAAK;IAElC,OAAO,CAAC,UAAU,CAAqB;IAEhD,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,YAAY;IAQX,MAAM;CAkChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,kBAAkB,EAAE,cAAc,CAAC;KAAE;CACxE"}

package/dist/components/cg-image-gallery/cg-image-gallery.js

@@ -0,0 +1,158 @@
+import { css as p, LitElement as f, nothing as g, html as l } from "lit";
+import { property as c, state as v, customElement as h } from "lit/decorators.js";
+import { h as b, r as w, b as y } from "../../chunks/premium.css-9I4kHrsl.js";
+var k = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, d = (r, t, i, s) => {
+  for (var e = s > 1 ? void 0 : s ? _(t, i) : t, o = r.length - 1, n; o >= 0; o--)
+    (n = r[o]) && (e = (s ? n(t, i, e) : n(e)) || e);
+  return s && e && k(t, i, e), e;
+};
+let a = class extends f {
+  constructor() {
+    super(...arguments), this.images = [], this.rounded = "lg", this.maxVisible = 5, this._loadedSet = /* @__PURE__ */ new Set();
+  }
+  _handleImageLoad(r) {
+    this._loadedSet = /* @__PURE__ */ new Set([...this._loadedSet, r]);
+  }
+  _handleImageKeydown(r, t) {
+    (r.key === "Enter" || r.key === " ") && (r.preventDefault(), this._handleClick(t));
+  }
+  _handleClick(r) {
+    this.dispatchEvent(new CustomEvent("cg-gallery-click", {
+      detail: { index: r, image: this.images[r] },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    const r = this.images.slice(0, this.maxVisible), t = this.images.length - this.maxVisible, i = Math.min(r.length, 5), s = i <= 4 ? `count-${i}` : "count-many";
+    return l`
+      <div class="grid ${s}">
+        ${r.map((e, o) => {
+      const n = o === r.length - 1 && t > 0, u = this._loadedSet.has(o);
+      return l`
+            <div
+              class="img-wrapper ${n ? "overflow-wrapper" : ""}"
+              tabindex="0"
+              role="button"
+              aria-label="View image ${o + 1}${e.alt ? ": " + e.alt : ""}"
+              @click=${() => this._handleClick(o)}
+              @keydown=${(m) => this._handleImageKeydown(m, o)}
+            >
+              ${u ? g : l`<div class="skeleton"></div>`}
+              ${n && t > 0 ? l`<div class="overflow-badge">+${t}</div>` : g}
+              <img
+                src=${e.src}
+                alt=${e.alt ?? ""}
+                loading="lazy"
+                @load=${() => this._handleImageLoad(o)}
+              />
+            </div>
+          `;
+    })}
+      </div>
+    `;
+  }
+};
+a.styles = [b, w, y, p`
+    .grid {
+      display: grid;
+      gap: var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-200);
+      overflow: hidden;
+    }
+
+    /* Smart layouts based on image count */
+    .grid.count-1 { grid-template-columns: 1fr; }
+    .grid.count-2 { grid-template-columns: 1fr 1fr; }
+    .grid.count-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
+    .grid.count-3 .img-wrapper:first-child { grid-row: 1 / 3; }
+    .grid.count-4 { grid-template-columns: 1fr 1fr; }
+    .grid.count-many { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
+
+    .img-wrapper {
+      position: relative;
+      overflow: hidden;
+      border-radius: var(--cg-border-radius-50);
+      background: var(--cg-color-surface-container-background);
+      cursor: pointer;
+    }
+    .img-wrapper::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: transparent;
+      transition: background var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    .img-wrapper:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 2px var(--cg-color-focus-ring-offset), inset 0 0 0 4px var(--cg-color-focus-ring);
+    }
+    .img-wrapper:hover::after {
+      background: var(--cg-overlay-dark-subtle);
+    }
+
+    img {
+      width: 100%;
+      aspect-ratio: 1;
+      object-fit: cover;
+      display: block;
+      transition: transform var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
+    .img-wrapper:hover img { transform: scale(1.03); }
+    .img-wrapper:active img { transform: scale(0.98); }
+
+    .grid.count-1 img { aspect-ratio: 16 / 9; }
+    .grid.count-3 .img-wrapper:first-child img { aspect-ratio: auto; height: 100%; }
+
+    /* Overflow badge */
+    .overflow-wrapper {
+      position: relative;
+    }
+    .overflow-badge {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--cg-overlay-dark-strong);
+      color: var(--cg-overlay-dark-text);
+      font-size: var(--cg-font-size-lg);
+      font-weight: var(--cg-font-weight-bold);
+      z-index: 1;
+      pointer-events: none;
+    }
+
+    /* Skeleton */
+    .skeleton {
+      position: absolute; inset: 0;
+      background: linear-gradient(90deg, var(--cg-color-surface-container-border) 25%, var(--cg-color-surface-container-background) 50%, var(--cg-color-surface-container-border) 75%);
+      background-size: 200% 100%;
+      animation: shimmer 1.5s infinite;
+    }
+
+    /* Rounded variants */
+    :host([rounded="none"]) .grid { border-radius: 0; }
+    :host([rounded="sm"]) .grid { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .grid { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .grid { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="full"]) .grid { border-radius: var(--cg-border-radius-full); }
+  `];
+d([
+  c({ type: Array })
+], a.prototype, "images", 2);
+d([
+  c({ reflect: !0 })
+], a.prototype, "rounded", 2);
+d([
+  c({ type: Number })
+], a.prototype, "maxVisible", 2);
+d([
+  v()
+], a.prototype, "_loadedSet", 2);
+a = d([
+  h("cg-image-gallery")
+], a);
+export {
+  a as CgImageGallery
+};
+//# sourceMappingURL=cg-image-gallery.js.map

package/dist/components/cg-image-gallery/cg-image-gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-image-gallery.js","sources":["../../../src/components/cg-image-gallery/cg-image-gallery.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, shimmerKeyframes } from '../../styles/index.js';\n\n/** Image entry for cg-image-gallery, with source URL, alt text, and optional caption. */\nexport interface GalleryImage { src: string; alt?: string; caption?: string; }\n\n/**\n * <cg-image-gallery> — Responsive image grid with lightbox click and \"show all\" overflow.\n *\n * Features:\n * - Smart grid layout (adapts to image count: 1-5 different layouts)\n * - Max visible images with \"+N more\" badge\n * - Click to emit event (for lightbox integration)\n * - Loading skeleton per image\n * - Responsive column sizing\n */\n@customElement('cg-image-gallery')\nexport class CgImageGallery extends LitElement {\n  static override styles = [hostBlock, reducedMotion, shimmerKeyframes, css`\n    .grid {\n      display: grid;\n      gap: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-200);\n      overflow: hidden;\n    }\n\n    /* Smart layouts based on image count */\n    .grid.count-1 { grid-template-columns: 1fr; }\n    .grid.count-2 { grid-template-columns: 1fr 1fr; }\n    .grid.count-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }\n    .grid.count-3 .img-wrapper:first-child { grid-row: 1 / 3; }\n    .grid.count-4 { grid-template-columns: 1fr 1fr; }\n    .grid.count-many { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n\n    .img-wrapper {\n      position: relative;\n      overflow: hidden;\n      border-radius: var(--cg-border-radius-50);\n      background: var(--cg-color-surface-container-background);\n      cursor: pointer;\n    }\n    .img-wrapper::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background: transparent;\n      transition: background var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .img-wrapper:focus-visible {\n      outline: none;\n      box-shadow: inset 0 0 0 2px var(--cg-color-focus-ring-offset), inset 0 0 0 4px var(--cg-color-focus-ring);\n    }\n    .img-wrapper:hover::after {\n      background: var(--cg-overlay-dark-subtle);\n    }\n\n    img {\n      width: 100%;\n      aspect-ratio: 1;\n      object-fit: cover;\n      display: block;\n      transition: transform var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n    .img-wrapper:hover img { transform: scale(1.03); }\n    .img-wrapper:active img { transform: scale(0.98); }\n\n    .grid.count-1 img { aspect-ratio: 16 / 9; }\n    .grid.count-3 .img-wrapper:first-child img { aspect-ratio: auto; height: 100%; }\n\n    /* Overflow badge */\n    .overflow-wrapper {\n      position: relative;\n    }\n    .overflow-badge {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: var(--cg-overlay-dark-strong);\n      color: var(--cg-overlay-dark-text);\n      font-size: var(--cg-font-size-lg);\n      font-weight: var(--cg-font-weight-bold);\n      z-index: 1;\n      pointer-events: none;\n    }\n\n    /* Skeleton */\n    .skeleton {\n      position: absolute; inset: 0;\n      background: linear-gradient(90deg, var(--cg-color-surface-container-border) 25%, var(--cg-color-surface-container-background) 50%, var(--cg-color-surface-container-border) 75%);\n      background-size: 200% 100%;\n      animation: shimmer 1.5s infinite;\n    }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"]) .grid { border-radius: 0; }\n    :host([rounded=\"sm\"]) .grid { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .grid { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .grid { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .grid { border-radius: var(--cg-border-radius-full); }\n  `];\n\n  @property({ type: Array }) images: GalleryImage[] = [];\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ type: Number }) maxVisible = 5;\n\n  @state() private _loadedSet = new Set<number>();\n\n  private _handleImageLoad(idx: number) {\n    this._loadedSet = new Set([...this._loadedSet, idx]);\n  }\n\n  private _handleImageKeydown(e: KeyboardEvent, idx: number) {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._handleClick(idx);\n    }\n  }\n\n  private _handleClick(idx: number) {\n    this.dispatchEvent(new CustomEvent('cg-gallery-click', {\n      detail: { index: idx, image: this.images[idx] },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override render() {\n    const visible = this.images.slice(0, this.maxVisible);\n    const overflow = this.images.length - this.maxVisible;\n    const count = Math.min(visible.length, 5);\n    const gridClass = count <= 4 ? `count-${count}` : 'count-many';\n\n    return html`\n      <div class=\"grid ${gridClass}\">\n        ${visible.map((img, i) => {\n          const isLast = i === visible.length - 1 && overflow > 0;\n          const loaded = this._loadedSet.has(i);\n          return html`\n            <div\n              class=\"img-wrapper ${isLast ? 'overflow-wrapper' : ''}\"\n              tabindex=\"0\"\n              role=\"button\"\n              aria-label=\"View image ${i + 1}${img.alt ? ': ' + img.alt : ''}\"\n              @click=${() => this._handleClick(i)}\n              @keydown=${(e: KeyboardEvent) => this._handleImageKeydown(e, i)}\n            >\n              ${!loaded ? html`<div class=\"skeleton\"></div>` : nothing}\n              ${isLast && overflow > 0 ? html`<div class=\"overflow-badge\">+${overflow}</div>` : nothing}\n              <img\n                src=${img.src}\n                alt=${img.alt ?? ''}\n                loading=\"lazy\"\n                @load=${() => this._handleImageLoad(i)}\n              />\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-image-gallery': CgImageGallery; }\n}\n"],"names":["CgImageGallery","LitElement","idx","e","visible","overflow","count","gridClass","html","img","i","isLast","loaded","nothing","hostBlock","reducedMotion","shimmerKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -0,0 +1,65 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * @element cg-input
+ * Text input with floating label, prefix/suffix slots, clear button, and validation states.
+ *
+ * @example
+ * ```html
+ * <cg-input label="Email" type="email" placeholder="you@example.com"></cg-input>
+ * <cg-input label="Search" clearable><span slot="prefix">[search icon]</span></cg-input>
+ * <cg-input label="Bio" maxlength="200" error helper="Too long"></cg-input>
+ * ```
+ *
+ * @slot prefix - Icon or content before the input field
+ * @slot suffix - Icon or content after the input field
+ *
+ * @fires {CustomEvent<{value: string}>} cg-input - On every input change
+ * @fires {CustomEvent} cg-clear - When the clear button is clicked
+ *
+ * @cssprop [--cg-color-input-border-default=#3f3f46] - Default border color
+ * @cssprop [--cg-brand-ai-accent=#dfff61] - Focus ring and floating label color
+ * @cssprop [--cg-component-input-height-md=44px] - Input height (md size)
+ * @cssprop [--cg-color-input-background-default=#18181b] - Input background
+ */
+export declare class CgInput extends LitElement {
+    static formAssociated: boolean;
+    private _internals;
+    constructor();
+    static styles: import('lit').CSSResult[];
+    label: string;
+    value: string;
+    placeholder: string;
+    name: string;
+    helper: string;
+    type: 'text' | 'email' | 'password' | 'number' | 'url' | 'search' | 'tel';
+    size: 'md' | 'lg';
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    disabled: boolean;
+    readonly: boolean;
+    error: boolean;
+    success: boolean;
+    loading: boolean;
+    required: boolean;
+    clearable: boolean;
+    maxlength: number;
+    autocomplete: string;
+    private _focused;
+    private _hasPrefix;
+    private _hasSuffix;
+    private _input;
+    updated(changed: PropertyValues): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    private get _isFloated();
+    private _handleInput;
+    private _handleFocus;
+    private _handleBlur;
+    private _handleClear;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-input': CgInput;
+    }
+}
+//# sourceMappingURL=cg-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-input.d.ts","sourceRoot":"","sources":["../../../src/components/cg-input/cg-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAA+B;;IASjD,OAAgB,MAAM,4BAsQnB;IAE0B,KAAK,SAAM;IAC5B,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,IAAI,SAAM;IACV,MAAM,SAAM;IACK,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,KAAK,CAAU;IACnF,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IACzB,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC7B,QAAQ,UAAS;IAChC,QAAQ,UAAS;IACF,KAAK,UAAS;IACd,OAAO,UAAS;IAChB,OAAO,UAAS;IAC/B,QAAQ,UAAS;IACjB,SAAS,UAAS;IACnB,SAAS,SAAK;IAC9B,YAAY,SAAS;IAExB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,UAAU,CAAS;IAEpB,OAAO,CAAC,MAAM,CAAoB;IAEzC,OAAO,CAAC,OAAO,EAAE,cAAc;IAcxC,iBAAiB;IAIjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAItC,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,YAAY;IACpB,OAAO,CAAC,WAAW;IAEnB,OAAO,CAAC,YAAY;IAQX,MAAM;CAoDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}