@rogieking/figui3 6.29.1 → 6.31.0

package/fig-lab.js

@@ -193,6 +193,205 @@ figLabDefineElement("fig-ai-prompt", FigAiPrompt);
 class FigChatMessage extends HTMLElement {}
 figLabDefineElement("fig-chat-message", FigChatMessage);
 
+/**
+ * A removable image attachment for compact prompt surfaces.
+ *
+ * @attr {string} src - Image preview URL.
+ * @attr {string} name - Attachment name used for the tooltip and image alt text.
+ * @attr {string} value - Optional application-owned attachment identifier.
+ * @attr {boolean|string} removable - "false" hides the remove button.
+ * @attr {boolean|string} disabled - Disables removal.
+ * @fires remove - Cancelable request for the owning application to remove the attachment.
+ */
+class FigAttachment extends HTMLElement {
+  #tooltip = null;
+  #image = null;
+  #fallback = null;
+  #removeTooltip = null;
+  #removeButton = null;
+  #mediaImage = null;
+  #boundHandleRemove = this.#handleRemove.bind(this);
+  #boundHandleImageLoad = this.#handleImageLoad.bind(this);
+  #boundHandleImageError = this.#handleImageError.bind(this);
+
+  static get observedAttributes() {
+    return ["src", "name", "value", "removable", "disabled"];
+  }
+
+  connectedCallback() {
+    if (!this.#image) this.#initialize();
+    this.#removeButton.removeEventListener("click", this.#boundHandleRemove);
+    this.#removeButton.addEventListener("click", this.#boundHandleRemove);
+    this.#bindMediaImage();
+    this.#sync();
+  }
+
+  disconnectedCallback() {
+    this.#removeButton?.removeEventListener("click", this.#boundHandleRemove);
+    this.#unbindMediaImage();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue || !this.#image) return;
+    this.#sync();
+  }
+
+  #initialize() {
+    this.#tooltip = document.createElement("fig-tooltip");
+    this.#tooltip.className = "fig-attachment-tooltip";
+
+    this.#image = document.createElement("fig-image");
+    this.#image.setAttribute("aspect-ratio", "1/1");
+    this.#image.setAttribute("fit", "cover");
+    this.#image.setAttribute("full", "");
+
+    this.#fallback = document.createElement("span");
+    this.#fallback.className = "fig-attachment-fallback";
+    this.#fallback.setAttribute("aria-hidden", "true");
+
+    this.#removeTooltip = document.createElement("fig-tooltip");
+    this.#removeTooltip.className = "fig-attachment-remove-tooltip";
+    this.#removeTooltip.setAttribute("text", "Remove attachment");
+
+    this.#removeButton = document.createElement("fig-button");
+    this.#removeButton.className = "fig-attachment-remove";
+    this.#removeButton.setAttribute("variant", "overlay");
+    this.#removeButton.setAttribute("size", "small");
+    this.#removeButton.setAttribute("icon", "");
+    const closeIcon = document.createElement("fig-icon");
+    closeIcon.setAttribute("name", "close");
+    closeIcon.setAttribute("size", "small");
+    this.#removeButton.append(closeIcon);
+    this.#removeTooltip.append(this.#removeButton);
+
+    this.#image.append(this.#fallback);
+    this.#tooltip.append(this.#image);
+    this.replaceChildren(this.#tooltip, this.#removeTooltip);
+
+    this.#removeButton.addEventListener("click", this.#boundHandleRemove);
+    this.#bindMediaImage();
+  }
+
+  #bindMediaImage() {
+    const mediaImage = this.#image?.mediaEl;
+    if (!mediaImage || mediaImage === this.#mediaImage) return;
+    this.#unbindMediaImage();
+    this.#mediaImage = mediaImage;
+    this.#mediaImage.addEventListener("load", this.#boundHandleImageLoad);
+    this.#mediaImage.addEventListener("error", this.#boundHandleImageError);
+  }
+
+  #unbindMediaImage() {
+    if (!this.#mediaImage) return;
+    this.#mediaImage.removeEventListener("load", this.#boundHandleImageLoad);
+    this.#mediaImage.removeEventListener("error", this.#boundHandleImageError);
+    this.#mediaImage = null;
+  }
+
+  #sync() {
+    const src = this.getAttribute("src") || "";
+    const name = this.getAttribute("name") || "Attachment";
+    const removable =
+      !this.hasAttribute("removable") || figLabBooleanAttribute(this, "removable");
+    const disabled = figLabBooleanAttribute(this, "disabled");
+
+    this.#tooltip.setAttribute("text", name);
+    this.#image.setAttribute("alt", name);
+    if (src) {
+      this.#image.setAttribute("src", src);
+    } else {
+      this.#image.removeAttribute("src");
+    }
+    this.#bindMediaImage();
+
+    this.#fallback.textContent = this.#fallbackLabel(name);
+    this.#removeButton.hidden = !removable;
+    this.#removeButton.toggleAttribute("disabled", disabled);
+    this.#removeButton.setAttribute("aria-label", `Remove ${name}`);
+    this.toggleAttribute("data-fallback", !src);
+    if (disabled) {
+      this.setAttribute("aria-disabled", "true");
+    } else {
+      this.removeAttribute("aria-disabled");
+    }
+  }
+
+  #fallbackLabel(name) {
+    const baseName = name.split(/[\\/]/).pop() || "";
+    const dotIndex = baseName.lastIndexOf(".");
+    const extension =
+      dotIndex > 0 && dotIndex < baseName.length - 1
+        ? baseName.slice(dotIndex + 1).toUpperCase()
+        : "FILE";
+    return extension.slice(0, 4);
+  }
+
+  #handleImageLoad() {
+    if (this.getAttribute("src")) this.removeAttribute("data-fallback");
+  }
+
+  #handleImageError() {
+    this.setAttribute("data-fallback", "");
+  }
+
+  #handleRemove(event) {
+    event.stopPropagation();
+    if (
+      figLabBooleanAttribute(this, "disabled") ||
+      (this.hasAttribute("removable") &&
+        !figLabBooleanAttribute(this, "removable"))
+    ) {
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent("remove", {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        detail: {
+          value: this.getAttribute("value"),
+          name: this.getAttribute("name") || "",
+          src: this.getAttribute("src") || "",
+          attachment: this,
+        },
+      }),
+    );
+  }
+}
+figLabDefineElement("fig-attachment", FigAttachment);
+
+/* Wrapping presentation container for one or more attachments. */
+class FigAttachments extends HTMLElement {
+  #observer = null;
+
+  connectedCallback() {
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "list");
+      this.setAttribute("data-generated-role", "");
+    }
+    this.#syncItems();
+    if (!this.#observer) {
+      this.#observer = new MutationObserver(() => this.#syncItems());
+      this.#observer.observe(this, { childList: true });
+    }
+  }
+
+  disconnectedCallback() {
+    this.#observer?.disconnect();
+    this.#observer = null;
+  }
+
+  #syncItems() {
+    for (const attachment of this.querySelectorAll(":scope > fig-attachment")) {
+      if (!attachment.hasAttribute("role")) {
+        attachment.setAttribute("role", "listitem");
+        attachment.setAttribute("data-generated-role", "");
+      }
+    }
+  }
+}
+figLabDefineElement("fig-attachments", FigAttachments);
+
 /* Field + Switch wrapper */
 class PropskitSwitch extends HTMLElement {
   #field = null;

package/fig.js

@@ -13455,6 +13455,7 @@ figDefineElement("fig-video", FigVideo);
  * @attr {boolean} selected - Selected chrome (CSS only)
  * @attr {boolean} disabled - Dim + non-interactive; no `<a>` when disabled
  * @attr {boolean} full - Stretch to available width (CSS; default width is already 100%)
+ * @attr {string} size - Set to `large` for spacer-2 card padding and spacer-1 label spacing
  * @attr {string} aspect-ratio - Forwarded to fig-image (default `1/1`)
  * @attr {string} fit - Forwarded to fig-image (default `contain`)
  * @attr {string} label-line-clamp - `1` (default) or `2`
@@ -13472,6 +13473,7 @@ class FigCard extends HTMLElement {
       "selected",
       "disabled",
       "full",
+      "size",
       "aspect-ratio",
       "fit",
       "label-line-clamp",
@@ -17448,6 +17450,7 @@ const FIG_ICON_TOKENS = {
   more: { medium: "--icon-24-more", small: "--icon-16-more" },
   visible: { medium: "--icon-24-visible", small: "--icon-16-visible" },
   hidden: { medium: "--icon-24-hidden", small: "--icon-16-hidden" },
+  globe: { medium: "--icon-24-globe", small: "--icon-16-globe" },
 };
 
 function figIconCssVar(name, size = "medium") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "6.29.1",
+  "version": "6.31.0",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",