@cognivo/components 0.8.0

package/dist/components/cg-code-block/cg-code-block.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+export declare class CgCodeBlock extends LitElement {
+    static styles: import('lit').CSSResult[];
+    code: string;
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    language: string;
+    filename: string;
+    lineNumbers: boolean;
+    wrap: boolean;
+    collapsible: boolean;
+    private _copied;
+    private _collapsed;
+    private _copy;
+    render(): import('lit').TemplateResult<1>;
+    private _highlightLine;
+    private _unsafeHTML;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-code-block': CgCodeBlock;
+    }
+}
+//# sourceMappingURL=cg-code-block.d.ts.map

package/dist/components/cg-code-block/cg-code-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-code-block.d.ts","sourceRoot":"","sources":["../../../src/components/cg-code-block/cg-code-block.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAgDrD,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAoNnB;IAES,IAAI,SAAM;IACO,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC7D,QAAQ,SAAM;IACd,QAAQ,SAAM;IAC6C,WAAW,UAAS;IAC/C,IAAI,UAAS;IAC5B,WAAW,UAAS;IAExC,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,UAAU,CAAQ;YAErB,KAAK;IAQV,MAAM;IA+Cf,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,WAAW;CAKpB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,eAAe,EAAE,WAAW,CAAC;KAAE;CAClE"}

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

@@ -0,0 +1,327 @@
+import { css as v, LitElement as f, nothing as p, html as s } from "lit";
+import { property as l, state as h, customElement as b } from "lit/decorators.js";
+import { h as m, r as y } from "../../chunks/premium.css-9I4kHrsl.js";
+var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, c = (o, e, n, a) => {
+  for (var r = a > 1 ? void 0 : a ? x(e, n) : e, i = o.length - 1, g; i >= 0; i--)
+    (g = o[i]) && (r = (a ? g(e, n, r) : g(r)) || r);
+  return a && r && w(e, n, r), r;
+};
+const d = {
+  keyword: /\b(const|let|var|function|return|if|else|for|while|import|export|from|class|extends|new|this|async|await|try|catch|throw|switch|case|break|default|typeof|instanceof|interface|type|enum|public|private|protected|static|override|readonly|abstract|implements|def|lambda|print|self|True|False|None|SELECT|FROM|WHERE|JOIN|INSERT|UPDATE|DELETE|CREATE|DROP|ALTER|AND|OR|NOT|IN|IS|NULL|GROUP|ORDER|BY|HAVING|LIMIT|AS|ON|SET|INTO|VALUES)\b/g,
+  string: /(["'`])(?:(?!\1|\\).|\\.)*?\1/g,
+  comment: /\/\/.*$|\/\*[\s\S]*?\*\/|#.*$/gm,
+  number: /\b\d+\.?\d*\b/g,
+  function: /\b([a-zA-Z_]\w*)\s*(?=\()/g
+};
+function u(o) {
+  let e = o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  const n = [], a = (r, i) => (n.push(`<span class="hl-${r}">${i}</span>`), `\0${n.length - 1}\0`);
+  return e = e.replace(d.comment, (r) => a("comment", r)), e = e.replace(d.string, (r) => a("string", r)), e = e.replace(d.keyword, (r) => a("keyword", r)), e = e.replace(d.function, (r, i) => a("function", i)), e = e.replace(d.number, (r) => a("number", r)), e = e.replace(/\x00(\d+)\x00/g, (r, i) => n[Number(i)]), e;
+}
+let t = class extends f {
+  constructor() {
+    super(...arguments), this.code = "", this.rounded = "lg", this.language = "", this.filename = "", this.lineNumbers = !1, this.wrap = !1, this.collapsible = !1, this._copied = !1, this._collapsed = !0;
+  }
+  async _copy() {
+    try {
+      await navigator.clipboard.writeText(this.code), this._copied = !0, setTimeout(() => {
+        this._copied = !1;
+      }, 2e3);
+    } catch {
+    }
+  }
+  render() {
+    const o = this.code.split(`
+`), e = this.collapsible && o.length > 15, n = u(this.code);
+    return s`
+      <div class="wrapper">
+        <div class="header">
+          <div class="header-left">
+            <div class="dots">
+              <span class="dot dot-red"></span>
+              <span class="dot dot-yellow"></span>
+              <span class="dot dot-green"></span>
+            </div>
+            ${this.filename ? s`<span class="filename">${this.filename}</span>` : p}
+          </div>
+          <div class="actions">
+            ${this.language ? s`<span class="language">${this.language}</span>` : p}
+            <button class="copy-btn ${this._copied ? "copied" : ""}" @click=${this._copy} aria-label="Copy code">
+              ${this._copied ? s`<cg-icon name="check" size="xs"></cg-icon> Copied` : s`<cg-icon name="copy" size="xs"></cg-icon> Copy`}
+            </button>
+            <span class="sr-only" role="status" aria-live="polite">${this._copied ? "Copied!" : ""}</span>
+          </div>
+        </div>
+
+        <div class="code-area ${e && this._collapsed ? "collapsed" : ""}">
+          <pre>${this.lineNumbers ? o.map((a) => s`<span class="line">${this._highlightLine(a)}\n</span>`) : s`${this._unsafeHTML(n)}`}</pre>
+        </div>
+
+        ${e && this._collapsed ? s`
+          <div class="expand-bar">
+            <button class="expand-btn" aria-expanded="false" @click=${() => {
+      this._collapsed = !1;
+    }}>
+              <cg-icon name="chevron-down" size="xs"></cg-icon>
+              Show all ${o.length} lines
+            </button>
+          </div>
+        ` : p}
+      </div>
+    `;
+  }
+  _highlightLine(o) {
+    return this._unsafeHTML(u(o));
+  }
+  _unsafeHTML(o) {
+    const e = document.createElement("template");
+    return e.innerHTML = o, e.content.cloneNode(!0);
+  }
+};
+t.styles = [m, y, v`
+    .wrapper {
+      background: var(--cg-color-code-background);
+      border-radius: var(--cg-border-radius-200);
+      overflow: hidden;
+      border: var(--cg-border-width-50) solid var(--cg-color-code-border);
+    }
+
+    /* ── Header ── */
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--cg-spacing-16);
+      padding: var(--cg-spacing-8) var(--cg-spacing-16);
+      min-height: var(--cg-spacing-48);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-code-border);
+    }
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-16);
+      min-width: 0;
+      flex: 1;
+    }
+
+    .dots {
+      display: flex;
+      gap: var(--cg-spacing-6);
+      flex-shrink: 0;
+    }
+    .dot {
+      width: var(--cg-spacing-12);
+      height: var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-full);
+    }
+    .dot-red { background: var(--cg-color-chart-8-background); }
+    .dot-yellow { background: var(--cg-color-chart-7-background); }
+    .dot-green { background: var(--cg-color-chart-3-background); }
+
+    .filename {
+      font-family: var(--cg-font-family-mono);
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-code-text);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+    }
+
+    .actions {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      flex-shrink: 0;
+    }
+
+    .language {
+      display: inline-flex;
+      align-items: center;
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-50);
+      background: var(--cg-color-action-tertiary-background-hover);
+      color: var(--cg-color-code-muted);
+      font-family: var(--cg-font-family-mono);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+
+    .copy-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-6);
+      height: var(--cg-spacing-32);
+      padding: 0 var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-50);
+      background: transparent;
+      border: none;
+      color: var(--cg-color-code-muted);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      cursor: pointer;
+      font-family: inherit;
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .copy-btn:hover {
+      background: var(--cg-color-action-tertiary-background-hover);
+      color: var(--cg-color-code-text);
+    }
+    .copy-btn:active {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+    .copy-btn.copied {
+      color: var(--cg-color-status-success-text-default);
+    }
+    .copy-btn:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);
+    }
+
+    /* ── Code area ── */
+    .code-area {
+      overflow-x: auto;
+      overflow-y: auto;
+    }
+    .code-area.collapsed { max-height: var(--cg-spacing-256); }
+
+    pre {
+      margin: 0;
+      padding: var(--cg-spacing-20) var(--cg-spacing-24);
+      font-family: var(--cg-font-family-mono);
+      font-size: var(--cg-font-size-sm);
+      line-height: var(--cg-line-height-relaxed);
+      color: var(--cg-color-code-text);
+      tab-size: 2;
+      counter-reset: line;
+      font-variant-numeric: tabular-nums;
+    }
+
+    :host([wrap]) pre { white-space: pre-wrap; word-break: break-all; }
+
+    /* ── Line numbers ── */
+    .line {
+      display: block;
+    }
+    :host([line-numbers]) .line::before {
+      counter-increment: line;
+      content: counter(line);
+      display: inline-block;
+      width: 3ch;
+      padding-right: var(--cg-spacing-16);
+      margin-right: var(--cg-spacing-16);
+      border-right: var(--cg-border-width-50) solid var(--cg-color-code-border);
+      color: var(--cg-color-code-muted);
+      text-align: right;
+      user-select: none;
+      opacity: 0.6;
+    }
+
+    /* ── Syntax highlighting ── */
+    .hl-keyword { color: var(--cg-color-code-keyword); font-weight: var(--cg-font-weight-medium); }
+    .hl-string { color: var(--cg-color-code-string); }
+    .hl-comment { color: var(--cg-color-code-comment); font-style: italic; }
+    .hl-number { color: var(--cg-color-code-number); }
+    .hl-function { color: var(--cg-color-code-function); }
+    .hl-tag { color: var(--cg-color-code-keyword); }
+    .hl-attr { color: var(--cg-color-code-number); }
+
+    /* ── Expand button ── */
+    .expand-bar {
+      display: flex;
+      justify-content: center;
+      padding: var(--cg-spacing-16) var(--cg-spacing-12) var(--cg-spacing-12);
+      background: linear-gradient(transparent, var(--cg-color-code-background) 60%);
+      margin-top: calc(var(--cg-spacing-48) * -1);
+      position: relative;
+    }
+    .expand-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-6);
+      height: var(--cg-spacing-32);
+      padding: 0 var(--cg-spacing-16);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-code-muted);
+      background: var(--cg-color-code-surface);
+      border: var(--cg-border-width-50) solid var(--cg-color-code-border);
+      border-radius: var(--cg-border-radius-full);
+      cursor: pointer;
+      font-family: inherit;
+      font-weight: var(--cg-font-weight-medium);
+      transition:
+        color 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);
+    }
+    .expand-btn:hover {
+      color: var(--cg-color-code-text);
+      background: var(--cg-color-action-tertiary-background-hover);
+    }
+    .expand-btn:active {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+    .expand-btn:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);
+    }
+
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    /* ── Rounded variants ── */
+    :host([rounded="none"]) .wrapper { border-radius: 0; }
+    :host([rounded="sm"]) .wrapper { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="md"]) .wrapper { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="lg"]) .wrapper { border-radius: var(--cg-border-radius-200); }
+  `];
+c([
+  l()
+], t.prototype, "code", 2);
+c([
+  l({ reflect: !0 })
+], t.prototype, "rounded", 2);
+c([
+  l()
+], t.prototype, "language", 2);
+c([
+  l()
+], t.prototype, "filename", 2);
+c([
+  l({ type: Boolean, attribute: "line-numbers", reflect: !0 })
+], t.prototype, "lineNumbers", 2);
+c([
+  l({ type: Boolean, reflect: !0 })
+], t.prototype, "wrap", 2);
+c([
+  l({ type: Boolean })
+], t.prototype, "collapsible", 2);
+c([
+  h()
+], t.prototype, "_copied", 2);
+c([
+  h()
+], t.prototype, "_collapsed", 2);
+t = c([
+  b("cg-code-block")
+], t);
+export {
+  t as CgCodeBlock
+};
+//# sourceMappingURL=cg-code-block.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-code-block.js","sources":["../../../src/components/cg-code-block/cg-code-block.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * <cg-code-block> — Code display with syntax highlighting, copy button, and line numbers.\n *\n * @example\n * ```html\n * <cg-code-block code=\"const x = 1;\" language=\"javascript\" line-numbers></cg-code-block>\n * ```\n *\n * @cssprop --cg-color-code-background - Block background\n * @cssprop --cg-color-code-text - Text color\n * @cssprop --cg-color-code-keyword - Keyword highlight color\n */\n\nconst KEYWORD_PATTERNS: Record<string, RegExp> = {\n  keyword: /\\b(const|let|var|function|return|if|else|for|while|import|export|from|class|extends|new|this|async|await|try|catch|throw|switch|case|break|default|typeof|instanceof|interface|type|enum|public|private|protected|static|override|readonly|abstract|implements|def|lambda|print|self|True|False|None|SELECT|FROM|WHERE|JOIN|INSERT|UPDATE|DELETE|CREATE|DROP|ALTER|AND|OR|NOT|IN|IS|NULL|GROUP|ORDER|BY|HAVING|LIMIT|AS|ON|SET|INTO|VALUES)\\b/g,\n  string: /([\"'`])(?:(?!\\1|\\\\).|\\\\.)*?\\1/g,\n  comment: /\\/\\/.*$|\\/\\*[\\s\\S]*?\\*\\/|#.*$/gm,\n  number: /\\b\\d+\\.?\\d*\\b/g,\n  function: /\\b([a-zA-Z_]\\w*)\\s*(?=\\()/g,\n  tag: /(&lt;\\/?[a-zA-Z][a-zA-Z0-9-]*)/g,\n  attr: /\\b([a-zA-Z-]+)(?==)/g,\n  punctuation: /[{}()\\[\\];,.:]/g,\n};\n\nfunction highlight(code: string): string {\n  let escaped = code.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');\n\n  const tokens: string[] = [];\n  const placeholder = (cls: string, text: string) => {\n    tokens.push(`<span class=\"hl-${cls}\">${text}</span>`);\n    return `\\x00${tokens.length - 1}\\x00`;\n  };\n\n  escaped = escaped.replace(KEYWORD_PATTERNS.comment!, m => placeholder('comment', m));\n  escaped = escaped.replace(KEYWORD_PATTERNS.string!, m => placeholder('string', m));\n  escaped = escaped.replace(KEYWORD_PATTERNS.keyword!, m => placeholder('keyword', m));\n  escaped = escaped.replace(KEYWORD_PATTERNS.function!, (_, name) => placeholder('function', name));\n  escaped = escaped.replace(KEYWORD_PATTERNS.number!, m => placeholder('number', m));\n\n  escaped = escaped.replace(/\\x00(\\d+)\\x00/g, (_, idx) => tokens[Number(idx)]!);\n\n  return escaped;\n}\n\n@customElement('cg-code-block')\nexport class CgCodeBlock extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .wrapper {\n      background: var(--cg-color-code-background);\n      border-radius: var(--cg-border-radius-200);\n      overflow: hidden;\n      border: var(--cg-border-width-50) solid var(--cg-color-code-border);\n    }\n\n    /* ── Header ── */\n    .header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: var(--cg-spacing-16);\n      padding: var(--cg-spacing-8) var(--cg-spacing-16);\n      min-height: var(--cg-spacing-48);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-code-border);\n    }\n\n    .header-left {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-16);\n      min-width: 0;\n      flex: 1;\n    }\n\n    .dots {\n      display: flex;\n      gap: var(--cg-spacing-6);\n      flex-shrink: 0;\n    }\n    .dot {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-full);\n    }\n    .dot-red { background: var(--cg-color-chart-8-background); }\n    .dot-yellow { background: var(--cg-color-chart-7-background); }\n    .dot-green { background: var(--cg-color-chart-3-background); }\n\n    .filename {\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-code-text);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      min-width: 0;\n    }\n\n    .actions {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      flex-shrink: 0;\n    }\n\n    .language {\n      display: inline-flex;\n      align-items: center;\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-50);\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-code-muted);\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n    }\n\n    .copy-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      height: var(--cg-spacing-32);\n      padding: 0 var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-50);\n      background: transparent;\n      border: none;\n      color: var(--cg-color-code-muted);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      cursor: pointer;\n      font-family: inherit;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .copy-btn:hover {\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-code-text);\n    }\n    .copy-btn:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .copy-btn.copied {\n      color: var(--cg-color-status-success-text-default);\n    }\n    .copy-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\n    }\n\n    /* ── Code area ── */\n    .code-area {\n      overflow-x: auto;\n      overflow-y: auto;\n    }\n    .code-area.collapsed { max-height: var(--cg-spacing-256); }\n\n    pre {\n      margin: 0;\n      padding: var(--cg-spacing-20) var(--cg-spacing-24);\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-relaxed);\n      color: var(--cg-color-code-text);\n      tab-size: 2;\n      counter-reset: line;\n      font-variant-numeric: tabular-nums;\n    }\n\n    :host([wrap]) pre { white-space: pre-wrap; word-break: break-all; }\n\n    /* ── Line numbers ── */\n    .line {\n      display: block;\n    }\n    :host([line-numbers]) .line::before {\n      counter-increment: line;\n      content: counter(line);\n      display: inline-block;\n      width: 3ch;\n      padding-right: var(--cg-spacing-16);\n      margin-right: var(--cg-spacing-16);\n      border-right: var(--cg-border-width-50) solid var(--cg-color-code-border);\n      color: var(--cg-color-code-muted);\n      text-align: right;\n      user-select: none;\n      opacity: 0.6;\n    }\n\n    /* ── Syntax highlighting ── */\n    .hl-keyword { color: var(--cg-color-code-keyword); font-weight: var(--cg-font-weight-medium); }\n    .hl-string { color: var(--cg-color-code-string); }\n    .hl-comment { color: var(--cg-color-code-comment); font-style: italic; }\n    .hl-number { color: var(--cg-color-code-number); }\n    .hl-function { color: var(--cg-color-code-function); }\n    .hl-tag { color: var(--cg-color-code-keyword); }\n    .hl-attr { color: var(--cg-color-code-number); }\n\n    /* ── Expand button ── */\n    .expand-bar {\n      display: flex;\n      justify-content: center;\n      padding: var(--cg-spacing-16) var(--cg-spacing-12) var(--cg-spacing-12);\n      background: linear-gradient(transparent, var(--cg-color-code-background) 60%);\n      margin-top: calc(var(--cg-spacing-48) * -1);\n      position: relative;\n    }\n    .expand-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      height: var(--cg-spacing-32);\n      padding: 0 var(--cg-spacing-16);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-code-muted);\n      background: var(--cg-color-code-surface);\n      border: var(--cg-border-width-50) solid var(--cg-color-code-border);\n      border-radius: var(--cg-border-radius-full);\n      cursor: pointer;\n      font-family: inherit;\n      font-weight: var(--cg-font-weight-medium);\n      transition:\n        color 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    }\n    .expand-btn:hover {\n      color: var(--cg-color-code-text);\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .expand-btn:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .expand-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\n    }\n\n    .sr-only {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) .wrapper { border-radius: 0; }\n    :host([rounded=\"sm\"]) .wrapper { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"md\"]) .wrapper { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"lg\"]) .wrapper { border-radius: var(--cg-border-radius-200); }\n  `];\n\n  @property() code = '';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property() language = '';\n  @property() filename = '';\n  @property({ type: Boolean, attribute: 'line-numbers', reflect: true }) lineNumbers = false;\n  @property({ type: Boolean, reflect: true }) wrap = false;\n  @property({ type: Boolean }) collapsible = false;\n\n  @state() private _copied = false;\n  @state() private _collapsed = true;\n\n  private async _copy() {\n    try {\n      await navigator.clipboard.writeText(this.code);\n      this._copied = true;\n      setTimeout(() => { this._copied = false; }, 2000);\n    } catch { /* noop */ }\n  }\n\n  override render() {\n    const lines = this.code.split('\\n');\n    const isLong = this.collapsible && lines.length > 15;\n    const highlighted = highlight(this.code);\n\n    return html`\n      <div class=\"wrapper\">\n        <div class=\"header\">\n          <div class=\"header-left\">\n            <div class=\"dots\">\n              <span class=\"dot dot-red\"></span>\n              <span class=\"dot dot-yellow\"></span>\n              <span class=\"dot dot-green\"></span>\n            </div>\n            ${this.filename ? html`<span class=\"filename\">${this.filename}</span>` : nothing}\n          </div>\n          <div class=\"actions\">\n            ${this.language ? html`<span class=\"language\">${this.language}</span>` : nothing}\n            <button class=\"copy-btn ${this._copied ? 'copied' : ''}\" @click=${this._copy} aria-label=\"Copy code\">\n              ${this._copied\n                ? html`<cg-icon name=\"check\" size=\"xs\"></cg-icon> Copied`\n                : html`<cg-icon name=\"copy\" size=\"xs\"></cg-icon> Copy`\n              }\n            </button>\n            <span class=\"sr-only\" role=\"status\" aria-live=\"polite\">${this._copied ? 'Copied!' : ''}</span>\n          </div>\n        </div>\n\n        <div class=\"code-area ${isLong && this._collapsed ? 'collapsed' : ''}\">\n          <pre>${this.lineNumbers\n            ? lines.map(l => html`<span class=\"line\">${this._highlightLine(l)}\\n</span>`)\n            : html`${this._unsafeHTML(highlighted)}`\n          }</pre>\n        </div>\n\n        ${isLong && this._collapsed ? html`\n          <div class=\"expand-bar\">\n            <button class=\"expand-btn\" aria-expanded=\"false\" @click=${() => { this._collapsed = false; }}>\n              <cg-icon name=\"chevron-down\" size=\"xs\"></cg-icon>\n              Show all ${lines.length} lines\n            </button>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n\n  private _highlightLine(line: string): unknown {\n    return this._unsafeHTML(highlight(line));\n  }\n\n  private _unsafeHTML(html: string): unknown {\n    const template = document.createElement('template');\n    template.innerHTML = html;\n    return template.content.cloneNode(true);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-code-block': CgCodeBlock; }\n}\n"],"names":["KEYWORD_PATTERNS","highlight","code","escaped","tokens","placeholder","cls","text","m","_","name","idx","CgCodeBlock","LitElement","lines","isLong","highlighted","html","nothing","l","line","template","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-collapsible
+ * Simple expand/collapse with smooth grid-template-rows animation.
+ * Lighter than cg-accordion (single section only).
+ *
+ * @example
+ * ```html
+ * <cg-collapsible>
+ *   <span slot="trigger">Show details</span>
+ *   <p>Additional content...</p>
+ * </cg-collapsible>
+ * ```
+ *
+ * @slot trigger - Clickable header element
+ * @slot - Collapsible body content
+ *
+ * @fires {CustomEvent<{open: boolean}>} cg-collapsible-toggle
+ */
+export declare class CgCollapsible extends LitElement {
+    static styles: import('lit').CSSResult[];
+    open: boolean;
+    disabled: boolean;
+    size: 'sm' | 'md' | 'lg';
+    variant: 'card' | 'flush';
+    private _toggle;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-collapsible': CgCollapsible;
+    }
+}
+//# sourceMappingURL=cg-collapsible.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/cg-collapsible/cg-collapsible.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAkGnB;IAEyC,IAAI,UAAS;IACb,QAAQ,UAAS;IAChC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAU;IAEhE,OAAO,CAAC,OAAO;IAUN,MAAM;CAsBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

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

@@ -0,0 +1,160 @@
+import { css as c, LitElement as g, html as p } from "lit";
+import { property as i, customElement as b } from "lit/decorators.js";
+import { h as v, r as u } from "../../chunks/premium.css-9I4kHrsl.js";
+var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, e = (l, t, n, a) => {
+  for (var o = a > 1 ? void 0 : a ? m(t, n) : t, s = l.length - 1, d; s >= 0; s--)
+    (d = l[s]) && (o = (a ? d(t, n, o) : d(o)) || o);
+  return a && o && f(t, n, o), o;
+};
+let r = class extends g {
+  constructor() {
+    super(...arguments), this.open = !1, this.disabled = !1, this.size = "md", this.variant = "card";
+  }
+  _toggle() {
+    this.disabled || (this.open = !this.open, this.dispatchEvent(new CustomEvent("cg-collapsible-toggle", {
+      detail: { open: this.open },
+      bubbles: !0,
+      composed: !0
+    })));
+  }
+  render() {
+    return p`
+      <button
+        type="button"
+        class="trigger"
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-controls="body"
+        ?disabled=${this.disabled}
+        @click=${this._toggle}
+      >
+        <slot name="trigger">Toggle</slot>
+        <svg class="chevron" width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M3 5l4 4 4-4"/>
+        </svg>
+      </button>
+      <div class="body-wrap">
+        <div class="body" id="body">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+r.styles = [v, u, c`
+    :host {
+      display: block;
+      overflow: hidden;
+    }
+
+    /* ── Variant: card (default) — bordered surface ── */
+    :host([variant="card"]) {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-collapsible-radius);
+    }
+
+    /* ── Variant: flush — no chrome, just hover affordance ── */
+    :host([variant="flush"]) .trigger {
+      border-bottom: var(--cg-border-width-50) solid transparent;
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    :host([variant="flush"][open]) .trigger {
+      border-bottom-color: var(--cg-color-surface-cards-divider);
+    }
+
+    .trigger {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      width: 100%;
+      background: transparent;
+      border: none;
+      color: var(--cg-color-surface-base-text);
+      font-family: inherit;
+      font-weight: var(--cg-font-weight-medium);
+      text-align: left;
+      cursor: pointer;
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    /* ── Sizes ── */
+    :host([size="sm"]) .trigger {
+      padding: var(--cg-component-collapsible-trigger-padding-y-sm) var(--cg-component-collapsible-trigger-padding-x-sm);
+      font-size: var(--cg-component-collapsible-font-size-sm);
+    }
+    :host([size="md"]) .trigger {
+      padding: var(--cg-component-collapsible-trigger-padding-y-md) var(--cg-component-collapsible-trigger-padding-x-md);
+      font-size: var(--cg-component-collapsible-font-size-md);
+    }
+    :host([size="lg"]) .trigger {
+      padding: var(--cg-component-collapsible-trigger-padding-y-lg) var(--cg-component-collapsible-trigger-padding-x-lg);
+      font-size: var(--cg-component-collapsible-font-size-lg);
+    }
+
+    .trigger:hover:not(:disabled) {
+      background: var(--cg-color-action-tertiary-background-hover);
+    }
+    .trigger:focus-visible {
+      outline: none;
+      box-shadow:
+        inset 0 0 0 var(--cg-spacing-2) var(--cg-color-focus-ring-offset),
+        inset 0 0 0 var(--cg-spacing-4) var(--cg-color-focus-ring);
+    }
+    .trigger:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .chevron {
+      margin-left: auto;
+      color: var(--cg-color-surface-container-outlined);
+      transition:
+        transform var(--cg-transition-duration-default) var(--cg-transition-easing-spring),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .trigger:hover .chevron { color: var(--cg-color-surface-base-text); }
+    .trigger:active:not(:disabled) { transform: scale(0.995); }
+    :host([open]) .chevron {
+      color: var(--cg-color-accent-text);
+      transform: rotate(180deg);
+    }
+
+    .body-wrap {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);
+    }
+    :host([open]) .body-wrap {
+      grid-template-rows: 1fr;
+    }
+    .body {
+      overflow: hidden;
+    }
+    :host([size="sm"]) .body { padding: 0 var(--cg-component-collapsible-body-padding-sm); }
+    :host([size="md"]) .body { padding: 0 var(--cg-component-collapsible-body-padding-md); }
+    :host([size="lg"]) .body { padding: 0 var(--cg-component-collapsible-body-padding-lg); }
+    :host([open][size="sm"]) .body { padding: var(--cg-component-collapsible-body-padding-sm); }
+    :host([open][size="md"]) .body { padding: var(--cg-component-collapsible-body-padding-md); }
+    :host([open][size="lg"]) .body { padding: var(--cg-component-collapsible-body-padding-lg); }
+  `];
+e([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "open", 2);
+e([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+e([
+  i({ reflect: !0 })
+], r.prototype, "size", 2);
+e([
+  i({ reflect: !0 })
+], r.prototype, "variant", 2);
+r = e([
+  b("cg-collapsible")
+], r);
+export {
+  r as CgCollapsible
+};
+//# sourceMappingURL=cg-collapsible.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-collapsible.js","sources":["../../../src/components/cg-collapsible/cg-collapsible.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-collapsible\n * Simple expand/collapse with smooth grid-template-rows animation.\n * Lighter than cg-accordion (single section only).\n *\n * @example\n * ```html\n * <cg-collapsible>\n *   <span slot=\"trigger\">Show details</span>\n *   <p>Additional content...</p>\n * </cg-collapsible>\n * ```\n *\n * @slot trigger - Clickable header element\n * @slot - Collapsible body content\n *\n * @fires {CustomEvent<{open: boolean}>} cg-collapsible-toggle\n */\n@customElement('cg-collapsible')\nexport class CgCollapsible extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n      overflow: hidden;\n    }\n\n    /* ── Variant: card (default) — bordered surface ── */\n    :host([variant=\"card\"]) {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-collapsible-radius);\n    }\n\n    /* ── Variant: flush — no chrome, just hover affordance ── */\n    :host([variant=\"flush\"]) .trigger {\n      border-bottom: var(--cg-border-width-50) solid transparent;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    :host([variant=\"flush\"][open]) .trigger {\n      border-bottom-color: var(--cg-color-surface-cards-divider);\n    }\n\n    .trigger {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      width: 100%;\n      background: transparent;\n      border: none;\n      color: var(--cg-color-surface-base-text);\n      font-family: inherit;\n      font-weight: var(--cg-font-weight-medium);\n      text-align: left;\n      cursor: pointer;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    /* ── Sizes ── */\n    :host([size=\"sm\"]) .trigger {\n      padding: var(--cg-component-collapsible-trigger-padding-y-sm) var(--cg-component-collapsible-trigger-padding-x-sm);\n      font-size: var(--cg-component-collapsible-font-size-sm);\n    }\n    :host([size=\"md\"]) .trigger {\n      padding: var(--cg-component-collapsible-trigger-padding-y-md) var(--cg-component-collapsible-trigger-padding-x-md);\n      font-size: var(--cg-component-collapsible-font-size-md);\n    }\n    :host([size=\"lg\"]) .trigger {\n      padding: var(--cg-component-collapsible-trigger-padding-y-lg) var(--cg-component-collapsible-trigger-padding-x-lg);\n      font-size: var(--cg-component-collapsible-font-size-lg);\n    }\n\n    .trigger:hover:not(:disabled) {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .trigger:focus-visible {\n      outline: none;\n      box-shadow:\n        inset 0 0 0 var(--cg-spacing-2) var(--cg-color-focus-ring-offset),\n        inset 0 0 0 var(--cg-spacing-4) var(--cg-color-focus-ring);\n    }\n    .trigger:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .chevron {\n      margin-left: auto;\n      color: var(--cg-color-surface-container-outlined);\n      transition:\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-spring),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .trigger:hover .chevron { color: var(--cg-color-surface-base-text); }\n    .trigger:active:not(:disabled) { transform: scale(0.995); }\n    :host([open]) .chevron {\n      color: var(--cg-color-accent-text);\n      transform: rotate(180deg);\n    }\n\n    .body-wrap {\n      display: grid;\n      grid-template-rows: 0fr;\n      transition: grid-template-rows var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n    :host([open]) .body-wrap {\n      grid-template-rows: 1fr;\n    }\n    .body {\n      overflow: hidden;\n    }\n    :host([size=\"sm\"]) .body { padding: 0 var(--cg-component-collapsible-body-padding-sm); }\n    :host([size=\"md\"]) .body { padding: 0 var(--cg-component-collapsible-body-padding-md); }\n    :host([size=\"lg\"]) .body { padding: 0 var(--cg-component-collapsible-body-padding-lg); }\n    :host([open][size=\"sm\"]) .body { padding: var(--cg-component-collapsible-body-padding-sm); }\n    :host([open][size=\"md\"]) .body { padding: var(--cg-component-collapsible-body-padding-md); }\n    :host([open][size=\"lg\"]) .body { padding: var(--cg-component-collapsible-body-padding-lg); }\n  `];\n\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ reflect: true }) variant: 'card' | 'flush' = 'card';\n\n  private _toggle(): void {\n    if (this.disabled) return;\n    this.open = !this.open;\n    this.dispatchEvent(new CustomEvent('cg-collapsible-toggle', {\n      detail: { open: this.open },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override render() {\n    return html`\n      <button\n        type=\"button\"\n        class=\"trigger\"\n        aria-expanded=${this.open ? 'true' : 'false'}\n        aria-controls=\"body\"\n        ?disabled=${this.disabled}\n        @click=${this._toggle}\n      >\n        <slot name=\"trigger\">Toggle</slot>\n        <svg class=\"chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M3 5l4 4 4-4\"/>\n        </svg>\n      </button>\n      <div class=\"body-wrap\">\n        <div class=\"body\" id=\"body\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-collapsible': CgCollapsible;\n  }\n}\n"],"names":["CgCollapsible","LitElement","html","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAuBO,IAAMA,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAqGuC,KAAA,OAAO,IACP,KAAA,WAAW,IAC1B,KAAA,OAA2B,MAC3B,KAAA,UAA4B;AAAA,EAAA;AAAA,EAEjD,UAAgB;AACtB,IAAI,KAAK,aACT,KAAK,OAAO,CAAC,KAAK,MAClB,KAAK,cAAc,IAAI,YAAY,yBAAyB;AAAA,MAC1D,QAAQ,EAAE,MAAM,KAAK,KAAA;AAAA,MACrB,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA,wBAIa,KAAK,OAAO,SAAS,OAAO;AAAA;AAAA,oBAEhC,KAAK,QAAQ;AAAA,iBAChB,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAa3B;AACF;AA1IaF,EACK,SAAS,CAACG,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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,GAkGnD;AAE2CC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArG/BP,EAqGiC,WAAA,QAAA,CAAA;AACAM,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtG/BP,EAsGiC,WAAA,YAAA,CAAA;AACfM,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAvGhBP,EAuGkB,WAAA,QAAA,CAAA;AACAM,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAxGhBP,EAwGkB,WAAA,WAAA,CAAA;AAxGlBA,IAANM,EAAA;AAAA,EADNE,EAAc,gBAAgB;AAAA,GAClBR,CAAA;"}

package/dist/components/cg-color-picker/cg-color-picker.d.ts

@@ -0,0 +1,51 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-color-picker
+ * Color picker with trigger swatch + dropdown panel containing spectrum area,
+ * hue slider, hex/RGB inputs, and preset swatches.
+ *
+ * @fires {CustomEvent<{color: string, hex: string}>} cg-color-change - When color changes
+ */
+export declare class CgColorPicker extends LitElement {
+    static styles: import('lit').CSSResult[];
+    value: string;
+    label: string;
+    colors: string[];
+    showAlpha: boolean;
+    showRgb: boolean;
+    showPresets: boolean;
+    disabled: boolean;
+    private _open;
+    private _hsv;
+    private _hexInput;
+    private _copied;
+    private _dragging;
+    willUpdate(changed: Map<string, unknown>): void;
+    private _toggle;
+    private _close;
+    private _emit;
+    private _onAreaPointerDown;
+    private _onAreaPointerMove;
+    private _onPointerUp;
+    private _updateArea;
+    private _onHuePointerDown;
+    private _onHuePointerMove;
+    private _updateHue;
+    private _onAlphaPointerDown;
+    private _onAlphaPointerMove;
+    private _updateAlpha;
+    private _onHexInput;
+    private _onRgbInput;
+    private _copy;
+    private _handleClickOutside;
+    private _handleKeydown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-color-picker': CgColorPicker;
+    }
+}
+//# sourceMappingURL=cg-color-picker.d.ts.map

package/dist/components/cg-color-picker/cg-color-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-color-picker.d.ts","sourceRoot":"","sources":["../../../src/components/cg-color-picker/cg-color-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAmDrD;;;;;;GAMG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAoOnB;IAES,KAAK,SAAa;IAClB,KAAK,SAAM;IACI,MAAM,EAAE,MAAM,EAAE,CAAiB;IAC/B,SAAS,UAAS;IAClB,OAAO,UAAQ;IACf,WAAW,UAAQ;IACJ,QAAQ,UAAS;IAEpD,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,IAAI,CAA2C;IACvD,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,OAAO,CAAS;IACjC,OAAO,CAAC,SAAS,CAAS;IAEjB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAYjD,OAAO,CAAC,OAAO;IACf,OAAO,CAAC,MAAM;IAEd,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,kBAAkB;IAC1B,OAAO,CAAC,YAAY;IACpB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,iBAAiB;IACzB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,mBAAmB;IAC3B,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,WAAW;YASL,KAAK;IAMnB,OAAO,CAAC,mBAAmB,CAA0E;IACrG,OAAO,CAAC,cAAc;IAKb,iBAAiB;IACjB,oBAAoB;IAEpB,MAAM;CA8FhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,iBAAiB,EAAE,aAAa,CAAC;KAAE;CACtE"}