@cognivo/components 0.8.0

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

@@ -0,0 +1,152 @@
+import { css as f, LitElement as h, nothing as r, html as u } from "lit";
+import { property as o, customElement as v } from "lit/decorators.js";
+import { a as g, r as p } from "../../chunks/premium.css-9I4kHrsl.js";
+var x = Object.defineProperty, b = Object.getOwnPropertyDescriptor, a = (n, i, c, s) => {
+  for (var e = s > 1 ? void 0 : s ? b(i, c) : i, l = n.length - 1, d; l >= 0; l--)
+    (d = n[l]) && (e = (s ? d(i, c, e) : d(e)) || e);
+  return s && e && x(i, c, e), e;
+};
+let t = class extends h {
+  constructor() {
+    super(...arguments), this.href = "", this.variant = "default", this.external = !1, this.disabled = !1, this.size = "md";
+  }
+  _onClick(n) {
+    if (this.disabled) {
+      n.preventDefault();
+      return;
+    }
+    this.dispatchEvent(new CustomEvent("cg-link-click", { bubbles: !0, composed: !0 }));
+  }
+  render() {
+    return u`
+      <a
+        href=${this.href || r}
+        target=${this.external ? "_blank" : r}
+        rel=${this.external ? "noopener noreferrer" : r}
+        aria-disabled=${this.disabled ? "true" : r}
+        tabindex=${this.disabled ? -1 : 0}
+        @click=${this._onClick}
+      >
+        <slot></slot>
+        ${this.external ? u`
+          <span class="external-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/>
+              <polyline points="15 3 21 3 21 9"/>
+              <line x1="10" y1="14" x2="21" y2="3"/>
+            </svg>
+          </span>
+        ` : r}
+      </a>
+    `;
+  }
+};
+t.styles = [g, p, f`
+    a {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      text-decoration: none;
+      position: relative;
+      cursor: pointer;
+      font-weight: var(--cg-font-weight-medium);
+      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    /* Underline animation — grows from center */
+    a::after {
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      left: 50%;
+      width: 0;
+      height: var(--cg-border-width-50);
+      background: currentColor;
+      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default), left var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
+    a:hover::after {
+      left: 0;
+      width: 100%;
+    }
+
+    /* Focus ring — dual layer */
+    a:focus-visible {
+      outline: none;
+      border-radius: var(--cg-border-radius-50);
+      box-shadow:
+        0 0 0 2px var(--cg-color-surface-base-background),
+        0 0 0 4px var(--cg-color-focus-ring);
+    }
+
+    /* Sizes */
+    :host([size="sm"]) a { font-size: var(--cg-font-size-xs); }
+    :host([size="md"]) a { font-size: var(--cg-font-size-sm); }
+    :host([size="lg"]) a { font-size: var(--cg-font-size-base); }
+
+    /* Variant: default */
+    :host([variant="default"]) a { color: var(--cg-color-surface-base-text); }
+    :host([variant="default"]) a:hover { color: var(--cg-color-surface-base-text); }
+
+    /* Variant: accent — uses the brand accent color */
+    :host([variant="accent"]) a { color: var(--cg-color-accent-text); }
+    :host([variant="accent"]) a:hover { color: var(--cg-color-accent-text); }
+    :host([variant="accent"]) a::after { background: var(--cg-color-accent-text); }
+
+    /* Variant: muted */
+    :host([variant="muted"]) a { color: var(--cg-color-input-text-placeholder); }
+    :host([variant="muted"]) a:hover { color: var(--cg-color-surface-base-text); }
+
+    /* Variant: underline — always show underline */
+    :host([variant="underline"]) a { color: var(--cg-color-surface-base-text); text-decoration: underline; text-underline-offset: var(--cg-spacing-2); text-decoration-skip-ink: auto; }
+    :host([variant="underline"]) a::after { display: none; }
+    :host([variant="underline"]) a:hover { color: var(--cg-color-surface-base-text); }
+
+    /* Active press feedback */
+    a:active {
+      opacity: 0.8;
+      transform: scale(var(--cg-interaction-press-scale));
+      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default), opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    /* Disabled */
+    :host([disabled]) a {
+      opacity: 0.5;
+      pointer-events: none;
+      cursor: not-allowed;
+    }
+    :host([disabled]) a::after { display: none; }
+
+    /* External icon */
+    .external-icon {
+      display: inline-flex;
+      flex-shrink: 0;
+      width: 0.85em;
+      height: 0.85em;
+    }
+    .external-icon svg {
+      width: 100%;
+      height: 100%;
+    }
+  `];
+a([
+  o()
+], t.prototype, "href", 2);
+a([
+  o({ reflect: !0 })
+], t.prototype, "variant", 2);
+a([
+  o({ type: Boolean })
+], t.prototype, "external", 2);
+a([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+a([
+  o({ reflect: !0 })
+], t.prototype, "size", 2);
+t = a([
+  v("cg-link")
+], t);
+export {
+  t as CgLink
+};
+//# sourceMappingURL=cg-link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-link.js","sources":["../../../src/components/cg-link/cg-link.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\n/**\n * <cg-link> — Styled anchor element with variants.\n *\n * Features:\n * - Hover underline animation (width grows from center)\n * - External link icon with target=_blank\n * - Color variants: default, accent, muted, underline\n * - Disabled state, size variants\n * - Focus-visible ring, proper ARIA\n */\n@customElement('cg-link')\nexport class CgLink extends LitElement {\n  static override styles = [hostBase, reducedMotion, css`\n    a {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      text-decoration: none;\n      position: relative;\n      cursor: pointer;\n      font-weight: var(--cg-font-weight-medium);\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    /* Underline animation — grows from center */\n    a::after {\n      content: '';\n      position: absolute;\n      bottom: -1px;\n      left: 50%;\n      width: 0;\n      height: var(--cg-border-width-50);\n      background: currentColor;\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default), left var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n    a:hover::after {\n      left: 0;\n      width: 100%;\n    }\n\n    /* Focus ring — dual layer */\n    a:focus-visible {\n      outline: none;\n      border-radius: var(--cg-border-radius-50);\n      box-shadow:\n        0 0 0 2px var(--cg-color-surface-base-background),\n        0 0 0 4px var(--cg-color-focus-ring);\n    }\n\n    /* Sizes */\n    :host([size=\"sm\"]) a { font-size: var(--cg-font-size-xs); }\n    :host([size=\"md\"]) a { font-size: var(--cg-font-size-sm); }\n    :host([size=\"lg\"]) a { font-size: var(--cg-font-size-base); }\n\n    /* Variant: default */\n    :host([variant=\"default\"]) a { color: var(--cg-color-surface-base-text); }\n    :host([variant=\"default\"]) a:hover { color: var(--cg-color-surface-base-text); }\n\n    /* Variant: accent — uses the brand accent color */\n    :host([variant=\"accent\"]) a { color: var(--cg-color-accent-text); }\n    :host([variant=\"accent\"]) a:hover { color: var(--cg-color-accent-text); }\n    :host([variant=\"accent\"]) a::after { background: var(--cg-color-accent-text); }\n\n    /* Variant: muted */\n    :host([variant=\"muted\"]) a { color: var(--cg-color-input-text-placeholder); }\n    :host([variant=\"muted\"]) a:hover { color: var(--cg-color-surface-base-text); }\n\n    /* Variant: underline — always show underline */\n    :host([variant=\"underline\"]) a { color: var(--cg-color-surface-base-text); text-decoration: underline; text-underline-offset: var(--cg-spacing-2); text-decoration-skip-ink: auto; }\n    :host([variant=\"underline\"]) a::after { display: none; }\n    :host([variant=\"underline\"]) a:hover { color: var(--cg-color-surface-base-text); }\n\n    /* Active press feedback */\n    a:active {\n      opacity: 0.8;\n      transform: scale(var(--cg-interaction-press-scale));\n      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default), opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    /* Disabled */\n    :host([disabled]) a {\n      opacity: 0.5;\n      pointer-events: none;\n      cursor: not-allowed;\n    }\n    :host([disabled]) a::after { display: none; }\n\n    /* External icon */\n    .external-icon {\n      display: inline-flex;\n      flex-shrink: 0;\n      width: 0.85em;\n      height: 0.85em;\n    }\n    .external-icon svg {\n      width: 100%;\n      height: 100%;\n    }\n  `];\n\n  @property() href = '';\n  @property({ reflect: true }) variant: 'default' | 'accent' | 'muted' | 'underline' = 'default';\n  @property({ type: Boolean }) external = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  private _onClick(e: MouseEvent) {\n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n    this.dispatchEvent(new CustomEvent('cg-link-click', { bubbles: true, composed: true }));\n  }\n\n  override render() {\n    return html`\n      <a\n        href=${this.href || nothing}\n        target=${this.external ? '_blank' : nothing}\n        rel=${this.external ? 'noopener noreferrer' : nothing}\n        aria-disabled=${this.disabled ? 'true' : nothing}\n        tabindex=${this.disabled ? -1 : 0}\n        @click=${this._onClick}\n      >\n        <slot></slot>\n        ${this.external ? html`\n          <span class=\"external-icon\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\"/>\n              <polyline points=\"15 3 21 3 21 9\"/>\n              <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"/>\n            </svg>\n          </span>\n        ` : nothing}\n      </a>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-link': CgLink;\n  }\n}\n"],"names":["CgLink","LitElement","e","html","nothing","hostBase","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAeO,IAAMA,IAAN,cAAqBC,EAAW;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GAyFO,KAAA,OAAO,IACU,KAAA,UAAwD,WACxD,KAAA,WAAW,IACI,KAAA,WAAW,IAC1B,KAAA,OAA2B;AAAA,EAAA;AAAA,EAEhD,SAASC,GAAe;AAC9B,QAAI,KAAK,UAAU;AACjB,MAAAA,EAAE,eAAA;AACF;AAAA,IACF;AACA,SAAK,cAAc,IAAI,YAAY,iBAAiB,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACxF;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA,eAEI,KAAK,QAAQC,CAAO;AAAA,iBAClB,KAAK,WAAW,WAAWA,CAAO;AAAA,cACrC,KAAK,WAAW,wBAAwBA,CAAO;AAAA,wBACrC,KAAK,WAAW,SAASA,CAAO;AAAA,mBACrC,KAAK,WAAW,KAAK,CAAC;AAAA,iBACxB,KAAK,QAAQ;AAAA;AAAA;AAAA,UAGpB,KAAK,WAAWD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQdC,CAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AA9HaJ,EACK,SAAS,CAACK,GAAUC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAsFlD;AAEWC,EAAA;AAAA,EAAXC,EAAA;AAAS,GAzFCT,EAyFC,WAAA,QAAA,CAAA;AACiBQ,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA1FhBT,EA0FkB,WAAA,WAAA,CAAA;AACAQ,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA3FhBT,EA2FkB,WAAA,YAAA,CAAA;AACeQ,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA5F/BT,EA4FiC,WAAA,YAAA,CAAA;AACfQ,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA7FhBT,EA6FkB,WAAA,QAAA,CAAA;AA7FlBA,IAANQ,EAAA;AAAA,EADNE,EAAc,SAAS;AAAA,GACXV,CAAA;"}

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

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+/** Item definition for cg-list. */
+export interface ListItem {
+    title: string;
+    subtitle?: string;
+    image?: string;
+    icon?: string;
+    action?: string;
+    actionLabel?: string;
+    meta?: string;
+}
+/**
+ * @element cg-list
+ * Data list with bullet, number, image, or plain variants.
+ *
+ * @fires {CustomEvent<{item: ListItem, index: number}>} cg-list-click - When a clickable item is clicked
+ * @fires {CustomEvent<{item: ListItem, index: number, action: string}>} cg-list-action - When an action button is clicked
+ */
+export declare class CgList extends LitElement {
+    static styles: import('lit').CSSResult[];
+    items: ListItem[];
+    variant: 'number' | 'bullet' | 'image' | 'plain';
+    dividers: boolean;
+    hoverable: boolean;
+    clickable: boolean;
+    contained: boolean;
+    emptyText: string;
+    private _handleItemClick;
+    private _handleAction;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-list': CgList;
+    }
+}
+//# sourceMappingURL=cg-list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-list.d.ts","sourceRoot":"","sources":["../../../src/components/cg-list/cg-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,mCAAmC;AACnC,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;GAMG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,4BA8NnB;IAEwB,KAAK,EAAE,QAAQ,EAAE,CAAM;IACrB,OAAO,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAW;IAC5C,QAAQ,UAAS;IACjB,SAAS,UAAQ;IACjB,SAAS,UAAS;IAClB,SAAS,UAAS;IAClD,SAAS,SAAc;IAEnC,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,aAAa;IASZ,MAAM;CAsChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,SAAS,EAAE,MAAM,CAAC;KAAE;CACvD"}

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

@@ -0,0 +1,314 @@
+import { css as v, LitElement as h, html as i, nothing as o } from "lit";
+import { property as c, customElement as u } from "lit/decorators.js";
+import { h as p, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, s = (e, t, r, l) => {
+  for (var n = l > 1 ? void 0 : l ? m(t, r) : t, d = e.length - 1, g; d >= 0; d--)
+    (g = e[d]) && (n = (l ? g(t, r, n) : g(n)) || n);
+  return l && n && b(t, r, n), n;
+};
+let a = class extends h {
+  constructor() {
+    super(...arguments), this.items = [], this.variant = "plain", this.dividers = !1, this.hoverable = !0, this.clickable = !1, this.contained = !1, this.emptyText = "No items";
+  }
+  _handleItemClick(e, t) {
+    this.clickable && this.dispatchEvent(new CustomEvent("cg-list-click", {
+      detail: { item: e, index: t },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _handleAction(e, t, r) {
+    e.stopPropagation(), this.dispatchEvent(new CustomEvent("cg-list-action", {
+      detail: { item: t, index: r, action: t.action },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    return this.items.length === 0 ? i`
+        <div class="empty">
+          <svg class="empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="3" y="3" width="18" height="18" rx="2"></rect>
+            <path d="M8 8h8M8 12h5M8 16h3"></path>
+          </svg>
+          <span class="empty-text">${this.emptyText}</span>
+        </div>
+      ` : i`<div role="list">${this.items.map((e, t) => i`
+      <div
+        class="item"
+        role="listitem"
+        tabindex=${this.clickable ? "0" : o}
+        @click=${() => this._handleItemClick(e, t)}
+        @keydown=${(r) => {
+      this.clickable && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), this._handleItemClick(e, t));
+    }}
+      >
+        ${this.variant === "number" ? i`<span class="num">${t + 1}</span>` : o}
+        ${this.variant === "bullet" ? i`<span class="bullet"></span>` : o}
+        ${this.variant === "image" && e.image ? i`<img class="avatar" src=${e.image} alt="" loading="lazy" />` : o}
+
+        <div class="body">
+          <div class="title">${e.title}</div>
+          ${e.subtitle ? i`<div class="subtitle">${e.subtitle}</div>` : o}
+        </div>
+
+        <div class="right">
+          ${e.meta ? i`<span class="meta">${e.meta}</span>` : o}
+          ${e.actionLabel ? i`<button class="action-btn" @click=${(r) => this._handleAction(r, e, t)}>${e.actionLabel}</button>` : o}
+          ${this.clickable ? i`<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"></path></svg>` : o}
+        </div>
+      </div>
+    `)}</div>`;
+  }
+};
+a.styles = [p, f, v`
+
+    /* ── Empty state ── */
+    .empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-48) var(--cg-spacing-24);
+      color: var(--cg-color-surface-container-outlined);
+    }
+    .empty-icon {
+      width: var(--cg-spacing-48);
+      height: var(--cg-spacing-48);
+      opacity: 0.3;
+    }
+    .empty-text {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+    }
+
+    /* ── Item ── */
+    .item {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      border-radius: var(--cg-border-radius-100);
+      border: var(--cg-border-width-50) solid transparent;
+      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default), border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      min-height: var(--cg-spacing-48);
+    }
+
+    /* ── Contained variant — list shell.
+       Concentric corners: outer radius = inner item radius + padding
+       (20 = 12 + 8). Card-radius (28) was too big for a list shell;
+       radius-150 fits items snugly without visible corner offset. */
+    :host([contained]) {
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-150);
+      padding: var(--cg-spacing-8);
+      background: var(--cg-color-surface-cards-background);
+    }
+
+    /* role=list wrapper — flush by default. Only [contained] mode adds
+       a small gap so items read as separated pills inside the shell
+       (which makes the container padding visible). [dividers] mode
+       collapses the gap so the lines themselves are the separator. */
+    [role="list"] {
+      display: flex;
+      flex-direction: column;
+    }
+    :host([contained]) [role="list"] { gap: var(--cg-spacing-2); }
+    :host([contained][dividers]) [role="list"] { gap: 0; }
+
+    /* ── Dividers — items keep their own horizontal padding; the divider
+       is absolutely positioned so it spans the item's full width
+       regardless of item padding. */
+    :host([dividers]) .item {
+      border-radius: 0;
+      position: relative;
+    }
+    :host([dividers]) .item::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: var(--cg-border-width-50);
+      background: var(--cg-color-surface-base-divider);
+    }
+    :host([dividers]) .item:last-child::after { display: none; }
+
+    /* Inside a [contained] shell, the divider's base-divider colour
+       (gray-800 in dark) sits too close to the card-bg (gray-900) to be
+       visible. surface-cards-border is the high-contrast option meant
+       for hairlines on card surfaces. */
+    :host([contained][dividers]) .item::after {
+      background: var(--cg-color-surface-cards-border);
+    }
+
+    /* Inset dividers when leading element present */
+    :host([dividers][variant="image"]) .item::after,
+    :host([dividers][variant="number"]) .item::after,
+    :host([dividers][variant="bullet"]) .item::after {
+      left: var(--cg-spacing-48);
+    }
+
+    /* ── Contained without dividers — items get a visible thin border
+       so they read as separate tiles inside the shell. Bg can't help
+       here: surface-cards-background and surface-container-background
+       resolve to the same color, so a bg change is invisible. The
+       border + the role=list gap (2px) make the shell padding obvious. */
+    :host([contained]:not([dividers])) .item {
+      border-color: var(--cg-color-surface-cards-border);
+    }
+
+    /* ── Hover — uses theme-aware tertiary hover token (lightens in dark,
+       darkens in light). overlay-dark-subtle was wrong in dark mode where
+       a darken-overlay on already-dark surfaces makes hover less visible. */
+    :host([hoverable]) .item:hover,
+    :host([clickable]) .item:hover {
+      background: var(--cg-color-action-tertiary-background-hover);
+      border-color: var(--cg-color-surface-cards-border);
+    }
+
+    :host([clickable]) .item {
+      cursor: pointer;
+    }
+    :host([clickable]) .item:active {
+      background: var(--cg-overlay-accent-subtle);
+    }
+    :host([clickable]) .item:focus-visible {
+      outline: none;
+      box-shadow:
+        inset 0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),
+        inset 0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);
+      border-radius: var(--cg-border-radius-100);
+    }
+
+    /* ── Number indicator — subtle, not heavy ── */
+    .num {
+      width: var(--cg-spacing-24);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-container-outlined);
+      flex-shrink: 0;
+      font-variant-numeric: tabular-nums;
+    }
+
+    /* ── Bullet ── */
+    .bullet {
+      width: var(--cg-spacing-6);
+      height: var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-surface-container-outlined);
+      flex-shrink: 0;
+      margin: 0 var(--cg-spacing-4);
+    }
+
+    /* ── Avatar ── */
+    .avatar {
+      width: var(--cg-spacing-40);
+      height: var(--cg-spacing-40);
+      border-radius: var(--cg-border-radius-full);
+      object-fit: cover;
+      flex-shrink: 0;
+      background: var(--cg-color-surface-container-background);
+    }
+
+    /* ── Body ── */
+    .body {
+      flex: 1;
+      min-width: 0;
+    }
+    .title {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-base-text);
+      line-height: var(--cg-line-height-snug);
+    }
+    .subtitle {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+      margin-top: var(--cg-spacing-2);
+      line-height: var(--cg-line-height-snug);
+    }
+
+    /* ── Right side — actions appear on hover ── */
+    .right {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      flex-shrink: 0;
+    }
+    .meta {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+      white-space: nowrap;
+    }
+
+    .action-btn {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-accent-text);
+      font-weight: var(--cg-font-weight-medium);
+      cursor: pointer;
+      white-space: nowrap;
+      background: none;
+      border: none;
+      padding: var(--cg-spacing-4) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-50);
+      font-family: inherit;
+      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    /* Reveal-on-hover only on devices that support hover. Touch devices
+       always show the action button — without this guard the action would
+       be invisible on phones/tablets (no hover event fires). */
+    @media (hover: hover) {
+      .action-btn { opacity: 0; }
+      .item:hover .action-btn { opacity: 1; }
+    }
+    .action-btn:hover { background: var(--cg-overlay-accent-light); }
+    .action-btn:focus-visible {
+      opacity: 1;
+      outline: none;
+      box-shadow:
+        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),
+        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);
+    }
+
+    .chevron {
+      width: var(--cg-icon-size-100);
+      height: var(--cg-icon-size-100);
+      color: var(--cg-color-surface-container-outlined);
+      flex-shrink: 0;
+      opacity: 0.5;
+      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .item:hover .chevron { opacity: 1; }
+  `];
+s([
+  c({ type: Array })
+], a.prototype, "items", 2);
+s([
+  c({ reflect: !0 })
+], a.prototype, "variant", 2);
+s([
+  c({ type: Boolean, reflect: !0 })
+], a.prototype, "dividers", 2);
+s([
+  c({ type: Boolean, reflect: !0 })
+], a.prototype, "hoverable", 2);
+s([
+  c({ type: Boolean, reflect: !0 })
+], a.prototype, "clickable", 2);
+s([
+  c({ type: Boolean, reflect: !0 })
+], a.prototype, "contained", 2);
+s([
+  c()
+], a.prototype, "emptyText", 2);
+a = s([
+  u("cg-list")
+], a);
+export {
+  a as CgList
+};
+//# sourceMappingURL=cg-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-list.js","sources":["../../../src/components/cg-list/cg-list.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/** Item definition for cg-list. */\nexport interface ListItem {\n  title: string;\n  subtitle?: string;\n  image?: string;\n  icon?: string;\n  action?: string;\n  actionLabel?: string;\n  meta?: string;\n}\n\n/**\n * @element cg-list\n * Data list with bullet, number, image, or plain variants.\n *\n * @fires {CustomEvent<{item: ListItem, index: number}>} cg-list-click - When a clickable item is clicked\n * @fires {CustomEvent<{item: ListItem, index: number, action: string}>} cg-list-action - When an action button is clicked\n */\n@customElement('cg-list')\nexport class CgList extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n\n    /* ── Empty state ── */\n    .empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-48) var(--cg-spacing-24);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .empty-icon {\n      width: var(--cg-spacing-48);\n      height: var(--cg-spacing-48);\n      opacity: 0.3;\n    }\n    .empty-text {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n    }\n\n    /* ── Item ── */\n    .item {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid transparent;\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default), border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      min-height: var(--cg-spacing-48);\n    }\n\n    /* ── Contained variant — list shell.\n       Concentric corners: outer radius = inner item radius + padding\n       (20 = 12 + 8). Card-radius (28) was too big for a list shell;\n       radius-150 fits items snugly without visible corner offset. */\n    :host([contained]) {\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      padding: var(--cg-spacing-8);\n      background: var(--cg-color-surface-cards-background);\n    }\n\n    /* role=list wrapper — flush by default. Only [contained] mode adds\n       a small gap so items read as separated pills inside the shell\n       (which makes the container padding visible). [dividers] mode\n       collapses the gap so the lines themselves are the separator. */\n    [role=\"list\"] {\n      display: flex;\n      flex-direction: column;\n    }\n    :host([contained]) [role=\"list\"] { gap: var(--cg-spacing-2); }\n    :host([contained][dividers]) [role=\"list\"] { gap: 0; }\n\n    /* ── Dividers — items keep their own horizontal padding; the divider\n       is absolutely positioned so it spans the item's full width\n       regardless of item padding. */\n    :host([dividers]) .item {\n      border-radius: 0;\n      position: relative;\n    }\n    :host([dividers]) .item::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      height: var(--cg-border-width-50);\n      background: var(--cg-color-surface-base-divider);\n    }\n    :host([dividers]) .item:last-child::after { display: none; }\n\n    /* Inside a [contained] shell, the divider's base-divider colour\n       (gray-800 in dark) sits too close to the card-bg (gray-900) to be\n       visible. surface-cards-border is the high-contrast option meant\n       for hairlines on card surfaces. */\n    :host([contained][dividers]) .item::after {\n      background: var(--cg-color-surface-cards-border);\n    }\n\n    /* Inset dividers when leading element present */\n    :host([dividers][variant=\"image\"]) .item::after,\n    :host([dividers][variant=\"number\"]) .item::after,\n    :host([dividers][variant=\"bullet\"]) .item::after {\n      left: var(--cg-spacing-48);\n    }\n\n    /* ── Contained without dividers — items get a visible thin border\n       so they read as separate tiles inside the shell. Bg can't help\n       here: surface-cards-background and surface-container-background\n       resolve to the same color, so a bg change is invisible. The\n       border + the role=list gap (2px) make the shell padding obvious. */\n    :host([contained]:not([dividers])) .item {\n      border-color: var(--cg-color-surface-cards-border);\n    }\n\n    /* ── Hover — uses theme-aware tertiary hover token (lightens in dark,\n       darkens in light). overlay-dark-subtle was wrong in dark mode where\n       a darken-overlay on already-dark surfaces makes hover less visible. */\n    :host([hoverable]) .item:hover,\n    :host([clickable]) .item:hover {\n      background: var(--cg-color-action-tertiary-background-hover);\n      border-color: var(--cg-color-surface-cards-border);\n    }\n\n    :host([clickable]) .item {\n      cursor: pointer;\n    }\n    :host([clickable]) .item:active {\n      background: var(--cg-overlay-accent-subtle);\n    }\n    :host([clickable]) .item:focus-visible {\n      outline: none;\n      box-shadow:\n        inset 0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        inset 0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n      border-radius: var(--cg-border-radius-100);\n    }\n\n    /* ── Number indicator — subtle, not heavy ── */\n    .num {\n      width: var(--cg-spacing-24);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-outlined);\n      flex-shrink: 0;\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* ── Bullet ── */\n    .bullet {\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-container-outlined);\n      flex-shrink: 0;\n      margin: 0 var(--cg-spacing-4);\n    }\n\n    /* ── Avatar ── */\n    .avatar {\n      width: var(--cg-spacing-40);\n      height: var(--cg-spacing-40);\n      border-radius: var(--cg-border-radius-full);\n      object-fit: cover;\n      flex-shrink: 0;\n      background: var(--cg-color-surface-container-background);\n    }\n\n    /* ── Body ── */\n    .body {\n      flex: 1;\n      min-width: 0;\n    }\n    .title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-snug);\n    }\n    .subtitle {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      margin-top: var(--cg-spacing-2);\n      line-height: var(--cg-line-height-snug);\n    }\n\n    /* ── Right side — actions appear on hover ── */\n    .right {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      flex-shrink: 0;\n    }\n    .meta {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      white-space: nowrap;\n    }\n\n    .action-btn {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-accent-text);\n      font-weight: var(--cg-font-weight-medium);\n      cursor: pointer;\n      white-space: nowrap;\n      background: none;\n      border: none;\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-50);\n      font-family: inherit;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    /* Reveal-on-hover only on devices that support hover. Touch devices\n       always show the action button — without this guard the action would\n       be invisible on phones/tablets (no hover event fires). */\n    @media (hover: hover) {\n      .action-btn { opacity: 0; }\n      .item:hover .action-btn { opacity: 1; }\n    }\n    .action-btn:hover { background: var(--cg-overlay-accent-light); }\n    .action-btn:focus-visible {\n      opacity: 1;\n      outline: none;\n      box-shadow:\n        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n    }\n\n    .chevron {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      color: var(--cg-color-surface-container-outlined);\n      flex-shrink: 0;\n      opacity: 0.5;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .item:hover .chevron { opacity: 1; }\n  `];\n\n  @property({ type: Array }) items: ListItem[] = [];\n  @property({ reflect: true }) variant: 'number' | 'bullet' | 'image' | 'plain' = 'plain';\n  @property({ type: Boolean, reflect: true }) dividers = false;\n  @property({ type: Boolean, reflect: true }) hoverable = true;\n  @property({ type: Boolean, reflect: true }) clickable = false;\n  @property({ type: Boolean, reflect: true }) contained = false;\n  @property() emptyText = 'No items';\n\n  private _handleItemClick(item: ListItem, index: number) {\n    if (!this.clickable) return;\n    this.dispatchEvent(new CustomEvent('cg-list-click', {\n      detail: { item, index },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleAction(e: Event, item: ListItem, index: number) {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('cg-list-action', {\n      detail: { item, index, action: item.action },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override render() {\n    if (this.items.length === 0) {\n      return html`\n        <div class=\"empty\">\n          <svg class=\"empty-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"></rect>\n            <path d=\"M8 8h8M8 12h5M8 16h3\"></path>\n          </svg>\n          <span class=\"empty-text\">${this.emptyText}</span>\n        </div>\n      `;\n    }\n\n    return html`<div role=\"list\">${this.items.map((item, i) => html`\n      <div\n        class=\"item\"\n        role=\"listitem\"\n        tabindex=${this.clickable ? '0' : nothing}\n        @click=${() => this._handleItemClick(item, i)}\n        @keydown=${(e: KeyboardEvent) => { if (this.clickable && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); this._handleItemClick(item, i); } }}\n      >\n        ${this.variant === 'number' ? html`<span class=\"num\">${i + 1}</span>` : nothing}\n        ${this.variant === 'bullet' ? html`<span class=\"bullet\"></span>` : nothing}\n        ${this.variant === 'image' && item.image ? html`<img class=\"avatar\" src=${item.image} alt=\"\" loading=\"lazy\" />` : nothing}\n\n        <div class=\"body\">\n          <div class=\"title\">${item.title}</div>\n          ${item.subtitle ? html`<div class=\"subtitle\">${item.subtitle}</div>` : nothing}\n        </div>\n\n        <div class=\"right\">\n          ${item.meta ? html`<span class=\"meta\">${item.meta}</span>` : nothing}\n          ${item.actionLabel ? html`<button class=\"action-btn\" @click=${(e: Event) => this._handleAction(e, item, i)}>${item.actionLabel}</button>` : nothing}\n          ${this.clickable ? html`<svg class=\"chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 18l6-6-6-6\"></path></svg>` : nothing}\n        </div>\n      </div>\n    `)}</div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-list': CgList; }\n}\n"],"names":["CgList","LitElement","item","index","html","i","nothing","e","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAuBO,IAAMA,IAAN,cAAqBC,EAAW;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GAiOsB,KAAA,QAAoB,CAAA,GAClB,KAAA,UAAmD,SACpC,KAAA,WAAW,IACX,KAAA,YAAY,IACZ,KAAA,YAAY,IACZ,KAAA,YAAY,IAC5C,KAAA,YAAY;AAAA,EAAA;AAAA,EAEhB,iBAAiBC,GAAgBC,GAAe;AACtD,IAAK,KAAK,aACV,KAAK,cAAc,IAAI,YAAY,iBAAiB;AAAA,MAClD,QAAQ,EAAE,MAAAD,GAAM,OAAAC,EAAA;AAAA,MAChB,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAEQ,cAAc,GAAUD,GAAgBC,GAAe;AAC7D,MAAE,gBAAA,GACF,KAAK,cAAc,IAAI,YAAY,kBAAkB;AAAA,MACnD,QAAQ,EAAE,MAAAD,GAAM,OAAAC,GAAO,QAAQD,EAAK,OAAA;AAAA,MACpC,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAES,SAAS;AAChB,WAAI,KAAK,MAAM,WAAW,IACjBE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qCAMwB,KAAK,SAAS;AAAA;AAAA,UAKxCA,qBAAwB,KAAK,MAAM,IAAI,CAACF,GAAMG,MAAMD;AAAA;AAAA;AAAA;AAAA,mBAI5C,KAAK,YAAY,MAAME,CAAO;AAAA,iBAChC,MAAM,KAAK,iBAAiBJ,GAAMG,CAAC,CAAC;AAAA,mBAClC,CAACE,MAAqB;AAAE,MAAI,KAAK,cAAcA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SAAQA,EAAE,eAAA,GAAkB,KAAK,iBAAiBL,GAAMG,CAAC;AAAA,IAAK,CAAC;AAAA;AAAA,UAEtJ,KAAK,YAAY,WAAWD,sBAAyBC,IAAI,CAAC,YAAYC,CAAO;AAAA,UAC7E,KAAK,YAAY,WAAWF,kCAAqCE,CAAO;AAAA,UACxE,KAAK,YAAY,WAAWJ,EAAK,QAAQE,4BAA+BF,EAAK,KAAK,8BAA8BI,CAAO;AAAA;AAAA;AAAA,+BAGlGJ,EAAK,KAAK;AAAA,YAC7BA,EAAK,WAAWE,0BAA6BF,EAAK,QAAQ,WAAWI,CAAO;AAAA;AAAA;AAAA;AAAA,YAI5EJ,EAAK,OAAOE,uBAA0BF,EAAK,IAAI,YAAYI,CAAO;AAAA,YAClEJ,EAAK,cAAcE,sCAAyC,CAACG,MAAa,KAAK,cAAcA,GAAGL,GAAMG,CAAC,CAAC,IAAIH,EAAK,WAAW,cAAcI,CAAO;AAAA,YACjJ,KAAK,YAAYF,wLAA2LE,CAAO;AAAA;AAAA;AAAA,KAG1N,CAAC;AAAA,EACJ;AACF;AAjSaN,EACK,SAAS,CAACQ,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA8NnD;AAE0BC,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GAjOdZ,EAiOgB,WAAA,SAAA,CAAA;AACEW,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAlOhBZ,EAkOkB,WAAA,WAAA,CAAA;AACeW,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAnO/BZ,EAmOiC,WAAA,YAAA,CAAA;AACAW,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApO/BZ,EAoOiC,WAAA,aAAA,CAAA;AACAW,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArO/BZ,EAqOiC,WAAA,aAAA,CAAA;AACAW,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtO/BZ,EAsOiC,WAAA,aAAA,CAAA;AAChCW,EAAA;AAAA,EAAXC,EAAA;AAAS,GAvOCZ,EAuOC,WAAA,aAAA,CAAA;AAvODA,IAANW,EAAA;AAAA,EADNE,EAAc,SAAS;AAAA,GACXb,CAAA;"}

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

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+/** Option for cg-listbox. */
+export interface ListboxOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+    group?: string;
+}
+/**
+ * <cg-listbox> — Selectable option list with single or multi-select, keyboard nav, and type-ahead.
+ *
+ * @fires {CustomEvent<{value: string | string[]}>} cg-change - When selection changes
+ */
+export declare class CgListbox extends LitElement {
+    static styles: import('lit').CSSResult[];
+    options: ListboxOption[];
+    value: string | string[];
+    multiple: boolean;
+    checkPosition: 'left' | 'right';
+    label: string;
+    emptyText: string;
+    private _highlightedIndex;
+    private _typeBuffer;
+    private _typeTimer;
+    private _getSelected;
+    private _enabledOptions;
+    private _select;
+    private _handleKeydown;
+    private _scrollToHighlighted;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-listbox': CgListbox;
+    }
+}
+//# sourceMappingURL=cg-listbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-listbox.d.ts","sourceRoot":"","sources":["../../../src/components/cg-listbox/cg-listbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,6BAA6B;AAC7B,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BAgHnB;IAEwB,OAAO,EAAE,aAAa,EAAE,CAAM;IAC7C,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAM;IACE,QAAQ,UAAS;IAChC,aAAa,EAAE,MAAM,GAAG,OAAO,CAAW;IAC3D,KAAK,SAAM;IACX,SAAS,SAAgB;IAE5B,OAAO,CAAC,iBAAiB,CAAM;IACxC,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,UAAU,CAAK;IAEvB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,OAAO;IAsBf,OAAO,CAAC,cAAc;IAyDtB,OAAO,CAAC,oBAAoB;IAOnB,MAAM;CAgDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,YAAY,EAAE,SAAS,CAAC;KAAE;CAC7D"}