@cognivo/components 0.8.0

package/dist/components/cg-empty-state/cg-empty-state.js

@@ -0,0 +1,201 @@
+import { css as g, LitElement as v, svg as a, nothing as l, html as h } from "lit";
+import { property as i, customElement as u } from "lit/decorators.js";
+import { h as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var y = Object.defineProperty, m = Object.getOwnPropertyDescriptor, n = (c, e, o, s) => {
+  for (var t = s > 1 ? void 0 : s ? m(e, o) : e, d = c.length - 1, p; d >= 0; d--)
+    (p = c[d]) && (t = (s ? p(e, o, t) : p(t)) || t);
+  return s && t && y(e, o, t), t;
+};
+let r = class extends v {
+  constructor() {
+    super(...arguments), this.variant = "default", this.container = "none", this.title = "", this.description = "", this.icon = "";
+  }
+  _defaultIcon() {
+    switch (this.variant) {
+      case "search":
+        return a`
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="11" cy="11" r="8"></circle>
+            <path d="m21 21-4.3-4.3"></path>
+          </svg>
+        `;
+      case "error":
+        return a`
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10"></circle>
+            <line x1="12" y1="8" x2="12" y2="12"></line>
+            <line x1="12" y1="16" x2="12.01" y2="16"></line>
+          </svg>
+        `;
+      case "success":
+        return a`
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+            <polyline points="22 4 12 14.01 9 11.01"></polyline>
+          </svg>
+        `;
+      case "info":
+        return a`
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10"></circle>
+            <line x1="12" y1="16" x2="12" y2="12"></line>
+            <line x1="12" y1="8" x2="12.01" y2="8"></line>
+          </svg>
+        `;
+      case "ai":
+        return a`
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 3l1.9 4.6L18.5 9.5l-4.6 1.9L12 16l-1.9-4.6L5.5 9.5l4.6-1.9z"></path>
+            <path d="M19 14l.9 2.2L22 17l-2.1.8L19 20l-.9-2.2L16 17l2.1-.8z"></path>
+          </svg>
+        `;
+      default:
+        return a`
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
+            <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path>
+          </svg>
+        `;
+    }
+  }
+  render() {
+    const c = this.variant === "error" ? "alert" : "status", e = this.title ? "es-title" : void 0, o = this.description ? "es-desc" : void 0;
+    return h`
+      <div
+        class="root"
+        role=${c}
+        aria-labelledby=${e ?? l}
+        aria-describedby=${o ?? l}
+      >
+        <div class="icon-wrap" aria-hidden="true">
+          <slot name="icon">${this._defaultIcon()}</slot>
+        </div>
+        ${this.title ? h`<h3 id=${e} class="title">${this.title}</h3>` : l}
+        ${this.description ? h`<p id=${o} class="description">${this.description}</p>` : l}
+        <slot></slot>
+        <div class="actions">
+          <slot name="actions"></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+r.styles = [f, b, g`
+    :host {
+      width: 100%;
+    }
+
+    .root {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-component-empty-state-padding);
+      color: var(--cg-color-surface-container-text);
+      font-family: var(--cg-font-family-primary);
+    }
+
+    /* Container variants — wrap the content in a card-like or
+       dashed-placeholder shell. Default container="none" keeps the bare
+       centered layout (current behaviour). */
+
+    /* Card: solid bg + 1px border + radius. Matches cg-card variant=
+       "elevated" treatment so empty states inside dashboards read as
+       proper sections rather than floaty centred text. */
+    :host([container="card"]) .root {
+      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-card-radius);
+    }
+
+    /* Dashed: drop-zone / "click to add" placeholder feel. Transparent
+       bg, dashed border, slightly stronger border on hover so the zone
+       reads as actionable when wrapped in a clickable parent. */
+    :host([container="dashed"]) .root {
+      background: transparent;
+      border: var(--cg-border-width-100) dashed var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-card-radius);
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    :host([container="dashed"]) .root:hover {
+      border-color: var(--cg-color-surface-cards-hover-border);
+    }
+
+    .icon-wrap {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--cg-component-empty-state-icon-size);
+      height: var(--cg-component-empty-state-icon-size);
+      color: var(--cg-color-surface-container-outlined);
+      margin-bottom: var(--cg-spacing-4);
+    }
+    .icon-wrap svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    :host([variant="error"]) .icon-wrap { color: var(--cg-color-status-error-text-default); }
+    :host([variant="success"]) .icon-wrap { color: var(--cg-color-status-success-text-default); }
+    :host([variant="info"]) .icon-wrap { color: var(--cg-color-status-info-text-default); }
+
+    /* AI variant — accent bubble around the icon, AI brand color */
+    :host([variant="ai"]) .icon-wrap {
+      background: var(--cg-overlay-accent-subtle);
+      border: var(--cg-border-width-50) solid var(--cg-overlay-accent-strong);
+      border-radius: var(--cg-border-radius-full);
+      color: var(--cg-color-accent-text);
+      padding: var(--cg-spacing-12);
+      box-sizing: border-box;
+    }
+
+    .title {
+      font-size: var(--cg-font-size-md);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+      line-height: var(--cg-line-height-snug);
+      margin: 0;
+    }
+
+    .description {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-container-outlined);
+      line-height: var(--cg-line-height-relaxed);
+      margin: 0;
+      max-width: 52ch;
+    }
+
+    .actions {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      gap: var(--cg-spacing-12);
+      margin-top: var(--cg-spacing-8);
+    }
+    .actions:empty { display: none; }
+  `];
+n([
+  i({ reflect: !0 })
+], r.prototype, "variant", 2);
+n([
+  i({ reflect: !0 })
+], r.prototype, "container", 2);
+n([
+  i()
+], r.prototype, "title", 2);
+n([
+  i()
+], r.prototype, "description", 2);
+n([
+  i()
+], r.prototype, "icon", 2);
+r = n([
+  u("cg-empty-state")
+], r);
+export {
+  r as CgEmptyState
+};
+//# sourceMappingURL=cg-empty-state.js.map

package/dist/components/cg-empty-state/cg-empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-empty-state.js","sources":["../../../src/components/cg-empty-state/cg-empty-state.ts"],"sourcesContent":["import { LitElement, html, css, nothing, svg } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-empty-state\n * Empty / no-results / error state with icon, title, description, and\n * actions slot. Use `container` to wrap the content in a card or dashed\n * placeholder zone — useful when the empty state sits inside a panel\n * where bare centered text would feel floaty.\n *\n * @example\n * ```html\n * <!-- bare (default) — centered content, no container -->\n * <cg-empty-state variant=\"search\" title=\"No results\" description=\"Try a different query\">\n *   <cg-button slot=\"actions\">Clear filters</cg-button>\n * </cg-empty-state>\n *\n * <!-- card-wrapped — solid bg + border, like cg-card variant=\"elevated\" -->\n * <cg-empty-state container=\"card\" title=\"No customers yet\"\n *   description=\"When you add your first customer, they will appear here.\">\n *   <cg-button slot=\"actions\" variant=\"primary\">Add customer</cg-button>\n * </cg-empty-state>\n *\n * <!-- dashed placeholder — drop-zone / \"click to add\" feel -->\n * <cg-empty-state container=\"dashed\" variant=\"ai\" title=\"Drop a file or paste text\"\n *   description=\"The AI will summarize it for you.\">\n *   <cg-button slot=\"actions\" variant=\"tertiary\">Browse files</cg-button>\n * </cg-empty-state>\n * ```\n *\n * @slot icon - Override the default icon\n * @slot - Extra body content below description\n * @slot actions - Buttons row at the bottom\n */\n@customElement('cg-empty-state')\nexport class CgEmptyState extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      width: 100%;\n    }\n\n    .root {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      text-align: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-component-empty-state-padding);\n      color: var(--cg-color-surface-container-text);\n      font-family: var(--cg-font-family-primary);\n    }\n\n    /* Container variants — wrap the content in a card-like or\n       dashed-placeholder shell. Default container=\"none\" keeps the bare\n       centered layout (current behaviour). */\n\n    /* Card: solid bg + 1px border + radius. Matches cg-card variant=\n       \"elevated\" treatment so empty states inside dashboards read as\n       proper sections rather than floaty centred text. */\n    :host([container=\"card\"]) .root {\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-card-radius);\n    }\n\n    /* Dashed: drop-zone / \"click to add\" placeholder feel. Transparent\n       bg, dashed border, slightly stronger border on hover so the zone\n       reads as actionable when wrapped in a clickable parent. */\n    :host([container=\"dashed\"]) .root {\n      background: transparent;\n      border: var(--cg-border-width-100) dashed var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-card-radius);\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    :host([container=\"dashed\"]) .root:hover {\n      border-color: var(--cg-color-surface-cards-hover-border);\n    }\n\n    .icon-wrap {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-component-empty-state-icon-size);\n      height: var(--cg-component-empty-state-icon-size);\n      color: var(--cg-color-surface-container-outlined);\n      margin-bottom: var(--cg-spacing-4);\n    }\n    .icon-wrap svg {\n      width: 100%;\n      height: 100%;\n    }\n\n    :host([variant=\"error\"]) .icon-wrap { color: var(--cg-color-status-error-text-default); }\n    :host([variant=\"success\"]) .icon-wrap { color: var(--cg-color-status-success-text-default); }\n    :host([variant=\"info\"]) .icon-wrap { color: var(--cg-color-status-info-text-default); }\n\n    /* AI variant — accent bubble around the icon, AI brand color */\n    :host([variant=\"ai\"]) .icon-wrap {\n      background: var(--cg-overlay-accent-subtle);\n      border: var(--cg-border-width-50) solid var(--cg-overlay-accent-strong);\n      border-radius: var(--cg-border-radius-full);\n      color: var(--cg-color-accent-text);\n      padding: var(--cg-spacing-12);\n      box-sizing: border-box;\n    }\n\n    .title {\n      font-size: var(--cg-font-size-md);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-snug);\n      margin: 0;\n    }\n\n    .description {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-relaxed);\n      margin: 0;\n      max-width: 52ch;\n    }\n\n    .actions {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      justify-content: center;\n      gap: var(--cg-spacing-12);\n      margin-top: var(--cg-spacing-8);\n    }\n    .actions:empty { display: none; }\n  `];\n\n  @property({ reflect: true }) variant: 'default' | 'search' | 'error' | 'success' | 'info' | 'ai' = 'default';\n  /**\n   * Wrap the empty state in a container shell:\n   *   none   (default) — centered content with padding only (current behaviour)\n   *   card             — solid bg + 1px border + radius (like cg-card)\n   *   dashed           — dashed border + transparent bg (drop-zone / \"click to add\")\n   */\n  @property({ reflect: true }) container: 'none' | 'card' | 'dashed' = 'none';\n  @property() override title = '';\n  @property() description = '';\n  @property() icon = '';\n\n  private _defaultIcon() {\n    switch (this.variant) {\n      case 'search':\n        return svg`\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n            <path d=\"m21 21-4.3-4.3\"></path>\n          </svg>\n        `;\n      case 'error':\n        return svg`\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n            <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"></line>\n            <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"></line>\n          </svg>\n        `;\n      case 'success':\n        return svg`\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"></path>\n            <polyline points=\"22 4 12 14.01 9 11.01\"></polyline>\n          </svg>\n        `;\n      case 'info':\n        return svg`\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n            <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"></line>\n            <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"></line>\n          </svg>\n        `;\n      case 'ai':\n        return svg`\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M12 3l1.9 4.6L18.5 9.5l-4.6 1.9L12 16l-1.9-4.6L5.5 9.5l4.6-1.9z\"></path>\n            <path d=\"M19 14l.9 2.2L22 17l-2.1.8L19 20l-.9-2.2L16 17l2.1-.8z\"></path>\n          </svg>\n        `;\n      default:\n        return svg`\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <polyline points=\"22 12 16 12 14 15 10 15 8 12 2 12\"></polyline>\n            <path d=\"M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z\"></path>\n          </svg>\n        `;\n    }\n  }\n\n  override render() {\n    const role = this.variant === 'error' ? 'alert' : 'status';\n    const titleId = this.title ? 'es-title' : undefined;\n    const descId = this.description ? 'es-desc' : undefined;\n    return html`\n      <div\n        class=\"root\"\n        role=${role}\n        aria-labelledby=${titleId ?? nothing}\n        aria-describedby=${descId ?? nothing}\n      >\n        <div class=\"icon-wrap\" aria-hidden=\"true\">\n          <slot name=\"icon\">${this._defaultIcon()}</slot>\n        </div>\n        ${this.title ? html`<h3 id=${titleId!} class=\"title\">${this.title}</h3>` : nothing}\n        ${this.description ? html`<p id=${descId!} class=\"description\">${this.description}</p>` : nothing}\n        <slot></slot>\n        <div class=\"actions\">\n          <slot name=\"actions\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-empty-state': CgEmptyState;\n  }\n}\n"],"names":["CgEmptyState","LitElement","svg","role","titleId","descId","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAoCO,IAAMA,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAmGwB,KAAA,UAAsE,WAOtE,KAAA,YAAwC,QACzD,KAAS,QAAQ,IACjB,KAAA,cAAc,IACd,KAAA,OAAO;AAAA,EAAA;AAAA,EAEX,eAAe;AACrB,YAAQ,KAAK,SAAA;AAAA,MACX,KAAK;AACH,eAAOC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMT,KAAK;AACH,eAAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOT,KAAK;AACH,eAAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMT,KAAK;AACH,eAAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOT,KAAK;AACH,eAAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMT;AACE,eAAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAOb;AAAA,EAES,SAAS;AAChB,UAAMC,IAAO,KAAK,YAAY,UAAU,UAAU,UAC5CC,IAAU,KAAK,QAAQ,aAAa,QACpCC,IAAS,KAAK,cAAc,YAAY;AAC9C,WAAOC;AAAA;AAAA;AAAA,eAGIH,CAAI;AAAA,0BACOC,KAAWG,CAAO;AAAA,2BACjBF,KAAUE,CAAO;AAAA;AAAA;AAAA,8BAGd,KAAK,cAAc;AAAA;AAAA,UAEvC,KAAK,QAAQD,WAAcF,CAAQ,kBAAkB,KAAK,KAAK,UAAUG,CAAO;AAAA,UAChF,KAAK,cAAcD,UAAaD,CAAO,wBAAwB,KAAK,WAAW,SAASE,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOvG;AACF;AAvLaP,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,GAgGnD;AAE4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAnGhBZ,EAmGkB,WAAA,WAAA,CAAA;AAOAW,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA1GhBZ,EA0GkB,WAAA,aAAA,CAAA;AACRW,EAAA;AAAA,EAApBC,EAAA;AAAS,GA3GCZ,EA2GU,WAAA,SAAA,CAAA;AACTW,EAAA;AAAA,EAAXC,EAAA;AAAS,GA5GCZ,EA4GC,WAAA,eAAA,CAAA;AACAW,EAAA;AAAA,EAAXC,EAAA;AAAS,GA7GCZ,EA6GC,WAAA,QAAA,CAAA;AA7GDA,IAANW,EAAA;AAAA,EADNE,EAAc,gBAAgB;AAAA,GAClBb,CAAA;"}

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

@@ -0,0 +1,101 @@
+import { LitElement } from 'lit';
+/** Per-file upload status driven by the consumer via `setFileStatus()`. */
+export type FileStatus = 'idle' | 'uploading' | 'done' | 'error';
+export interface FileStatusInfo {
+    state: FileStatus;
+    /** 0–100 — only used when state === 'uploading' */
+    progress?: number;
+    /** Optional error message, surfaced when state === 'error' */
+    error?: string;
+}
+/**
+ * @element cg-file-input
+ * File picker with drag-and-drop, paste-from-clipboard, image thumbnail
+ * previews, file-type-aware icons, three sizes (sm | md | lg) plus a compact
+ * button-style variant. Live-region announcements + focus management included.
+ *
+ * Consumers drive per-file upload state via `setFileStatus(file, info)`; the
+ * component renders a status pill + progress bar accordingly. The component
+ * itself does not perform uploads — it's a UI primitive.
+ *
+ * @example
+ * ```html
+ * <cg-file-input label="Upload files" accept=".pdf,.png,.jpg" multiple max-size="5242880"></cg-file-input>
+ * <cg-file-input variant="compact" multiple></cg-file-input>
+ * <cg-file-input size="lg" accept="image/*" multiple paste></cg-file-input>
+ * <cg-file-input capture="environment" accept="image/*"></cg-file-input>
+ * ```
+ *
+ * @fires {CustomEvent<{files: File[]}>} cg-file-change
+ * @fires {CustomEvent<{files: File[], reason: string}>} cg-file-reject
+ * @fires {CustomEvent<{file: File}>} cg-file-remove
+ * @fires {CustomEvent<{}>} cg-file-clear - All files cleared via the bulk action
+ */
+export declare class CgFileInput extends LitElement {
+    static styles: import('lit').CSSResult[];
+    static formAssociated: boolean;
+    private _internals?;
+    constructor();
+    label: string;
+    placeholder: string;
+    helper: string;
+    accept: string;
+    name: string;
+    multiple: boolean;
+    maxSize: number;
+    maxFiles: number;
+    disabled: boolean;
+    error: boolean;
+    success: boolean;
+    size: 'sm' | 'md' | 'lg';
+    variant: 'dropzone' | 'compact';
+    /** Mobile camera capture: 'user' (front) or 'environment' (rear). Pass-through to <input>. */
+    capture: '' | 'user' | 'environment';
+    /** Accept files pasted from the clipboard (Ctrl/Cmd+V) when no editable element is focused. */
+    paste: boolean;
+    private _files;
+    private _dragging;
+    private _announcement;
+    private _inputEl;
+    private _previews;
+    private _statusMap;
+    private _formatSize;
+    /** Categorize a file by MIME / extension into one of: image | pdf | doc | media | archive | default. */
+    private _fileKind;
+    private _previewFor;
+    private _revokePreview;
+    private _validateFiles;
+    private _addFiles;
+    private _updateFormValue;
+    private _removeFile;
+    /** Public: clear all selected files. Fires `cg-file-clear` and `cg-file-change`. */
+    clearAll(): void;
+    /**
+     * Public: set the upload status for a given file. Renders a status pill +
+     * progress bar inside the corresponding chip. The component does not perform
+     * uploads — call this from your upload pipeline.
+     */
+    setFileStatus(file: File, info: FileStatusInfo): void;
+    private _announce;
+    private _handlePaste;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleChange;
+    private _dragCounter;
+    private _handleDrop;
+    private _handleDragEnter;
+    private _handleDragOver;
+    private _handleDragLeave;
+    private _handleClick;
+    private _handleKeydown;
+    /** Render a category-aware SVG icon for a chip thumbnail. */
+    private _renderKindIcon;
+    private _renderTrigger;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-file-input': CgFileInput;
+    }
+}
+//# sourceMappingURL=cg-file-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-file-input.d.ts","sourceRoot":"","sources":["../../../src/components/cg-file-input/cg-file-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA2B,MAAM,KAAK,CAAC;AAI1D,2EAA2E;AAC3E,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;AACjE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,UAAU,CAAC;IAClB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAuTnB;IAEH,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAC,CAAmB;;IAS1B,KAAK,SAAM;IACX,WAAW,SAAwC;IACnD,MAAM,SAAM;IACZ,MAAM,SAAM;IACZ,IAAI,SAAM;IACO,QAAQ,UAAS;IACK,OAAO,SAAK;IACX,QAAQ,SAAK;IACrB,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,OAAO,UAAS;IAC/B,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,UAAU,GAAG,SAAS,CAAc;IAC1E,8FAA8F;IAClF,OAAO,EAAE,EAAE,GAAG,MAAM,GAAG,aAAa,CAAM;IACtD,+FAA+F;IAClE,KAAK,UAAS;IAElC,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,aAAa,CAAM;IAEP,OAAO,CAAC,QAAQ,CAAoB;IAEjE,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,UAAU,CAAmC;IAErD,OAAO,CAAC,WAAW;IAMnB,wGAAwG;IACxG,OAAO,CAAC,SAAS;IAejB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,cAAc;IAqBtB,OAAO,CAAC,SAAS;IA+BjB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,WAAW;IAgCnB,oFAAoF;IACpF,QAAQ,IAAI,IAAI;IAmBhB;;;;OAIG;IACH,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,GAAG,IAAI;IAQrD,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,YAAY,CAkBlB;IAEO,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAQrC,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,YAAY,CAAK;IAEzB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,cAAc;IAQtB,6DAA6D;IAC7D,OAAO,CAAC,eAAe;IA6BvB,OAAO,CAAC,cAAc;IAsDb,MAAM;CAoFhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}