@rogieking/figui3 11.4.1 → 11.5.0

package/fig-property.js

@@ -0,0 +1,220 @@
+/* Copyright (c) 2026 Rogie King. PolyForm Shield 1.0.0. See LICENSE. */
+import "./fig.js";
+
+let figPropertyId = 0;
+
+function defineElement(name, constructor) {
+  if (!customElements.get(name)) customElements.define(name, constructor);
+}
+
+function createIcon(name) {
+  const icon = document.createElement("fig-icon");
+  icon.setAttribute("name", name);
+  icon.setAttribute("size", "small");
+  icon.setAttribute("aria-hidden", "true");
+  return icon;
+}
+
+class FigProperty extends HTMLElement {
+  static observedAttributes = [
+    "label",
+    "leading",
+    "trailing",
+    "show-leading",
+    "show-trailing",
+  ];
+
+  #observer = null;
+  #labelElement = null;
+  #associatedInput = null;
+  #syncQueued = false;
+
+  connectedCallback() {
+    this.#sync();
+    this.#observer = new MutationObserver(() => this.#queueSync());
+    this.#observer.observe(this, {
+      childList: true,
+      attributes: true,
+      attributeFilter: ["slot"],
+    });
+  }
+
+  disconnectedCallback() {
+    this.#observer?.disconnect();
+    this.#observer = null;
+    this.#clearLabelAssociation();
+  }
+
+  attributeChangedCallback() {
+    if (this.isConnected) this.#queueSync();
+  }
+
+  get input() {
+    return this.querySelector(':scope > [slot="input"]');
+  }
+
+  #queueSync() {
+    if (this.#syncQueued) return;
+    this.#syncQueued = true;
+    queueMicrotask(() => {
+      this.#syncQueued = false;
+      if (this.isConnected) this.#sync();
+    });
+  }
+
+  #authoredSlot(name) {
+    return this.querySelector(
+      `:scope > [slot="${name}"]:not([data-fig-property-generated])`,
+    );
+  }
+
+  #generatedSlot(name) {
+    return this.querySelector(
+      `:scope > [slot="${name}"][data-fig-property-generated]`,
+    );
+  }
+
+  #sync() {
+    this.#syncLabel();
+    this.#syncLeading();
+    this.#syncTrailing();
+  }
+
+  #syncLabel() {
+    const labelText = this.getAttribute("label");
+    const authoredLabel =
+      this.querySelector(
+        ':scope > [slot="label"]:not([data-fig-property-generated])',
+      ) ||
+      this.querySelector(
+        ":scope > label:not([data-fig-property-generated])",
+      );
+    let generatedLabel = this.querySelector(
+      ":scope > label[data-fig-property-generated]",
+    );
+
+    if (labelText === null || authoredLabel) {
+      generatedLabel?.remove();
+      generatedLabel = null;
+    } else {
+      if (!generatedLabel) {
+        generatedLabel = document.createElement("label");
+        generatedLabel.setAttribute("slot", "label");
+        generatedLabel.setAttribute("data-fig-property-generated", "");
+        this.insertBefore(generatedLabel, this.input);
+      }
+      generatedLabel.textContent = labelText;
+    }
+
+    const label = authoredLabel || generatedLabel;
+    this.#associateLabel(label, this.input);
+  }
+
+  #associateLabel(label, input) {
+    this.#clearLabelAssociation();
+    if (!(label instanceof HTMLElement) || !(input instanceof HTMLElement)) {
+      return;
+    }
+
+    if (!label.id) {
+      figPropertyId += 1;
+      label.id = `fig-property-label-${figPropertyId}`;
+      label.setAttribute("data-fig-property-generated-id", "");
+    }
+
+    if (
+      !input.hasAttribute("aria-label") &&
+      !input.hasAttribute("aria-labelledby")
+    ) {
+      input.setAttribute("aria-labelledby", label.id);
+      input.setAttribute("data-fig-property-labelledby", "");
+    }
+
+    label.addEventListener("click", this.#focusInput);
+    this.#labelElement = label;
+    this.#associatedInput = input;
+  }
+
+  #clearLabelAssociation() {
+    this.#labelElement?.removeEventListener("click", this.#focusInput);
+    if (this.#associatedInput?.hasAttribute("data-fig-property-labelledby")) {
+      this.#associatedInput.removeAttribute("aria-labelledby");
+      this.#associatedInput.removeAttribute("data-fig-property-labelledby");
+    }
+    this.#labelElement = null;
+    this.#associatedInput = null;
+  }
+
+  #focusInput = () => {
+    const input = this.input;
+    if (!(input instanceof HTMLElement)) return;
+    input.focus();
+    if (document.activeElement !== input) {
+      input.querySelector("input, select, textarea, button")?.focus();
+    }
+  };
+
+  #syncLeading() {
+    const authored = this.#authoredSlot("leading");
+    const generated = this.#generatedSlot("leading");
+    const value = (this.getAttribute("leading") || "").trim().toLowerCase();
+
+    if (authored || !["drag", "chevron"].includes(value)) {
+      generated?.remove();
+      return;
+    }
+
+    const iconName = value === "drag" ? "drag-handle" : "chevron";
+    if (generated?.getAttribute("name") === iconName) return;
+
+    generated?.remove();
+    const icon = createIcon(iconName);
+    icon.setAttribute("slot", "leading");
+    icon.setAttribute("data-fig-property-generated", "");
+    this.prepend(icon);
+  }
+
+  #syncTrailing() {
+    const authored = this.#authoredSlot("trailing");
+    const generated = this.#generatedSlot("trailing");
+    const value = (this.getAttribute("trailing") || "").trim().toLowerCase();
+
+    if (authored || !["remove", "add", "bind"].includes(value)) {
+      generated?.remove();
+      return;
+    }
+
+    if (generated?.getAttribute("data-fig-property-action") === value) return;
+
+    generated?.remove();
+    const button = document.createElement("fig-button");
+    button.setAttribute("slot", "trailing");
+    button.setAttribute("variant", "ghost");
+    button.setAttribute("size", "small");
+    button.setAttribute("data-fig-property-generated", "");
+    button.setAttribute("data-fig-property-action", value);
+    button.setAttribute("aria-label", `${value[0].toUpperCase()}${value.slice(1)}`);
+
+    if (value === "bind") {
+      button.textContent = "Bind";
+    } else {
+      button.setAttribute("icon", "");
+      button.append(createIcon(value === "add" ? "add" : "minus"));
+    }
+
+    button.addEventListener("click", () => {
+      this.dispatchEvent(
+        new CustomEvent(value, {
+          bubbles: true,
+          composed: true,
+          detail: { input: this.input },
+        }),
+      );
+    });
+    this.append(button);
+  }
+}
+
+defineElement("fig-property", FigProperty);
+
+export { FigProperty };

package/fig.js

@@ -23,6 +23,7 @@ function createFigIcon(name, options = {}) {
   const icon = document.createElement("fig-icon");
   if (name) icon.setAttribute("name", name);
   if (options.size) icon.setAttribute("size", options.size);
+  if (options.slot) icon.setAttribute("slot", options.slot);
   if (options.className) icon.className = options.className;
   return icon;
 }
@@ -8684,7 +8685,11 @@ class FigField extends HTMLElement {
     this.input = Array.from(this.childNodes).find((node) =>
       node.nodeType === Node.ELEMENT_NODE &&
       node.nodeName.toLowerCase().startsWith("fig-") &&
-      !(node instanceof Element && node.classList.contains("fig-field-chevron")),
+      !(
+        node instanceof Element &&
+        (node.classList.contains("fig-field-chevron") ||
+          ["leading", "trailing"].includes(node.getAttribute("slot")))
+      ),
     );
     this.#observeInputAttributes();
 
@@ -8714,6 +8719,7 @@ class FigField extends HTMLElement {
       if (!this.#chevron || !this.#chevron.isConnected) {
         this.#chevron = createFigIcon("chevron", {
           size: "small",
+          slot: "leading",
           className: "fig-field-chevron",
         });
         this.insertBefore(this.#chevron, this.label);
@@ -17138,7 +17144,7 @@ class FigEasingCurve extends HTMLElement {
             label: p.name,
           },
           [
-            figCreateElement("span", { slot: "prepend" }, icon),
+            figCreateElement("fig-icon", { slot: "prepend" }, icon),
             figCreateElement("span", {}, p.name),
           ],
         ),
@@ -20793,6 +20799,7 @@ const FIG_ICON_TOKENS = {
   warning: { medium: "--icon-24-warning", small: "--icon-16-warning" },
   copy: { medium: "--icon-24-copy", small: "--icon-16-copy" },
   trash: { medium: "--icon-24-trash", small: "--icon-16-trash" },
+  "drag-handle": "--icon-16-drag-handle",
 };
 
 function figIconCssVar(name, size = "medium") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "11.4.1",
+  "version": "11.5.0",
   "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",
@@ -11,20 +11,24 @@
     ".": "./dist/fig.js",
     "./fig.js": "./dist/fig.js",
     "./fig-layer.js": "./dist/fig-layer.js",
+    "./fig-property.js": "./dist/fig-property.js",
     "./fig-editor.js": "./dist/fig-editor.js",
     "./fig-lab.js": "./dist/fig-lab.js",
     "./fig.css": "./dist/fig.css",
     "./fig-layer.css": "./dist/fig-layer.css",
+    "./fig-property.css": "./dist/fig-property.css",
     "./fig-editor.css": "./dist/fig-editor.css",
     "./fig-lab.css": "./dist/fig-lab.css",
     "./base.css": "./dist/base.css",
     "./components.css": "./dist/components.css",
     "./src/fig.js": "./fig.js",
     "./src/fig-layer.js": "./fig-layer.js",
+    "./src/fig-property.js": "./fig-property.js",
     "./src/fig-editor.js": "./fig-editor.js",
     "./src/fig-lab.js": "./fig-lab.js",
     "./src/fig.css": "./fig.css",
     "./src/fig-layer.css": "./fig-layer.css",
+    "./src/fig-property.css": "./fig-property.css",
     "./src/fig-editor.css": "./fig-editor.css",
     "./src/fig-lab.css": "./fig-lab.css",
     "./src/base.css": "./base.css",
@@ -33,10 +37,12 @@
   "files": [
     "fig.js",
     "fig-layer.js",
+    "fig-property.js",
     "fig-editor.js",
     "fig-lab.js",
     "fig.css",
     "fig-layer.css",
+    "fig-property.css",
     "fig-editor.css",
     "fig-lab.css",
     "base.css",
@@ -51,12 +57,13 @@
   "sideEffects": [
     "*.css",
     "./fig.js",
+    "./fig-property.js",
     "./fig-lab.js",
     "./fig-editor.js"
   ],
   "scripts": {
     "dev": "bun --hot server.ts",
-    "build": "bun build fig.js --minify --outdir dist && bun build fig-layer.js --minify --outdir dist && bun build fig-editor.js --minify --outdir dist --external ./fig.js --external ./fig-lab.js && bun build fig-lab.js --minify --outdir dist --external ./fig.js --external ./fig-editor.js && npm run build:css",
+    "build": "bun build fig.js --minify --outdir dist && bun build fig-layer.js --minify --outdir dist && bun build fig-property.js --minify --outdir dist --external ./fig.js && bun build fig-editor.js --minify --outdir dist --external ./fig.js --external ./fig-property.js --external ./fig-lab.js && bun build fig-lab.js --minify --outdir dist --external ./fig.js --external ./fig-editor.js && npm run build:css",
     "build:css": "node scripts/build-css.mjs",
     "dev:playground": "node playground/dev.mjs",
     "build:playground": "cd playground && npm run build",