@rogieking/figui3 6.9.5 → 6.9.7

package/fig.js

@@ -10740,6 +10740,7 @@ customElements.define("fig-swatch", FigSwatch);
  * @attr {string} aspect-ratio - CSS aspect-ratio value
  * @attr {string} fit - CSS object-fit value
  * @attr {boolean} checkerboard - Show checkerboard behind transparent media
+ * @attr {string} caption - Caption text rendered below the media preview
  * @attr {boolean} controls - Video controls visibility (default false)
  * @attr {boolean} autoplay - Video autoplay
  * @attr {boolean} loop - Video loop
@@ -10783,6 +10784,7 @@ class FigMedia extends HTMLElement {
       "aspect-ratio",
       "fit",
       "checkerboard",
+      "caption",
       "controls",
       "autoplay",
       "loop",
@@ -10869,6 +10871,7 @@ class FigMedia extends HTMLElement {
     this.#ensureMediaElement();
     this.#syncGeneratedMediaElement();
     this.#syncMediaAccessibility();
+    this.#syncCaption();
 
     const isUpload = this.hasAttribute("upload") && this.getAttribute("upload") !== "false";
     if (isUpload && !this.querySelector("fig-input-file[data-generated]")) {
@@ -10995,6 +10998,50 @@ class FigMedia extends HTMLElement {
     });
   }
 
+  #userProvidedCaptionEl() {
+    return this.querySelector(":scope > caption:not([data-generated])");
+  }
+
+  #generatedCaptionEls() {
+    return Array.from(
+      this.querySelectorAll(":scope > caption[data-generated]"),
+    );
+  }
+
+  #syncCaption() {
+    const userCaption = this.#userProvidedCaptionEl();
+    const generatedCaptions = this.#generatedCaptionEls();
+
+    if (userCaption) {
+      generatedCaptions.forEach((caption) => caption.remove());
+      return;
+    }
+
+    const captionText = this.getAttribute("caption") || "";
+    if (!captionText) {
+      generatedCaptions.forEach((caption) => caption.remove());
+      return;
+    }
+
+    const caption = generatedCaptions[0] || document.createElement("caption");
+    generatedCaptions.slice(1).forEach((duplicate) => duplicate.remove());
+    if (!caption.hasAttribute("data-generated")) {
+      caption.setAttribute("data-generated", "");
+    }
+    if (caption.textContent !== captionText) {
+      caption.textContent = captionText;
+    }
+
+    const controls = this.querySelector(":scope > fig-media-controls");
+    if (controls) {
+      controls.before(caption);
+    } else if (this.#previewEl?.isConnected) {
+      this.#previewEl.after(caption);
+    } else if (!caption.isConnected) {
+      this.append(caption);
+    }
+  }
+
   #isEnabledAttr(name, defaultEnabled = false) {
     if (!this.hasAttribute(name)) return defaultEnabled;
     return this.getAttribute(name) !== "false";
@@ -11060,7 +11107,14 @@ class FigMedia extends HTMLElement {
   }
 
   #ensureControls() {
-    if (this.#controlsEl && this.#controlsEl.isConnected) {
+    const generatedControls = Array.from(
+      this.querySelectorAll(":scope > fig-media-controls[data-generated]"),
+    );
+    const existingControls = generatedControls[0];
+    generatedControls.slice(1).forEach((controls) => controls.remove());
+
+    if (existingControls) {
+      this.#controlsEl = existingControls;
       this.#wireControlsToMedia();
       return;
     }
@@ -11157,10 +11211,9 @@ class FigMedia extends HTMLElement {
 
   #removeControls() {
     this.#unwireControls();
-    if (!this.#controlsEl) return;
-    if (this.#controlsEl.hasAttribute("data-generated")) {
-      this.#controlsEl.remove();
-    }
+    this.querySelectorAll(":scope > fig-media-controls[data-generated]").forEach((controls) => {
+      controls.remove();
+    });
     this.#controlsEl = null;
   }
 
@@ -11373,6 +11426,10 @@ class FigMedia extends HTMLElement {
     if (["controls", "autoplay", "loop", "muted", "poster"].includes(name)) {
       this.#syncGeneratedMediaElement();
     }
+
+    if (name === "caption") {
+      this.#syncCaption();
+    }
   }
 }
 
@@ -12944,6 +13001,7 @@ class FigEasingCurve extends HTMLElement {
   #startSpringDrag(e, handleType) {
     e.preventDefault();
     this.#isDragging = handleType;
+    this.classList.toggle("spring-bounce-dragging", handleType === "bounce");
 
     const startDamping = this.#spring.damping;
     const startStiffness = this.#spring.stiffness;
@@ -12981,6 +13039,7 @@ class FigEasingCurve extends HTMLElement {
 
     const onUp = () => {
       this.#isDragging = null;
+      this.classList.remove("spring-bounce-dragging");
       document.removeEventListener("pointermove", onMove);
       document.removeEventListener("pointerup", onUp);
       this.#emit("change");

package/package.json

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