@rogieking/figui3 6.29.0 → 6.30.0

package/fig-lab.css

@@ -63,6 +63,12 @@ fig-ai-prompt {
     }
   }
 
+  & > fig-attachments {
+    box-sizing: border-box;
+    width: auto;
+    margin: var(--spacer-2) var(--spacer-3) 0;
+  }
+
   & > fig-footer {
     justify-content: space-between;
     border: none;
@@ -70,6 +76,81 @@ fig-ai-prompt {
   }
 }
 
+fig-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--spacer-2);
+  width: 100%;
+  min-width: 0;
+}
+
+fig-attachment {
+  --fig-attachment-size: 2.5rem;
+
+  position: relative;
+  display: block;
+  flex: 0 0 var(--fig-attachment-size);
+  width: var(--fig-attachment-size);
+  min-width: 0;
+
+  fig-image {
+    display: flex;
+    width: 100%;
+  }
+
+  .fig-attachment-fallback {
+    position: absolute;
+    inset: 0;
+    display: none;
+    place-items: center;
+    border-radius: var(--radius-medium);
+    background: var(--figma-color-bg-secondary);
+    box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+    color: var(--figma-color-text-secondary);
+    font-size: var(--body-medium-fontSize);
+    font-weight: 500;
+    line-height: 1;
+    pointer-events: none;
+  }
+
+  &[data-fallback] {
+    .fig-attachment-fallback {
+      display: grid;
+    }
+  }
+
+  .fig-attachment-remove {
+    --spacer-2: 0px;
+    --spacer-4: 1.25rem;
+
+    position: absolute;
+    z-index: 3;
+    top: var(--spacer-1);
+    right: var(--spacer-1);
+    width: 1.25rem;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &:hover .fig-attachment-remove,
+  &:focus-within .fig-attachment-remove {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  &[disabled]:not([disabled="false"]) {
+    opacity: 0.5;
+
+    .fig-attachment-remove {
+      pointer-events: none;
+    }
+  }
+}
+
 fig-chat-message {
   display: block;
   box-sizing: border-box;
@@ -234,7 +315,7 @@ fig-content:has(> propskit-group[name]:last-child) {
   padding-bottom: 0;
 }
 
-/* Default/large size: more left field padding; nudge trailing controls in from
+/* Large size: more left field padding; nudge trailing controls in from
    the right. propskit-select applies left inset on label + trigger instead. */
 :is(
   propskit-switch,
@@ -243,27 +324,27 @@ fig-content:has(> propskit-group[name]:last-child) {
   propskit-text,
   propskit-number,
   propskit-slider
-):is(:not([size]), [size="large"]) {
+)[size="large"] {
   fig-field:not([direction="vertical"]) {
     padding-left: var(--spacer-2-5);
   }
 }
 
 /* Flex-positioned numbers — margin works. Absolute numbers use right: calc(...) below. */
-:is(propskit-color, propskit-number):is(:not([size]), [size="large"]) {
+:is(propskit-color, propskit-number)[size="large"] {
   fig-field fig-input-number {
     margin-right: var(--spacer-1);
   }
 }
 
-propskit-text:is(:not([size]), [size="large"]) {
+propskit-text[size="large"] {
   fig-field > fig-input-text {
     margin-right: var(--spacer-1);
   }
 }
 
 propskit-switch {
-  --propskit-switch-height: 2rem;
+  --propskit-switch-height: 1.5rem;
   --propskit-switch-vertical-padding: var(--spacer-1);
   --propskit-switch-horizontal-padding: var(--spacer-3);
 
@@ -275,8 +356,9 @@ propskit-switch {
   padding: var(--propskit-switch-vertical-padding)
     var(--propskit-switch-horizontal-padding);
 
-  &:not([size]),
   &[size="large"] {
+    --propskit-switch-height: 2rem;
+
     fig-field:not([direction="vertical"]) {
       padding-right: var(--spacer-1);
     }
@@ -339,7 +421,7 @@ propskit-switch {
 }
 
 propskit-color {
-  --propskit-color-height: 2rem;
+  --propskit-color-height: 1.5rem;
   --propskit-color-vertical-padding: var(--spacer-1);
   --propskit-color-horizontal-padding: var(--spacer-3);
   --figma-focus-outline-offset: 1px;
@@ -352,6 +434,10 @@ propskit-color {
   padding: var(--propskit-color-vertical-padding)
     var(--propskit-color-horizontal-padding);
 
+  &[size="large"] {
+    --propskit-color-height: 2rem;
+  }
+
   &[disabled]:not([disabled="false"]) {
     pointer-events: none;
 
@@ -458,7 +544,7 @@ propskit-color {
 }
 
 propskit-gradient {
-  --propskit-gradient-height: 2rem;
+  --propskit-gradient-height: 1.5rem;
   --propskit-gradient-vertical-padding: var(--spacer-1);
   --propskit-gradient-horizontal-padding: var(--spacer-3);
   --figma-focus-outline-offset: 1px;
@@ -471,6 +557,14 @@ propskit-gradient {
   padding: var(--propskit-gradient-vertical-padding)
     var(--propskit-gradient-horizontal-padding);
 
+  &[size="large"] {
+    --propskit-gradient-height: 2rem;
+
+    fig-field:not([direction="vertical"]) {
+      padding-right: var(--spacer-1);
+    }
+  }
+
   &[disabled]:not([disabled="false"]) {
     pointer-events: none;
 
@@ -538,7 +632,7 @@ propskit-gradient {
 }
 
 propskit-select {
-  --propskit-select-height: 2rem;
+  --propskit-select-height: 1.5rem;
   --propskit-select-vertical-padding: var(--spacer-1);
   --propskit-select-horizontal-padding: var(--spacer-3);
   --figma-focus-outline-offset: 1px;
@@ -551,8 +645,9 @@ propskit-select {
   padding: var(--propskit-select-vertical-padding)
     var(--propskit-select-horizontal-padding);
 
-  &:not([size]),
   &[size="large"] {
+    --propskit-select-height: 2rem;
+
     fig-field:not([direction="vertical"]) {
       padding-left: 0;
 
@@ -648,7 +743,7 @@ propskit-select {
 }
 
 propskit-text {
-  --propskit-text-height: 2rem;
+  --propskit-text-height: 1.5rem;
   --propskit-text-vertical-padding: var(--spacer-1);
   --propskit-text-horizontal-padding: var(--spacer-3);
   --figma-focus-outline-offset: 1px;
@@ -661,6 +756,10 @@ propskit-text {
   padding: var(--propskit-text-vertical-padding)
     var(--propskit-text-horizontal-padding);
 
+  &[size="large"] {
+    --propskit-text-height: 2rem;
+  }
+
   &[disabled]:not([disabled="false"]) {
     pointer-events: none;
 
@@ -753,7 +852,7 @@ propskit-text {
 }
 
 propskit-number {
-  --propskit-number-height: 2rem;
+  --propskit-number-height: 1.5rem;
   --propskit-number-vertical-padding: var(--spacer-1);
   --propskit-number-horizontal-padding: var(--spacer-3);
   --figma-focus-outline-offset: 1px;
@@ -766,8 +865,9 @@ propskit-number {
   padding: var(--propskit-number-vertical-padding)
     var(--propskit-number-horizontal-padding);
 
-  &:not([size]),
   &[size="large"] {
+    --propskit-number-height: 2rem;
+
     fig-field:not([direction="vertical"]) > label {
       inset: 0 auto 0 var(--spacer-2-5);
     }
@@ -867,7 +967,7 @@ propskit-slider {
   --propskit-slider-elastic-scale: 1;
   --propskit-slider-elastic-origin: left center;
   --propskit-slider-elastic-transition: 0.18s cubic-bezier(0.2, 1.45, 0.35, 1);
-  --propskit-slider-height: 2rem;
+  --propskit-slider-height: 1.5rem;
   --propskit-slider-vertical-padding: var(--spacer-1);
   --propskit-slider-horizontal-padding: var(--spacer-3);
   --figma-focus-outline-offset: 1px;
@@ -892,8 +992,8 @@ propskit-slider {
   padding-left: var(--propskit-slider-horizontal-padding);
   padding-right: var(--propskit-slider-horizontal-padding);
 
-  &:not([size]),
   &[size="large"] {
+    --propskit-slider-height: 2rem;
     --propskit-slider-fig-slider-thumb-height: calc(
       var(--propskit-slider-fig-slider-height) - var(--spacer-3)
     );

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;
@@ -900,9 +1099,6 @@ class PropskitGradient extends HTMLElement {
     }
 
     if (!this.hasAttribute("edit")) this.#input.setAttribute("edit", "true");
-    const size = this.getAttribute("size");
-    if (!size || size === "large") this.#input.setAttribute("size", "large");
-    else this.#input.removeAttribute("size");
     this.#managedInputAttrs = nextManaged;
   }
 

package/package.json

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