@c2n/attachment 0.0.7

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,16 @@
+# @c2n/attachment
+
+File and image attachments with metadata, upload progress, failure states, actions, and responsive grouping.
+
+```html
+<script type="module">
+  import '@c2n/attachment'
+</script>
+
+<c2-attachment-group>
+  <c2-attachment name="project-brief.pdf" type="PDF" size="2.4 MB" status="complete" removable></c2-attachment>
+  <c2-attachment name="video.mp4" type="MP4" size="18 MB" status="uploading" progress="64" removable></c2-attachment>
+</c2-attachment-group>
+```
+
+Importing the package root registers both `c2-attachment` and `c2-attachment-group`.

package/dist/attachment-group-BtIl-saM.js

@@ -0,0 +1,53 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/attachment-group.scss?inline
+var attachment_group_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--c2-attachment-group--gap,8px);\n}\n\n:host([layout=grid]) .group,\n:host([layout=mixed]) .group {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--c2-attachment-group--min-column-width,240px)), 1fr));\n}\n\n:host([layout=mixed]) ::slotted(c2-attachment:not([src]):not([layout=tile])),\n:host([layout=mixed]) ::slotted(c2-attachment[layout=row]) {\n  grid-column: 1/-1;\n}\n\n::slotted(c2-attachment) {\n  min-width: 0;\n}";
+//#endregion
+//#region src/attachment-group.ts
+var AttachmentGroup = class AttachmentGroup extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.managedItems = /* @__PURE__ */ new Set();
+		this.layout = "list";
+		this.ariaLabel = "Attachments";
+	}
+	static {
+		this.styles = unsafeCSS(attachment_group_default);
+	}
+	disconnectedCallback() {
+		this.clearManagedItems();
+		super.disconnectedCallback();
+	}
+	clearManagedItems() {
+		for (const item of this.managedItems) if (item.getAttribute("role") === "listitem") item.removeAttribute("role");
+		this.managedItems.clear();
+	}
+	handleSlotChange(event) {
+		const slot = event.currentTarget;
+		const attachments = new Set(slot.assignedElements({ flatten: true }).filter((element) => element.localName === "c2-attachment"));
+		for (const item of this.managedItems) if (!attachments.has(item) && item.getAttribute("role") === "listitem") item.removeAttribute("role");
+		const managedItems = /* @__PURE__ */ new Set();
+		for (const attachment of attachments) if (!attachment.hasAttribute("role")) {
+			attachment.setAttribute("role", "listitem");
+			managedItems.add(attachment);
+		} else if (this.managedItems.has(attachment) && attachment.getAttribute("role") === "listitem") managedItems.add(attachment);
+		this.managedItems = managedItems;
+	}
+	render() {
+		return html`<div class="group" role="list" aria-label=${this.ariaLabel ?? "Attachments"}><slot @slotchange=${this.handleSlotChange}></slot></div>`;
+	}
+};
+__decorate([property({ reflect: true })], AttachmentGroup.prototype, "layout", void 0);
+__decorate([property({ attribute: "aria-label" })], AttachmentGroup.prototype, "ariaLabel", void 0);
+AttachmentGroup = __decorate([customElement("c2-attachment-group")], AttachmentGroup);
+//#endregion
+export { __decorate as n, AttachmentGroup as t };

package/dist/attachment-group.js

@@ -0,0 +1,2 @@
+import { t as AttachmentGroup } from "./attachment-group-BtIl-saM.js";
+export { AttachmentGroup };

package/dist/attachment.js

@@ -0,0 +1,225 @@
+import { n as __decorate, t as AttachmentGroup } from "./attachment-group-BtIl-saM.js";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { property, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+import { classMap } from "lit/directives/class-map.js";
+import "@c2n/phosphor-icons/icons/file.js";
+import "@c2n/phosphor-icons/icons/file-archive.js";
+import "@c2n/phosphor-icons/icons/file-audio.js";
+import "@c2n/phosphor-icons/icons/file-code.js";
+import "@c2n/phosphor-icons/icons/file-css.js";
+import "@c2n/phosphor-icons/icons/file-csv.js";
+import "@c2n/phosphor-icons/icons/file-doc.js";
+import "@c2n/phosphor-icons/icons/file-html.js";
+import "@c2n/phosphor-icons/icons/file-image.js";
+import "@c2n/phosphor-icons/icons/file-jpg.js";
+import "@c2n/phosphor-icons/icons/file-js.js";
+import "@c2n/phosphor-icons/icons/file-jsx.js";
+import "@c2n/phosphor-icons/icons/file-md.js";
+import "@c2n/phosphor-icons/icons/file-pdf.js";
+import "@c2n/phosphor-icons/icons/file-png.js";
+import "@c2n/phosphor-icons/icons/file-ppt.js";
+import "@c2n/phosphor-icons/icons/file-py.js";
+import "@c2n/phosphor-icons/icons/file-sql.js";
+import "@c2n/phosphor-icons/icons/file-svg.js";
+import "@c2n/phosphor-icons/icons/file-ts.js";
+import "@c2n/phosphor-icons/icons/file-tsx.js";
+import "@c2n/phosphor-icons/icons/file-txt.js";
+import "@c2n/phosphor-icons/icons/file-video.js";
+import "@c2n/phosphor-icons/icons/file-vue.js";
+import "@c2n/phosphor-icons/icons/file-xls.js";
+import "@c2n/phosphor-icons/icons/file-zip.js";
+//#region src/attachment.scss?inline
+var attachment_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: block;\n  min-width: 0;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.attachment {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 0;\n  min-height: var(--c2-attachment--min-height,76px);\n  gap: var(--c2-attachment--gap,12px);\n  padding: var(--c2-attachment--padding,10px 12px);\n  color: var(--c2-attachment--color,#18181b);\n  background: var(--c2-attachment--background,#ffffff);\n  border: var(--c2-attachment--border,1px solid #e4e4e7);\n  border-radius: var(--c2-attachment--border-radius,14px);\n  box-shadow: var(--c2-attachment--box-shadow);\n  position: relative;\n}\n\n.media {\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  box-sizing: border-box;\n  overflow: hidden;\n  width: var(--c2-attachment__media--size,48px);\n  height: var(--c2-attachment__media--size,48px);\n  color: var(--c2-attachment__media--color,#71717a);\n  background: var(--c2-attachment__media--background,#f4f4f5);\n  border-radius: var(--c2-attachment__media--border-radius,10px);\n}\n.media img,\n.media ::slotted(img),\n.media ::slotted(video),\n.media ::slotted(svg) {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: var(--c2-attachment__media--object-fit,cover);\n}\n.media ::slotted([slot=media]) {\n  width: 100%;\n  height: 100%;\n}\n.media .file-icon {\n  --c2-phosphor-icon--size: 26px;\n  --c2-phosphor-icon--color: currentColor;\n}\n\n.has-image .media {\n  background: transparent;\n}\n\n.tile {\n  align-items: stretch;\n  flex-direction: column;\n  width: min(100%, var(--c2-attachment__tile--width,220px));\n  padding: 16px;\n  gap: 14px;\n}\n.tile .media {\n  width: 100%;\n  height: auto;\n  aspect-ratio: var(--c2-attachment__tile--media-aspect-ratio,1);\n}\n.tile .actions {\n  position: absolute;\n  top: 22px;\n  right: 22px;\n  padding: 2px;\n  border-radius: 8px;\n  background: rgba(24, 24, 27, 0.72);\n  opacity: 0;\n  transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.tile:hover .actions,\n.tile .actions:focus-within {\n  opacity: 1;\n}\n.tile button {\n  color: #ffffff;\n}\n\n.content {\n  flex: 1;\n  min-width: 0;\n}\n\n.name {\n  overflow: hidden;\n  color: var(--c2-attachment--color,#18181b);\n  font-size: var(--c2-attachment__name--font-size,14px);\n  font-weight: var(--c2-attachment__name--font-weight,500);\n  line-height: 1.35;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.metadata,\n.status,\n.uploading {\n  margin-top: 3px;\n  color: var(--c2-attachment__metadata--color,#71717a);\n  font-size: var(--c2-attachment__metadata--font-size,12px);\n  line-height: 1.35;\n}\n\n.metadata {\n  display: flex;\n  gap: 4px;\n}\n\n.status {\n  color: var(--c2-attachment__status--color,#71717a);\n}\n.status.complete {\n  color: var(--c2-attachment__status__complete--color,rgb(0, 122, 77));\n}\n.status.error {\n  color: var(--c2-attachment__status__error--color,#dc2626);\n}\n\n.progress-ring {\n  width: 26px;\n  height: 26px;\n  fill: none;\n  stroke-width: 2;\n  transform: rotate(-90deg);\n}\n.progress-ring .progress-track {\n  stroke: var(--c2-attachment__progress--background,#e4e4e7);\n}\n.progress-ring .progress-value {\n  stroke: var(--c2-attachment__progress--color,rgb(2, 101, 220));\n  stroke-linecap: round;\n}\n\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.actions,\n.default-actions {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: 4px;\n}\n\nbutton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--c2-attachment__action--size,28px);\n  height: var(--c2-attachment__action--size,28px);\n  padding: 0;\n  color: var(--c2-attachment__action--color,#71717a);\n  background: transparent;\n  border: 0;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background 250ms cubic-bezier(0.2, 0, 0, 1), color 250ms cubic-bezier(0.2, 0, 0, 1);\n}\nbutton:hover:not(:disabled) {\n  background: var(--c2-attachment__action__hover--background,#f4f4f5);\n}\nbutton:focus-visible {\n  outline: var(--c2-attachment__action__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: 1px;\n}\nbutton:disabled {\n  cursor: default;\n}\nbutton svg {\n  width: 16px;\n  height: 16px;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 1.8;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n:host([disabled]) .attachment {\n  opacity: var(--c2-attachment__disabled--opacity,0.38);\n}\n\n::slotted([slot=actions]) {\n  flex: none;\n}";
+//#endregion
+//#region src/attachment.ts
+var Attachment = class Attachment extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "";
+		this.src = void 0;
+		this.alt = void 0;
+		this.type = void 0;
+		this.size = void 0;
+		this.status = "ready";
+		this.layout = "auto";
+		this.progress = 0;
+		this.removable = false;
+		this.disabled = false;
+		this.imageFailed = false;
+	}
+	static {
+		this.styles = unsafeCSS(attachment_default);
+	}
+	willUpdate(changed) {
+		if (changed.has("src")) this.imageFailed = false;
+	}
+	get safeProgress() {
+		return Math.min(100, Math.max(0, Number.isFinite(this.progress) ? this.progress : 0));
+	}
+	emitRemove() {
+		this.dispatchEvent(new CustomEvent("attachment-remove", {
+			detail: { name: this.name },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	emitRetry() {
+		this.dispatchEvent(new CustomEvent("attachment-retry", {
+			detail: { name: this.name },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	handleImageError() {
+		this.imageFailed = true;
+		this.dispatchEvent(new Event("media-error"));
+	}
+	get fileIcon() {
+		const extension = this.name.split(".").pop()?.toLowerCase() ?? "";
+		const kind = `${this.type ?? ""} ${extension}`.toLowerCase();
+		if (/\bzip\b/.test(kind)) return "zip";
+		if (/\b(7z|rar|tar|gz|gzip|archive)\b/.test(kind)) return "archive";
+		if (/\btsx\b/.test(kind)) return "tsx";
+		if (/\b(ts|typescript)\b/.test(kind)) return "ts";
+		if (/\bjsx\b/.test(kind)) return "jsx";
+		if (/\b(js|javascript)\b/.test(kind)) return "js";
+		if (/\b(html|htm)\b/.test(kind)) return "html";
+		if (/\bcss\b/.test(kind)) return "css";
+		if (/\bvue\b/.test(kind)) return "vue";
+		if (/\b(py|python)\b/.test(kind)) return "py";
+		if (/\bsql\b/.test(kind)) return "sql";
+		if (/\bpdf\b/.test(kind)) return "pdf";
+		if (/\bcsv\b/.test(kind)) return "csv";
+		if (/\b(doc|docx|word)\b/.test(kind)) return "doc";
+		if (/\b(xls|xlsx|spreadsheet|excel)\b/.test(kind)) return "xls";
+		if (/\b(ppt|pptx|presentation|powerpoint)\b/.test(kind)) return "ppt";
+		if (/\b(md|markdown)\b/.test(kind)) return "md";
+		if (/\b(txt|text)\b/.test(kind)) return "txt";
+		if (/\bpng\b/.test(kind)) return "png";
+		if (/\b(jpg|jpeg)\b/.test(kind)) return "jpg";
+		if (/\bsvg\b/.test(kind)) return "svg";
+		if (/\b(image|gif|webp|avif|bmp|tiff)\b/.test(kind)) return "image";
+		if (/\b(audio|mp3|wav|ogg|flac|m4a)\b/.test(kind)) return "audio";
+		if (/\b(video|mp4|mov|webm|avi|mkv)\b/.test(kind)) return "video";
+		if (/\b(code|json|xml|yaml|yml|toml)\b/.test(kind)) return "code";
+		return "file";
+	}
+	renderFileIcon() {
+		switch (this.fileIcon) {
+			case "zip": return html`<c2-phosphor-file-zip class="file-icon" aria-hidden="true"></c2-phosphor-file-zip>`;
+			case "archive": return html`<c2-phosphor-file-archive class="file-icon" aria-hidden="true"></c2-phosphor-file-archive>`;
+			case "audio": return html`<c2-phosphor-file-audio class="file-icon" aria-hidden="true"></c2-phosphor-file-audio>`;
+			case "code": return html`<c2-phosphor-file-code class="file-icon" aria-hidden="true"></c2-phosphor-file-code>`;
+			case "css": return html`<c2-phosphor-file-css class="file-icon" aria-hidden="true"></c2-phosphor-file-css>`;
+			case "csv": return html`<c2-phosphor-file-csv class="file-icon" aria-hidden="true"></c2-phosphor-file-csv>`;
+			case "doc": return html`<c2-phosphor-file-doc class="file-icon" aria-hidden="true"></c2-phosphor-file-doc>`;
+			case "html": return html`<c2-phosphor-file-html class="file-icon" aria-hidden="true"></c2-phosphor-file-html>`;
+			case "image": return html`<c2-phosphor-file-image class="file-icon" aria-hidden="true"></c2-phosphor-file-image>`;
+			case "jpg": return html`<c2-phosphor-file-jpg class="file-icon" aria-hidden="true"></c2-phosphor-file-jpg>`;
+			case "js": return html`<c2-phosphor-file-js class="file-icon" aria-hidden="true"></c2-phosphor-file-js>`;
+			case "jsx": return html`<c2-phosphor-file-jsx class="file-icon" aria-hidden="true"></c2-phosphor-file-jsx>`;
+			case "md": return html`<c2-phosphor-file-md class="file-icon" aria-hidden="true"></c2-phosphor-file-md>`;
+			case "pdf": return html`<c2-phosphor-file-pdf class="file-icon" aria-hidden="true"></c2-phosphor-file-pdf>`;
+			case "png": return html`<c2-phosphor-file-png class="file-icon" aria-hidden="true"></c2-phosphor-file-png>`;
+			case "ppt": return html`<c2-phosphor-file-ppt class="file-icon" aria-hidden="true"></c2-phosphor-file-ppt>`;
+			case "py": return html`<c2-phosphor-file-py class="file-icon" aria-hidden="true"></c2-phosphor-file-py>`;
+			case "sql": return html`<c2-phosphor-file-sql class="file-icon" aria-hidden="true"></c2-phosphor-file-sql>`;
+			case "svg": return html`<c2-phosphor-file-svg class="file-icon" aria-hidden="true"></c2-phosphor-file-svg>`;
+			case "ts": return html`<c2-phosphor-file-ts class="file-icon" aria-hidden="true"></c2-phosphor-file-ts>`;
+			case "tsx": return html`<c2-phosphor-file-tsx class="file-icon" aria-hidden="true"></c2-phosphor-file-tsx>`;
+			case "txt": return html`<c2-phosphor-file-txt class="file-icon" aria-hidden="true"></c2-phosphor-file-txt>`;
+			case "video": return html`<c2-phosphor-file-video class="file-icon" aria-hidden="true"></c2-phosphor-file-video>`;
+			case "vue": return html`<c2-phosphor-file-vue class="file-icon" aria-hidden="true"></c2-phosphor-file-vue>`;
+			case "xls": return html`<c2-phosphor-file-xls class="file-icon" aria-hidden="true"></c2-phosphor-file-xls>`;
+			default: return html`<c2-phosphor-file class="file-icon" aria-hidden="true"></c2-phosphor-file>`;
+		}
+	}
+	renderMediaFallback() {
+		if (this.status === "uploading") return html`
+        <svg class="progress-ring" viewBox="0 0 24 24" aria-hidden="true">
+          <circle class="progress-track" cx="12" cy="12" r="9" pathLength="100" />
+          <circle class="progress-value" cx="12" cy="12" r="9" pathLength="100" stroke-dasharray=${`${this.safeProgress} 100`} />
+        </svg>
+      `;
+		return this.renderFileIcon();
+	}
+	renderStatus() {
+		if (this.status === "uploading") return html`
+        <div class="status uploading">
+          <progress class="visually-hidden" max="100" .value=${this.safeProgress} aria-label=${`Uploading ${this.name || "attachment"}`}></progress>
+          <span>Uploading · ${Math.round(this.safeProgress)}%</span>
+        </div>
+      `;
+		if (this.status === "complete") return html`<div class="status complete">Uploaded</div>`;
+		if (this.status === "error") return html`<div class="status error" role="status">Upload failed</div>`;
+		return nothing;
+	}
+	renderActions() {
+		if (this.status !== "error" && !this.removable) return nothing;
+		return html`
+      <div class="default-actions">
+        ${this.status === "error" ? html`<button type="button" aria-label=${`Retry ${this.name || "attachment"}`} ?disabled=${this.disabled} @click=${this.emitRetry}>
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M20 6v5h-5M4 18v-5h5M6.1 9a7 7 0 0 1 11.8-2.6L20 11M4 13l2.1 4.6A7 7 0 0 0 17.9 15" />
+                </svg>
+              </button>` : nothing}
+        ${this.removable ? html`<button
+                type="button"
+                aria-label=${`${this.status === "uploading" ? "Cancel upload" : "Remove"} ${this.name || "attachment"}`}
+                ?disabled=${this.disabled}
+                @click=${this.emitRemove}
+              >
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>
+              </button>` : nothing}
+      </div>
+    `;
+	}
+	render() {
+		const showImage = !!this.src && !this.imageFailed;
+		const tile = this.layout === "tile" || this.layout === "auto" && !!this.src;
+		return html`
+      <article class=${classMap({
+			attachment: true,
+			"has-image": showImage,
+			tile
+		})} aria-label=${this.name || nothing}>
+        <div class="media">
+          <slot name="media">
+            ${showImage ? html`<img src=${this.src} alt=${this.alt ?? this.name} loading="lazy" @error=${this.handleImageError} />` : this.renderMediaFallback()}
+          </slot>
+        </div>
+        <div class="content">
+          <div class="name"><slot name="name">${this.name || "Untitled attachment"}</slot></div>
+          ${this.status !== "uploading" && (this.type || this.size) ? html`<div class="metadata">
+                  <slot name="metadata"
+                    >${this.type ? html`<span>${this.type}</span>` : nothing}${this.type && this.size ? html`<span aria-hidden="true">·</span>` : nothing}${this.size ? html`<span>${this.size}</span>` : nothing}</slot
+                  >
+                </div>` : html`<slot name="metadata"></slot>`}
+          ${this.renderStatus()}
+        </div>
+        <div class="actions"><slot name="actions">${this.renderActions()}</slot></div>
+      </article>
+    `;
+	}
+};
+__decorate([property()], Attachment.prototype, "name", void 0);
+__decorate([property({ reflect: true })], Attachment.prototype, "src", void 0);
+__decorate([property()], Attachment.prototype, "alt", void 0);
+__decorate([property()], Attachment.prototype, "type", void 0);
+__decorate([property()], Attachment.prototype, "size", void 0);
+__decorate([property({ reflect: true })], Attachment.prototype, "status", void 0);
+__decorate([property({ reflect: true })], Attachment.prototype, "layout", void 0);
+__decorate([property({ type: Number })], Attachment.prototype, "progress", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Attachment.prototype, "removable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Attachment.prototype, "disabled", void 0);
+__decorate([state()], Attachment.prototype, "imageFailed", void 0);
+Attachment = __decorate([customElement("c2-attachment")], Attachment);
+//#endregion
+export { Attachment, AttachmentGroup };

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@c2n/attachment",
+  "version": "0.0.7",
+  "type": "module",
+  "main": "dist/attachment.js",
+  "exports": {
+    ".": {
+      "types": "./types/src/attachment.d.ts",
+      "default": "./dist/attachment.js"
+    },
+    "./attachment-group.js": {
+      "types": "./types/src/attachment-group.d.ts",
+      "default": "./dist/attachment-group.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
+  ],
+  "keywords": [
+    "attachment",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build",
+        "../../icons/phosphor-icons:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.7",
+    "@c2n/phosphor-icons": "0.0.7",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "c8db398a27f7cd417d665fdf5da455fee2d4e910"
+}

package/react.d.ts

@@ -0,0 +1,26 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/attachment. Import once, anywhere in the program:
+//
+//     import '@c2n/attachment/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { Attachment } from '@c2n/attachment'
+import type { AttachmentGroup } from '@c2n/attachment/attachment-group.js'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-attachment': C2Props<Attachment>
+      'c2-attachment-group': C2Props<AttachmentGroup>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/attachment-group.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+export type AttachmentGroupLayout = 'list' | 'grid' | 'mixed';
+/**
+ * Arranges related attachments as a responsive list or grid.
+ *
+ * @tag c2-attachment-group
+ * @slot - `c2-attachment` elements.
+ * @slotcomponent c2-attachment
+ *
+ * @cssproperty {pixel} [--c2-attachment-group--gap=8px]
+ * @cssproperty {pixel} [--c2-attachment-group--min-column-width=240px]
+ */
+export declare class AttachmentGroup extends LitElement {
+    static styles: import("lit").CSSResult;
+    private managedItems;
+    /** List stacks rows, grid fills equal columns, and mixed gives image tiles columns while file rows span the group. */
+    layout: 'list' | 'grid' | 'mixed';
+    /** Accessible name for the attachment collection. */
+    ariaLabel: string | null;
+    disconnectedCallback(): void;
+    private clearManagedItems;
+    private handleSlotChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-attachment-group': AttachmentGroup;
+    }
+}
+//# sourceMappingURL=attachment-group.d.ts.map

package/types/src/attachment-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment-group.d.ts","sourceRoot":"","sources":["../../src/attachment-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAA;AAKjD,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;AAE7D;;;;;;;;;GASG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAoB;IAE1C,OAAO,CAAC,YAAY,CAAyB;IAE7C,sHAAsH;IACzF,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAS;IAEvE,qDAAqD;IACL,SAAS,EAAE,MAAM,GAAG,IAAI,CAAgB;IAE/E,oBAAoB;IAK7B,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,gBAAgB;IAoBf,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,eAAe,CAAA;KACvC;CACF"}

package/types/src/attachment.d.ts

@@ -0,0 +1,130 @@
+import { LitElement, type PropertyValues } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
+import '@c2n/phosphor-icons/icons/file.js';
+import '@c2n/phosphor-icons/icons/file-archive.js';
+import '@c2n/phosphor-icons/icons/file-audio.js';
+import '@c2n/phosphor-icons/icons/file-code.js';
+import '@c2n/phosphor-icons/icons/file-css.js';
+import '@c2n/phosphor-icons/icons/file-csv.js';
+import '@c2n/phosphor-icons/icons/file-doc.js';
+import '@c2n/phosphor-icons/icons/file-html.js';
+import '@c2n/phosphor-icons/icons/file-image.js';
+import '@c2n/phosphor-icons/icons/file-jpg.js';
+import '@c2n/phosphor-icons/icons/file-js.js';
+import '@c2n/phosphor-icons/icons/file-jsx.js';
+import '@c2n/phosphor-icons/icons/file-md.js';
+import '@c2n/phosphor-icons/icons/file-pdf.js';
+import '@c2n/phosphor-icons/icons/file-png.js';
+import '@c2n/phosphor-icons/icons/file-ppt.js';
+import '@c2n/phosphor-icons/icons/file-py.js';
+import '@c2n/phosphor-icons/icons/file-sql.js';
+import '@c2n/phosphor-icons/icons/file-svg.js';
+import '@c2n/phosphor-icons/icons/file-ts.js';
+import '@c2n/phosphor-icons/icons/file-tsx.js';
+import '@c2n/phosphor-icons/icons/file-txt.js';
+import '@c2n/phosphor-icons/icons/file-video.js';
+import '@c2n/phosphor-icons/icons/file-vue.js';
+import '@c2n/phosphor-icons/icons/file-xls.js';
+import '@c2n/phosphor-icons/icons/file-zip.js';
+export { AttachmentGroup, type AttachmentGroupLayout } from './attachment-group.js';
+export type AttachmentStatus = 'ready' | 'uploading' | 'complete' | 'error';
+export type AttachmentLayout = 'auto' | 'row' | 'tile';
+/** Events fired by {@link Attachment}, keyed for `addEventListener`. */
+export interface AttachmentEventMap {
+    'attachment-remove': CustomEvent<{
+        name: string;
+    }>;
+    'attachment-retry': CustomEvent<{
+        name: string;
+    }>;
+    'media-error': Event;
+}
+export interface Attachment {
+    addEventListener: TypedAddEventListener<Attachment, AttachmentEventMap>;
+    removeEventListener: TypedRemoveEventListener<Attachment, AttachmentEventMap>;
+}
+/**
+ * Displays a file or image attachment with a preview, metadata, upload state and optional actions.
+ *
+ * @tag c2-attachment
+ *
+ * @slot media - Custom thumbnail or file icon. Replaces the image supplied through `src`.
+ * @slot name - Custom file name. Falls back to the `name` attribute.
+ * @slot metadata - Custom metadata. Falls back to the `type` and `size` attributes.
+ * @slot actions - Custom controls shown at the end. Replaces the built-in retry and remove buttons.
+ *
+ * @event {CustomEvent<{ name: string }>} attachment-remove - Fired when the remove or cancel action is pressed.
+ * @event {CustomEvent<{ name: string }>} attachment-retry - Fired when retry is pressed for a failed upload.
+ * @event {Event} media-error - Fired when the image preview cannot be loaded; the file fallback is shown.
+ *
+ * @cssproperty {pixel} [--c2-attachment--min-height=76px]
+ * @cssproperty {pixel} [--c2-attachment--gap=12px]
+ * @cssproperty {padding} [--c2-attachment--padding=10px 12px]
+ * @cssproperty {color} [--c2-attachment--background=#ffffff]
+ * @cssproperty {border} [--c2-attachment--border=1px solid #e4e4e7]
+ * @cssproperty {border-radius} [--c2-attachment--border-radius=14px]
+ * @cssproperty {box-shadow} --c2-attachment--box-shadow
+ * @cssproperty {color} [--c2-attachment--color=#18181b]
+ * @cssproperty {pixel} [--c2-attachment__media--size=48px]
+ * @cssproperty {color} [--c2-attachment__media--background=#f4f4f5]
+ * @cssproperty {color} [--c2-attachment__media--color=#71717a]
+ * @cssproperty {border-radius} [--c2-attachment__media--border-radius=10px]
+ * @cssproperty {object-fit} [--c2-attachment__media--object-fit=cover]
+ * @cssproperty {pixel} [--c2-attachment__tile--width=220px]
+ * @cssproperty {ratio} [--c2-attachment__tile--media-aspect-ratio=1]
+ * @cssproperty {font-size} [--c2-attachment__name--font-size=14px]
+ * @cssproperty {font-weight} [--c2-attachment__name--font-weight=500]
+ * @cssproperty {color} [--c2-attachment__metadata--color=#71717a]
+ * @cssproperty {font-size} [--c2-attachment__metadata--font-size=12px]
+ * @cssproperty {color} [--c2-attachment__status--color=#71717a]
+ * @cssproperty {color} [--c2-attachment__status__complete--color=rgb(0, 122, 77)]
+ * @cssproperty {color} [--c2-attachment__status__error--color=#dc2626]
+ * @cssproperty {color} [--c2-attachment__progress--background=#e4e4e7]
+ * @cssproperty {color} [--c2-attachment__progress--color=rgb(2, 101, 220)]
+ * @cssproperty {pixel} [--c2-attachment__action--size=28px]
+ * @cssproperty {color} [--c2-attachment__action--color=#71717a]
+ * @cssproperty {color} [--c2-attachment__action__hover--background=#f4f4f5]
+ * @cssproperty {outline} [--c2-attachment__action__focus--outline=2px solid rgba(2, 101, 220, 0.4)]
+ * @cssproperty {opacity} [--c2-attachment__disabled--opacity=0.38]
+ */
+export declare class Attachment extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** File name shown as the primary label. */
+    name: string;
+    /** Image preview URL. Omit it to show the generic file preview. */
+    src: string | undefined;
+    /** Accessible description for the image preview. Defaults to the file name. */
+    alt: string | undefined;
+    /** File type or extension shown in the metadata row. */
+    type: string | undefined;
+    /** Human-readable file size, for example `2.4 MB`. */
+    size: string | undefined;
+    /** Current upload state. */
+    status: 'ready' | 'uploading' | 'complete' | 'error';
+    /** Auto uses a tile for image previews and a row for files. */
+    layout: 'auto' | 'row' | 'tile';
+    /** Upload completion percentage. Values are clamped between 0 and 100. */
+    progress: number;
+    /** Show the built-in remove action. During upload it is announced as cancel. */
+    removable: boolean;
+    /** Disable built-in actions and dim the attachment. */
+    disabled: boolean;
+    private imageFailed;
+    willUpdate(changed: PropertyValues<this>): void;
+    private get safeProgress();
+    private emitRemove;
+    private emitRetry;
+    private handleImageError;
+    private get fileIcon();
+    private renderFileIcon;
+    private renderMediaFallback;
+    private renderStatus;
+    private renderActions;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-attachment': Attachment;
+    }
+}
+//# sourceMappingURL=attachment.d.ts.map

package/types/src/attachment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment.d.ts","sourceRoot":"","sources":["../../src/attachment.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAG/E,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAEhG,OAAO,mCAAmC,CAAA;AAC1C,OAAO,2CAA2C,CAAA;AAClD,OAAO,yCAAyC,CAAA;AAChD,OAAO,wCAAwC,CAAA;AAC/C,OAAO,uCAAuC,CAAA;AAC9C,OAAO,uCAAuC,CAAA;AAC9C,OAAO,uCAAuC,CAAA;AAC9C,OAAO,wCAAwC,CAAA;AAC/C,OAAO,yCAAyC,CAAA;AAChD,OAAO,uCAAuC,CAAA;AAC9C,OAAO,sCAAsC,CAAA;AAC7C,OAAO,uCAAuC,CAAA;AAC9C,OAAO,sCAAsC,CAAA;AAC7C,OAAO,uCAAuC,CAAA;AAC9C,OAAO,uCAAuC,CAAA;AAC9C,OAAO,uCAAuC,CAAA;AAC9C,OAAO,sCAAsC,CAAA;AAC7C,OAAO,uCAAuC,CAAA;AAC9C,OAAO,uCAAuC,CAAA;AAC9C,OAAO,sCAAsC,CAAA;AAC7C,OAAO,uCAAuC,CAAA;AAC9C,OAAO,uCAAuC,CAAA;AAC9C,OAAO,yCAAyC,CAAA;AAChD,OAAO,uCAAuC,CAAA;AAC9C,OAAO,uCAAuC,CAAA;AAC9C,OAAO,uCAAuC,CAAA;AAG9C,OAAO,EAAE,eAAe,EAAE,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AAEnF,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAA;AAC3E,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAA;AAEtD,wEAAwE;AACxE,MAAM,WAAW,kBAAkB;IACjC,mBAAmB,EAAE,WAAW,CAAC;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAClD,kBAAkB,EAAE,WAAW,CAAC;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACjD,aAAa,EAAE,KAAK,CAAA;CACrB;AAED,MAAM,WAAW,UAAU;IACzB,gBAAgB,EAAE,qBAAqB,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAA;IACvE,mBAAmB,EAAE,wBAAwB,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAA;CAC9E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAoB;IAE1C,4CAA4C;IAChC,IAAI,SAAK;IAErB,mEAAmE;IACtC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAEhE,+EAA+E;IACnE,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAE/C,wDAAwD;IAC5C,IAAI,EAAE,MAAM,GAAG,SAAS,CAAY;IAEhD,sDAAsD;IAC1C,IAAI,EAAE,MAAM,GAAG,SAAS,CAAY;IAEhD,4BAA4B;IACC,MAAM,EAAE,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAU;IAE3F,+DAA+D;IAClC,MAAM,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,CAAS;IAErE,0EAA0E;IAC9C,QAAQ,SAAI;IAExC,gFAAgF;IACpC,SAAS,UAAQ;IAE7D,uDAAuD;IACX,QAAQ,UAAQ;IAEnD,OAAO,CAAC,WAAW,CAAQ;IAE3B,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAIjD,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,KAAK,QAAQ,GA8BnB;IAED,OAAO,CAAC,cAAc;IAyDtB,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,aAAa;IA6BZ,MAAM;CA2BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,UAAU,CAAA;KAC5B;CACF"}

package/vue.d.ts

@@ -0,0 +1,41 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/attachment. Import once, anywhere in the program:
+//
+//     import '@c2n/attachment/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { Attachment, AttachmentEventMap } from '@c2n/attachment'
+import type { AttachmentGroup } from '@c2n/attachment/attachment-group.js'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-attachment': DefineComponent<
+      C2Props<Attachment> & {
+        onAttachmentRemove?: (event: AttachmentEventMap['attachment-remove']) => void
+        onAttachmentRetry?: (event: AttachmentEventMap['attachment-retry']) => void
+        onMediaError?: (event: AttachmentEventMap['media-error']) => void
+      }
+    >
+    'c2-attachment-group': DefineComponent<
+      C2Props<AttachmentGroup> & {
+        'aria-label'?: unknown
+      }
+    >
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}