@rogieking/figui3 6.23.3 → 6.24.0

package/fig-editor.js

@@ -1521,7 +1521,7 @@ class FigFillPicker extends HTMLElement {
           })
           .join("");
         const separator = group.label || group.separator
-          ? `<fig-menu-separator${group.label ? ` label="${figEditorEscapeAttribute(group.label)}"` : ""}></fig-menu-separator>`
+          ? `<fig-separator${group.label ? ` label="${figEditorEscapeAttribute(group.label)}"` : ""}></fig-separator>`
           : "";
         return `${separator}${options}`;
       })

package/fig-lab.css

@@ -8,6 +8,109 @@
  *   <link rel="stylesheet" href="fig-lab.css">
  */
 
+fig-ai-prompt {
+  --fig-ai-prompt-margin-inline: var(--spacer-2);
+
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: minmax(var(--spacer-6), 1fr) auto;
+  position: relative;
+  gap: var(--spacer-2);
+  box-sizing: border-box;
+  width: calc(100% - var(--fig-ai-prompt-margin-inline) * 2);
+  min-height: 8rem;
+  margin-inline: var(--fig-ai-prompt-margin-inline);
+  padding: var(--spacer-3);
+  border: 1px solid var(--figma-color-border);
+  border-radius: var(--radius-large);
+  background: var(--figma-color-bg);
+  color: var(--figma-color-text);
+
+  &:focus-within {
+    outline: var(--figma-focus-outline);
+    outline-offset: var(--figma-focus-outline-offset);
+  }
+
+  & > fig-input-text {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    font-size: var(--body-large-fontSize);
+
+    &:hover,
+    &:has(textarea:focus) {
+      outline: 0;
+      box-shadow: none;
+    }
+
+    & > textarea {
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      min-height: var(--spacer-6);
+      padding: var(--spacer-3);
+      padding-bottom: calc(var(--spacer-5) + var(--spacer-3));
+      resize: none;
+      font-size: inherit;
+    }
+  }
+
+  & > fig-button {
+    grid-row: 2;
+    align-self: end;
+    position: relative;
+    z-index: 1;
+    color: var(--figma-color-text);
+
+    &:first-of-type {
+      justify-self: start;
+    }
+
+    &:last-of-type {
+      justify-self: end;
+    }
+  }
+}
+
+fig-chat-message {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  color: var(--figma-color-text);
+  font-size: var(--body-large-fontSize);
+  line-height: calc(var(--line-height) + var(--spacer-1));
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+
+  &[from="user"] {
+    width: auto;
+    margin-inline-start: var(--spacer-4);
+    padding: var(--spacer-2) var(--spacer-2-5);
+    border-radius: var(--radius-large);
+    background: var(--figma-color-bg-secondary);
+  }
+
+  &[from="user"]:has(> fig-avatar) {
+    position: relative;
+    margin-inline-end: calc(var(--spacer-4) + var(--spacer-2));
+
+    & > fig-avatar {
+      position: absolute;
+      right: calc(-1 * (var(--spacer-4) + var(--spacer-2)));
+      bottom: 0;
+    }
+  }
+
+  & + fig-chat-message {
+    margin-top: var(--spacer-3);
+  }
+}
+
 propskit-group {
   display: block;
   width: 100%;

package/fig-lab.js

@@ -25,6 +25,14 @@ function figLabUniqueId(prefix = "fig-lab") {
   return `${prefix}-${figLabUniqueIdCounter}`;
 }
 
+/* Presentation-only composition surface for AI prompt controls. */
+class FigAiPrompt extends HTMLElement {}
+figLabDefineElement("fig-ai-prompt", FigAiPrompt);
+
+/* Presentation-only message surface for AI conversations. */
+class FigChatMessage extends HTMLElement {}
+figLabDefineElement("fig-chat-message", FigChatMessage);
+
 /* Field + Switch wrapper */
 class PropskitSwitch extends HTMLElement {
   #field = null;
@@ -1685,6 +1693,10 @@ class PropskitSlider extends HTMLElement {
 
         for (const mutation of mutations) {
           if (mutation.type === "attributes") {
+            if (mutation.attributeName === "value") {
+              this.#pushExternalValueToSlider();
+              continue;
+            }
             if (
               mutation.attributeName &&
               this.#ignoredSliderAttrs.has(mutation.attributeName)
@@ -1822,7 +1834,9 @@ class PropskitSlider extends HTMLElement {
     if (!this.#slider) return;
     const hostAttrs = this.#getForwardedSliderAttrNames();
 
-    const nextManaged = new Set(hostAttrs.filter((name) => name !== "text"));
+    const nextManaged = new Set(
+      hostAttrs.filter((name) => name !== "text" && name !== "value"),
+    );
 
     for (const attrName of this.#managedSliderAttrs) {
       if (!nextManaged.has(attrName)) {
@@ -1831,7 +1845,7 @@ class PropskitSlider extends HTMLElement {
     }
 
     for (const attrName of hostAttrs) {
-      if (attrName === "text") continue;
+      if (attrName === "text" || attrName === "value") continue;
       const value = this.getAttribute(attrName) ?? "";
       if (this.#slider.getAttribute(attrName) !== value) {
         this.#slider.setAttribute(attrName, value);
@@ -1868,9 +1882,18 @@ class PropskitSlider extends HTMLElement {
     }
 
     this.#managedSliderAttrs = nextManaged;
+    this.#pushExternalValueToSlider();
     this.#queueSteppersSync();
   }
 
+  #pushExternalValueToSlider() {
+    if (!this.#slider) return;
+    const next = this.getAttribute("value") ?? "";
+    if (String(this.#slider.value) !== next) {
+      this.#slider.value = next;
+    }
+  }
+
   #getForwardedSliderAttrNames() {
     const reserved = new Set([
       "label",
@@ -2259,7 +2282,10 @@ class PropskitSlider extends HTMLElement {
         ? event.detail
         : this.#slider?.value;
     if (this.#slider?.value !== undefined) {
-      this.setAttribute("value", String(this.#slider.value));
+      const next = String(this.#slider.value);
+      if (this.getAttribute("value") !== next) {
+        this.setAttribute("value", next);
+      }
     }
     this.dispatchEvent(
       new CustomEvent(type, {

package/fig.js

@@ -5425,7 +5425,7 @@ class FigSelect extends HTMLElement {
     return (
       node?.nodeType === 1 &&
       (node.tagName === "FIG-SELECT-OPTION" ||
-        node.tagName === "FIG-MENU-SEPARATOR" ||
+        node.tagName === "FIG-SEPARATOR" ||
         node.tagName === "FIG-SELECT-OPTIONS")
     );
   }
@@ -6282,6 +6282,7 @@ figDefineElement("fig-select", FigSelect);
  */
 class FigSlider extends HTMLElement {
   #isInteracting = false;
+  #pendingRegeneration = false;
   #showEmptyTextValue = false;
   #isSyncingValueAttribute = false;
   #value = "";
@@ -6347,6 +6348,10 @@ class FigSlider extends HTMLElement {
     };
     this.#boundRangePointerUp = () => {
       this.#isInteracting = false;
+      if (this.#pendingRegeneration && this.isConnected) {
+        this.#pendingRegeneration = false;
+        this.#regenerateInnerHTML();
+      }
     };
   }
 
@@ -6616,6 +6621,7 @@ class FigSlider extends HTMLElement {
   }
 
   disconnectedCallback() {
+    this.#pendingRegeneration = false;
     if (this.input) {
       this.input.removeEventListener("input", this.#boundHandleInput);
       this.input.removeEventListener("change", this.#boundHandleChange);
@@ -6828,6 +6834,62 @@ class FigSlider extends HTMLElement {
     }
   }
 
+  #syncRangeConstraint(name, rawValue) {
+    if (!this.input) return;
+    const defaults = this.#typeDefaults[this.type] || this.#typeDefaults.range;
+    const parsed =
+      rawValue === null || String(rawValue).trim() === ""
+        ? defaults[name]
+        : Number(rawValue);
+    let next = Number.isFinite(parsed) ? parsed : defaults[name];
+    if (name === "step" && !(next > 0)) {
+      next = defaults.step > 0 ? defaults.step : 1;
+    }
+    if (this[name] === next && this.input[name] === String(next)) return;
+
+    this[name] = next;
+    this.input[name] = String(next);
+    if (name === "min") {
+      this.input.setAttribute("aria-valuemin", String(next));
+    } else if (name === "max") {
+      this.input.setAttribute("aria-valuemax", String(next));
+    }
+    if (this.figInputNumber) {
+      this.figInputNumber.setAttribute(name, String(next));
+    }
+    if (!this.hasAttribute("default") && this.type !== "delta") {
+      this.default = this.min;
+    }
+    this.value = this.#normalizeSliderValue(this.value);
+    this.#syncProperties();
+    this.#syncStepperDatalist();
+  }
+
+  #syncStepperDatalist() {
+    if (this.type !== "stepper" || !this.datalist) return;
+    const steps = Math.min(
+      1001,
+      Math.max(0, Math.floor((this.max - this.min) / this.step) + 1),
+    );
+    const fragment = document.createDocumentFragment();
+    for (let i = 0; i < steps; i++) {
+      const option = document.createElement("option");
+      option.setAttribute("value", this.min + i * this.step);
+      fragment.append(option);
+    }
+    this.datalist.replaceChildren(fragment);
+    this.input.setAttribute("list", this.datalist.id);
+  }
+
+  #regenerateWhenIdle() {
+    if (this.#isInteracting) {
+      this.#pendingRegeneration = true;
+      return;
+    }
+    this.#pendingRegeneration = false;
+    this.#regenerateInnerHTML();
+  }
+
   static get observedAttributes() {
     return [
       "value",
@@ -6862,6 +6924,7 @@ class FigSlider extends HTMLElement {
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
     if (name === "value" && this.#isSyncingValueAttribute) return;
     if (this.input) {
       switch (name) {
@@ -6922,15 +6985,26 @@ class FigSlider extends HTMLElement {
         case "min":
         case "max":
         case "step":
+          this.#syncRangeConstraint(name, newValue);
+          break;
+        case "units":
+          this.units = newValue || "";
+          if (this.figInputNumber) {
+            if (this.units) {
+              this.figInputNumber.setAttribute("units", this.units);
+            } else {
+              this.figInputNumber.removeAttribute("units");
+            }
+          }
+          break;
         case "type":
         case "variant":
-        case "units":
-          this[name] = newValue;
-          this.#regenerateInnerHTML();
+          if (!this.#isInteracting) this[name] = newValue;
+          this.#regenerateWhenIdle();
           break;
         case "text":
-          this.text = newValue !== "false";
-          this.#regenerateInnerHTML();
+          if (!this.#isInteracting) this.text = newValue !== "false";
+          this.#regenerateWhenIdle();
           break;
         case "aria-label":
         case "aria-labelledby":
@@ -14448,7 +14522,7 @@ class FigEasingCurve extends HTMLElement {
       if (!this.#isEditEnabled() && !p.value && !p.spring) continue;
       if (p.group !== currentGroup) {
         if (p.group) {
-          optionsHTML += `<fig-menu-separator label="${FigEasingCurve.#escapeAttribute(p.group)}"></fig-menu-separator>`;
+          optionsHTML += `<fig-separator label="${FigEasingCurve.#escapeAttribute(p.group)}"></fig-separator>`;
         }
         currentGroup = p.group;
       }
@@ -19276,10 +19350,10 @@ class FigMenuItem extends HTMLElement {
 figDefineElement("fig-menu-item", FigMenuItem);
 
 /**
- * Visual divider between menu item groups.
+ * Visual divider between content groups.
  * @attr {string} label - Optional group label shown in secondary text under the line.
  */
-class FigMenuSeparator extends HTMLElement {
+class FigSeparator extends HTMLElement {
   static get observedAttributes() {
     return ["label"];
   }
@@ -19311,7 +19385,7 @@ class FigMenuSeparator extends HTMLElement {
     else this.removeAttribute("aria-label");
   }
 }
-figDefineElement("fig-menu-separator", FigMenuSeparator);
+figDefineElement("fig-separator", FigSeparator);
 
 class FigMenu extends HTMLElement {
   #popup = null;
@@ -19390,7 +19464,7 @@ class FigMenu extends HTMLElement {
       this.#popup.removeEventListener("close", this.#boundPopupClose);
       const items = Array.from(
         this.#panel?.querySelectorAll(
-          ":scope > fig-menu-item, :scope > fig-menu-separator",
+          ":scope > fig-menu-item, :scope > fig-separator",
         ) ?? [],
       );
       for (const item of items) this.insertBefore(item, this.#popup);
@@ -19433,7 +19507,7 @@ class FigMenu extends HTMLElement {
   #detectTrigger() {
     this.#trigger =
       this.querySelector("[fig-menu-trigger]") ||
-      this.querySelector(":scope > :not(fig-menu-item):not(fig-menu-separator)");
+      this.querySelector(":scope > :not(fig-menu-item):not(fig-separator)");
   }
 
   #usesContextMenuTrigger() {
@@ -19473,7 +19547,7 @@ class FigMenu extends HTMLElement {
   #moveItemsToPopup() {
     if (!this.#panel) return;
     const items = Array.from(this.querySelectorAll(
-      ":scope > fig-menu-item, :scope > fig-menu-separator"
+      ":scope > fig-menu-item, :scope > fig-separator"
     ));
     for (const item of items) {
       this.#panel.appendChild(item);
@@ -19513,7 +19587,8 @@ class FigMenu extends HTMLElement {
         for (const node of mutation.addedNodes) {
           if (node.nodeType !== 1 || node === this.#popup) continue;
           if (
-            (node.tagName === "FIG-MENU-ITEM" || node.tagName === "FIG-MENU-SEPARATOR") &&
+            (node.tagName === "FIG-MENU-ITEM" ||
+              node.tagName === "FIG-SEPARATOR") &&
             node.parentElement === this
           ) {
             this.#panel?.appendChild(node);

package/package.json

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