@cognivo/components 0.8.0

package/dist/components/cg-file-input/cg-file-input.js

@@ -0,0 +1,684 @@
+import { css as p, LitElement as v, svg as g, nothing as d, html as c } from "lit";
+import { property as l, state as h, query as f, customElement as b } from "lit/decorators.js";
+import { h as m, r as _ } from "../../chunks/premium.css-9I4kHrsl.js";
+var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, n = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? y(t, a) : t, i = e.length - 1, u; i >= 0; i--)
+    (u = e[i]) && (r = (s ? u(t, a, r) : u(r)) || r);
+  return s && r && w(t, a, r), r;
+};
+let o = class extends v {
+  constructor() {
+    super(), this.label = "", this.placeholder = "Drop files here or click to browse", this.helper = "", this.accept = "", this.name = "", this.multiple = !1, this.maxSize = 0, this.maxFiles = 0, this.disabled = !1, this.error = !1, this.success = !1, this.size = "md", this.variant = "dropzone", this.capture = "", this.paste = !1, this._files = [], this._dragging = !1, this._announcement = "", this._previews = /* @__PURE__ */ new Map(), this._statusMap = /* @__PURE__ */ new Map(), this._handlePaste = (e) => {
+      if (!this.paste || this.disabled) return;
+      const t = document.activeElement;
+      if (!!t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable || // shadow DOM: check the deepest active element
+      t.shadowRoot?.activeElement instanceof HTMLElement) && t !== this) return;
+      const s = e.clipboardData?.files;
+      s && s.length > 0 && (e.preventDefault(), this._addFiles(s));
+    }, this._dragCounter = 0, typeof this.attachInternals == "function" && (this._internals = this.attachInternals());
+  }
+  _formatSize(e) {
+    return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(2)} MB`;
+  }
+  /** Categorize a file by MIME / extension into one of: image | pdf | doc | media | archive | default. */
+  _fileKind(e) {
+    const t = e.type, a = e.name.toLowerCase();
+    return t.startsWith("image/") ? "image" : t === "application/pdf" || a.endsWith(".pdf") ? "pdf" : t.startsWith("video/") || t.startsWith("audio/") ? "media" : /\.(zip|rar|7z|tar|gz|bz2)$/i.test(a) ? "archive" : /\.(doc|docx|xls|xlsx|ppt|pptx|txt|md|rtf|csv)$/i.test(a) || t.startsWith("text/") || t.includes("word") || t.includes("sheet") || t.includes("presentation") ? "doc" : "default";
+  }
+  _previewFor(e) {
+    if (!e.type.startsWith("image/")) return null;
+    let t = this._previews.get(e);
+    return t || (t = URL.createObjectURL(e), this._previews.set(e, t)), t;
+  }
+  _revokePreview(e) {
+    const t = this._previews.get(e);
+    t && (URL.revokeObjectURL(t), this._previews.delete(e));
+  }
+  _validateFiles(e) {
+    const t = [], a = [];
+    let s = "";
+    for (const r of e) {
+      if (this.maxSize > 0 && r.size > this.maxSize) {
+        a.push(r), s = `File exceeds ${this._formatSize(this.maxSize)}`;
+        continue;
+      }
+      t.push(r);
+    }
+    if (this.maxFiles > 0 && this._files.length + t.length > this.maxFiles) {
+      const r = this.maxFiles - this._files.length;
+      a.push(...t.slice(r)), t.splice(r), s = `Maximum ${this.maxFiles} files allowed`;
+    }
+    return { valid: t, rejected: a, reason: s };
+  }
+  _addFiles(e) {
+    if (!e) return;
+    const t = Array.from(e), { valid: a, rejected: s, reason: r } = this._validateFiles(t);
+    s.length > 0 && (this._announce(`${s.length} file${s.length === 1 ? "" : "s"} rejected: ${r}`), this.dispatchEvent(new CustomEvent("cg-file-reject", {
+      detail: { files: s, reason: r },
+      bubbles: !0,
+      composed: !0
+    }))), a.length > 0 && (this.multiple ? this._files = [...this._files, ...a] : (this._files.forEach((i) => {
+      this._revokePreview(i), this._statusMap.delete(i);
+    }), this._files = a.slice(0, 1)), this._announce(`${a.length} file${a.length === 1 ? "" : "s"} added: ${a.map((i) => i.name).join(", ")}`), this._updateFormValue(), this.dispatchEvent(new CustomEvent("cg-file-change", {
+      detail: { files: this._files },
+      bubbles: !0,
+      composed: !0
+    })));
+  }
+  _updateFormValue() {
+    if (!this._internals) return;
+    const e = new FormData();
+    for (const t of this._files)
+      e.append(this.name || "files", t);
+    this._internals.setFormValue(e);
+  }
+  _removeFile(e) {
+    const t = this._files[e];
+    if (!t) return;
+    this._revokePreview(t), this._statusMap.delete(t);
+    const a = this._files.length === 1, s = e >= this._files.length - 1 ? e - 1 : e;
+    this._files = this._files.filter((r, i) => i !== e), this._announce(`Removed ${t.name}`), this._updateFormValue(), this.dispatchEvent(new CustomEvent("cg-file-remove", {
+      detail: { file: t },
+      bubbles: !0,
+      composed: !0
+    })), this.dispatchEvent(new CustomEvent("cg-file-change", {
+      detail: { files: this._files },
+      bubbles: !0,
+      composed: !0
+    })), this.updateComplete.then(() => {
+      a ? this.shadowRoot?.querySelector(".dropzone, .compact")?.focus() : this.shadowRoot?.querySelectorAll(".file-remove")?.[Math.max(0, s)]?.focus();
+    });
+  }
+  /** Public: clear all selected files. Fires `cg-file-clear` and `cg-file-change`. */
+  clearAll() {
+    if (this._files.length === 0) return;
+    this._files.forEach((t) => {
+      this._revokePreview(t), this._statusMap.delete(t);
+    });
+    const e = this._files.length;
+    this._files = [], this._announce(`Cleared ${e} file${e === 1 ? "" : "s"}`), this._updateFormValue(), this.dispatchEvent(new CustomEvent("cg-file-clear", { bubbles: !0, composed: !0, detail: {} })), this.dispatchEvent(new CustomEvent("cg-file-change", {
+      detail: { files: this._files },
+      bubbles: !0,
+      composed: !0
+    })), this.updateComplete.then(() => {
+      this.shadowRoot?.querySelector(".dropzone, .compact")?.focus();
+    });
+  }
+  /**
+   * 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(e, t) {
+    this._files.includes(e) && (this._statusMap.set(e, t), this.requestUpdate(), t.state === "done" ? this._announce(`${e.name} uploaded`) : t.state === "error" && this._announce(`${e.name} failed: ${t.error ?? "upload error"}`));
+  }
+  _announce(e) {
+    this._announcement = "", requestAnimationFrame(() => {
+      this._announcement = e;
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("paste", this._handlePaste);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), window.removeEventListener("paste", this._handlePaste), this._previews.forEach((e) => URL.revokeObjectURL(e)), this._previews.clear(), this._statusMap.clear();
+  }
+  _handleChange(e) {
+    this._addFiles(e.target.files);
+  }
+  _handleDrop(e) {
+    e.preventDefault(), this._dragging = !1, this._dragCounter = 0, !this.disabled && this._addFiles(e.dataTransfer?.files ?? null);
+  }
+  _handleDragEnter(e) {
+    e.preventDefault(), !this.disabled && (this._dragCounter++, this._dragging = !0);
+  }
+  _handleDragOver(e) {
+    e.preventDefault();
+  }
+  _handleDragLeave() {
+    this._dragCounter = Math.max(0, this._dragCounter - 1), this._dragCounter === 0 && (this._dragging = !1);
+  }
+  _handleClick() {
+    this.disabled || this._inputEl?.click();
+  }
+  _handleKeydown(e) {
+    this.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._inputEl?.click());
+  }
+  /** Render a category-aware SVG icon for a chip thumbnail. */
+  _renderKindIcon(e) {
+    return g`
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+        ${e === "image" ? g`
+          <rect x="3" y="3" width="18" height="18" rx="2"/>
+          <circle cx="8.5" cy="8.5" r="1.5"/>
+          <path d="M21 15l-5-5L5 21"/>
+        ` : e === "pdf" ? g`
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+          <polyline points="14 2 14 8 20 8"/>
+          <text x="8" y="17" font-size="6" font-family="sans-serif" font-weight="700" fill="currentColor" stroke="none">PDF</text>
+        ` : e === "doc" ? g`
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+          <polyline points="14 2 14 8 20 8"/>
+          <line x1="8" y1="13" x2="16" y2="13"/>
+          <line x1="8" y1="17" x2="14" y2="17"/>
+        ` : e === "media" ? g`
+          <polygon points="5 3 19 12 5 21 5 3" fill="currentColor"/>
+        ` : e === "archive" ? g`
+          <rect x="3" y="3" width="18" height="18" rx="2"/>
+          <line x1="12" y1="3" x2="12" y2="21" stroke-dasharray="2 2"/>
+        ` : g`
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+          <polyline points="14 2 14 8 20 8"/>
+        `}
+      </svg>
+    `;
+  }
+  _renderTrigger() {
+    if (this.variant === "compact") {
+      const e = this._files.length;
+      return c`
+        <button
+          type="button"
+          class="compact ${this._dragging ? "dragging" : ""} ${this.disabled ? "disabled" : ""}"
+          ?disabled=${this.disabled}
+          @click=${this._handleClick}
+          @drop=${this._handleDrop}
+          @dragenter=${this._handleDragEnter}
+          @dragover=${this._handleDragOver}
+          @dragleave=${this._handleDragLeave}
+        >
+          <span class="compact-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
+            </svg>
+          </span>
+          <span>${this._dragging ? "Drop to attach" : e > 0 ? "Add more files" : "Attach files"}</span>
+          ${e > 0 ? c`<span class="compact-count">${e}</span>` : d}
+        </button>
+      `;
+    }
+    return c`
+      <div
+        class="dropzone ${this._dragging ? "dragging" : ""} ${this.disabled ? "disabled" : ""}"
+        role="button"
+        tabindex=${this.disabled ? "-1" : "0"}
+        aria-label=${this.label || "File upload"}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        @click=${this._handleClick}
+        @keydown=${this._handleKeydown}
+        @drop=${this._handleDrop}
+        @dragenter=${this._handleDragEnter}
+        @dragover=${this._handleDragOver}
+        @dragleave=${this._handleDragLeave}
+      >
+        <div class="icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+            <polyline points="17 8 12 3 7 8"/>
+            <line x1="12" y1="3" x2="12" y2="15"/>
+          </svg>
+        </div>
+        <div class="title">${this.placeholder}</div>
+        <div class="subtitles">
+          ${this.accept ? c`<div class="subtitle">Accepted: ${this.accept}</div>` : d}
+          ${this.maxSize > 0 ? c`<div class="subtitle">Max size: ${this._formatSize(this.maxSize)}</div>` : d}
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    const e = this._files.length;
+    return c`
+      ${this.label ? c`<label>${this.label}</label>` : d}
+      ${this._renderTrigger()}
+      <input
+        type="file"
+        accept=${this.accept}
+        capture=${this.capture || d}
+        ?multiple=${this.multiple}
+        ?disabled=${this.disabled}
+        @change=${this._handleChange}
+      />
+      ${e >= 2 ? c`
+        <div class="bulk-actions">
+          <span class="bulk-count">${e} files</span>
+          <button
+            type="button"
+            class="bulk-clear"
+            @click=${() => this.clearAll()}
+          >
+            <svg width="12" height="12" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+              <path d="M10.5 3.5l-7 7M3.5 3.5l7 7"/>
+            </svg>
+            Clear all
+          </button>
+        </div>
+      ` : d}
+      ${e > 0 ? c`
+        <div class="files">
+          ${this._files.map((t, a) => {
+      const s = this._fileKind(t), r = this._previewFor(t), i = this._statusMap.get(t);
+      return c`
+              <div class="file">
+                <div class="file-thumb ${s} ${r ? "preview" : ""}">
+                  ${r ? c`<img src=${r} alt="" />` : this._renderKindIcon(s)}
+                </div>
+                <div class="file-info">
+                  <span class="file-name">${t.name}</span>
+                  <span class="file-size">
+                    ${this._formatSize(t.size)}
+                    ${i?.state === "error" && i.error ? c` · ${i.error}` : d}
+                  </span>
+                  ${i?.state === "uploading" ? c`
+                    <div class="progress-track" role="progressbar"
+                      aria-valuenow=${i.progress ?? 0}
+                      aria-valuemin="0"
+                      aria-valuemax="100"
+                      aria-label=${`Uploading ${t.name}`}
+                    >
+                      <div class="progress-fill" style="width: ${Math.max(0, Math.min(100, i.progress ?? 0))}%"></div>
+                    </div>
+                  ` : d}
+                </div>
+                ${i && i.state !== "idle" ? c`
+                  <span class="status-pill ${i.state}">
+                    ${i.state === "uploading" ? `${Math.round(i.progress ?? 0)}%` : i.state === "done" ? "Done" : "Failed"}
+                  </span>
+                ` : d}
+                <button
+                  type="button"
+                  class="file-remove"
+                  aria-label=${`Remove ${t.name}`}
+                  @click=${() => this._removeFile(a)}
+                >
+                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round">
+                    <path d="M10.5 3.5l-7 7M3.5 3.5l7 7"/>
+                  </svg>
+                </button>
+              </div>
+            `;
+    })}
+        </div>
+      ` : d}
+      ${this.helper ? c`<div class="helper">${this.helper}</div>` : d}
+      <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">${this._announcement}</div>
+    `;
+  }
+};
+o.styles = [m, _, p`
+    :host { display: block; }
+
+    label {
+      display: block;
+      margin-bottom: var(--cg-spacing-6);
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    /* ── Dropzone variant (default) ── */
+    .dropzone {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-32) var(--cg-spacing-24);
+      background: var(--cg-color-input-background-default);
+      border: var(--cg-border-width-100) dashed var(--cg-color-input-border-default);
+      border-radius: var(--cg-component-file-input-radius);
+      color: var(--cg-color-surface-container-outlined);
+      cursor: pointer;
+      text-align: center;
+      transition:
+        border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        background var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    :host([size="sm"]) .dropzone { min-height: var(--cg-component-file-input-min-height-sm); padding: var(--cg-spacing-20) var(--cg-spacing-16); gap: var(--cg-spacing-8); }
+    :host([size="md"]) .dropzone { min-height: var(--cg-component-file-input-min-height-md); }
+    :host([size="lg"]) .dropzone { min-height: var(--cg-component-file-input-min-height-lg); padding: var(--cg-spacing-40) var(--cg-spacing-32); gap: var(--cg-spacing-16); }
+
+    .dropzone:hover:not(.disabled) {
+      border-color: var(--cg-color-action-primary-border-default);
+      background: var(--cg-overlay-accent-subtle);
+    }
+    .dropzone.dragging {
+      border-style: solid;
+      border-color: var(--cg-color-action-primary-border-default);
+      background: var(--cg-overlay-accent-light);
+      color: var(--cg-color-surface-base-text);
+      box-shadow: 0 0 0 var(--cg-spacing-4) var(--cg-overlay-accent-subtle);
+    }
+    .dropzone:focus-visible {
+      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);
+    }
+    .dropzone.disabled { opacity: 0.5; cursor: not-allowed; }
+
+    :host([error]) .dropzone { border-color: var(--cg-color-status-error-border-default); }
+    :host([success]) .dropzone { border-color: var(--cg-color-status-success-border-default); }
+
+    .icon {
+      color: var(--cg-color-accent-text);
+      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-spring);
+    }
+    .dropzone:hover:not(.disabled) .icon {
+      transform: translateY(calc(var(--cg-spacing-4) * -1));
+    }
+    .dropzone.dragging .icon {
+      transform: scale(1.15) translateY(calc(var(--cg-spacing-2) * -1));
+    }
+    .icon svg { width: var(--cg-icon-size-300); height: var(--cg-icon-size-300); }
+    :host([size="sm"]) .icon svg { width: var(--cg-icon-size-200); height: var(--cg-icon-size-200); }
+    :host([size="lg"]) .icon svg { width: var(--cg-icon-size-400); height: var(--cg-icon-size-400); }
+
+    .title {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-base-text);
+    }
+    :host([size="lg"]) .title { font-size: var(--cg-font-size-base); }
+    .subtitle {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+    }
+    .subtitles { display: flex; flex-direction: column; gap: var(--cg-spacing-2); }
+
+    /* ── Compact variant — button-style with drag overlay ── */
+    .compact {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      padding: 0 var(--cg-spacing-16);
+      height: var(--cg-component-input-height-md);
+      background: var(--cg-color-input-background-default);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-component-input-radius);
+      color: var(--cg-color-surface-base-text);
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      font-family: inherit;
+      cursor: pointer;
+      transition:
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .compact:hover:not(.disabled) {
+      border-color: var(--cg-color-input-border-hover);
+      background: var(--cg-color-action-tertiary-background-hover);
+    }
+    .compact:focus-visible {
+      outline: none;
+      border-color: var(--cg-color-input-border-focus);
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    .compact.dragging {
+      border-style: dashed;
+      border-color: var(--cg-color-action-primary-border-default);
+      background: var(--cg-overlay-accent-light);
+    }
+    .compact.disabled { opacity: 0.5; cursor: not-allowed; }
+    .compact-icon { color: var(--cg-color-input-icon-default); display: flex; flex-shrink: 0; }
+    .compact-icon svg { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }
+    .compact-count {
+      margin-left: auto;
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
+      background: var(--cg-color-action-tertiary-background-hover);
+      border-radius: var(--cg-border-radius-full);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-text);
+    }
+
+    /* ── Hidden native input ── */
+    input[type="file"] {
+      position: absolute;
+      opacity: 0;
+      width: 0;
+      height: 0;
+      pointer-events: none;
+    }
+
+    /* ── File chip list ── */
+    .files {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-8);
+      margin-top: var(--cg-spacing-16);
+    }
+    @keyframes fileChipIn {
+      from { opacity: 0; transform: translateY(calc(var(--cg-spacing-4) * -1)); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .file {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      background: var(--cg-color-surface-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-100);
+      animation: fileChipIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .file:hover {
+      border-color: var(--cg-color-input-border-hover);
+    }
+    .file-thumb {
+      flex-shrink: 0;
+      width: var(--cg-spacing-32);
+      height: var(--cg-spacing-32);
+      border-radius: var(--cg-border-radius-50);
+      overflow: hidden;
+      background: var(--cg-color-surface-cards-background);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .file-thumb.preview { padding: 0; }
+    .file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+    .file-thumb svg { width: var(--cg-icon-size-150); height: var(--cg-icon-size-150); color: var(--cg-color-surface-container-outlined); }
+    .file-thumb.image svg { color: var(--cg-color-accent-text); }
+    .file-thumb.pdf svg { color: var(--cg-color-status-error-text-default); }
+    .file-thumb.doc svg { color: var(--cg-color-status-info-text-default); }
+    .file-thumb.media svg { color: var(--cg-color-status-success-text-default); }
+    .file-thumb.archive svg { color: var(--cg-color-status-warning-text-default); }
+    .file-info { flex: 1; min-width: 0; }
+    .file-name {
+      display: block;
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-base-text);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-weight: var(--cg-font-weight-medium);
+    }
+    .file-size {
+      display: block;
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+    }
+    .file-remove {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--cg-spacing-32);
+      height: var(--cg-spacing-32);
+      border: none;
+      background: none;
+      color: var(--cg-color-surface-container-outlined);
+      cursor: pointer;
+      border-radius: var(--cg-border-radius-full);
+      transition:
+        background 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);
+    }
+    .file-remove:hover {
+      background: var(--cg-color-status-error-background-default);
+      color: var(--cg-color-status-error-text-default);
+    }
+    .file-remove:active {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+
+    .helper {
+      margin-top: var(--cg-spacing-6);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+    }
+    :host([error]) .helper { color: var(--cg-color-status-error-text-default); }
+
+    /* ── Bulk actions toolbar ── */
+    .bulk-actions {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: var(--cg-spacing-12);
+      margin-bottom: calc(var(--cg-spacing-8) * -1);
+    }
+    .bulk-count {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+    }
+    .bulk-clear {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      padding: var(--cg-spacing-4) var(--cg-spacing-8);
+      border: none;
+      background: transparent;
+      color: var(--cg-color-status-error-text-default);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      font-family: inherit;
+      cursor: pointer;
+      border-radius: var(--cg-border-radius-50);
+      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .bulk-clear:hover { background: var(--cg-color-status-error-background-default); }
+    .bulk-clear:focus-visible {
+      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);
+    }
+
+    /* ── Per-file status pill + progress bar ── */
+    .status-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      flex-shrink: 0;
+    }
+    .status-pill.uploading {
+      background: var(--cg-overlay-accent-light);
+      color: var(--cg-color-accent-text);
+    }
+    .status-pill.done {
+      background: var(--cg-color-status-success-background-default);
+      color: var(--cg-color-status-success-text-default);
+    }
+    .status-pill.error {
+      background: var(--cg-color-status-error-background-default);
+      color: var(--cg-color-status-error-text-default);
+    }
+    .progress-track {
+      height: var(--cg-spacing-2);
+      margin-top: var(--cg-spacing-4);
+      background: var(--cg-color-surface-container-background);
+      border-radius: var(--cg-border-radius-full);
+      overflow: hidden;
+    }
+    .progress-fill {
+      height: 100%;
+      background: var(--cg-color-accent-text);
+      border-radius: var(--cg-border-radius-full);
+      transition: width var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);
+    }
+
+    /* ── Visually-hidden live region for screen readers ── */
+    .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;
+    }
+  `];
+o.formAssociated = !0;
+n([
+  l()
+], o.prototype, "label", 2);
+n([
+  l()
+], o.prototype, "placeholder", 2);
+n([
+  l()
+], o.prototype, "helper", 2);
+n([
+  l()
+], o.prototype, "accept", 2);
+n([
+  l()
+], o.prototype, "name", 2);
+n([
+  l({ type: Boolean })
+], o.prototype, "multiple", 2);
+n([
+  l({ type: Number, attribute: "max-size" })
+], o.prototype, "maxSize", 2);
+n([
+  l({ type: Number, attribute: "max-files" })
+], o.prototype, "maxFiles", 2);
+n([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+n([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "error", 2);
+n([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "success", 2);
+n([
+  l({ reflect: !0 })
+], o.prototype, "size", 2);
+n([
+  l({ reflect: !0 })
+], o.prototype, "variant", 2);
+n([
+  l()
+], o.prototype, "capture", 2);
+n([
+  l({ type: Boolean })
+], o.prototype, "paste", 2);
+n([
+  h()
+], o.prototype, "_files", 2);
+n([
+  h()
+], o.prototype, "_dragging", 2);
+n([
+  h()
+], o.prototype, "_announcement", 2);
+n([
+  f('input[type="file"]')
+], o.prototype, "_inputEl", 2);
+o = n([
+  b("cg-file-input")
+], o);
+export {
+  o as CgFileInput
+};
+//# sourceMappingURL=cg-file-input.js.map