@rogieking/figui3 10.0.1 → 10.0.3

package/fig.js

@@ -13126,6 +13126,7 @@ const FIG_MEDIA_FORWARDED_EVENTS = [
  * @attr {string} src - Media source URL
  * @attr {string} type - "image" (default) or "video" (for fig-media)
  * @attr {string} alt - Alt text for the generated image (default "")
+ * @attr {boolean} loaded - Read-only reflected state when an image has loaded successfully
  * @attr {boolean} upload - Show upload overlay (generates fig-input-file)
  * @attr {boolean} loading-indicator - Set to `false` to disable the generated image loading spinner
  * @attr {string} label - Upload button label (default "Upload")
@@ -13344,6 +13345,7 @@ class FigMedia extends HTMLElement {
   }
 
   #syncImageLoadingState() {
+    this.#syncImageLoadedState();
     const src = this.#currentMediaSrc();
     if (!src || !this.#usesDefaultImageLoadingIndicator()) {
       this.#finishImageLoading();
@@ -13383,6 +13385,18 @@ class FigMedia extends HTMLElement {
     }, 150);
   }
 
+  #syncImageLoadedState() {
+    const image = this.#mediaEl?.tagName === "IMG" ? this.#mediaEl : null;
+    const src =
+      image?.currentSrc ||
+      image?.getAttribute("src") ||
+      this.#currentMediaSrc();
+    this.toggleAttribute(
+      "loaded",
+      Boolean(src && image?.complete && image.naturalWidth > 0),
+    );
+  }
+
   #finishImageLoading() {
     if (this.#loadingTimer !== null) {
       clearTimeout(this.#loadingTimer);
@@ -13553,6 +13567,7 @@ class FigMedia extends HTMLElement {
     if (!this.#mediaEl.hasAttribute("data-generated")) return;
     const src = this.#currentMediaSrc();
     if (this.#mediaEl.getAttribute("src") !== src) {
+      this.removeAttribute("loaded");
       if (src) {
         this.#mediaEl.setAttribute("src", src);
       } else {
@@ -13880,6 +13895,7 @@ class FigMedia extends HTMLElement {
       media.tagName === "IMG" &&
       (event.type === "load" || event.type === "error")
     ) {
+      this.toggleAttribute("loaded", event.type === "load");
       this.#finishImageLoading();
     }
     const detail = {
@@ -14057,9 +14073,11 @@ figDefineElement("fig-video", FigVideo);
  * @attr {boolean} disabled - Dim + non-interactive
  * @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} direction - `vertical` (default) or `horizontal` list layout
  * @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`
+ * @attr {string} label-overflow - `ellipsis` (default) or horizontal `fade`
  */
 class FigCard extends HTMLElement {
   static get observedAttributes() {
@@ -14073,9 +14091,11 @@ class FigCard extends HTMLElement {
       "disabled",
       "full",
       "size",
+      "direction",
       "aspect-ratio",
       "fit",
       "label-line-clamp",
+      "label-overflow",
     ];
   }
 
@@ -14273,6 +14293,16 @@ class FigCard extends HTMLElement {
     this.appendChild(this.#footerEl);
   }
 
+  #syncLabelOverflow() {
+    const fade = this.getAttribute("label-overflow") === "fade";
+    this.querySelectorAll(
+      ":scope > fig-footer > :is(.fig-card-label, .fig-card-sublabel)",
+    ).forEach((element) => {
+      element.classList.toggle("fig-overflow-fade", fade);
+      element.classList.toggle("fig-overflow-fade-horizontal", fade);
+    });
+  }
+
   #sync() {
     if (!this.#usesGeneratedMedia()) {
       this.#syncManual();
@@ -14329,6 +14359,7 @@ class FigCard extends HTMLElement {
     if (this.#footerEl) {
       this.#footerEl.hidden = !label && !sublabel;
     }
+    this.#syncLabelOverflow();
   }
 
   #syncManual() {
@@ -14352,6 +14383,7 @@ class FigCard extends HTMLElement {
       this.#labelEl.hidden = !label;
     }
     if (this.#sublabelEl) this.#sublabelEl.textContent = sublabel;
+    this.#syncLabelOverflow();
   }
 }
 figDefineElement("fig-card", FigCard);
@@ -19772,6 +19804,8 @@ figDefineElement("fig-color-tip", FigColorTip);
  * @attr {boolean} disabled - Whether this choice is disabled
  */
 class FigChoice extends HTMLElement {
+  #childObserver = null;
+
   static get observedAttributes() {
     return ["selected", "disabled"];
   }
@@ -19781,21 +19815,34 @@ class FigChoice extends HTMLElement {
     if (!this.hasAttribute("tabindex")) {
       this.setAttribute("tabindex", "0");
     }
-    this.setAttribute(
-      "aria-selected",
-      figBooleanAttribute(this, "selected") ? "true" : "false",
-    );
+    this.#syncSelectedState();
     if (figBooleanAttribute(this, "disabled")) {
       this.setAttribute("aria-disabled", "true");
     }
   }
 
+  disconnectedCallback() {
+    this.#childObserver?.disconnect();
+  }
+
+  #syncSelectedState() {
+    const selected = figBooleanAttribute(this, "selected");
+    this.setAttribute("aria-selected", selected ? "true" : "false");
+    for (const child of this.children) {
+      child.toggleAttribute("selected", selected);
+    }
+    this.#childObserver?.disconnect();
+    if (selected && this.isConnected) {
+      this.#childObserver ??= new MutationObserver(() =>
+        this.#syncSelectedState(),
+      );
+      this.#childObserver.observe(this, { childList: true });
+    }
+  }
+
   attributeChangedCallback(name) {
     if (name === "selected") {
-      this.setAttribute(
-        "aria-selected",
-        figBooleanAttribute(this, "selected") ? "true" : "false",
-      );
+      this.#syncSelectedState();
     }
     if (name === "disabled") {
       const isDisabled =
@@ -19898,19 +19945,11 @@ class FigChooser extends HTMLElement {
     const raw = this.getAttribute("columns");
     const columns = raw === null ? NaN : Number(raw);
     const validColumns = Number.isInteger(columns) && columns > 0;
-    const effectiveColumns = validColumns ? columns : 2;
     if (validColumns) {
-      this.style.setProperty("--fig-chooser-grid-columns", String(effectiveColumns));
+      this.style.setProperty("--fig-chooser-grid-columns", String(columns));
     } else {
       this.style.removeProperty("--fig-chooser-grid-columns");
     }
-    const isGrid = this.getAttribute("layout") === "grid";
-    this.choices.forEach((choice, index) => {
-      choice.toggleAttribute(
-        "data-fig-chooser-first-row",
-        isGrid && index < effectiveColumns,
-      );
-    });
   }
 
   get choices() {
@@ -20160,7 +20199,8 @@ class FigChooser extends HTMLElement {
         !c.hasAttribute("disabled") || c.getAttribute("disabled") === "false",
     );
     if (!choices.length) return;
-    const currentIndex = choices.indexOf(this.#selectedChoice);
+    const focusedChoice = this.#findChoiceFromTarget(event.target);
+    const currentIndex = choices.indexOf(focusedChoice);
     let nextIndex = currentIndex;
 
     const loop = this.hasAttribute("loop");
@@ -20195,12 +20235,9 @@ class FigChooser extends HTMLElement {
       case "Enter":
       case " ":
         event.preventDefault();
-        if (document.activeElement?.matches(this.#choiceSelector)) {
-          const focused = this.#findChoiceFromTarget(document.activeElement);
-          if (focused && focused !== this.#selectedChoice) {
-            this.selectedChoice = focused;
-            this.#emitEvents();
-          }
+        if (focusedChoice && focusedChoice !== this.#selectedChoice) {
+          this.selectedChoice = focusedChoice;
+          this.#emitEvents();
         }
         return;
       default:
@@ -20208,9 +20245,9 @@ class FigChooser extends HTMLElement {
     }
 
     if (nextIndex !== currentIndex && choices[nextIndex]) {
-      this.selectedChoice = choices[nextIndex];
-      choices[nextIndex].focus({ preventScroll: !this.autoScroll });
-      this.#emitEvents();
+      const nextChoice = choices[nextIndex];
+      nextChoice.focus({ preventScroll: true });
+      if (this.autoScroll) this.#scrollToChoice(nextChoice);
     }
   }
 
@@ -20381,12 +20418,14 @@ class FigChooser extends HTMLElement {
   }
 
   #applyOverflowMode() {
-    if (this.#overflowMode === "scrollbar") {
+    const usesScrollbar = this.#overflowMode === "scrollbar";
+    const isGrid = this.getAttribute("layout") === "grid";
+    if (usesScrollbar || isGrid) {
       this.#removeNavButtons();
-      this.classList.add("fig-overflow-fade");
+      this.classList.toggle("fig-overflow-fade", usesScrollbar);
       this.classList.toggle(
         "fig-overflow-fade-horizontal",
-        this.getAttribute("layout") === "horizontal",
+        usesScrollbar && this.getAttribute("layout") === "horizontal",
       );
     } else {
       this.#createNavButtons();

package/package.json

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